diff --git a/src/Brouter/Bit.Brouter.Demo/Client/Pages/LandingPage.razor.css b/src/Brouter/Bit.Brouter.Demo/Client/Pages/LandingPage.razor.css
index f1e54d6a42a..4d7d8a24255 100644
--- a/src/Brouter/Bit.Brouter.Demo/Client/Pages/LandingPage.razor.css
+++ b/src/Brouter/Bit.Brouter.Demo/Client/Pages/LandingPage.razor.css
@@ -181,8 +181,12 @@
 
 /* ---------- Proof strip ----------
 
-   A single hairline grid: the 1px gap IS the rule between cells, so the four claims read as one
-   row of facts rather than as four more cards. It is also the one child of the stack that is a
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. They are the cells' own outlines
+   meeting in the gap, not the strip's color showing through it: when the cells wrap with room to
+   spare, the empty end of the last row stays the surface color instead of turning into a grey
+   block. Outlines paint above the siblings next to them, and the strip's overflow clips them at
+   its own frame. It is also the one child of the stack that is a
    control rather than a band, so it opts out of the full-bleed treatment and keeps the
    container's gutters. */
 .bb-landing > section.bb-proof {
@@ -192,7 +196,7 @@
     width: min(100% - 3rem, var(--bb-content-width));
     margin: 3.5rem auto;
     padding: 0;
-    background: var(--bb-border);
+    background: var(--bb-surface);
     border: 1px solid var(--bb-border);
     border-radius: var(--bb-radius-lg);
     box-shadow: var(--bb-shadow-card);
@@ -201,6 +205,7 @@
 
 .bb-proof > div {
     background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
     padding: 1.25rem 1.5rem;
     display: flex;
     flex-direction: column;
diff --git a/src/Brouter/Bit.Brouter.Demo/Client/Shared/CommandPalette.razor.css b/src/Brouter/Bit.Brouter.Demo/Client/Shared/CommandPalette.razor.css
index fc80fc6ba68..54ac8e911fe 100644
--- a/src/Brouter/Bit.Brouter.Demo/Client/Shared/CommandPalette.razor.css
+++ b/src/Brouter/Bit.Brouter.Demo/Client/Shared/CommandPalette.razor.css
@@ -55,6 +55,11 @@
 .bb-palette-scrim {
     position: fixed;
     inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
     z-index: 1100;
     display: flex;
     justify-content: center;
diff --git a/src/Brouter/Bit.Brouter.Demo/Client/Shared/DocsShell.razor b/src/Brouter/Bit.Brouter.Demo/Client/Shared/DocsShell.razor
index 24a76b16841..0de8921c1de 100644
--- a/src/Brouter/Bit.Brouter.Demo/Client/Shared/DocsShell.razor
+++ b/src/Brouter/Bit.Brouter.Demo/Client/Shared/DocsShell.razor
@@ -10,8 +10,8 @@
    the "on this page" rail. The rail's contents are built by site.js from whatever headings the
    page rendered - see the note on the <nav> below. *@
 
-<div class="bb-docs" @onkeydown="OnKeyDown">
-    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation">
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
         <p class="bb-overline bb-docs-nav-title">Documentation</p>
 
         @foreach (var section in DocsCatalog.Sections)
@@ -43,7 +43,7 @@
     <div class="bb-docs-main">
         @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
            those widths the two together are the whole "where am I / where else can I go" row. *@
-        <div class="bb-docs-topbar">
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
             <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
                     aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
@@ -139,8 +139,10 @@
 
     /// <summary>
     /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
-    /// handler sits on the shell rather than on the panel because the button that opens the drawer
-    /// is outside the panel it controls, and a keydown reaches the shell from either of them.
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a docs page (the constraint tester's input, say), and each one would be an event
+    /// and a render of this shell.
     /// </summary>
     private void OnKeyDown(KeyboardEventArgs args)
     {
diff --git a/src/Brouter/Bit.Brouter.Demo/Client/Shared/Header.razor.css b/src/Brouter/Bit.Brouter.Demo/Client/Shared/Header.razor.css
index 2614f163821..6c2080bd12b 100644
--- a/src/Brouter/Bit.Brouter.Demo/Client/Shared/Header.razor.css
+++ b/src/Brouter/Bit.Brouter.Demo/Client/Shared/Header.razor.css
@@ -206,6 +206,10 @@
 .bb-header-scrim {
     position: fixed;
     inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
     background: var(--bb-scrim);
     animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
 }
diff --git a/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/app.css b/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/app.css
index 58f56f3b151..f1a512c19ed 100644
--- a/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/app.css
+++ b/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/app.css
@@ -377,22 +377,23 @@ svg {
 
 /* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
    color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
-   a ring shadow so it follows the control's own corner radius and never displaces layout. */
-:focus-visible {
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   the router moves focus to after every navigation (o.FocusOnNavigateSelector = "h1"), so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
     outline: 2px solid var(--fl-stroke-focus-outer);
     outline-offset: 1px;
     box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
 }
 
-/* ...except on the things the ROUTER focuses. Brouter moves focus to the page heading after every
-   navigation (o.FocusOnNavigateSelector = "h1") so assistive technology announces the new page,
-   and it makes the heading focusable with tabindex="-1" to do it - the same trick the skip link
-   uses on <main>. A ring there would say "you are on a control", which none of these are: the
-   reader did not focus it, and there is nothing to activate. Interactive elements never carry
-   tabindex="-1", so nothing that IS a control loses its ring here. */
-:is(h1, h2, h3, h4, main, article, section, div)[tabindex="-1"]:focus-visible {
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
     outline: none;
-    box-shadow: none;
 }
 
 /* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
@@ -410,14 +411,16 @@ svg {
     color: var(--bb-primary-text);
     font-size: var(--fl-font-size-200);
     font-weight: var(--fl-weight-semibold);
-    box-shadow: var(--bb-shadow-flyout);
     transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
 }
 
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
 .bb-skip-link:focus-visible {
     transform: translateY(0);
     color: var(--bb-primary-text);
     text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
 }
 
 /* ============================================================================================
@@ -485,11 +488,14 @@ b {
     font-weight: var(--fl-weight-semibold);
 }
 
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
 code,
 kbd,
 pre,
 samp {
     font-family: var(--bb-mono);
+    font-variant-ligatures: none;
 }
 
 /* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
@@ -704,8 +710,10 @@ button.btn-outline:hover {
     border-color: var(--bb-primary);
 }
 
-/* Large - the landing page's calls to action. */
-.bb-btn-lg {
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
     min-height: 2.75rem;
     padding: .625rem 1.25rem;
     font-size: var(--fl-font-size-300);
@@ -756,12 +764,19 @@ button.btn-outline:hover {
    the rest of the border stays put. Applied to the elements themselves rather than to a class,
    because the demo pages render plain inputs - a design system that only reaches markup written
    for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
    ============================================================================================ */
 
-input:not([type="checkbox"]):not([type="radio"]),
-textarea,
-select,
-.form-control {
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
     width: auto;
     max-width: 100%;
     min-height: 2rem;
@@ -777,30 +792,24 @@ select,
     transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-textarea {
+:where(textarea) {
     width: 100%;
     padding: .5rem .625rem;
     line-height: 1.6;
     resize: vertical;
 }
 
-input::placeholder,
-textarea::placeholder {
+:where(input, textarea)::placeholder {
     color: var(--bb-text-soft);
 }
 
-input:hover:not(:disabled),
-textarea:hover:not(:disabled),
-select:hover:not(:disabled) {
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
     border-color: var(--bb-text-soft);
 }
 
 /* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
    Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible,
-.form-control:focus-visible {
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
     outline: none;
     box-shadow: none;
     border-color: var(--bb-border-strong);
@@ -809,13 +818,11 @@ select:focus-visible,
     padding-bottom: calc(.3125rem - 1px);
 }
 
-textarea:focus-visible {
+:where(textarea):focus-visible {
     padding-bottom: calc(.5rem - 1px);
 }
 
-input:disabled,
-textarea:disabled,
-select:disabled {
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
     color: var(--bb-text-soft);
     background: var(--bb-surface-sunken);
     cursor: not-allowed;
@@ -855,10 +862,14 @@ input[type="search"]::-webkit-search-cancel-button {
     color: var(--bb-text-muted);
 }
 
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
 .bb-card-title {
     display: flex;
     align-items: center;
     gap: .5rem;
+    overflow-wrap: anywhere;
     font-size: var(--fl-font-size-300);
     font-weight: var(--fl-weight-semibold);
     line-height: 1.5;
@@ -1874,7 +1885,7 @@ article [id] {
         background: LinkText;
     }
 
-    :focus-visible {
+    :focus-visible:where(:not([tabindex="-1"])) {
         outline: 2px solid CanvasText;
     }
 }
diff --git a/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/site.js b/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/site.js
index b56594e4f17..863061b8541 100644
--- a/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/site.js
+++ b/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/site.js
@@ -50,9 +50,16 @@
 
     function copy(text) {
         if (navigator.clipboard && window.isSecureContext) {
-            return navigator.clipboard.writeText(text);
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
         }
-        // Fallback for non-secure contexts.
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
         var area = document.createElement('textarea');
         area.value = text;
         area.style.position = 'fixed';
diff --git a/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/theme.js b/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/theme.js
index b683a712162..e45057f9275 100644
--- a/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/theme.js
+++ b/src/Brouter/Bit.Brouter.Demo/Client/wwwroot/theme.js
@@ -22,7 +22,10 @@
         return darkQuery.matches ? 'dark' : 'light';
     }
 
+    var current = null;
+
     function apply(theme) {
+        current = theme;
         document.documentElement.setAttribute('bit-theme', theme);
         var themeColor = document.querySelector('meta[name="theme-color"]');
         if (themeColor) {
@@ -34,6 +37,15 @@
 
     apply(getStoredTheme() || getSystemTheme());
 
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       handed back to the page loader - fetches the next page and merges it into this document,
+       <html> included. The server's markup carries no bit-theme, so the merge removes it and the
+       page falls back to the light palette, and this script does not run again to put it back.
+       Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
     darkQuery.addEventListener('change', function () {
         if (getStoredTheme() === null) {
             apply(getSystemTheme());
diff --git a/src/Utilities/Balette/Demo/Client/Components/AppPalette.razor b/src/Utilities/Balette/Demo/Client/Components/AppPalette.razor
new file mode 100644
index 00000000000..3f44301ea48
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Components/AppPalette.razor
@@ -0,0 +1,149 @@
+@implements IAsyncDisposable
+@inject DemoState State
+@inject IBaletteService Palette
+@inject IJSRuntime JSRuntime
+
+@* The one palette of the whole app, with its app-wide commands. Routes.razor renders it next to the router, so it
+   is on every page - the landing page, the docs and the not-found page alike - and outlives them all.
+
+   Everything it is passed comes from DemoState, which the theming, search and performance pages change, so they
+   restyle this very palette rather than a copy of it.
+
+   data-palette-ready turns true once the palette's browser layer listens for keys (it reports the platform as it
+   starts). Prerendered markup is on screen long before its event handlers are, and a Ctrl+K pressed between the
+   page turning interactive and this reaches no listener at all, so the E2E suite waits for both. The wrapper is
+   display: contents - a closed <dialog> lays nothing out, and an open one is in the top layer. *@
+
+<div class="demo-palette" data-palette-ready="@(_paletteReady ? "true" : "false")">
+    @* The app-wide commands. A new list is handed over whenever the demo state changes, and BaletteCommands
+       swaps the registration, so a toggle's switch and a setting's value are never stale. *@
+    <BaletteCommands Commands="_globalCommands" />
+
+    <Balette Theme="@State.PaletteTheme"
+             Style="@State.PaletteStyle"
+             DetailTemplate="@(State.ShowDetail ? _detailPane : null)"
+             ShowFooter="State.ShowFooter"
+             HighlightMatches="State.HighlightMatches"
+             GroupWhenSearching="State.GroupWhenSearching"
+             Virtualize="State.Virtualize"
+             OnCommandExecuted="OnExecuted">
+        @* Declarative commands live next to the markup that owns them. An item with nested items becomes a page. *@
+        <BaletteGroup Heading="Quick create" Priority="20">
+            <BaletteItem Title="New issue" Shortcut="C" Keywords="create add" IconCss="demo-plus"
+                         Description="Declared in Components/AppPalette.razor as a BaletteItem, with a single-key global shortcut."
+                         OnExecute='_ => State.Record("New issue dialog opened")' />
+            <BaletteItem Title="New…" Keywords="create add" ChildrenPlaceholder="What do you want to create?"
+                         Description="A page made of nested BaletteItem markup.">
+                <BaletteItem Title="Project" OnExecute='_ => State.Record("New project")' />
+                <BaletteItem Title="Document" OnExecute='_ => State.Record("New document")' />
+                <BaletteItem Title="Team" Badge="Beta" OnExecute='_ => State.Record("New team")' />
+            </BaletteItem>
+        </BaletteGroup>
+    </Balette>
+</div>
+
+@code {
+    private List<BaletteCommand> _globalCommands = [];
+    private RenderFragment<BaletteCommand>? _detailPane;
+    private DotNetObjectReference<AppPalette>? _self;
+    private bool _paletteReady;
+
+    protected override void OnInitialized()
+    {
+        _globalCommands = [.. DemoCommands.Global(State)];
+        State.Changed += OnStateChanged;
+        // The detail pane's shortcut hint reads IsMac, which is only known once the palette has started.
+        Palette.PlatformDetected += OnPlatformDetected;
+
+        // A Raycast-style preview of the active row. It is a template like any other, so it can show whatever a
+        // command carries - here the Person record the people source attaches as Data.
+        _detailPane = command =>
+            @<div class="demo-detail">
+                <div class="demo-detail-kind">@command.Kind</div>
+                <h3>@command.Title</h3>
+                @if (command.Subtitle is not null)
+                {
+                    <p class="demo-detail-sub">@command.Subtitle</p>
+                }
+                @if (command.Description is not null)
+                {
+                    <p>@command.Description</p>
+                }
+                @if (command.Shortcut is not null)
+                {
+                    <p>Shortcut: <BaletteShortcutHint Shortcut="command.Shortcut" IsMac="Palette.IsMac" /></p>
+                }
+                @if (command.Keywords.Count > 0)
+                {
+                    <p class="demo-detail-sub">Also matches: @string.Join(", ", command.Keywords)</p>
+                }
+                @if (command.Data is Person person)
+                {
+                    <dl>
+                        <dt>Role</dt><dd>@person.Role</dd>
+                        <dt>E-mail</dt><dd>@person.Email</dd>
+                    </dl>
+                }
+                <code class="demo-detail-id">@command.Id</code>
+            </div>;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender is false) return;
+
+        // The site's theme is the site kit's (theme.js applied it before the first paint, and the header's toggle
+        // flips it). The demo's Theme command shows it, so the state follows it: demo.js calls back once now and
+        // again on every change, whoever made it.
+        _self = DotNetObjectReference.Create(this);
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("baletteDemo.watchTheme", _self);
+        }
+        catch (JSException)
+        {
+            // demo.js is not on the page: the Theme command still works, it just cannot see the header's toggle.
+        }
+    }
+
+    /// <summary>The site theme changed - from this demo, the header's toggle or the OS - to "auto", "light" or "dark".</summary>
+    [JSInvokable]
+    public void OnSiteThemeChanged(string theme) => State.FollowSiteTheme(theme);
+
+    private void OnStateChanged()
+    {
+        _globalCommands = [.. DemoCommands.Global(State)];
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    // The component's own callback sees every execution - declarative items included - with how long the
+    // handler took. The pages listen to IBaletteService.CommandExecuted for the same thing.
+    private void OnExecuted(BaletteCommandExecutedEventArgs e)
+        => Console.WriteLine($"[balette] {e.Command.Id} -> {e.Result.GetType().Name} in {e.Duration.TotalMilliseconds:F0} ms");
+
+    private void OnPlatformDetected()
+    {
+        _paletteReady = true;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        State.Changed -= OnStateChanged;
+        Palette.PlatformDetected -= OnPlatformDetected;
+
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("baletteDemo.unwatchTheme");
+        }
+        catch (Exception ex) when (ex is JSException or JSDisconnectedException)
+        {
+            // The page is going away with the runtime; there is nothing left to unsubscribe from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Balette/Demo/Client/Components/PaletteBar.razor b/src/Utilities/Balette/Demo/Client/Components/PaletteBar.razor
new file mode 100644
index 00000000000..53d530ef33d
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Components/PaletteBar.razor
@@ -0,0 +1,22 @@
+@inject IBaletteService Palette
+
+@* The palette's visible way in: a BaletteTrigger, and a button per mode that opens the palette with the mode's
+   prefix typed. The palette is one keystroke away on every page, but a visitor who has not learnt the keystroke
+   yet needs something to click - so every demo page opens with this bar, and the landing page has it in its hero.
+
+   The trigger reads the toggle shortcut from the options, so its hint is always the real one, in the platform's
+   own symbols once the palette has detected it. *@
+
+<div class="demo-palette-bar @Class">
+    <BaletteTrigger Label="Search or run a command…" Class="demo-trigger" />
+    <div class="demo-palette-modes" role="group" aria-label="Open the palette in a mode">
+        <button type="button" class="btn btn-secondary" title="Commands mode" @onclick='() => Palette.OpenAsync(">")'><kbd>&gt;</kbd><span>Commands</span></button>
+        <button type="button" class="btn btn-secondary" title="Issues mode" @onclick='() => Palette.OpenAsync("#")'><kbd>#</kbd><span>Issues</span></button>
+        <button type="button" class="btn btn-secondary" title="People mode" @onclick="@(() => Palette.OpenAsync("@"))"><kbd>@@</kbd><span>People</span></button>
+    </div>
+</div>
+
+@code {
+    /// <summary>Extra classes for the bar, for the place it sits in.</summary>
+    [Parameter] public string? Class { get; set; }
+}
diff --git a/src/Utilities/Balette/Demo/Client/DocsCatalog.cs b/src/Utilities/Balette/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..ec698196a6a
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,185 @@
+using Bit.Balette.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Balette.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Balette";
+
+    public const string PackageId = "Bit.Balette";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Balette";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Balette is an accessible, keyboard-first command palette for Blazor: fuzzy search, nested pages, modes, " +
+        "async sources, recents and global shortcuts, with every decision made in C#. Press Ctrl+K anywhere on " +
+        "this site - it runs on it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["shortcut", "prompt", "theme", "source", "fuzzy"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    /// <remarks>
+    /// Off here: Ctrl+K is Balette's own toggle, and the palette this site demonstrates is the one it
+    /// opens. The site's documentation search answers to "/" alone.
+    /// </remarks>
+    public static readonly bool PaletteCtrlK = false;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register the services, link the stylesheet, place the palette and register your first commands.",
+                "install setup nuget package AddBitBaletteServices quick start program.cs stylesheet render mode BaletteTrigger",
+                typeof(GettingStarted)),
+        ]),
+        new("Commands",
+        [
+            new("/commands", "Registering commands",
+                "The fluent builder, declarative BaletteItem markup, page-scoped commands and settings that stay in sync with the page.",
+                "register BaletteCmd builder fluent declarative markup BaletteItem BaletteGroup BaletteCommands page-scoped IBaletteService toggle checked",
+                typeof(Commands)),
+            new("/pages", "Nested pages & flows",
+                "Static, lazy and ad-hoc pages, prompts, multi-select, confirmations, toasts and the action panel - every step in one box.",
+                "nested pages children lazy prompt multi-select destructive confirm toast action panel BaletteCommandResult flow",
+                typeof(PagesAndFlows)),
+        ]),
+        new("Search",
+        [
+            new("/search", "Search & ranking",
+                "The fuzzy matcher and the ranker run live over this app's registry, with every score, weight and the frecency shown.",
+                "fuzzy fzf matcher ranker score weights operators exact prefix suffix negate frecency priority smart case highlight",
+                typeof(SearchAndRanking)),
+            new("/modes", "Modes & sources",
+                "Typed prefixes that scope the palette, and async sources that are debounced, cancelled and merged - with a live call log.",
+                "modes prefix > # @ ? async sources IBaletteSource debounce cancel ApplyMatcher people issues documentation",
+                typeof(Modes)),
+        ]),
+        new("Keyboard & theming",
+        [
+            new("/keyboard", "Keyboard & shortcuts",
+                "Every key inside the palette, global chords, G-then-X sequences, and the accessibility the native dialog brings.",
+                "keyboard shortcuts hotkeys chord sequence global Mod VimBindings accessibility aria combobox focus",
+                typeof(Keyboard)),
+            new("/theming", "Theming & templates",
+                "Light and dark, design tokens changed live on this site's palette, the detail pane, item templates and unstyled mode.",
+                "theme dark light css custom properties variables tokens accent detail pane templates ItemTemplate unstyled data-balette",
+                typeof(Theming)),
+        ]),
+        new("Performance",
+        [
+            new("/performance", "Large registry",
+                "Register thousands of commands and measure, in your browser, what one keystroke of matching and ranking costs.",
+                "performance large registry benchmark bulk thousands virtualize MaxResults measure milliseconds",
+                typeof(Performance)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Balette/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Balette/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Balette/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Balette/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Balette/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/Footer.razor b/src/Utilities/Balette/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Balette/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/Header.razor b/src/Utilities/Balette/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/Header.razor.css b/src/Utilities/Balette/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Balette/Demo/Client/Layout/MainLayout.razor
index fcf311f1b38..44980dda101 100644
--- a/src/Utilities/Balette/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Balette/Demo/Client/Layout/MainLayout.razor
@@ -1,134 +1,30 @@
 @inherits LayoutComponentBase
-@implements IDisposable
-@inject DemoState State
-@inject IBaletteService Palette
 
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. data-palette-ready
-   follows once the palette's browser layer listens for keys (it reports the platform as it starts): a
-   Ctrl+K pressed between the two reaches no listener at all, so the suite waits for both. *@
-<div class="app" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")" data-palette-ready="@(_paletteReady ? "true" : "false")">
-    <a class="skip-link" href="#main">Skip to content</a>
-    <NavMenu />
-    <div class="content">
-        <header class="topbar">
-            @* The trigger reads the toggle shortcut from the options, so its hint is always the real one,
-               in the platform's own symbols once the palette has detected it. *@
-            <BaletteTrigger Label="Search or run a command…" Class="topbar-trigger" />
-            <div class="topbar-modes" role="group" aria-label="Open the palette in a mode">
-                <button type="button" class="btn" title="Commands mode" @onclick='() => Palette.OpenAsync(">")'><kbd>&gt;</kbd><span>Commands</span></button>
-                <button type="button" class="btn" title="Issues mode" @onclick='() => Palette.OpenAsync("#")'><kbd>#</kbd><span>Issues</span></button>
-                <button type="button" class="btn" title="People mode" @onclick="@(() => Palette.OpenAsync("@"))"><kbd>@@</kbd><span>People</span></button>
-            </div>
-        </header>
-        <main class="main" id="main" tabindex="-1">
-            @Body
-        </main>
-    </div>
-</div>
-
-@* The app-wide commands. A new list is handed over whenever the demo state changes, and BaletteCommands
-   swaps the registration, so a toggle's switch and a setting's value are never stale. *@
-<BaletteCommands Commands="_globalCommands" />
-
-@* One palette for the whole app. Everything it is passed here comes from DemoState, which the theming,
-   search and performance pages change, so they restyle this very palette rather than a copy of it. *@
-<Balette Theme="@State.PaletteTheme"
-         Style="@State.PaletteStyle"
-         DetailTemplate="@(State.ShowDetail ? _detailPane : null)"
-         ShowFooter="State.ShowFooter"
-         HighlightMatches="State.HighlightMatches"
-         GroupWhenSearching="State.GroupWhenSearching"
-         Virtualize="State.Virtualize"
-         OnCommandExecuted="OnExecuted">
-    @* Declarative commands live next to the markup that owns them. An item with nested items becomes a page. *@
-    <BaletteGroup Heading="Quick create" Priority="20">
-        <BaletteItem Title="New issue" Shortcut="C" Keywords="create add" IconCss="demo-plus"
-                     Description="Declared in MainLayout.razor as a BaletteItem, with a single-key global shortcut."
-                     OnExecute='_ => State.Record("New issue dialog opened")' />
-        <BaletteItem Title="New…" Keywords="create add" ChildrenPlaceholder="What do you want to create?"
-                     Description="A page made of nested BaletteItem markup.">
-            <BaletteItem Title="Project" OnExecute='_ => State.Record("New project")' />
-            <BaletteItem Title="Document" OnExecute='_ => State.Record("New document")' />
-            <BaletteItem Title="Team" Badge="Beta" OnExecute='_ => State.Record("New team")' />
-        </BaletteItem>
-    </BaletteGroup>
-</Balette>
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-@code {
-    private List<BaletteCommand> _globalCommands = [];
-    private RenderFragment<BaletteCommand>? _detailPane;
-    private bool _paletteReady;
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-    protected override void OnInitialized()
-    {
-        _globalCommands = [.. DemoCommands.Global(State)];
-        State.Changed += OnStateChanged;
-        // The detail pane's shortcut hint reads IsMac, which is only known once the palette has started.
-        Palette.PlatformDetected += OnPlatformDetected;
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-        // A Raycast-style preview of the active row. It is a template like any other, so it can show whatever a
-        // command carries - here the Person record the people source attaches as Data.
-        _detailPane = command =>
-            @<div class="demo-detail">
-                <div class="demo-detail-kind">@command.Kind</div>
-                <h3>@command.Title</h3>
-                @if (command.Subtitle is not null)
-                {
-                    <p class="demo-detail-sub">@command.Subtitle</p>
-                }
-                @if (command.Description is not null)
-                {
-                    <p>@command.Description</p>
-                }
-                @if (command.Shortcut is not null)
-                {
-                    <p>Shortcut: <BaletteShortcutHint Shortcut="command.Shortcut" IsMac="Palette.IsMac" /></p>
-                }
-                @if (command.Keywords.Count > 0)
-                {
-                    <p class="demo-detail-sub">Also matches: @string.Join(", ", command.Keywords)</p>
-                }
-                @if (command.Data is Person person)
-                {
-                    <dl>
-                        <dt>Role</dt><dd>@person.Role</dd>
-                        <dt>E-mail</dt><dd>@person.Email</dd>
-                    </dl>
-                }
-                <code class="demo-detail-id">@command.Id</code>
-            </div>;
-    }
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        // The inline script in App.razor applied a stored theme before the first paint; this tells the state.
-        if (firstRender)
-        {
-            await State.RestoreThemeAsync();
-        }
-    }
+    <Header />
 
-    private void OnStateChanged()
-    {
-        _globalCommands = [.. DemoCommands.Global(State)];
-        _ = InvokeAsync(StateHasChanged);
-    }
-
-    // The component's own callback sees every execution - declarative items included - with how long the
-    // handler took. The pages listen to IBaletteService.CommandExecuted for the same thing.
-    private void OnExecuted(BaletteCommandExecutedEventArgs e)
-        => Console.WriteLine($"[balette] {e.Command.Id} -> {e.Result.GetType().Name} in {e.Duration.TotalMilliseconds:F0} ms");
-
-    private void OnPlatformDetected()
-    {
-        _paletteReady = true;
-        _ = InvokeAsync(StateHasChanged);
-    }
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
 
-    public void Dispose()
-    {
-        State.Changed -= OnStateChanged;
-        Palette.PlatformDetected -= OnPlatformDetected;
-    }
-}
+    <Footer />
+</div>
diff --git a/src/Utilities/Balette/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Balette/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Balette/Demo/Client/Layout/NavMenu.razor b/src/Utilities/Balette/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 4e78480dc07..00000000000
--- a/src/Utilities/Balette/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,31 +0,0 @@
-<nav class="sidebar" aria-label="Demonstrations">
-    <a class="brand" href="">
-        @* A search box with a caret in it: a palette is a text box that runs things. *@
-        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
-            <rect x="3" y="7" width="26" height="18" rx="5" fill="none" stroke="currentColor" stroke-width="3" />
-            <path d="M9 12.5l4 3.5-4 3.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"
-                  stroke-linejoin="round" />
-            <path d="M16 19.5h7" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" />
-        </svg>
-        bit Balette
-    </a>
-
-    <div class="nav-section">Overview</div>
-    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Introduction</NavLink>
-
-    <div class="nav-section">Features</div>
-    <NavLink class="nav-link" href="commands">Registering commands</NavLink>
-    <NavLink class="nav-link" href="pages">Nested pages &amp; flows</NavLink>
-    <NavLink class="nav-link" href="search">Search &amp; ranking</NavLink>
-    <NavLink class="nav-link" href="modes">Modes &amp; sources</NavLink>
-    <NavLink class="nav-link" href="keyboard">Keyboard &amp; shortcuts</NavLink>
-    <NavLink class="nav-link" href="theming">Theming &amp; templates</NavLink>
-    <NavLink class="nav-link" href="performance">Large registry</NavLink>
-
-    <div class="nav-section">AI</div>
-    <NavLink class="nav-link" href="mcp-server">MCP server</NavLink>
-
-    <div class="nav-section">Project</div>
-    <a class="nav-link" href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Balette" target="_blank" rel="noopener">Source on GitHub</a>
-    <a class="nav-link" href="https://www.nuget.org/packages/Bit.Balette" target="_blank" rel="noopener">NuGet package</a>
-</nav>
diff --git a/src/Utilities/Balette/Demo/Client/Pages/Commands.razor b/src/Utilities/Balette/Demo/Client/Pages/Commands.razor
index 30938aa3daa..33c97a67149 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/Commands.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/Commands.razor
@@ -3,117 +3,130 @@
 @inject IBaletteService Palette
 @inject DemoState State
 
-<PageTitle>Registering commands - bit Balette</PageTitle>
+<PageTitle>Registering commands · Balette</PageTitle>
+
+<div class="bb-intro">
+    <h1>Registering commands</h1>
+    <p class="bb-subtitle">
+        A command is an immutable record: a title, where it is listed, what it matches and what it does. There are three
+        ways to hand one to the palette, and this app uses all of them at once - the palette merges them into one list and
+        nothing in it says where a row came from.
+    </p>
+</div>
 
-<h1>Registering commands</h1>
-<p class="page-intro">
-    A command is an immutable record: a title, where it is listed, what it matches and what it does. There are three
-    ways to hand one to the palette, and this app uses all of them at once - the palette merges them into one list and
-    nothing in it says where a row came from.
-</p>
+<PaletteBar />
 
 @* Exists only while this page is rendered: leave the page and the three counter commands are gone from the
    palette, shortcuts included (kbar calls this useRegisterActions). *@
 <BaletteCommands Commands="_pageCommands" />
 
-<div class="split">
-    <section class="panel padded">
-        <h2>Page-scoped commands</h2>
-        <p class="counter" aria-live="polite">Counter: <strong>@_count</strong></p>
+<div class="bb-split">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Page-scoped commands</span></div>
+        <p class="demo-counter" aria-live="polite">Counter: <strong>@_count</strong></p>
         <p>
             Open the palette and look for <em>Increment counter</em> and <em>Decrement counter</em> under "This page",
             or press <kbd>Ctrl</kbd> <kbd>↑</kbd> / <kbd>Ctrl</kbd> <kbd>↓</kbd> with the palette closed. Both keep the
             palette open, so the value can be stepped from inside it.
         </p>
-        <div class="actions">
-            <button type="button" class="btn" @onclick='() => Palette.OpenAsync("counter")'>Search "counter"</button>
-            <button type="button" class="btn" @onclick="() => _count++">+1 from the page</button>
+        <div class="bb-try">
+            <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync("counter")'>Search "counter"</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => _count++">+1 from the page</button>
         </div>
-    </section>
+    </div>
 
-    <section class="panel padded">
-        <h2>The programmatic API</h2>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">The programmatic API</span></div>
         <p>
             <code>IBaletteService</code> is the palette's remote control: register, update, find, open, close and execute
             from anywhere that can inject it.
         </p>
-        <div class="stack">
-            <button type="button" class="btn" @onclick='() => Palette.ExecuteAsync("toggle:wordwrap")'>Execute "Word wrap" without opening</button>
-            <button type="button" class="btn" @onclick='() => Palette.OpenAsync("!delete")'>Open with a negated query: <code>!delete</code></button>
-            <button type="button" class="btn" @onclick='() => Palette.OpenAsync(pageCommandId: "actions.set-labels")'>Open on the "Set labels…" page</button>
+        <div class="demo-stack">
+            <button type="button" class="btn btn-secondary" @onclick='() => Palette.ExecuteAsync("toggle:wordwrap")'>Execute "Word wrap" without opening</button>
+            <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync("!delete")'>Open with a negated query: <code>!delete</code></button>
+            <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync(pageCommandId: "actions.set-labels")'>Open on the "Set labels…" page</button>
         </div>
-        <p class="muted" role="status">
+        <p class="bb-muted demo-small" role="status">
             Executed this visit: <strong>@_executed</strong> · Last: <strong>@(_lastExecuted ?? "nothing yet")</strong>
             · The palette is <strong>@(Palette.IsOpen ? "open" : "closed")</strong>
             · The registry holds <strong>@Palette.Commands.Count</strong> commands
         </p>
-    </section>
-</div>
-
-<h2>The fluent builder</h2>
-<p>
-    Every command in this app's <em>Navigation</em>, <em>Actions</em>, <em>Preferences</em>, <em>Danger zone</em> and
-    <em>Help</em> groups is built in <code>Services/DemoCommands.cs</code> and registered once, from the layout.
-    <code>BaletteCmd</code> is the entry point; a builder converts to a command on its own, so a list of them needs no
-    <code>Build()</code> calls.
-</p>
-<pre><code>@BuilderExample</code></pre>
-
-<h2>Declarative markup</h2>
-<p>
-    Commands can live in markup next to the component that owns them. A <code>BaletteItem</code> inside a
-    <code>BaletteItem</code> turns the outer one into a page, and a <code>BaletteGroup</code> hands its heading and
-    priority to every item in it. The <em>Quick create</em> group of this app is declared like this in
-    <code>Layout/MainLayout.razor</code>:
-</p>
-<pre><code>@MarkupExample</code></pre>
-<div class="actions">
-    <button type="button" class="btn" @onclick='() => Palette.OpenAsync("new")'>Search "new"</button>
+    </div>
 </div>
 
-<h2>Scoped to a page</h2>
-<p>
-    <code>BaletteCommands</code> registers its list when it renders and removes it when it is disposed, and hands a
-    new registration over when it is passed a different list. <code>IBaletteService.Register</code> does the same from
-    code and returns the handle to dispose.
-</p>
-<pre><code>@ScopedExample</code></pre>
-
-<h2 id="settings">Settings that stay in sync</h2>
-<p>
-    These values are what the palette's <em>Preferences</em> commands change. Change one here and open the palette:
-    the toggle shows it. Change it there and this page shows it. The layout rebuilds its command list from
-    <code>DemoState</code> whenever it changes, so a toggle's switch is never stale.
-</p>
-
-<div class="panel settings">
-    <label class="setting">
-        <span>Theme</span>
-        <select value="@State.Theme" @onchange="OnThemeChanged" aria-label="Theme">
-            <option value="auto">Auto</option>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-        </select>
-    </label>
-    <label class="setting">
-        <span>Word wrap <BaletteShortcutHint Shortcut="WordWrapShortcut" IsMac="Palette.IsMac" /></span>
-        <input type="checkbox" checked="@State.WordWrap" @onchange="State.ToggleWordWrap" />
-    </label>
-    <label class="setting">
-        <span>Desktop notifications</span>
-        <input type="checkbox" checked="@State.Notifications" @onchange="State.ToggleNotifications" />
-    </label>
-    <label class="setting">
-        <span>Show minimap</span>
-        <input type="checkbox" checked="@State.ShowMinimap" @onchange="State.ToggleMinimap" />
-    </label>
-</div>
-
-<div class="note">
-    Rebuilding the whole list is the simplest way to keep it current, and cheap: it is a few dozen records.
-    <code>IBaletteService.Update(command)</code> replaces a single command by id instead, which suits a registry
-    too large to rebuild on every change.
-</div>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The fluent builder</h3>
+    <p>
+        Every command in this app's <em>Navigation</em>, <em>Actions</em>, <em>Preferences</em>, <em>Danger zone</em> and
+        <em>Help</em> groups is built in <code>Services/DemoCommands.cs</code> and registered once, from
+        <code>Components/AppPalette.razor</code>. <code>BaletteCmd</code> is the entry point; a builder converts to a
+        command on its own, so a list of them needs no <code>Build()</code> calls.
+    </p>
+    <pre class="bb-code">@BuilderExample</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Declarative markup</h3>
+    <p>
+        Commands can live in markup next to the component that owns them. A <code>BaletteItem</code> inside a
+        <code>BaletteItem</code> turns the outer one into a page, and a <code>BaletteGroup</code> hands its heading and
+        priority to every item in it. The <em>Quick create</em> group of this app is declared like this in
+        <code>Components/AppPalette.razor</code>:
+    </p>
+    <pre class="bb-code">@MarkupExample</pre>
+    <div class="bb-try">
+        <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync("new")'>Search "new"</button>
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Scoped to a page</h3>
+    <p>
+        <code>BaletteCommands</code> registers its list when it renders and removes it when it is disposed, and hands a
+        new registration over when it is passed a different list. <code>IBaletteService.Register</code> does the same from
+        code and returns the handle to dispose.
+    </p>
+    <pre class="bb-code">@ScopedExample</pre>
+</section>
+
+<section class="bb-card" id="settings">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Settings that stay in sync</h3>
+    <p>
+        These values are what the palette's <em>Preferences</em> commands change. Change one here and open the palette:
+        the toggle shows it. Change it there and this page shows it. The palette host rebuilds its command list from
+        <code>DemoState</code> whenever it changes, so a toggle's switch is never stale. The theme is the site's own - the
+        header's toggle flips it too.
+    </p>
+
+    <div class="demo-settings">
+        <label class="demo-setting">
+            <span>Theme</span>
+            <select value="@State.Theme" @onchange="OnThemeChanged" aria-label="Theme">
+                <option value="auto">Auto</option>
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+            </select>
+        </label>
+        <label class="demo-setting">
+            <span>Word wrap <BaletteShortcutHint Shortcut="WordWrapShortcut" IsMac="Palette.IsMac" /></span>
+            <input type="checkbox" checked="@State.WordWrap" @onchange="State.ToggleWordWrap" />
+        </label>
+        <label class="demo-setting">
+            <span>Desktop notifications</span>
+            <input type="checkbox" checked="@State.Notifications" @onchange="State.ToggleNotifications" />
+        </label>
+        <label class="demo-setting">
+            <span>Show minimap</span>
+            <input type="checkbox" checked="@State.ShowMinimap" @onchange="State.ToggleMinimap" />
+        </label>
+    </div>
+
+    <div class="bb-note">
+        Rebuilding the whole list is the simplest way to keep it current, and cheap: it is a few dozen records.
+        <code>IBaletteService.Update(command)</code> replaces a single command by id instead, which suits a registry
+        too large to rebuild on every change.
+    </div>
+</section>
 
 @code {
     private const string BuilderExample = """
diff --git a/src/Utilities/Balette/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Balette/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..878fef2a6f9
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,188 @@
+@page "/getting-started"
+@inject IBaletteService Palette
+
+<PageTitle>Getting started · Balette</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package, one service registration, one stylesheet and one component: install Bit.Balette, register it, link
+        its stylesheet, place the palette once in an interactively rendered layout, and register commands from anywhere.
+        The bar below is this site's own palette - it is set up exactly like this.
+    </p>
+</div>
+
+<PaletteBar />
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <pre class="bb-code">dotnet add package Bit.Balette</pre>
+    <p>
+        Everything ships in that one package, under one namespace, <code>Bit.Balette</code>. In a Blazor Web App with an
+        interactive client, the package belongs in the <code>.Client</code> project, and the services are registered in
+        both projects.
+    </p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Register the services</h3>
+    <pre class="bb-code">@RegisterExample</pre>
+    <p>
+        The options are a singleton. The registry, the open state and the history are scoped: one per circuit on Blazor
+        Server, one per application on WebAssembly. Every page of a Blazor Web App is prerendered on the server before it
+        runs in the browser, so anything a component injects must resolve in both containers - share one extension
+        method between the two <code>Program.cs</code> files, the way this demo does with <code>AddDemoServices</code>.
+    </p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Reference the stylesheet</h3>
+    <pre class="bb-code">&lt;link rel="stylesheet" href="_content/Bit.Balette/bit-balette.css" /&gt;</pre>
+    <p>
+        In <code>App.razor</code> or <code>index.html</code>, before your own stylesheet, so your overrides of its
+        <code>--bit-balette-*</code> variables win. It is a plain stylesheet with no dependencies, and it is not added for
+        you: leave it out and set <code>Unstyled="true"</code> to style everything yourself. Add the namespace to
+        <code>_Imports.razor</code> as well:
+    </p>
+    <pre class="bb-code">@@using Bit.Balette</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Place the palette</h3>
+    <p>
+        Put one <code>Balette</code> where it is rendered interactively on every page, and a <code>BaletteTrigger</code>
+        wherever a visible entry point helps:
+    </p>
+    <pre class="bb-code">@LayoutExample</pre>
+    <p>
+        The palette renders a closed <code>&lt;dialog&gt;</code> until it is opened, so it costs nothing while it is not in
+        use. It needs an interactive render mode: a statically rendered palette never attaches its keyboard handling.
+        This site renders it from <code>Components/AppPalette.razor</code>, which <code>Routes.razor</code> puts next to
+        the router so the one palette outlives every page and layout.
+    </p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Register commands</h3>
+    <p>Inject <code>IBaletteService</code> wherever commands belong and register them:</p>
+    <pre class="bb-code">@CommandsExample</pre>
+    <p>
+        <code>Register</code> returns an <code>IDisposable</code>: dispose it to remove the commands again. Commands that
+        belong to the whole app are registered once, from the layout or at startup through <code>options.Commands</code>;
+        <code>&lt;BaletteCommands Commands="_commands" /&gt;</code> registers a list while it is rendered and removes it
+        when it goes.
+    </p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Open it</h3>
+    <p>
+        <kbd>Ctrl</kbd> <kbd>K</kbd> (<kbd>⌘</kbd> <kbd>K</kbd> on a Mac) toggles the palette. Code opens it through the
+        service, optionally with a query - a mode prefix included - or directly on a command's page:
+    </p>
+    <pre class="bb-code">@OpenExample</pre>
+    <div class="bb-try">
+        <button type="button" class="btn btn-secondary" @onclick="() => Palette.OpenAsync()">Open the palette</button>
+        <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync(">")'>Commands mode</button>
+        <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync(pageCommandId: "preferences.theme")'>Straight to the Theme page</button>
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Things to try</h3>
+    <p>Every one of these runs on the palette of this site, right now:</p>
+    <ul class="bb-detail-list">
+        <li>Type <code>rc</code> - fuzzy matching jumps to <em>Registering commands</em>, with the word starts highlighted.</li>
+        <li>Type <code>theme</code> and press <kbd>Enter</kbd> - a nested page; <kbd>Backspace</kbd> on an empty box goes back.</li>
+        <li>Type <code>&gt;</code> for commands only, <code>#105</code> to look up an issue, <code>@@ada</code> to search people (async).</li>
+        <li>Type <code>doc theming</code> - both terms must match, and the async documentation source answers too.</li>
+        <li>Pick <em>Set labels…</em> - a multi-select page; <kbd>Ctrl</kbd> <kbd>Enter</kbd> applies.</li>
+        <li>Pick <em>Rename project…</em> - a free-text prompt step.</li>
+        <li>Pick <em>Delete project</em> - destructive, so it needs a second <kbd>Enter</kbd>.</li>
+        <li>Press <kbd>Tab</kbd> on any row - the action panel: pin, forget, and the row's own actions.</li>
+        <li>Close the palette and press <kbd>G</kbd> then <kbd>S</kbd> - a sequence shortcut opens the settings.</li>
+        <li>Try the operators <code>'exact</code>, <code>^prefix</code>, <code>suffix$</code> and <code>!exclude</code>.</li>
+    </ul>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> How it is built</h3>
+    <pre class="bb-code">Key press (browser)
+  -&gt; bit-balette.js     toggle, global chords and G-then-X sequences, navigation keys
+  -&gt; Balette            query, mode prefix, page stack, active row     (C#)
+  -&gt; IBaletteMatcher    fzf-style score and highlight positions per field
+  -&gt; BaletteRanker      score + priority + frecency, the best MaxResults kept
+  -&gt; rows               groups, pinned, recents, async source blocks
+  -&gt; &lt;dialog&gt;          native top layer, focus trap, aria-activedescendant</pre>
+    <p>
+        The browser layer is small on purpose: it decides which keys belong to the palette and hands them over. What
+        matches, in which order, what <kbd>Enter</kbd> does and which page comes next are all decided in C#, so they can be
+        unit tested, replaced (<code>IBaletteMatcher</code>, <code>IBaletteHistoryStore</code>, <code>IBaletteSource</code>)
+        and reasoned about like the rest of the app.
+    </p>
+    <div class="bb-note">
+        This site runs on WebAssembly, so the whole search runs in the browser next to the list it fills. The same
+        component works on Blazor Server, where a keystroke is one round trip; it searches synchronously there instead of
+        deferring to the next frame, because the network already separates typing from rendering.
+    </div>
+</section>
+
+@code {
+    private const string RegisterExample = """
+        builder.Services.AddBitBaletteServices(options =>
+        {
+            // Ctrl+K / ⌘K is the default; this adds VS Code's Ctrl+Shift+P as well.
+            options.AdditionalToggleShortcuts.Add("Mod+Shift+P");
+
+            // Groups appear in this order on the empty query; any others follow alphabetically.
+            options.GroupOrder.AddRange(["Navigation", "Actions", "Preferences", "Help"]);
+        });
+        """;
+
+    private const string LayoutExample = """
+        @inherits LayoutComponentBase
+
+        <header>
+            <BaletteTrigger Label="Search…" />
+        </header>
+
+        <main>@Body</main>
+
+        <Balette />
+        """;
+
+    private const string CommandsExample = """
+        @inject IBaletteService Palette
+        @implements IDisposable
+
+        @code {
+            private IDisposable? _commands;
+
+            protected override void OnInitialized()
+            {
+                _commands = Palette.Register(
+                    BaletteCmd.Navigate("Home", "/").Group("Navigation").Shortcut("G H"),
+                    BaletteCmd.Navigate("Settings", "/settings").Group("Navigation").Shortcut("G S").Keywords("preferences", "options"),
+                    BaletteCmd.Action("Toggle sidebar", () => _sidebarOpen = !_sidebarOpen).Group("View").Shortcut("Mod+B"),
+                    BaletteCmd.New("Delete project")
+                        .Group("Danger zone")
+                        .Destructive("This cannot be undone")
+                        .Handler(async ctx =>
+                        {
+                            await Api.DeleteProjectAsync(ctx.CancellationToken);
+                            return BaletteCommandResult.Toast("Project deleted");
+                        }));
+            }
+
+            // Commands registered by a page leave with the page.
+            public void Dispose() => _commands?.Dispose();
+        }
+        """;
+
+    private const string OpenExample = """
+        await Palette.OpenAsync();
+        await Palette.OpenAsync(">");                                // commands mode
+        await Palette.OpenAsync(pageCommandId: "preferences.theme"); // straight to the Theme page
+        await Palette.ExecuteAsync("navigation.settings");          // run a command without opening anything
+        """;
+}
diff --git a/src/Utilities/Balette/Demo/Client/Pages/Home.razor b/src/Utilities/Balette/Demo/Client/Pages/Home.razor
index 6e8149854fa..89e541a71c1 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/Home.razor
@@ -1,152 +1,346 @@
 @page "/"
+@layout MainLayout
 @implements IDisposable
 @inject IBaletteService Palette
 @inject DemoState State
 
-<PageTitle>bit Balette - a command palette for Blazor</PageTitle>
-
-<h1>bit Balette</h1>
-<p class="page-intro">
-    A keyboard-first command palette for Blazor. Press <kbd>Ctrl</kbd> <kbd>K</kbd> (<kbd>⌘</kbd> <kbd>K</kbd> on a
-    Mac) anywhere on this site. Fuzzy search, nested pages, modes, async sources, recents, global shortcuts,
-    multi-select, prompts and a detail pane, with full keyboard and screen-reader support. Matching, ranking and every
-    decision run in C#; JavaScript only owns the dialog, focus and keys.
-</p>
-
-<div class="actions">
-    <button type="button" class="btn primary" @onclick="() => Palette.OpenAsync()">Open the palette</button>
-    <button type="button" class="btn" @onclick='() => Palette.OpenAsync(">")'>Commands mode <code>&gt;</code></button>
-    <button type="button" class="btn" @onclick='() => Palette.OpenAsync("#")'>Issues mode <code>#</code></button>
-    <button type="button" class="btn" @onclick="@(() => Palette.OpenAsync("@"))">People mode <code>@@</code></button>
-    @* Opens straight inside a command's page: the id is the one the builder derived from the group and the title. *@
-    <button type="button" class="btn" @onclick='() => Palette.OpenAsync(pageCommandId: "preferences.theme")'>Open the "Theme" page</button>
-</div>
+<PageTitle>Balette - a command palette for Blazor</PageTitle>
+
+@* The landing page: hero → proof strip → feature grid → code walkthrough → comparison with a
+   JavaScript palette → persona tiles → FAQ → final call to action. Everything else on the site is
+   a documentation page under DocsLayout. The hero's sample is this site's own palette rather than a
+   picture of one: its trigger and mode buttons open it, and every command it runs shows up in the
+   activity under them. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>A command palette for Blazor,<br />
+                <span class="bb-hero-accent">every decision in C#.</span></h1>
+            <p class="bb-hero-sub">
+                The <kbd>Ctrl</kbd> <kbd>K</kbd> box that searches every page, action and setting of an app and runs the
+                one you pick: fuzzy search, nested pages, modes, async sources, recents, global shortcuts, multi-select,
+                prompts and a detail pane - accessible and keyboard-first. Matching, ranking and every decision run in C#;
+                JavaScript only owns the dialog, focus and keys.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Balette</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <button type="button" class="btn btn-secondary bb-btn-lg" @onclick="() => Palette.OpenAsync()">Open the palette</button>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The sample, framed as the app it runs in: the palette's way in on top, and what the commands did
+           underneath - live, so the first thing a visitor can do here is press Ctrl+K and run something. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">acme.app/<strong>dashboard</strong></span>
+                </div>
+                <div class="demo-hero-app">
+                    <PaletteBar />
+
+                    <div class="demo-hero-try">
+                        <span class="bb-overline">Try</span>
+                        @foreach (var (query, label) in TryQueries)
+                        {
+                            <button type="button" class="btn btn-outline demo-chip" title="@label" @onclick="() => Palette.OpenAsync(query)"><code>@query</code></button>
+                        }
+                    </div>
+
+                    <p class="demo-hero-state">
+                        Project: <strong>@State.ProjectName</strong> · Labels: <strong>@(State.Labels.Count == 0 ? "none" : string.Join(", ", State.Labels))</strong>
+                        · Theme: <strong>@State.Theme</strong>
+                    </p>
 
-<div class="split">
-    <section class="panel padded">
-        <h2>Try these</h2>
-        <ul class="try-list">
-            <li>Type <code>rc</code> - fuzzy matching jumps to <em>Registering commands</em>, with the word starts highlighted.</li>
-            <li>Type <code>theme</code> and press <kbd>Enter</kbd> - a nested page; <kbd>Backspace</kbd> on an empty box goes back.</li>
-            <li>Type <code>&gt;</code> for commands only, <code>#105</code> to look up an issue, <code>@@ada</code> to search people (async).</li>
-            <li>Type <code>doc theming</code> - both terms must match, and the async documentation source answers too.</li>
-            <li>Pick <em>Set labels…</em> - a multi-select page; <kbd>Ctrl</kbd> <kbd>Enter</kbd> applies.</li>
-            <li>Pick <em>Rename project…</em> - a free-text prompt step.</li>
-            <li>Pick <em>Delete project</em> - destructive, so it needs a second <kbd>Enter</kbd>.</li>
-            <li>Press <kbd>Tab</kbd> on any row - the action panel: pin, forget, and the row's own actions.</li>
-            <li>Close the palette and press <kbd>G</kbd> then <kbd>S</kbd> - a sequence shortcut opens the settings.</li>
-            <li>Try the operators <code>'exact</code>, <code>^prefix</code>, <code>suffix$</code> and <code>!exclude</code>.</li>
-        </ul>
+                    <div class="bb-log demo-hero-log" aria-live="polite" aria-label="Activity">
+                        @if (State.Log.Count == 0)
+                        {
+                            <div class="bb-log-empty">Run a command - press <kbd>C</kbd>, or <kbd>F2</kbd> to rename the project - and it shows up here.</div>
+                        }
+                        @foreach (var entry in State.Log)
+                        {
+                            <div class="bb-log-line">@entry</div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
     </section>
 
-    <section class="panel padded">
-        <h2>Activity</h2>
-        <p class="muted">
-            Project: <strong>@State.ProjectName</strong> · Labels: <strong>@(State.Labels.Count == 0 ? "none" : string.Join(", ", State.Labels))</strong>
-            · Theme: <strong>@State.Theme</strong>
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>fzf's matcher, in C#</strong><span>word starts, camel humps, the best positions to highlight</span></div>
+        <div><strong>Accessible by design</strong><span>a native modal <code>&lt;dialog&gt;</code> and the WAI-ARIA combobox</span></div>
+        <div><strong>No JavaScript menu</strong><span>one package, one namespace, a small module for keys</span></div>
+        <div><strong>Every hosting model</strong><span>WebAssembly, Server, Web App and Hybrid</span></div>
+    </section>
+
+    @* ============================== Feature grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>Everything a command palette does - natively in Blazor</h2>
+        <p class="bb-section-sub">
+            The pattern of VS Code's Quick Pick, Linear, GitHub, Raycast and cmdk: one place where every page, action,
+            setting and record of an app can be reached by typing. Each feature below has a page you can try it on, with
+            this site's own palette.
         </p>
-        @if (State.Log.Count == 0)
-        {
-            <p class="muted">Run a command and it shows up here.</p>
-        }
-        else
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Registering commands</h3>
+                <p class="bb-card-desc">
+                    A fluent builder, declarative <code>BaletteItem</code> markup, and commands that exist only while a
+                    page is on screen - merged into one list.
+                </p>
+                <a href="commands" class="btn btn-outline">Registering commands →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Nested pages &amp; flows</h3>
+                <p class="bb-card-desc">
+                    Static, lazy and ad-hoc pages, free-text prompts, multi-select, confirmations, toasts and a Raycast-style
+                    action panel - every step in the same box.
+                </p>
+                <a href="pages" class="btn btn-outline">Nested pages →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Search &amp; ranking</h3>
+                <p class="bb-card-desc">
+                    An fzf-style fuzzy matcher with <code>'exact</code>, <code>^prefix</code>, <code>suffix$</code> and
+                    <code>!negate</code>, weighted fields, priority and frecency - every score shown live.
+                </p>
+                <a href="search" class="btn btn-outline">Search &amp; ranking →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Modes &amp; sources</h3>
+                <p class="bb-card-desc">
+                    Typed prefixes - <code>&gt;</code> <code>#</code> <code>@@</code> <code>?</code> - that scope the palette,
+                    and async sources that are debounced, cancelled and merged.
+                </p>
+                <a href="modes" class="btn btn-outline">Modes &amp; sources →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Keyboard &amp; shortcuts</h3>
+                <p class="bb-card-desc">
+                    Every key inside the palette, global chords such as <kbd>Alt</kbd> <kbd>Z</kbd> and G-then-X sequences,
+                    matched in the browser and shown in the platform's own symbols.
+                </p>
+                <a href="keyboard" class="btn btn-outline">Keyboard &amp; shortcuts →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Theming &amp; templates</h3>
+                <p class="bb-card-desc">
+                    Light and dark, CSS custom properties changed live on this site's palette, the detail pane, eight
+                    templates and a fully unstyled mode.
+                </p>
+                <a href="theming" class="btn btn-outline">Theming &amp; templates →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>A command is a record</h3>
+                    <p>
+                        A title, where it is listed, what it matches and what it does - built with <code>BaletteCmd</code>
+                        and registered from anywhere. A shortcut is written once, as text, and works with the palette closed.
+                    </p>
+                    <a href="commands">Registering commands →</a>
+                </div>
+                <pre class="bb-code"><span class="p">Palette</span>.Register(
+    <span class="k">BaletteCmd</span>.Navigate(<span class="s">"Settings"</span>, <span class="s">"/settings"</span>)
+        .Group(<span class="s">"Navigation"</span>).Shortcut(<span class="s">"G S"</span>).Keywords(<span class="s">"preferences"</span>),
+    <span class="k">BaletteCmd</span>.Action(<span class="s">"Toggle sidebar"</span>, () =&gt; _sidebarOpen = !_sidebarOpen)
+        .Shortcut(<span class="s">"Mod+B"</span>));</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>The next step is a return value</h3>
+                    <p>
+                        A handler does its work and tells the palette what comes next - a prompt, a page, a toast or
+                        <code>Back</code> - so a multi-step flow stays in one place instead of a chain of callbacks.
+                    </p>
+                    <a href="pages">Nested pages &amp; flows →</a>
+                </div>
+                <pre class="bb-code"><span class="k">BaletteCmd</span>.New(<span class="s">"Rename project…"</span>)
+    .Shortcut(<span class="s">"F2"</span>)
+    .Handler(_ =&gt; Task.FromResult(<span class="k">BaletteCommandResult</span>.Prompt(
+        <span class="s">"New project name"</span>,
+        ctx =&gt;
         {
-            <ul class="log" aria-live="polite">
-                @foreach (var entry in State.Log)
-                {
-                    <li>@entry</li>
-                }
-            </ul>
-        }
+            state.Rename(ctx.PromptValue!.Trim());
+            <span class="k">return</span> Task.FromResult(<span class="k">BaletteCommandResult</span>.Toast(<span class="s">"Renamed"</span>));
+        },
+        initialValue: state.ProjectName)))</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Your API is a source</h3>
+                    <p>
+                        An <code>IBaletteSource</code> answers a query later. The palette debounces it, cancels it when the
+                        query moves on, and ranks what it returns with everything else.
+                    </p>
+                    <a href="modes">Modes &amp; sources →</a>
+                </div>
+                <pre class="bb-code"><span class="k">public sealed class</span> PeopleSource : <span class="k">IBaletteSource</span>
+{
+    <span class="k">public string</span> Name =&gt; <span class="s">"People"</span>;
+    <span class="k">public bool</span> ApplyMatcher =&gt; <span class="k">true</span>;   <span class="c">// re-rank with the palette's matcher</span>
+
+    <span class="k">public async</span> Task&lt;IReadOnlyList&lt;<span class="k">BaletteCommand</span>&gt;&gt; SearchAsync(
+        <span class="k">string</span> query, <span class="k">BaletteSourceContext</span> context, CancellationToken cancellationToken)
+    {
+        <span class="k">var</span> people = <span class="k">await</span> context.Services.GetRequiredService&lt;PeopleClient&gt;()
+            .SearchAsync(query, cancellationToken);
+        <span class="k">return</span> [.. people.Select(p =&gt; <span class="k">BaletteCmd</span>.New(p.Name).Subtitle(p.Role).Build())];
+    }
+}</pre>
+            </div>
+        </div>
     </section>
-</div>
 
-<h2>What it does</h2>
-<div class="grid">
-    <a class="card" href="commands">
-        <h3>Registering commands</h3>
-        <p>A fluent builder, declarative markup, and commands that exist only while a page is on screen.</p>
-    </a>
-    <a class="card" href="pages">
-        <h3>Nested pages &amp; flows</h3>
-        <p>Static, lazy and ad-hoc pages, prompts, multi-select, confirmations, toasts and the action panel.</p>
-    </a>
-    <a class="card" href="search">
-        <h3>Search &amp; ranking</h3>
-        <p>The fuzzy matcher and the ranker, run live over this app's commands with every score shown.</p>
-    </a>
-    <a class="card" href="modes">
-        <h3>Modes &amp; sources</h3>
-        <p>Typed prefixes that scope the palette, and async sources that are debounced and cancelled.</p>
-    </a>
-    <a class="card" href="keyboard">
-        <h3>Keyboard &amp; shortcuts</h3>
-        <p>Every key inside the palette, global chords, and G-then-X sequences.</p>
-    </a>
-    <a class="card" href="theming">
-        <h3>Theming &amp; templates</h3>
-        <p>Light and dark, design tokens changed live, the detail pane, item templates and unstyled mode.</p>
-    </a>
-    <a class="card" href="performance">
-        <h3>Large registry</h3>
-        <p>Register thousands of commands and measure what a keystroke costs.</p>
-    </a>
-    <a class="card" href="mcp-server">
-        <h3>MCP server</h3>
-        <p>The library's documentation, API and matcher, served to AI agents from this site.</p>
-    </a>
-</div>
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not wrap a JavaScript palette?</h2>
+        <p class="bb-section-sub">
+            A JavaScript command menu keeps its commands, its matching and its flows on the other side of the interop
+            boundary, and every handler has to be reached back across it. Balette keeps all of it in C#, next to the
+            code the commands call.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A wrapped JavaScript palette compared with Balette">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>Wrapped JavaScript palette</th><th>Balette</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Who matches and ranks</td><td>The JavaScript library</td><td><code>IBaletteMatcher</code> and <code>BaletteRanker</code> - C#, replaceable, unit-testable</td></tr>
+                    <tr><td>Commands</td><td>JavaScript objects, handlers reached through interop</td><td>Typed <code>BaletteCommand</code> records; handlers are C# delegates with the user's DI scope</td></tr>
+                    <tr><td>Multi-step flows</td><td>Callbacks wired across the boundary</td><td>A handler returns the next step: <code>Prompt</code>, <code>Page</code>, <code>Toast</code>, <code>Back</code></td></tr>
+                    <tr><td>Results from an API</td><td>Fetched in JavaScript, or bridged back from .NET</td><td><code>IBaletteSource</code>: debounced, cancelled through a <code>CancellationToken</code></td></tr>
+                    <tr><td>Script to ship</td><td>The library plus interop glue</td><td>One small module, imported on demand - no inline script, no <code>eval</code></td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Balette?</h3>
+                <p class="bb-card-desc">Install, register the services, link the stylesheet, place one palette - and register your first commands.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to see it live?</h3>
+                <p class="bb-card-desc">Press <kbd>Ctrl</kbd> <kbd>K</kbd> anywhere on this site. Every feature also has a page that drives this very palette.</p>
+                <a href="pages" class="btn btn-outline">Open the demos →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library - and runs its real matcher - instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this a JavaScript command menu behind interop?</summary>
+                <p>
+                    No. Matching, ranking, paging, history and what <kbd>Enter</kbd> does are C#. A small module does only
+                    what the browser alone can: open the native <code>&lt;dialog&gt;</code>, move focus into and out of it,
+                    scroll the active row into view, and decide which keys belong to the palette.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    Any interactive one - WebAssembly, Server, Auto and Hybrid - on .NET 8, 9 and 10. Shortcuts and the
+                    navigation keys are matched in the browser, so on Blazor Server only the query and the chosen command
+                    cross the connection. This site runs on WebAssembly, so the whole search runs next to the list it fills.
+                </p>
+            </details>
+            <details>
+                <summary>Do I have to take its look?</summary>
+                <p>
+                    No. Every visual is a <code>--bit-balette-*</code> custom property - this site re-tints them to its own
+                    brand - every part of a row and of the dialog can be replaced with a template, and
+                    <code>Unstyled="true"</code> leaves bare, accessible markup to style from scratch.
+                </p>
+            </details>
+            <details>
+                <summary>How many commands can it hold?</summary>
+                <p>
+                    Thousands. Only the best <code>MaxResults</code> rows are rendered, <code>Virtualize</code> renders just
+                    the visible ones, and on WebAssembly a search that takes longer than a frame lets the keystroke paint
+                    first. The <a href="performance">large registry</a> page measures it in your browser.
+                </p>
+            </details>
+            <details>
+                <summary>Why does the search box in this site's header answer to <kbd>/</kbd> and not <kbd>Ctrl</kbd> <kbd>K</kbd>?</summary>
+                <p>
+                    Because <kbd>Ctrl</kbd> <kbd>K</kbd> is Balette's, and the palette it opens is the one this site
+                    demonstrates. The header's box only searches these docs, and while either of the two is open the keys
+                    are its own.
+                </p>
+            </details>
+        </div>
+    </section>
 
-<h2>How it is built</h2>
-<pre><code>Key press (browser)
-  -> bit-balette.js     toggle, global chords and G-then-X sequences, navigation keys
-  -> Balette            query, mode prefix, page stack, active row     (C#)
-  -> IBaletteMatcher    fzf-style score and highlight positions per field
-  -> BaletteRanker      score + priority + frecency, the best MaxResults kept
-  -> rows               groups, pinned, recents, async source blocks
-  -> &lt;dialog&gt;          native top layer, focus trap, aria-activedescendant</code></pre>
-
-<p>
-    The browser layer is small on purpose: it decides which keys belong to the palette and hands them over. What
-    matches, in which order, what Enter does and which page comes next are all decided in C#, so they can be unit
-    tested, replaced (<code>IBaletteMatcher</code>, <code>IBaletteHistoryStore</code>, <code>IBaletteSource</code>)
-    and reasoned about like the rest of the app.
-</p>
-
-<div class="note">
-    This site runs on WebAssembly, so the whole search runs in the browser next to the list it fills. The same
-    component works on Blazor Server, where a keystroke is one round trip; it searches synchronously there instead of
-    deferring to the next frame, because the network already separates typing from rendering.
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Give your app a <kbd>Ctrl</kbd> <kbd>K</kbd></h2>
+        <p class="bb-section-sub">One package, one service registration, one stylesheet and one component - and every page, action and setting is a keystroke away.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Balette</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="commands" class="btn btn-secondary bb-btn-lg">Browse the docs</a>
+        </div>
+    </section>
 </div>
 
-<h2 id="get-started">Get started</h2>
-<pre><code>dotnet add package Bit.Balette</code></pre>
-<pre><code>// Program.cs - in both projects of a Blazor Web App
-builder.Services.AddBitBaletteServices();</code></pre>
-<pre><code>&lt;!-- App.razor (or index.html): the stylesheet is linked by the host page --&gt;
-&lt;link rel="stylesheet" href="_content/Bit.Balette/bit-balette.css" /&gt;</code></pre>
-<pre><code>@@* MainLayout.razor *@@
-@@using Bit.Balette
-
-&lt;BaletteTrigger /&gt;
-&lt;BaletteCommands Commands="_commands" /&gt;
-&lt;Balette /&gt;
-
-@@code {
-    private readonly BaletteCommand[] _commands =
+@code {
+    // Queries the hero opens the palette with: fuzzy word starts, a nested page, and the three modes.
+    private static readonly (string Query, string Label)[] TryQueries =
     [
-        BaletteCmd.Navigate("Home", "/").Shortcut("G H"),
-        BaletteCmd.Action("Say hello", () =&gt; Console.WriteLine("Hello")),
+        ("rc", "Fuzzy: R and C at two word starts"),
+        ("theme", "A nested page - Enter opens it, Backspace comes back"),
+        (">", "Commands mode"),
+        ("#105", "Issues mode: an issue by number"),
+        ("@ada", "People mode: an async source"),
     ];
-}</code></pre>
-<p>
-    The stylesheet is not added for you: linking it yourself puts it before your own overrides in the cascade, and
-    leaving it out is how <code>Unstyled</code> starts from bare markup. The source code, the documentation and the
-    code of this demo are on
-    <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Balette" target="_blank" rel="noopener">GitHub</a>.
-</p>
 
-@code {
     protected override void OnInitialized() => State.Changed += Refresh;
 
     private void Refresh() => _ = InvokeAsync(StateHasChanged);
diff --git a/src/Utilities/Balette/Demo/Client/Pages/Keyboard.razor b/src/Utilities/Balette/Demo/Client/Pages/Keyboard.razor
index bdfcc0d6b98..68a77de75d3 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/Keyboard.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/Keyboard.razor
@@ -3,112 +3,138 @@
 @inject IBaletteService Palette
 @inject BaletteOptions Options
 
-<PageTitle>Keyboard and shortcuts - bit Balette</PageTitle>
-
-<h1>Keyboard &amp; shortcuts</h1>
-<p class="page-intro">
-    The palette is built to be driven without a mouse. Inside it every key has a job; outside it, any command can
-    carry a global shortcut - a chord such as <kbd>@Mod</kbd> <kbd>/</kbd> or a sequence such as <kbd>G</kbd> then
-    <kbd>S</kbd> - that runs it with the palette closed. Shortcuts are written once, as text, and displayed in the
-    platform's own symbols.
-</p>
-
-<h2 id="shortcuts">Inside the palette</h2>
-<table>
-    <thead>
-        <tr><th>Keys</th><th>Does</th></tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>
-                @foreach (var toggle in ToggleShortcuts)
-                {
-                    <BaletteShortcutHint Shortcut="toggle" IsMac="Palette.IsMac" Class="inline-hint" />
-                }
-            </td>
-            <td>Open or close (the toggle shortcuts of this app)</td>
-        </tr>
-        <tr><td><kbd>↑</kbd> <kbd>↓</kbd>, <kbd>Ctrl</kbd> <kbd>N</kbd> / <kbd>P</kbd>, <kbd>Ctrl</kbd> <kbd>J</kbd> / <kbd>K</kbd></td><td>Move, wrapping around at either end (J/K with <code>VimBindings</code>)</td></tr>
-        <tr><td><kbd>Home</kbd> <kbd>End</kbd> <kbd>PgUp</kbd> <kbd>PgDn</kbd></td><td>Jump to the first, the last, or ten rows on</td></tr>
-        <tr><td><kbd>Enter</kbd></td><td>Run, open a page, flip a toggle, or check a row on a multi-select page</td></tr>
-        <tr><td><kbd>@Mod</kbd> <kbd>Enter</kbd></td><td>Apply a multi-select page, or run the row's first secondary action</td></tr>
-        <tr><td><kbd>Tab</kbd>, <kbd>→</kbd> (empty box)</td><td>Open the action panel of the active row</td></tr>
-        <tr><td><kbd>Backspace</kbd>, <kbd>←</kbd> (empty box)</td><td>Back one page</td></tr>
-        <tr><td><kbd>Esc</kbd></td><td>Cancel a confirmation, then go back, then close</td></tr>
-        <tr><td><kbd>@Mod</kbd> <kbd>Shift</kbd> <kbd>P</kbd></td><td>Pin or unpin the active row</td></tr>
-        <tr><td><kbd>Shift</kbd> <kbd>Del</kbd></td><td>Forget the active row from the recents</td></tr>
-    </tbody>
-</table>
-
-<h2>Global shortcuts in this app</h2>
-<p>
-    Every command registered with a global shortcut, read from the registry right now - leave a page and its own
-    shortcuts disappear from this table, because they disappear from the palette. Close the palette and press one.
-</p>
-<div class="panel">
-    <table>
-        <thead>
-            <tr><th>Shortcut</th><th>Command</th><th>Group</th><th>Kind</th></tr>
-        </thead>
-        <tbody>
-            @foreach (var command in Palette.Commands.Where(c => c.Shortcut is not null && c.GlobalShortcut).OrderBy(c => c.Shortcut!.IsSequence).ThenBy(c => c.Group))
-            {
+<PageTitle>Keyboard and shortcuts · Balette</PageTitle>
+
+<div class="bb-intro">
+    <h1>Keyboard &amp; shortcuts</h1>
+    <p class="bb-subtitle">
+        The palette is built to be driven without a mouse. Inside it every key has a job; outside it, any command can
+        carry a global shortcut - a chord such as <kbd>@Mod</kbd> <kbd>/</kbd> or a sequence such as <kbd>G</kbd> then
+        <kbd>S</kbd> - that runs it with the palette closed. Shortcuts are written once, as text, and displayed in the
+        platform's own symbols.
+    </p>
+</div>
+
+<PaletteBar />
+
+<section class="bb-card" id="shortcuts">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Inside the palette</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Keys</th><th>Does</th></tr>
+            </thead>
+            <tbody>
                 <tr>
-                    <td><BaletteShortcutHint Shortcut="command.Shortcut" IsMac="Palette.IsMac" /></td>
-                    <td>@command.Title</td>
-                    <td class="muted">@command.Group</td>
-                    <td>@(command.Shortcut!.IsSequence ? "sequence" : "chord")</td>
+                    <td>
+                        @foreach (var toggle in ToggleShortcuts)
+                        {
+                            <BaletteShortcutHint Shortcut="toggle" IsMac="Palette.IsMac" Class="demo-inline-hint" />
+                        }
+                    </td>
+                    <td>Open or close (the toggle shortcuts of this app)</td>
                 </tr>
-            }
-            <tr>
-                <td><BaletteShortcutHint Shortcut="NewIssueShortcut" IsMac="Palette.IsMac" /></td>
-                <td>New issue</td>
-                <td class="muted">Quick create</td>
-                <td>chord, declared in markup</td>
-            </tr>
-        </tbody>
-    </table>
-    <div class="statusbar" role="status">
-        <span>Last run: <strong>@(_last ?? "nothing yet")</strong></span>
+                <tr><td><kbd>↑</kbd> <kbd>↓</kbd>, <kbd>Ctrl</kbd> <kbd>N</kbd> / <kbd>P</kbd>, <kbd>Ctrl</kbd> <kbd>J</kbd> / <kbd>K</kbd></td><td>Move, wrapping around at either end (J/K with <code>VimBindings</code>)</td></tr>
+                <tr><td><kbd>Home</kbd> <kbd>End</kbd> <kbd>PgUp</kbd> <kbd>PgDn</kbd></td><td>Jump to the first, the last, or ten rows on</td></tr>
+                <tr><td><kbd>Enter</kbd></td><td>Run, open a page, flip a toggle, or check a row on a multi-select page</td></tr>
+                <tr><td><kbd>@Mod</kbd> <kbd>Enter</kbd></td><td>Apply a multi-select page, or run the row's first secondary action</td></tr>
+                <tr><td><kbd>Tab</kbd>, <kbd>→</kbd> (empty box)</td><td>Open the action panel of the active row</td></tr>
+                <tr><td><kbd>Backspace</kbd>, <kbd>←</kbd> (empty box)</td><td>Back one page</td></tr>
+                <tr><td><kbd>Esc</kbd></td><td>Cancel a confirmation, then go back, then close</td></tr>
+                <tr><td><kbd>@Mod</kbd> <kbd>Shift</kbd> <kbd>P</kbd></td><td>Pin or unpin the active row</td></tr>
+                <tr><td><kbd>Shift</kbd> <kbd>Del</kbd></td><td>Forget the active row from the recents</td></tr>
+            </tbody>
+        </table>
     </div>
-</div>
-
-<h2>Typing is not a shortcut</h2>
-<p>
-    A plain key pressed in a text box is typing, so <kbd>G</kbd> then <kbd>S</kbd> does nothing here. A chord with a
-    modifier still works - <kbd>@Mod</kbd> <kbd>K</kbd> opens the palette and <kbd>Alt</kbd> <kbd>Z</kbd> flips word
-    wrap - because nobody types those by accident.
-</p>
-<label class="field try-box">
-    Try it
-    <input type="text" placeholder="Type g then s here…" aria-label="Typing area" />
-</label>
-
-<h2>The options behind it</h2>
-<table>
-    <thead>
-        <tr><th>Option</th><th>Here</th><th>Effect</th></tr>
-    </thead>
-    <tbody>
-        <tr><td><code>ToggleShortcut</code></td><td><code>@Options.ToggleShortcut</code></td><td>Opens and closes the palette; <code>Mod</code> is ⌘ on macOS and Ctrl elsewhere.</td></tr>
-        <tr><td><code>AdditionalToggleShortcuts</code></td><td><code>@string.Join(", ", Options.AdditionalToggleShortcuts)</code></td><td>More keys for the same.</td></tr>
-        <tr><td><code>SequenceTimeoutMs</code></td><td><code>@Options.SequenceTimeoutMs</code></td><td>How long <kbd>G</kbd> waits for the next key.</td></tr>
-        <tr><td><code>SuppressShortcutsInEditableElements</code></td><td><code>@Options.SuppressShortcutsInEditableElements</code></td><td>Plain keys in inputs are typing, as above.</td></tr>
-        <tr><td><code>VimBindings</code></td><td><code>@Options.VimBindings</code></td><td><kbd>Ctrl</kbd> <kbd>J</kbd> / <kbd>K</kbd> move inside the list.</td></tr>
-    </tbody>
-</table>
-<pre><code>@ShortcutExample</code></pre>
-
-<h2 id="accessibility">Accessibility</h2>
-<ul>
-    <li>A native <code>&lt;dialog&gt;</code>: the top layer, a focus trap, focus restored on close, and the page's scroll locked.</li>
-    <li>The WAI-ARIA combobox pattern: the input owns a listbox, <code>aria-activedescendant</code> follows the active row and
-        <code>aria-selected</code> marks it, so focus never leaves the input.</li>
-    <li>A polite live region announces how many results there are as the query changes.</li>
-    <li>Shortcut hints read the platform: ⌘ ⇧ ⌥ on macOS, Ctrl Shift Alt elsewhere, and <code>aria-keyshortcuts</code> on the trigger.</li>
-    <li>Mouse hover moves the active row only after the pointer actually moves, so a list that scrolls under a resting
-        pointer does not steal the selection from the keyboard.</li>
-</ul>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Global shortcuts in this app</h3>
+    <p>
+        Every command registered with a global shortcut, read from the registry right now - leave a page and its own
+        shortcuts disappear from this table, because they disappear from the palette. Close the palette and press one.
+    </p>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">The registry's shortcuts</span></div>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead>
+                    <tr><th>Shortcut</th><th>Command</th><th>Group</th><th>Kind</th></tr>
+                </thead>
+                <tbody>
+                    @foreach (var command in Palette.Commands.Where(c => c.Shortcut is not null && c.GlobalShortcut).OrderBy(c => c.Shortcut!.IsSequence).ThenBy(c => c.Group))
+                    {
+                        <tr>
+                            <td><BaletteShortcutHint Shortcut="command.Shortcut" IsMac="Palette.IsMac" /></td>
+                            <td>@command.Title</td>
+                            <td class="bb-soft">@command.Group</td>
+                            <td>@(command.Shortcut!.IsSequence ? "sequence" : "chord")</td>
+                        </tr>
+                    }
+                    <tr>
+                        <td><BaletteShortcutHint Shortcut="NewIssueShortcut" IsMac="Palette.IsMac" /></td>
+                        <td>New issue</td>
+                        <td class="bb-soft">Quick create</td>
+                        <td>chord, declared in markup</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="demo-statusbar" role="status">
+            <span>Last run: <strong>@(_last ?? "nothing yet")</strong></span>
+        </div>
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Typing is not a shortcut</h3>
+    <p>
+        A plain key pressed in a text box is typing, so <kbd>G</kbd> then <kbd>S</kbd> does nothing here. A chord with a
+        modifier still works - <kbd>@Mod</kbd> <kbd>K</kbd> opens the palette and <kbd>Alt</kbd> <kbd>Z</kbd> flips word
+        wrap - because nobody types those by accident.
+    </p>
+    <label class="bb-field demo-try-box">
+        Try it
+        <input type="text" placeholder="Type g then s here…" aria-label="Typing area" />
+    </label>
+    <div class="bb-note">
+        This site has a second palette: the documentation search in its header, which answers to <kbd>/</kbd> because
+        <kbd>@Mod</kbd> <kbd>K</kbd> is Balette's. Whichever of the two is open owns the keyboard - a chord pressed in the
+        docs search does not open Balette on top of it, and a <kbd>/</kbd> pressed in Balette does not open the search.
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The options behind it</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Option</th><th>Here</th><th>Effect</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key"><code>ToggleShortcut</code></td><td><code>@Options.ToggleShortcut</code></td><td>Opens and closes the palette; <code>Mod</code> is ⌘ on macOS and Ctrl elsewhere.</td></tr>
+                <tr><td class="bb-table-key"><code>AdditionalToggleShortcuts</code></td><td><code>@string.Join(", ", Options.AdditionalToggleShortcuts)</code></td><td>More keys for the same.</td></tr>
+                <tr><td class="bb-table-key"><code>SequenceTimeoutMs</code></td><td><code>@Options.SequenceTimeoutMs</code></td><td>How long <kbd>G</kbd> waits for the next key.</td></tr>
+                <tr><td class="bb-table-key"><code>SuppressShortcutsInEditableElements</code></td><td><code>@Options.SuppressShortcutsInEditableElements</code></td><td>Plain keys in inputs are typing, as above.</td></tr>
+                <tr><td class="bb-table-key"><code>VimBindings</code></td><td><code>@Options.VimBindings</code></td><td><kbd>Ctrl</kbd> <kbd>J</kbd> / <kbd>K</kbd> move inside the list.</td></tr>
+            </tbody>
+        </table>
+    </div>
+    <pre class="bb-code">@ShortcutExample</pre>
+</section>
+
+<section class="bb-card" id="accessibility">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Accessibility</h3>
+    <ul class="bb-detail-list">
+        <li>A native <code>&lt;dialog&gt;</code>: the top layer, a focus trap, focus restored on close, and the page's scroll locked.</li>
+        <li>The WAI-ARIA combobox pattern: the input owns a listbox, <code>aria-activedescendant</code> follows the active row and
+            <code>aria-selected</code> marks it, so focus never leaves the input.</li>
+        <li>A polite live region announces how many results there are as the query changes.</li>
+        <li>Shortcut hints read the platform: ⌘ ⇧ ⌥ on macOS, Ctrl Shift Alt elsewhere, and <code>aria-keyshortcuts</code> on the trigger.</li>
+        <li>Mouse hover moves the active row only after the pointer actually moves, so a list that scrolls under a resting
+            pointer does not steal the selection from the keyboard.</li>
+    </ul>
+</section>
 
 @code {
     private const string ShortcutExample = """
diff --git a/src/Utilities/Balette/Demo/Client/Pages/McpServer.razor b/src/Utilities/Balette/Demo/Client/Pages/McpServer.razor
index 3d15463f0ec..9acc04b8e39 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/McpServer.razor
@@ -3,18 +3,19 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - bit Balette</PageTitle>
+<PageTitle>MCP server · Balette</PageTitle>
 
-<h1>MCP server</h1>
-
-<p class="page-intro">
-    This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent adding a command palette with
-    Bit.Balette reads the library itself - its compiled API documentation, its guide, its stylesheet's variables, its
-    real matcher and these demo pages - instead of guessing at an API it half remembers. Every tool is read-only.
-</p>
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
+        This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent adding a command palette with
+        Bit.Balette reads the library itself - its compiled API documentation, its guide, its stylesheet's variables, its
+        real matcher and these demo pages - instead of guessing at an API it half remembers. Every tool is read-only.
+    </p>
+</div>
 
-<div class="panel padded">
-    <h2>Connect a client</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
@@ -22,71 +23,73 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre class="output"><code>@ClientConfig</code></pre>
-</div>
+    <pre class="bb-code">@ClientConfig</pre>
+</section>
 
-<div class="panel padded">
-    <h2>Tools</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
-    <table>
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code>SearchBalette</code></td>
-                <td>Everything at once - the guide, every public member, the theme variables, the setup guides and the demo sources - each hit with the exact follow-up call.</td>
-            </tr>
-            <tr>
-                <td><code>GetBaletteSetupGuide</code></td>
-                <td>The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid.</td>
-            </tr>
-            <tr>
-                <td><code>GetBaletteGuideSection</code></td>
-                <td>One section of the reference guide, or the index of sections.</td>
-            </tr>
-            <tr>
-                <td><code>GetBaletteApi</code></td>
-                <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
-            </tr>
-            <tr>
-                <td><code>GetBaletteThemeVariables</code></td>
-                <td>Every <code>--bit-balette-*</code> custom property with its light and dark value, and the <code>data-balette</code> attributes to style an unstyled palette by.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBaletteSearch</code></td>
-                <td>Runs the library's own matcher and ranker over a query and a list of commands, and reports each score, the highlighted positions and the final order.</td>
-            </tr>
-            <tr>
-                <td><code>GetBaletteSourceFile</code></td>
-                <td>One demo or library file verbatim - every page here is a working palette feature - or the index of files.</td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bb-table-key"><code>SearchBalette</code></td>
+                    <td>Everything at once - the guide, every public member, the theme variables, the setup guides and the demo sources - each hit with the exact follow-up call.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBaletteSetupGuide</code></td>
+                    <td>The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBaletteGuideSection</code></td>
+                    <td>One section of the reference guide, or the index of sections.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBaletteApi</code></td>
+                    <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBaletteThemeVariables</code></td>
+                    <td>Every <code>--bit-balette-*</code> custom property with its light and dark value, and the <code>data-balette</code> attributes to style an unstyled palette by.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>InspectBaletteSearch</code></td>
+                    <td>Runs the library's own matcher and ranker over a query and a list of commands, and reports each score, the highlighted positions and the final order.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBaletteSourceFile</code></td>
+                    <td>One demo or library file verbatim - every page here is a working palette feature - or the index of files.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 
     <p>
         The guide, the API, the theme variables and the sources are also exposed as <code>balette://</code> resources,
         and three prompts - <code>add-balette-to-app</code>, <code>implement-balette-feature</code> and
         <code>debug-balette-palette</code> - walk an agent through the common jobs in the right order.
     </p>
-</div>
+</section>
 
-<div class="panel padded">
-    <h2>The same tools over plain HTTP</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
+    <ul class="bb-detail-list">
         <li><a href="/api/mcp/SearchBalette?query=nested%20page%20prompt" target="_blank" rel="noopener">/api/mcp/SearchBalette?query=nested page prompt</a></li>
         <li><a href="/api/mcp/GetBaletteApi?typeName=Balette" target="_blank" rel="noopener">/api/mcp/GetBaletteApi?typeName=Balette</a></li>
         <li><a href="/api/mcp/GetBaletteThemeVariables" target="_blank" rel="noopener">/api/mcp/GetBaletteThemeVariables</a></li>
         <li><a href="/api/mcp/InspectBaletteSearch?query=rc" target="_blank" rel="noopener">/api/mcp/InspectBaletteSearch?query=rc</a></li>
         <li><a href="/api/mcp/GetBaletteSourceFile?path=Demo/Client/Services/DemoCommands.cs" target="_blank" rel="noopener">/api/mcp/GetBaletteSourceFile?path=Demo/Client/Services/DemoCommands.cs</a></li>
     </ul>
-</div>
+</section>
 
 @code {
     private const string ClientConfig = """
diff --git a/src/Utilities/Balette/Demo/Client/Pages/Modes.razor b/src/Utilities/Balette/Demo/Client/Pages/Modes.razor
index 6934ec7da60..df18934efd8 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/Modes.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/Modes.razor
@@ -4,133 +4,148 @@
 @inject BaletteOptions Options
 @inject SourceLog SourceLog
 
-<PageTitle>Modes and sources - bit Balette</PageTitle>
-
-<h1>Modes &amp; sources</h1>
-<p class="page-intro">
-    A mode is a prefix typed at the start of the query - <code>&gt;</code> in VS Code, <code>#</code> on GitHub - that
-    scopes the palette to part of the registry, to its own asynchronous sources, or both. A source is anything that
-    answers a query later: an API, a database, a search index. The palette debounces it, cancels it when the query
-    moves on, and merges what it returns.
-</p>
-
-<h2>The modes of this app</h2>
-<div class="panel">
-    <table>
-        <thead>
-            <tr><th>Prefix</th><th>Mode</th><th>Lists</th><th>Sources</th><th></th></tr>
-        </thead>
-        <tbody>
-            @foreach (var mode in Palette.Modes)
-            {
-                <tr>
-                    <td><code>@mode.Prefix</code></td>
-                    <td>
-                        <strong>@mode.Name</strong>
-                        <div class="muted small">@mode.Description</div>
-                    </td>
-                    <td>@Scope(mode)</td>
-                    <td>@(mode.Sources.Count == 0 ? "-" : string.Join(", ", mode.Sources.Select(s => s.Name)))</td>
-                    <td><button type="button" class="btn" @onclick="() => Palette.OpenAsync(mode.Prefix)">Open</button></td>
-                </tr>
-            }
-        </tbody>
-    </table>
+<PageTitle>Modes and sources · Balette</PageTitle>
+
+<div class="bb-intro">
+    <h1>Modes &amp; sources</h1>
+    <p class="bb-subtitle">
+        A mode is a prefix typed at the start of the query - <code>&gt;</code> in VS Code, <code>#</code> on GitHub - that
+        scopes the palette to part of the registry, to its own asynchronous sources, or both. A source is anything that
+        answers a query later: an API, a database, a search index. The palette debounces it, cancels it when the query
+        moves on, and merges what it returns.
+    </p>
 </div>
 
-<p>
-    On the empty query the palette lists every mode as a hint under <em>Modes</em>, so they can be discovered without
-    reading this page; picking a hint types its prefix. <code>ShowHint = false</code> keeps a mode out of that list.
-</p>
-
-<h2 id="sources">The sources</h2>
-<div class="panel">
-    <table>
-        <thead>
-            <tr><th>Source</th><th>Asked in</th><th class="num">From</th><th class="num">At most</th><th>Order</th><th class="num">Latency</th></tr>
-        </thead>
-        <tbody>
-            @foreach (var (source, where) in AllSources())
-            {
-                <tr>
-                    <td><strong>@source.Name</strong></td>
-                    <td>@where</td>
-                    <td class="num">@(source.MinQueryLength == 0 ? "empty box" : $"{source.MinQueryLength} char{(source.MinQueryLength == 1 ? "" : "s")}")</td>
-                    <td class="num">@source.MaxResults</td>
-                    <td>@(source.ApplyMatcher ? "re-ranked with the registry" : "its own, as one block")</td>
-                    <td class="num">@(Latency.TryGetValue(source.Name, out var ms) ? $"{ms} ms" : "-")</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-</div>
-
-<div class="split">
-    <div>
-        <h3>Re-ranked</h3>
-        <p>
-            With <code>ApplyMatcher</code> the palette scores what a source returns with its own matcher and sorts it in
-            with everything else. The source only has to return candidates, and its rows are highlighted like the rest.
-            <em>People</em> and <em>Documentation</em> work this way.
-        </p>
+<PaletteBar />
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The modes of this app</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Prefix</th><th>Mode</th><th>Lists</th><th>Sources</th><th></th></tr>
+            </thead>
+            <tbody>
+                @foreach (var mode in Palette.Modes)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@mode.Prefix</code></td>
+                        <td>
+                            <strong>@mode.Name</strong>
+                            <div class="bb-soft demo-small">@mode.Description</div>
+                        </td>
+                        <td>@Scope(mode)</td>
+                        <td>@(mode.Sources.Count == 0 ? "-" : string.Join(", ", mode.Sources.Select(s => s.Name)))</td>
+                        <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick="() => Palette.OpenAsync(mode.Prefix)">Open</button></td>
+                    </tr>
+                }
+            </tbody>
+        </table>
     </div>
-    <div>
-        <h3>Ordered</h3>
-        <p>
-            Without it, the source's order is kept and its rows are listed as one block under its name - right for a
-            server that already sorts by relevance. <em>Issues</em> puts open issues first, newest first, and asks on the
-            empty query too, so <code>#</code> opens on a list.
-        </p>
+    <p>
+        On the empty query the palette lists every mode as a hint under <em>Modes</em>, so they can be discovered without
+        reading this page; picking a hint types its prefix. <code>ShowHint = false</code> keeps a mode out of that list.
+    </p>
+</section>
+
+<section class="bb-card" id="sources">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The sources</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Source</th><th>Asked in</th><th class="demo-num">From</th><th class="demo-num">At most</th><th>Order</th><th class="demo-num">Latency</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var (source, where) in AllSources())
+                {
+                    <tr>
+                        <td class="bb-table-key">@source.Name</td>
+                        <td>@where</td>
+                        <td class="demo-num">@(source.MinQueryLength == 0 ? "empty box" : $"{source.MinQueryLength} char{(source.MinQueryLength == 1 ? "" : "s")}")</td>
+                        <td class="demo-num">@source.MaxResults</td>
+                        <td>@(source.ApplyMatcher ? "re-ranked with the registry" : "its own, as one block")</td>
+                        <td class="demo-num">@(Latency.TryGetValue(source.Name, out var ms) ? $"{ms} ms" : "-")</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
     </div>
-</div>
 
-<h2>Debounced and cancelled, live</h2>
-<p>
-    Open the palette and type <code>@@ada lovelace</code> at your normal speed. The palette waits
-    <strong>@Options.DebounceMs ms</strong> after the last keystroke before it asks a source, so most keystrokes never
-    reach one; a search still running when the next one starts is cancelled through its token. Every call that did
-    reach a source is listed here, newest first.
-</p>
-
-<div class="panel">
-    <div class="toolbar">
-        <button type="button" class="btn" @onclick="@(() => Palette.OpenAsync("@"))">Open in People mode</button>
-        <button type="button" class="btn" @onclick='() => Palette.OpenAsync("#")'>Open in Issues mode</button>
-        <button type="button" class="btn" @onclick='() => Palette.OpenAsync("theming")'>Search "theming" (documentation)</button>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" disabled="@(SourceLog.Calls.Count == 0)" @onclick="SourceLog.Clear">Clear</button>
+    <div class="bb-split">
+        <div class="bb-card">
+            <h4 class="demo-card-heading">Re-ranked</h4>
+            <p class="bb-card-desc">
+                With <code>ApplyMatcher</code> the palette scores what a source returns with its own matcher and sorts it in
+                with everything else. The source only has to return candidates, and its rows are highlighted like the rest.
+                <em>People</em> and <em>Documentation</em> work this way.
+            </p>
+        </div>
+        <div class="bb-card">
+            <h4 class="demo-card-heading">Ordered</h4>
+            <p class="bb-card-desc">
+                Without it, the source's order is kept and its rows are listed as one block under its name - right for a
+                server that already sorts by relevance. <em>Issues</em> puts open issues first, newest first, and asks on the
+                empty query too, so <code>#</code> opens on a list.
+            </p>
+        </div>
     </div>
-    <table>
-        <thead>
-            <tr><th>Started</th><th>Source</th><th>Query</th><th>Outcome</th><th class="num">Results</th><th class="num">Took</th></tr>
-        </thead>
-        <tbody>
-            @if (SourceLog.Calls.Count == 0)
-            {
-                <tr><td colspan="6" class="muted">No source has been asked yet.</td></tr>
-            }
-            @foreach (var call in SourceLog.Calls)
-            {
-                <tr>
-                    <td class="muted">@call.StartedAt.ToString("HH:mm:ss.fff")</td>
-                    <td>@call.Source</td>
-                    <td><code>@(call.Query.Length == 0 ? "(empty)" : call.Query)</code></td>
-                    <td><span class="badge @(call.Outcome == SourceCallOutcome.Completed ? "on" : null)">@call.Outcome</span></td>
-                    <td class="num">@(call.Outcome == SourceCallOutcome.Completed ? call.ResultCount.ToString() : "-")</td>
-                    <td class="num">@(call.Outcome == SourceCallOutcome.Running ? "-" : $"{call.Duration.TotalMilliseconds:0} ms")</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-</div>
-
-<h2>Registering them</h2>
-<pre><code>@RegistrationExample</code></pre>
-<p>
-    Sources in <code>options.Sources</code> are asked in the default mode; a mode's own <code>Sources</code> only in that
-    mode. <code>IBaletteService.RegisterMode</code> and <code>RegisterSource</code> add either at runtime and return a
-    handle that removes it again, and <code>AddBitBaletteSource&lt;T&gt;()</code> registers a source resolved from DI.
-</p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Debounced and cancelled, live</h3>
+    <p>
+        Open the palette and type <code>@@ada lovelace</code> at your normal speed. The palette waits
+        <strong>@Options.DebounceMs ms</strong> after the last keystroke before it asks a source, so most keystrokes never
+        reach one; a search still running when the next one starts is cancelled through its token. Every call that did
+        reach a source is listed here, newest first.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Source calls</span>
+            <button type="button" class="btn btn-secondary" disabled="@(SourceLog.Calls.Count == 0)" @onclick="SourceLog.Clear">Clear</button>
+        </div>
+        <div class="bb-try">
+            <button type="button" class="btn btn-secondary" @onclick="@(() => Palette.OpenAsync("@"))">Open in People mode</button>
+            <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync("#")'>Open in Issues mode</button>
+            <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync("theming")'>Search "theming" (documentation)</button>
+        </div>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead>
+                    <tr><th>Started</th><th>Source</th><th>Query</th><th>Outcome</th><th class="demo-num">Results</th><th class="demo-num">Took</th></tr>
+                </thead>
+                <tbody>
+                    @if (SourceLog.Calls.Count == 0)
+                    {
+                        <tr><td colspan="6" class="bb-muted">No source has been asked yet.</td></tr>
+                    }
+                    @foreach (var call in SourceLog.Calls)
+                    {
+                        <tr>
+                            <td class="bb-nowrap">@call.StartedAt.ToString("HH:mm:ss.fff")</td>
+                            <td>@call.Source</td>
+                            <td><code>@(call.Query.Length == 0 ? "(empty)" : call.Query)</code></td>
+                            <td><span class="@OutcomeBadge(call.Outcome)">@call.Outcome</span></td>
+                            <td class="demo-num">@(call.Outcome == SourceCallOutcome.Completed ? call.ResultCount.ToString() : "-")</td>
+                            <td class="demo-num">@(call.Outcome == SourceCallOutcome.Running ? "-" : $"{call.Duration.TotalMilliseconds:0} ms")</td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Registering them</h3>
+    <pre class="bb-code">@RegistrationExample</pre>
+    <p>
+        Sources in <code>options.Sources</code> are asked in the default mode; a mode's own <code>Sources</code> only in that
+        mode. <code>IBaletteService.RegisterMode</code> and <code>RegisterSource</code> add either at runtime and return a
+        handle that removes it again, and <code>AddBitBaletteSource&lt;T&gt;()</code> registers a source resolved from DI.
+    </p>
+</section>
 
 @code {
     private const string RegistrationExample = """
@@ -194,6 +209,13 @@
         }
     }
 
+    private static string OutcomeBadge(SourceCallOutcome outcome) => outcome switch
+    {
+        SourceCallOutcome.Completed => "bb-badge bb-badge-success",
+        SourceCallOutcome.Cancelled => "bb-badge bb-badge-warn",
+        _ => "bb-badge",
+    };
+
     private static string Scope(BaletteCommandMode mode)
     {
         if (mode.HideRegistryCommands)
diff --git a/src/Utilities/Balette/Demo/Client/Pages/NotFound.razor b/src/Utilities/Balette/Demo/Client/Pages/NotFound.razor
index 67ce041ab03..5fc4a34eac5 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/NotFound.razor
@@ -1,9 +1,17 @@
 @page "/not-found"
 @layout MainLayout
 
-<PageTitle>Not found - bit Balette</PageTitle>
-<h1>Not found</h1>
-<p class="page-intro">
-    There is nothing at this address. <a href="">Back to the introduction</a>, or press <kbd>Ctrl</kbd> <kbd>K</kbd> and
-    search for the page you were after.
-</p>
+<PageTitle>Not found · Balette</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">
+        Looking for something specific? Press <kbd>Ctrl</kbd> <kbd>K</kbd> to search the app with Balette, or <kbd>/</kbd>
+        to search the docs.
+    </p>
+</div>
diff --git a/src/Utilities/Balette/Demo/Client/Pages/PagesAndFlows.razor b/src/Utilities/Balette/Demo/Client/Pages/PagesAndFlows.razor
index ad6d5535bfd..4d894f522a6 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/PagesAndFlows.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/PagesAndFlows.razor
@@ -3,122 +3,137 @@
 @inject IBaletteService Palette
 @inject DemoState State
 
-<PageTitle>Nested pages and flows - bit Balette</PageTitle>
+<PageTitle>Nested pages and flows · Balette</PageTitle>
 
-<h1>Nested pages &amp; flows</h1>
-<p class="page-intro">
-    A palette is more than a list: a command can open a page of further commands, ask for text, collect a selection or
-    ask to be confirmed, and every one of those steps happens inside the same box, with breadcrumbs above it and
-    <kbd>Esc</kbd> or <kbd>Backspace</kbd> to step back. Each button below opens the layout's palette on one of them.
-</p>
-
-<div class="panel">
-    <table>
-        <thead>
-            <tr><th>Flow</th><th>Declared with</th><th>In this app</th><th></th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Static page</td>
-                <td><code>.Children(a, b, c)</code></td>
-                <td><em>Theme</em> - three options, the current one checked</td>
-                <td><button type="button" class="btn" @onclick='() => Palette.OpenAsync(pageCommandId: "preferences.theme")'>Open</button></td>
-            </tr>
-            <tr>
-                <td>Lazy page</td>
-                <td><code>.Children(async (ctx, ct) =&gt; ...)</code></td>
-                <td><em>Assign to…</em> - loads people for 400 ms, with a spinner</td>
-                <td><button type="button" class="btn" @onclick='() => Palette.OpenAsync(pageCommandId: "actions.assign-to")'>Open</button></td>
-            </tr>
-            <tr>
-                <td>Declarative page</td>
-                <td>Nested <code>&lt;BaletteItem&gt;</code></td>
-                <td><em>New…</em> in <em>Quick create</em></td>
-                <td><button type="button" class="btn" @onclick='() => Palette.OpenAsync(pageCommandId: "quick-create.new")'>Open</button></td>
-            </tr>
-            <tr>
-                <td>Ad-hoc page</td>
-                <td><code>BaletteCommandResult.Page(...)</code></td>
-                <td><em>Export…</em> - the handler decides the list, one row disabled</td>
-                <td><button type="button" class="btn" @onclick='() => Palette.ExecuteAsync("actions.export")'>Run</button></td>
-            </tr>
-            <tr>
-                <td>Prompt</td>
-                <td><code>BaletteCommandResult.Prompt(...)</code></td>
-                <td><em>Rename project…</em> - pre-filled with the current name</td>
-                <td><button type="button" class="btn" @onclick='() => Palette.ExecuteAsync("actions.rename-project")'>Run</button></td>
-            </tr>
-            <tr>
-                <td>Multi-select</td>
-                <td><code>.MultiSelect()</code></td>
-                <td><em>Set labels…</em> - <kbd>Enter</kbd> checks, <kbd>Ctrl</kbd> <kbd>Enter</kbd> applies</td>
-                <td><button type="button" class="btn" @onclick='() => Palette.OpenAsync(pageCommandId: "actions.set-labels")'>Open</button></td>
-            </tr>
-            <tr>
-                <td>Confirmation</td>
-                <td><code>.Destructive("message")</code></td>
-                <td><em>Delete project</em> - the first <kbd>Enter</kbd> asks, the second runs</td>
-                <td><button type="button" class="btn" @onclick='() => Palette.OpenAsync("delete project")'>Search</button></td>
-            </tr>
-            <tr>
-                <td>Toast</td>
-                <td><code>BaletteCommandResult.Toast(...)</code></td>
-                <td><em>What's new</em> - a message in the footer, palette kept open</td>
-                <td><button type="button" class="btn" @onclick='() => Palette.ExecuteAsync("help.what-s-new")'>Run</button></td>
-            </tr>
-            <tr>
-                <td>Action panel</td>
-                <td><code>.Actions(...)</code></td>
-                <td>Any row: press <kbd>Tab</kbd>. People rows add their own two actions</td>
-                <td><button type="button" class="btn" @onclick="@(() => Palette.OpenAsync("@ada"))">Search</button></td>
-            </tr>
-        </tbody>
-    </table>
+<div class="bb-intro">
+    <h1>Nested pages &amp; flows</h1>
+    <p class="bb-subtitle">
+        A palette is more than a list: a command can open a page of further commands, ask for text, collect a selection or
+        ask to be confirmed, and every one of those steps happens inside the same box, with breadcrumbs above it and
+        <kbd>Esc</kbd> or <kbd>Backspace</kbd> to step back. Each button below opens this site's palette on one of them.
+    </p>
 </div>
 
-<p class="muted" role="status">
-    Project: <strong>@State.ProjectName</strong> · Labels: <strong>@(State.Labels.Count == 0 ? "none" : string.Join(", ", State.Labels))</strong>
-    · Last: <strong>@(State.Log.Count == 0 ? "nothing yet" : State.Log[0])</strong>
-</p>
+<PaletteBar />
 
-<h2>What a handler returns</h2>
-<p>
-    A handler does its work and then tells the palette what comes next. That is what keeps a multi-step flow in one
-    place: the next step is a return value, not a callback wired up somewhere else.
-</p>
-<table>
-    <thead>
-        <tr><th>Result</th><th>What the palette does</th></tr>
-    </thead>
-    <tbody>
-        <tr><td><code>Close</code></td><td>Closes. The default for <code>Handler(Action)</code> and for navigation.</td></tr>
-        <tr><td><code>KeepOpen</code></td><td>Stays on the current page and re-renders it - the toggles use it.</td></tr>
-        <tr><td><code>Back</code></td><td>Goes back one page - the theme options use it to land on the list again.</td></tr>
-        <tr><td><code>Reset</code></td><td>Clears the query and returns to the root page, still open.</td></tr>
-        <tr><td><code>Page(title, commands)</code></td><td>Pushes a page with these commands; optionally multi-select with its own submit handler.</td></tr>
-        <tr><td><code>Prompt(title, onSubmit)</code></td><td>Turns the input into a text field; Enter calls <code>onSubmit</code> with <code>ctx.PromptValue</code>.</td></tr>
-        <tr><td><code>Toast(message)</code></td><td>Shows a message in the footer, then closes - or stays, with <code>keepOpen: true</code>.</td></tr>
-    </tbody>
-</table>
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">The flows of this app</span></div>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Flow</th><th>Declared with</th><th>In this app</th><th></th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bb-table-key">Static page</td>
+                    <td><code>.Children(a, b, c)</code></td>
+                    <td><em>Theme</em> - three options, the current one checked</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync(pageCommandId: "preferences.theme")'>Open</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Lazy page</td>
+                    <td><code>.Children(async (ctx, ct) =&gt; ...)</code></td>
+                    <td><em>Assign to…</em> - loads people for 400 ms, with a spinner</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync(pageCommandId: "actions.assign-to")'>Open</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Declarative page</td>
+                    <td>Nested <code>&lt;BaletteItem&gt;</code></td>
+                    <td><em>New…</em> in <em>Quick create</em></td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync(pageCommandId: "quick-create.new")'>Open</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Ad-hoc page</td>
+                    <td><code>BaletteCommandResult.Page(...)</code></td>
+                    <td><em>Export…</em> - the handler decides the list, one row disabled</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.ExecuteAsync("actions.export")'>Run</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Prompt</td>
+                    <td><code>BaletteCommandResult.Prompt(...)</code></td>
+                    <td><em>Rename project…</em> - pre-filled with the current name</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.ExecuteAsync("actions.rename-project")'>Run</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Multi-select</td>
+                    <td><code>.MultiSelect()</code></td>
+                    <td><em>Set labels…</em> - <kbd>Enter</kbd> checks, <kbd>Ctrl</kbd> <kbd>Enter</kbd> applies</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync(pageCommandId: "actions.set-labels")'>Open</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Confirmation</td>
+                    <td><code>.Destructive("message")</code></td>
+                    <td><em>Delete project</em> - the first <kbd>Enter</kbd> asks, the second runs</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync("delete project")'>Search</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Toast</td>
+                    <td><code>BaletteCommandResult.Toast(...)</code></td>
+                    <td><em>What's new</em> - a message in the footer, palette kept open</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick='() => Palette.ExecuteAsync("help.what-s-new")'>Run</button></td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Action panel</td>
+                    <td><code>.Actions(...)</code></td>
+                    <td>Any row: press <kbd>Tab</kbd>. People rows add their own two actions</td>
+                    <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick="@(() => Palette.OpenAsync("@ada"))">Search</button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <p class="bb-muted demo-small" role="status">
+        Project: <strong>@State.ProjectName</strong> · Labels: <strong>@(State.Labels.Count == 0 ? "none" : string.Join(", ", State.Labels))</strong>
+        · Last: <strong>@(State.Log.Count == 0 ? "nothing yet" : State.Log[0])</strong>
+    </p>
+</div>
 
-<h2>A prompt</h2>
-<pre><code>@PromptExample</code></pre>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What a handler returns</h3>
+    <p>
+        A handler does its work and then tells the palette what comes next. That is what keeps a multi-step flow in one
+        place: the next step is a return value, not a callback wired up somewhere else.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Result</th><th>What the palette does</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key"><code>Close</code></td><td>Closes. The default for <code>Handler(Action)</code> and for navigation.</td></tr>
+                <tr><td class="bb-table-key"><code>KeepOpen</code></td><td>Stays on the current page and re-renders it - the toggles use it.</td></tr>
+                <tr><td class="bb-table-key"><code>Back</code></td><td>Goes back one page - the theme options use it to land on the list again.</td></tr>
+                <tr><td class="bb-table-key"><code>Reset</code></td><td>Clears the query and returns to the root page, still open.</td></tr>
+                <tr><td class="bb-table-key"><code>Page(title, commands)</code></td><td>Pushes a page with these commands; optionally multi-select with its own submit handler.</td></tr>
+                <tr><td class="bb-table-key"><code>Prompt(title, onSubmit)</code></td><td>Turns the input into a text field; Enter calls <code>onSubmit</code> with <code>ctx.PromptValue</code>.</td></tr>
+                <tr><td class="bb-table-key"><code>Toast(message)</code></td><td>Shows a message in the footer, then closes - or stays, with <code>keepOpen: true</code>.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</section>
 
-<h2>A multi-select page</h2>
-<pre><code>@MultiSelectExample</code></pre>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A prompt</h3>
+    <pre class="bb-code">@PromptExample</pre>
+</section>
 
-<h2>A lazy page</h2>
-<p>
-    The provider runs each time the page opens, with a context whose <code>Services</code> come from the user's
-    scope - which is how a real application would reach its API client from here.
-</p>
-<pre><code>@LazyExample</code></pre>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A multi-select page</h3>
+    <pre class="bb-code">@MultiSelectExample</pre>
+</section>
 
-<div class="note">
-    <code>OpenAsync(pageCommandId: ...)</code> opens straight inside a registered command's page, and
-    <code>BaletteTrigger</code> takes the same <code>PageCommandId</code>: a "Change theme" button can be a trigger
-    that lands on the theme options rather than on the root list.
-</div>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A lazy page</h3>
+    <p>
+        The provider runs each time the page opens, with a context whose <code>Services</code> come from the user's
+        scope - which is how a real application would reach its API client from here.
+    </p>
+    <pre class="bb-code">@LazyExample</pre>
+    <div class="bb-note">
+        <code>OpenAsync(pageCommandId: ...)</code> opens straight inside a registered command's page, and
+        <code>BaletteTrigger</code> takes the same <code>PageCommandId</code>: a "Change theme" button can be a trigger
+        that lands on the theme options rather than on the root list.
+    </div>
+</section>
 
 @code {
     private const string PromptExample = """
diff --git a/src/Utilities/Balette/Demo/Client/Pages/Performance.razor b/src/Utilities/Balette/Demo/Client/Pages/Performance.razor
index 5cc8acfdc9e..694f2dd1c01 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/Performance.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/Performance.razor
@@ -7,18 +7,27 @@
 @inject BaletteRanker Ranker
 @inject DemoState State
 
-<PageTitle>Large registry - bit Balette</PageTitle>
-
-<h1>Large registry</h1>
-<p class="page-intro">
-    Numbers measured here, in your browser, on this machine. Register a few thousand synthetic commands, open the
-    palette and type: every keystroke matches all of them. The table below times the same matcher and ranker the
-    palette runs, over the same registry, so you can see what a keystroke costs before you feel it.
-</p>
-
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Registry controls">
-        <label class="field">
+<PageTitle>Large registry · Balette</PageTitle>
+
+<div class="bb-intro">
+    <h1>Large registry</h1>
+    <p class="bb-subtitle">
+        Numbers measured here, in your browser, on this machine. Register a few thousand synthetic commands, open the
+        palette and type: every keystroke matches all of them. The table below times the same matcher and ranker the
+        palette runs, over the same registry, so you can see what a keystroke costs before you feel it.
+    </p>
+</div>
+
+<PaletteBar />
+
+<div class="bb-demo">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Registry</span>
+        <button type="button" class="btn btn-secondary" @onclick='() => Palette.OpenAsync("cmd 1234")'>Open with "cmd 1234"</button>
+    </div>
+
+    <div class="bb-fields" role="toolbar" aria-label="Registry controls">
+        <label class="bb-field">
             Commands
             <select value="@_count" @onchange="OnCountChanged" disabled="@(_bulk is not null)" aria-label="Number of commands">
                 <option value="500">500</option>
@@ -26,69 +35,72 @@
                 <option value="10000">10,000</option>
             </select>
         </label>
-        <button type="button" class="btn primary" disabled="@_busy" @onclick="ToggleBulk">@(_bulk is null ? $"Register {_count:N0} commands" : "Unregister them")</button>
-        <button type="button" class="btn" disabled="@_busy" @onclick="MeasureAsync">Measure searches</button>
-        <div class="toolbar-separator"></div>
-        <label class="field">
+        <button type="button" class="btn btn-primary" disabled="@_busy" @onclick="ToggleBulk">@(_bulk is null ? $"Register {_count:N0} commands" : "Unregister them")</button>
+        <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="MeasureAsync">Measure searches</button>
+        <label class="bb-check">
             <input type="checkbox" checked="@State.Virtualize" @onchange="() => State.SetVirtualize(!State.Virtualize)" />
             Virtualize the list
         </label>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" @onclick='() => Palette.OpenAsync("cmd 1234")'>Open with "cmd 1234"</button>
     </div>
 
-    <div class="statusbar" role="status">
-        <span>Registry: <strong>@Palette.Commands.Count.ToString("N0", CultureInfo.InvariantCulture)</strong> commands</span>
-        @if (_registration is { } registration)
-        {
-            <span>Last registration: <strong>@Ms(registration)</strong>, the palette's rebuild included</span>
-        }
-        @if (_busy)
-        {
-            <span><strong>Measuring…</strong></span>
-        }
+    <div class="bb-stats" role="status">
+        <div class="bb-stat">
+            <span class="bb-stat-value">@Palette.Commands.Count.ToString("N0", CultureInfo.InvariantCulture)</span>
+            <span class="bb-stat-label">Commands in the registry</span>
+        </div>
+        <div class="bb-stat">
+            <span class="bb-stat-value">@(_registration is { } registration ? Ms(registration) : "-")</span>
+            <span class="bb-stat-label">Last registration, rebuild included</span>
+        </div>
+        <div class="bb-stat">
+            <span class="bb-stat-value">@(_busy ? "Measuring…" : _results.Count == 0 ? "-" : $"{_results.Count} queries")</span>
+            <span class="bb-stat-label">Measured</span>
+        </div>
     </div>
-</div>
 
-@if (_results.Count > 0)
-{
-    <h2>Measurements</h2>
-    <table>
-        <thead>
-            <tr><th>Query</th><th class="num">Matched</th><th class="num">Match</th><th class="num">Rank</th><th class="num">Total</th></tr>
-        </thead>
-        <tbody>
-            @foreach (var result in _results)
-            {
-                <tr>
-                    <td><code>@result.Query</code></td>
-                    <td class="num">@result.Matched.ToString("N0", CultureInfo.InvariantCulture)</td>
-                    <td class="num">@Ms(result.Match)</td>
-                    <td class="num">@Ms(result.Rank)</td>
-                    <td class="num"><strong>@Ms(result.Match + result.Rank)</strong></td>
-                </tr>
-            }
-        </tbody>
-    </table>
-    <p class="muted small">
-        The median of @Repetitions runs over @_measuredOver.ToString("N0", CultureInfo.InvariantCulture) root commands. The
-        ranking here sorts every match; the palette keeps only the best @Options.MaxResults, which is cheaper still.
-    </p>
-}
+    @if (_results.Count > 0)
+    {
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead>
+                    <tr><th>Query</th><th class="demo-num">Matched</th><th class="demo-num">Match</th><th class="demo-num">Rank</th><th class="demo-num">Total</th></tr>
+                </thead>
+                <tbody>
+                    @foreach (var result in _results)
+                    {
+                        <tr>
+                            <td class="bb-table-key"><code>@result.Query</code></td>
+                            <td class="demo-num">@result.Matched.ToString("N0", CultureInfo.InvariantCulture)</td>
+                            <td class="demo-num">@Ms(result.Match)</td>
+                            <td class="demo-num">@Ms(result.Rank)</td>
+                            <td class="demo-num"><strong>@Ms(result.Match + result.Rank)</strong></td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+        <p class="bb-soft demo-small">
+            The median of @Repetitions runs over @_measuredOver.ToString("N0", CultureInfo.InvariantCulture) root commands. The
+            ranking here sorts every match; the palette keeps only the best @Options.MaxResults, which is cheaper still.
+        </p>
+    }
+</div>
 
-<div class="note">
+<div class="bb-note">
     On WebAssembly, search and painting share the page's only thread. When a search takes longer than a frame (8 ms),
     the palette lets the keystroke paint first and folds the keys typed meanwhile into one search, so the input never
     lags behind the fingers. Only the best <code>MaxResults</code> rows are rendered, and <code>Virtualize</code>
     renders just the visible ones when that limit is raised.
 </div>
 
-<h2>The registration</h2>
-<pre><code>@RegistrationExample</code></pre>
-<p>
-    The handle comes back from <code>Register</code>; this page disposes it when you leave, so the registry is back to its
-    usual size on every other page.
-</p>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The registration</h3>
+    <pre class="bb-code">@RegistrationExample</pre>
+    <p>
+        The handle comes back from <code>Register</code>; this page disposes it when you leave, so the registry is back to its
+        usual size on every other page.
+    </p>
+</section>
 
 @code {
     private const int Repetitions = 5;
diff --git a/src/Utilities/Balette/Demo/Client/Pages/SearchAndRanking.razor b/src/Utilities/Balette/Demo/Client/Pages/SearchAndRanking.razor
index d441db36db2..c45628b1f73 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/SearchAndRanking.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/SearchAndRanking.razor
@@ -8,23 +8,28 @@
 @inject BaletteHistory History
 @inject DemoState State
 
-<PageTitle>Search and ranking - bit Balette</PageTitle>
+<PageTitle>Search and ranking · Balette</PageTitle>
 
-<h1>Search &amp; ranking</h1>
-<p class="page-intro">
-    Every keystroke runs two public pieces of the library: a matcher that scores each command and says which
-    characters to highlight, and a ranker that folds in priority and how often and how recently a command was used.
-    The lab below runs exactly those two over this app's registry, so the numbers are the ones the palette sorts by.
-</p>
+<div class="bb-intro">
+    <h1>Search &amp; ranking</h1>
+    <p class="bb-subtitle">
+        Every keystroke runs two public pieces of the library: a matcher that scores each command and says which
+        characters to highlight, and a ranker that folds in priority and how often and how recently a command was used.
+        The lab below runs exactly those two over this app's registry, so the numbers are the ones the palette sorts by.
+    </p>
+</div>
+
+<PaletteBar />
 
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Search lab">
-        <label class="field grow">
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Search lab</span></div>
+    <div class="bb-fields" role="toolbar" aria-label="Search lab">
+        <label class="bb-field demo-grow">
             Query
-            <input type="text" class="grow" value="@_query" @oninput="OnQueryInput" placeholder="Type to search the registry…"
+            <input type="text" value="@_query" @oninput="OnQueryInput" placeholder="Type to search the registry…"
                    aria-label="Query" autocomplete="off" spellcheck="false" />
         </label>
-        <label class="field">
+        <label class="bb-field">
             Matcher
             <select value="@_matcherName" @onchange="OnMatcherChanged" aria-label="Matcher">
                 <option value="fuzzy">Fuzzy, smart case</option>
@@ -32,48 +37,50 @@
                 <option value="substring">Substring</option>
             </select>
         </label>
-        <button type="button" class="btn" @onclick="() => Palette.OpenAsync(_query)">Open the palette with it</button>
+        <button type="button" class="btn btn-secondary" @onclick="() => Palette.OpenAsync(_query)">Open the palette with it</button>
     </div>
 
-    <table class="lab">
-        <thead>
-            <tr>
-                <th>#</th>
-                <th>Command</th>
-                <th>Matched on</th>
-                <th class="num">Score</th>
-                <th class="num">Priority</th>
-                <th class="num">Frecency</th>
-                <th class="num">Rank</th>
-            </tr>
-        </thead>
-        <tbody>
-            @if (_results.Count == 0)
-            {
-                <tr><td colspan="7" class="muted">No command matches. The palette would still list the always-shown feedback row.</td></tr>
-            }
-            @foreach (var (match, index) in _results.Take(MaxRows).Select((m, i) => (m, i)))
-            {
+    <div class="bb-scroll">
+        <table class="bb-table demo-lab">
+            <thead>
                 <tr>
-                    <td class="muted">@(index + 1)</td>
-                    <td>
-                        <BaletteHighlightedText Text="@match.Command.Title" Positions="@match.TitlePositions" />
-                        @if (match.Command.Subtitle is not null)
-                        {
-                            <div class="muted small"><BaletteHighlightedText Text="@match.Command.Subtitle" Positions="@match.SubtitlePositions" /></div>
-                        }
-                    </td>
-                    <td>@MatchedOn(match)</td>
-                    <td class="num">@Format(match.Score)</td>
-                    <td class="num">@match.Command.Priority</td>
-                    <td class="num">@Format(match.Frecency)</td>
-                    <td class="num"><strong>@Format(match.Rank)</strong></td>
+                    <th>#</th>
+                    <th>Command</th>
+                    <th>Matched on</th>
+                    <th class="demo-num">Score</th>
+                    <th class="demo-num">Priority</th>
+                    <th class="demo-num">Frecency</th>
+                    <th class="demo-num">Rank</th>
                 </tr>
-            }
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+                @if (_results.Count == 0)
+                {
+                    <tr><td colspan="7" class="bb-muted">No command matches. The palette would still list the always-shown feedback row.</td></tr>
+                }
+                @foreach (var (match, index) in _results.Take(MaxRows).Select((m, i) => (m, i)))
+                {
+                    <tr>
+                        <td class="bb-soft">@(index + 1)</td>
+                        <td>
+                            <BaletteHighlightedText Text="@match.Command.Title" Positions="@match.TitlePositions" />
+                            @if (match.Command.Subtitle is not null)
+                            {
+                                <div class="bb-soft demo-small"><BaletteHighlightedText Text="@match.Command.Subtitle" Positions="@match.SubtitlePositions" /></div>
+                            }
+                        </td>
+                        <td>@MatchedOn(match)</td>
+                        <td class="demo-num">@Format(match.Score)</td>
+                        <td class="demo-num">@match.Command.Priority</td>
+                        <td class="demo-num">@Format(match.Frecency)</td>
+                        <td class="demo-num"><strong>@Format(match.Rank)</strong></td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
 
-    <div class="statusbar" role="status">
+    <div class="demo-statusbar" role="status">
         <span><strong>@_candidates</strong> root commands</span>
         <span><strong>@_results.Count</strong> matched</span>
         <span>matched and ranked in <strong>@_elapsed.TotalMilliseconds.ToString("0.00", CultureInfo.InvariantCulture) ms</strong></span>
@@ -84,82 +91,90 @@
     </div>
 </div>
 
-<h2 id="operators">Operators</h2>
-<p>
-    A query is split on spaces and every term has to match (AND), each against whichever field scores it best. A term
-    can carry an fzf operator; the rest are fuzzy.
-</p>
-<table>
-    <thead>
-        <tr><th>Query</th><th>Means</th><th></th></tr>
-    </thead>
-    <tbody>
-        @foreach (var example in Examples)
-        {
-            <tr>
-                <td><code>@example.Query</code></td>
-                <td>@example.Meaning</td>
-                <td><button type="button" class="btn" @onclick="() => SetQuery(example.Query)">Try</button></td>
-            </tr>
-        }
-    </tbody>
-</table>
+<section class="bb-card" id="operators">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Operators</h3>
+    <p>
+        A query is split on spaces and every term has to match (AND), each against whichever field scores it best. A term
+        can carry an fzf operator; the rest are fuzzy.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Query</th><th>Means</th><th></th></tr>
+            </thead>
+            <tbody>
+                @foreach (var example in Examples)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@example.Query</code></td>
+                        <td>@example.Meaning</td>
+                        <td class="bb-table-action"><button type="button" class="btn btn-secondary" @onclick="() => SetQuery(example.Query)">Try</button></td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</section>
 
-<h2>How a score is made</h2>
-<div class="split">
-    <div>
-        <p>
-            The fuzzy matcher is fzf's algorithm: a dynamic programme that finds the best alignment of the term inside
-            the text, rewarding matches at word starts, camel humps and consecutive runs, and the first character most,
-            while gaps cost. A lower-case term ignores case; a term with a capital letter respects it.
-        </p>
-        <p>
-            Each field's score is multiplied by its weight, so a hit in the title beats the same hit in a keyword,
-            which beats one in the subtitle. These are this app's weights, from <code>BaletteOptions.Weights</code>:
-        </p>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> How a score is made</h3>
+    <p>
+        The fuzzy matcher is fzf's algorithm: a dynamic programme that finds the best alignment of the term inside
+        the text, rewarding matches at word starts, camel humps and consecutive runs, and the first character most,
+        while gaps cost. A lower-case term ignores case; a term with a capital letter respects it.
+    </p>
+    <p>
+        Each field's score is multiplied by its weight, so a hit in the title beats the same hit in a keyword,
+        which beats one in the subtitle. These are this app's weights, from <code>BaletteOptions.Weights</code>:
+    </p>
+    <div class="bb-scroll demo-weights">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Field</th><th class="demo-num">Weight</th></tr>
+            </thead>
+            <tbody>
+                <tr><td>Title</td><td class="demo-num">@Format(Options.Weights.Title)</td></tr>
+                <tr><td>Keywords</td><td class="demo-num">@Format(Options.Weights.Keyword)</td></tr>
+                <tr><td>Subtitle</td><td class="demo-num">@Format(Options.Weights.Subtitle)</td></tr>
+                <tr><td>Group</td><td class="demo-num">@Format(Options.Weights.Group)</td></tr>
+                <tr><td>Description</td><td class="demo-num">@Format(Options.Weights.Description)</td></tr>
+                <tr><td>Tags</td><td class="demo-num">@Format(Options.Weights.Tag)</td></tr>
+            </tbody>
+        </table>
     </div>
-    <table>
-        <thead>
-            <tr><th>Field</th><th class="num">Weight</th></tr>
-        </thead>
-        <tbody>
-            <tr><td>Title</td><td class="num">@Format(Options.Weights.Title)</td></tr>
-            <tr><td>Keywords</td><td class="num">@Format(Options.Weights.Keyword)</td></tr>
-            <tr><td>Subtitle</td><td class="num">@Format(Options.Weights.Subtitle)</td></tr>
-            <tr><td>Group</td><td class="num">@Format(Options.Weights.Group)</td></tr>
-            <tr><td>Description</td><td class="num">@Format(Options.Weights.Description)</td></tr>
-            <tr><td>Tags</td><td class="num">@Format(Options.Weights.Tag)</td></tr>
-        </tbody>
-    </table>
-</div>
+</section>
 
-<h2>Priority and frecency</h2>
-<p>With a query, the match decides and the rest only nudges it:</p>
-<pre><code>rank = score + priority × @Format(Options.PriorityWeight) + ln(1 + frecency) × @Format(Options.FrecencyWeight)</code></pre>
-<p>
-    On the empty query there is nothing to match, so priority leads and frecency orders what is left
-    (<code>priority × 1000 + frecency</code>), inside each group. Frecency is Firefox's idea: a capped use count weighted
-    by how recent the last use was. Run a command a few times from the palette and watch its row climb in the lab -
-    the history is kept in <code>localStorage</code>, so it survives a reload.
-</p>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Priority and frecency</h3>
+    <p>With a query, the match decides and the rest only nudges it:</p>
+    <pre class="bb-code">rank = score + priority × @Format(Options.PriorityWeight) + ln(1 + frecency) × @Format(Options.FrecencyWeight)</pre>
+    <p>
+        On the empty query there is nothing to match, so priority leads and frecency orders what is left
+        (<code>priority × 1000 + frecency</code>), inside each group. Frecency is Firefox's idea: a capped use count weighted
+        by how recent the last use was. Run a command a few times from the palette and watch its row climb in the lab -
+        the history is kept in <code>localStorage</code>, so it survives a reload.
+    </p>
+</section>
 
-<h2>In the palette</h2>
-<div class="panel settings">
-    <label class="setting">
-        <span>Highlight matched characters</span>
-        <input type="checkbox" checked="@State.HighlightMatches" @onchange="() => State.SetHighlightMatches(!State.HighlightMatches)" />
-    </label>
-    <label class="setting">
-        <span>Keep group headings while searching (off: one flat ranked list)</span>
-        <input type="checkbox" checked="@State.GroupWhenSearching" @onchange="() => State.SetGroupWhenSearching(!State.GroupWhenSearching)" />
-    </label>
-</div>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> In the palette</h3>
+    <div class="demo-settings">
+        <label class="demo-setting">
+            <span>Highlight matched characters</span>
+            <input type="checkbox" checked="@State.HighlightMatches" @onchange="() => State.SetHighlightMatches(!State.HighlightMatches)" />
+        </label>
+        <label class="demo-setting">
+            <span>Keep group headings while searching (off: one flat ranked list)</span>
+            <input type="checkbox" checked="@State.GroupWhenSearching" @onchange="() => State.SetGroupWhenSearching(!State.GroupWhenSearching)" />
+        </label>
+    </div>
 
-<div class="note">
-    The matcher is an interface: <code>options.Matcher = BaletteSubstringMatcher.Default</code> trades typo tolerance for
-    speed, and any <code>IBaletteMatcher</code> can replace both. Matching runs over the fields of the command only;
-    asynchronous sources opt into it with <code>ApplyMatcher</code>, or keep their own order.
-</div>
+    <div class="bb-note">
+        The matcher is an interface: <code>options.Matcher = BaletteSubstringMatcher.Default</code> trades typo tolerance for
+        speed, and any <code>IBaletteMatcher</code> can replace both. Matching runs over the fields of the command only;
+        asynchronous sources opt into it with <code>ApplyMatcher</code>, or keep their own order.
+    </div>
+</section>
 
 @code {
     private const int MaxRows = 15;
diff --git a/src/Utilities/Balette/Demo/Client/Pages/Theming.razor b/src/Utilities/Balette/Demo/Client/Pages/Theming.razor
index 47701663f40..71c5a5a5c58 100644
--- a/src/Utilities/Balette/Demo/Client/Pages/Theming.razor
+++ b/src/Utilities/Balette/Demo/Client/Pages/Theming.razor
@@ -3,49 +3,63 @@
 @inject IBaletteService Palette
 @inject DemoState State
 
-<PageTitle>Theming and templates - bit Balette</PageTitle>
-
-<h1>Theming &amp; templates</h1>
-<p class="page-intro">
-    The default look is a set of CSS custom properties, so restyling the palette means overriding variables - on
-    <code>:root</code>, on the dialog, or inline through the component's <code>Style</code> - with no selectors to fight.
-    Past that, every part of a row and of the dialog can be replaced with a template, or the styles left out entirely.
-    The controls below restyle the palette this site is using.
-</p>
-
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Site and palette theme">
-        <span class="field">Site</span>
-        <div class="toolbar-group" role="group" aria-label="Site theme">
-            @foreach (var theme in SiteThemes)
-            {
-                <button type="button" class="btn @(State.Theme == theme ? "active" : null)" aria-pressed="@(State.Theme == theme ? "true" : "false")"
-                        @onclick="() => State.SetThemeAsync(theme)">@Capitalize(theme)</button>
-            }
+<PageTitle>Theming and templates · Balette</PageTitle>
+
+<div class="bb-intro">
+    <h1>Theming &amp; templates</h1>
+    <p class="bb-subtitle">
+        The default look is a set of CSS custom properties, so restyling the palette means overriding variables - on
+        <code>:root</code>, on the dialog, or inline through the component's <code>Style</code> - with no selectors to fight.
+        Past that, every part of a row and of the dialog can be replaced with a template, or the styles left out entirely.
+        The controls below restyle the palette this site is using.
+    </p>
+</div>
+
+<PaletteBar />
+
+<div class="bb-demo">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">This site's palette</span>
+        <button type="button" class="btn btn-secondary" @onclick="State.ResetPresentation">Reset</button>
+        <button type="button" class="btn btn-primary" @onclick="() => Palette.OpenAsync()">Open the palette</button>
+    </div>
+
+    <div class="bb-fields" role="toolbar" aria-label="Site and palette theme">
+        <div class="bb-field">
+            Site
+            <div class="bb-segmented" role="group" aria-label="Site theme">
+                @foreach (var theme in SiteThemes)
+                {
+                    <button type="button" aria-pressed="@(State.Theme == theme ? "true" : "false")"
+                            @onclick="() => State.SetThemeAsync(theme)">@Capitalize(theme)</button>
+                }
+            </div>
         </div>
-        <div class="toolbar-separator"></div>
-        <span class="field">Palette</span>
-        <div class="toolbar-group" role="group" aria-label="Palette theme">
-            @foreach (var (value, label) in PaletteThemes)
-            {
-                <button type="button" class="btn @(State.PaletteTheme == value ? "active" : null)" aria-pressed="@(State.PaletteTheme == value ? "true" : "false")"
-                        @onclick="() => State.SetPaletteTheme(value)">@label</button>
-            }
+        <div class="bb-field">
+            Palette
+            <div class="bb-segmented" role="group" aria-label="Palette theme">
+                @foreach (var (value, label) in PaletteThemes)
+                {
+                    <button type="button" aria-pressed="@(State.PaletteTheme == value ? "true" : "false")"
+                            @onclick="() => State.SetPaletteTheme(value)">@label</button>
+                }
+            </div>
         </div>
     </div>
 
-    <div class="toolbar" role="toolbar" aria-label="Palette tokens">
-        <span class="field">Accent</span>
-        <div class="toolbar-group">
-            @foreach (var (value, label) in Accents)
-            {
-                <button type="button" class="swatch @(State.Accent == value ? "active" : null)" title="@label" aria-label="@label"
-                        aria-pressed="@(State.Accent == value ? "true" : "false")"
-                        style="background:@(value ?? "#4f46e5")" @onclick="() => State.SetAccent(value)"></button>
-            }
+    <div class="bb-fields" role="toolbar" aria-label="Palette tokens">
+        <div class="bb-field">
+            Accent
+            <div class="demo-swatches">
+                @foreach (var (value, label) in Accents)
+                {
+                    <button type="button" class="demo-swatch @(value is null ? "demo-swatch-default" : null)" title="@label" aria-label="@label"
+                            aria-pressed="@(State.Accent == value ? "true" : "false")"
+                            style="@(value is null ? null : $"background:{value}")" @onclick="() => State.SetAccent(value)"></button>
+                }
+            </div>
         </div>
-        <div class="toolbar-separator"></div>
-        <label class="field">
+        <label class="bb-field">
             Width
             <select value="@(State.Width?.ToString() ?? "")" @onchange="OnWidthChanged" aria-label="Palette width">
                 <option value="">Default</option>
@@ -54,7 +68,7 @@
                 <option value="1040">1040 px</option>
             </select>
         </label>
-        <label class="field">
+        <label class="bb-field">
             Radius
             <select value="@(State.Radius?.ToString() ?? "")" @onchange="OnRadiusChanged" aria-label="Palette corner radius">
                 <option value="">Default</option>
@@ -63,88 +77,94 @@
                 <option value="24">24 px</option>
             </select>
         </label>
-        <div class="toolbar-separator"></div>
-        <label class="field">
+        <label class="bb-check">
             <input type="checkbox" checked="@State.ShowDetail" @onchange="() => State.SetShowDetail(!State.ShowDetail)" />
             Detail pane
         </label>
-        <label class="field">
+        <label class="bb-check">
             <input type="checkbox" checked="@State.ShowFooter" @onchange="() => State.SetShowFooter(!State.ShowFooter)" />
             Footer
         </label>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" @onclick="State.ResetPresentation">Reset</button>
-        <button type="button" class="btn primary" @onclick="() => Palette.OpenAsync()">Open the palette</button>
     </div>
 
-    <div class="padded">
-        <p class="muted small">What the layout hands its palette right now:</p>
-        <pre class="output"><code>&lt;Balette Theme="@(State.PaletteTheme ?? "(follows the page)")"
+    <p class="bb-soft demo-small">What the palette host hands its palette right now:</p>
+    <pre class="bb-code demo-output">&lt;Balette Theme="@(State.PaletteTheme ?? "(follows the page)")"
          Style="@(State.PaletteStyle ?? "(none)")"
          DetailTemplate="@(State.ShowDetail ? "_detailPane" : "null")"
-         ShowFooter="@(State.ShowFooter ? "true" : "false")" /&gt;</code></pre>
-    </div>
+         ShowFooter="@(State.ShowFooter ? "true" : "false")" /&gt;</pre>
 </div>
 
-<div class="note">
-    The site theme is <code>&lt;html data-theme&gt;</code>, which the library's stylesheet and this site's both follow -
-    <em>auto</em> leaves it to <code>prefers-color-scheme</code>. The palette's <code>Theme</code> parameter wins over the
-    page for the palette alone, for an app that wants a dark palette over a light page.
+<div class="bb-note">
+    The library follows <code>prefers-color-scheme</code>, or <code>&lt;html data-theme&gt;</code> when an app sets one.
+    This site's theme is the <code>bit-theme</code> attribute its own toggle sets instead, so its <code>demo.css</code>
+    points the palette's custom properties at that attribute - in the brand's blue - exactly the way the tokens below are
+    meant to be overridden. The palette's <code>Theme</code> parameter wins over the page for the palette alone, for an
+    app that wants a dark palette over a light page.
 </div>
 
-<h2>The tokens</h2>
-<p>The ones that change the look the most. Every one of them has a light and a dark value.</p>
-<table>
-    <thead>
-        <tr><th>Custom property</th><th>Light default</th><th>Controls</th></tr>
-    </thead>
-    <tbody>
-        <tr><td><code>--bit-balette-accent</code></td><td><code>#4f46e5</code></td><td>Toggles that are on, checked rows, badges, the mode chip, the spinner</td></tr>
-        <tr><td><code>--bit-balette-accent-soft</code></td><td><code>rgba(79, 70, 229, .10)</code></td><td>Behind badges, the mode chip and checked boxes</td></tr>
-        <tr><td><code>--bit-balette-mark-bg</code></td><td><code>rgba(79, 70, 229, .18)</code></td><td>Highlighted matched characters</td></tr>
-        <tr><td><code>--bit-balette-bg</code> / <code>-bg-elevated</code></td><td><code>#ffffff</code> / <code>#f6f7f9</code></td><td>The dialog, and the detail pane and footer</td></tr>
-        <tr><td><code>--bit-balette-fg</code> / <code>-fg-muted</code></td><td><code>#111318</code> / <code>#6b7280</code></td><td>Titles, and subtitles and hints</td></tr>
-        <tr><td><code>--bit-balette-width</code></td><td><code>640px</code> (<code>920px</code> with a detail pane)</td><td>The dialog's width; it never exceeds the viewport</td></tr>
-        <tr><td><code>--bit-balette-max-height</code></td><td><code>min(70vh, 560px)</code></td><td>How tall the list may grow</td></tr>
-        <tr><td><code>--bit-balette-radius</code></td><td><code>14px</code></td><td>The dialog's corners</td></tr>
-        <tr><td><code>--bit-balette-row-height</code></td><td><code>44px</code></td><td>A row; set <code>RowHeight</code> to match when virtualizing</td></tr>
-        <tr><td><code>--bit-balette-font</code> / <code>-font-size</code></td><td>system UI, <code>14px</code></td><td>The type</td></tr>
-        <tr><td><code>--bit-balette-backdrop</code></td><td><code>rgba(17, 19, 24, .45)</code></td><td>The page behind the open dialog</td></tr>
-    </tbody>
-</table>
-<pre><code>@TokensExample</code></pre>
-
-<h2>Templates</h2>
-<p>
-    The detail pane on the right of this site's palette is a <code>DetailTemplate</code> in
-    <code>Layout/MainLayout.razor</code>; it shows the <code>Person</code> record a people row carries as
-    <code>Data</code>. The other parts are replaced the same way:
-</p>
-<table>
-    <thead>
-        <tr><th>Parameter</th><th>Receives</th><th>Replaces</th></tr>
-    </thead>
-    <tbody>
-        <tr><td><code>ItemTemplate</code></td><td><code>BaletteItemContext</code></td><td>A row's content (the row element and its ARIA stay the library's)</td></tr>
-        <tr><td><code>IconTemplate</code></td><td><code>BaletteCommand</code></td><td>Just the icon</td></tr>
-        <tr><td><code>DetailTemplate</code></td><td><code>BaletteCommand</code></td><td>A preview pane for the active row</td></tr>
-        <tr><td><code>GroupHeaderTemplate</code></td><td>the group name</td><td>A group heading</td></tr>
-        <tr><td><code>EmptyTemplate</code> / <code>LoadingTemplate</code></td><td>the query / nothing</td><td>The empty and loading states</td></tr>
-        <tr><td><code>HeaderTemplate</code> / <code>FooterTemplate</code></td><td><code>BaletteStateContext</code></td><td>Above the input / the hint bar</td></tr>
-    </tbody>
-</table>
-<pre><code>@ItemTemplateExample</code></pre>
-
-<h2>Unstyled</h2>
-<p>
-    <code>Unstyled="true"</code> drops the library's classes from the dialog, and every rule in its stylesheet is scoped
-    to them, so what is left is bare, accessible markup to style from scratch. The structure stays addressable through
-    <code>data-balette</code> attributes - <code>dialog</code>, <code>input</code>, <code>list</code>,
-    <code>group-heading</code>, <code>item</code>, <code>breadcrumbs</code>, <code>footer</code>, <code>toast</code>,
-    <code>detail</code> - and a row's state through <code>data-active</code>, <code>data-checked</code>,
-    <code>data-disabled</code>, <code>data-destructive</code> and <code>data-kind</code>.
-</p>
-<pre><code>@UnstyledExample</code></pre>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The tokens</h3>
+    <p>The ones that change the look the most, with the library's light defaults. Every one of them has a light and a dark value.</p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Custom property</th><th>Light default</th><th>Controls</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key"><code>--bit-balette-accent</code></td><td><code>#4f46e5</code></td><td>Toggles that are on, checked rows, badges, the mode chip, the spinner</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-accent-soft</code></td><td><code>rgba(79, 70, 229, .10)</code></td><td>Behind badges, the mode chip and checked boxes</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-mark-bg</code></td><td><code>rgba(79, 70, 229, .18)</code></td><td>Highlighted matched characters</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-bg</code> / <code>-bg-elevated</code></td><td><code>#ffffff</code> / <code>#f6f7f9</code></td><td>The dialog, and the detail pane and footer</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-fg</code> / <code>-fg-muted</code></td><td><code>#111318</code> / <code>#6b7280</code></td><td>Titles, and subtitles and hints</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-width</code></td><td><code>640px</code> (<code>920px</code> with a detail pane)</td><td>The dialog's width; it never exceeds the viewport</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-max-height</code></td><td><code>min(70vh, 560px)</code></td><td>How tall the list may grow</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-radius</code></td><td><code>14px</code></td><td>The dialog's corners</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-row-height</code></td><td><code>44px</code></td><td>A row; set <code>RowHeight</code> to match when virtualizing</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-font</code> / <code>-font-size</code></td><td>system UI, <code>14px</code></td><td>The type</td></tr>
+                <tr><td class="bb-table-key"><code>--bit-balette-backdrop</code></td><td><code>rgba(17, 19, 24, .45)</code></td><td>The page behind the open dialog</td></tr>
+            </tbody>
+        </table>
+    </div>
+    <pre class="bb-code">@TokensExample</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Templates</h3>
+    <p>
+        The detail pane on the right of this site's palette is a <code>DetailTemplate</code> in
+        <code>Components/AppPalette.razor</code>; it shows the <code>Person</code> record a people row carries as
+        <code>Data</code>. The other parts are replaced the same way:
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Parameter</th><th>Receives</th><th>Replaces</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key"><code>ItemTemplate</code></td><td><code>BaletteItemContext</code></td><td>A row's content (the row element and its ARIA stay the library's)</td></tr>
+                <tr><td class="bb-table-key"><code>IconTemplate</code></td><td><code>BaletteCommand</code></td><td>Just the icon</td></tr>
+                <tr><td class="bb-table-key"><code>DetailTemplate</code></td><td><code>BaletteCommand</code></td><td>A preview pane for the active row</td></tr>
+                <tr><td class="bb-table-key"><code>GroupHeaderTemplate</code></td><td>the group name</td><td>A group heading</td></tr>
+                <tr><td class="bb-table-key"><code>EmptyTemplate</code> / <code>LoadingTemplate</code></td><td>the query / nothing</td><td>The empty and loading states</td></tr>
+                <tr><td class="bb-table-key"><code>HeaderTemplate</code> / <code>FooterTemplate</code></td><td><code>BaletteStateContext</code></td><td>Above the input / the hint bar</td></tr>
+            </tbody>
+        </table>
+    </div>
+    <pre class="bb-code">@ItemTemplateExample</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Unstyled</h3>
+    <p>
+        <code>Unstyled="true"</code> drops the library's classes from the dialog, and every rule in its stylesheet is scoped
+        to them, so what is left is bare, accessible markup to style from scratch. The structure stays addressable through
+        <code>data-balette</code> attributes - <code>dialog</code>, <code>input</code>, <code>list</code>,
+        <code>group-heading</code>, <code>item</code>, <code>breadcrumbs</code>, <code>footer</code>, <code>toast</code>,
+        <code>detail</code> - and a row's state through <code>data-active</code>, <code>data-checked</code>,
+        <code>data-disabled</code>, <code>data-destructive</code> and <code>data-kind</code>.
+    </p>
+    <pre class="bb-code">@UnstyledExample</pre>
+</section>
 
 @code {
     private static readonly string[] SiteThemes = ["auto", "light", "dark"];
@@ -153,7 +173,8 @@
 
     private static readonly (string? Value, string Label)[] Accents =
     [
-        (null, "Default indigo"),
+        // The site's own accent: demo.css re-tints the library's indigo to the bit brand blue.
+        (null, "Default blue"),
         ("#0d9488", "Teal"),
         ("#db2777", "Pink"),
         ("#ea580c", "Orange"),
@@ -171,6 +192,12 @@
         :root[data-theme="dark"] {
             --bit-balette-accent: #2dd4bf;
         }
+
+        /* An app with a theme switch of its own points the dark values at it instead -
+           this site's demo.css does it for <html bit-theme="dark">. */
+        :root[bit-theme="dark"] {
+            --bit-balette-accent: #4fa3f4;
+        }
         """;
 
     private const string ItemTemplateExample = """
diff --git a/src/Utilities/Balette/Demo/Client/Routes.razor b/src/Utilities/Balette/Demo/Client/Routes.razor
index 105855d4577..b984aa0efe9 100644
--- a/src/Utilities/Balette/Demo/Client/Routes.razor
+++ b/src/Utilities/Balette/Demo/Client/Routes.razor
@@ -1,6 +1,16 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page.
+
+   The palette is rendered next to the router rather than inside a layout: it is one palette for
+   the whole app, so it has to outlive every page and both layouts, and Routes is the interactive
+   root they all render under. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
+
+<AppPalette />
diff --git a/src/Utilities/Balette/Demo/Client/Services/DemoCommands.cs b/src/Utilities/Balette/Demo/Client/Services/DemoCommands.cs
index 5562a80fa90..400855d85db 100644
--- a/src/Utilities/Balette/Demo/Client/Services/DemoCommands.cs
+++ b/src/Utilities/Balette/Demo/Client/Services/DemoCommands.cs
@@ -19,6 +19,8 @@ public static IEnumerable<BaletteCommand> Global(DemoState state) =>
     [
         // ---- Navigation: every page, also reachable with G-then-X sequences, the way Linear and GitHub do it ----
         BaletteCmd.Navigate("Introduction", "/").Group("Navigation").Shortcut("G H").Keywords("home", "start", "landing").Priority(BaletteCommandPriority.High),
+        // Not titled "Getting started": its two word starts would outrank Settings for "gs", the sequence's own letters.
+        BaletteCmd.Navigate("Quick start", "/getting-started").Group("Navigation").Shortcut("G I").Keywords("install", "setup", "begin"),
         BaletteCmd.Navigate("Registering commands", "/commands").Group("Navigation").Shortcut("G R").Keywords("register", "builder", "declarative", "counter"),
         BaletteCmd.Navigate("Settings", "/commands#settings").Group("Navigation").Shortcut("G S").Keywords("preferences", "options", "config"),
         BaletteCmd.Navigate("Nested pages and flows", "/pages").Group("Navigation").Shortcut("G P").Keywords("prompt", "multi-select", "confirm", "toast", "actions"),
diff --git a/src/Utilities/Balette/Demo/Client/Services/DemoState.cs b/src/Utilities/Balette/Demo/Client/Services/DemoState.cs
index b8f8316074a..ff654ef8e66 100644
--- a/src/Utilities/Balette/Demo/Client/Services/DemoState.cs
+++ b/src/Utilities/Balette/Demo/Client/Services/DemoState.cs
@@ -10,9 +10,6 @@ namespace Bit.Balette.Demo.Client.Services;
 /// </summary>
 public sealed class DemoState
 {
-    // The same key the inline script in App.razor reads before the first paint.
-    private const string ThemeStorageKey = "bit-balette-demo.theme";
-
     private readonly IJSRuntime _js;
     private readonly List<string> _log = [];
 
@@ -24,7 +21,11 @@ public DemoState(IJSRuntime js)
     /// <summary>Raised after any value changed. The layout re-registers its commands on it, so toggles show their new state.</summary>
     public event Action? Changed;
 
-    /// <summary><c>auto</c>, <c>light</c> or <c>dark</c>, written to <c>&lt;html data-theme&gt;</c> - which the site and the palette both follow.</summary>
+    /// <summary>
+    /// The site theme as the reader chose it: <c>auto</c> follows the operating system, <c>light</c> and <c>dark</c>
+    /// pin one. The site kit applies it as <c>&lt;html bit-theme="light|dark"&gt;</c>, which the site and - through
+    /// demo.css - the palette both follow; the header's toggle changes it too, and <see cref="FollowSiteTheme"/> hears it.
+    /// </summary>
     public string Theme { get; private set; } = "auto";
 
     public bool WordWrap { get; private set; } = true;
@@ -98,38 +99,32 @@ public string? PaletteStyle
 
     public async Task SetThemeAsync(string theme)
     {
-        Theme = theme;
         try
         {
-            await _js.InvokeVoidAsync("document.documentElement.setAttribute", "data-theme", theme);
-            await _js.InvokeVoidAsync("localStorage.setItem", ThemeStorageKey, theme);
+            // demo.js hands the choice to the site kit's theme.js, which repaints the page and remembers it, and
+            // answers with what is in effect now.
+            Theme = await _js.InvokeAsync<string>("baletteDemo.setThemeMode", theme);
         }
         catch (Exception ex) when (ex is JSException or InvalidOperationException or JSDisconnectedException)
         {
-            // Storage can be disabled; the theme still applies for this visit.
+            // Not interactive yet, or the script is missing: the choice is remembered for this visit only.
+            Theme = theme;
         }
 
         Record($"Theme set to {theme}");
     }
 
     /// <summary>
-    /// Picks up the theme the inline script in App.razor already applied from storage, so a reload does not show
-    /// "auto" in the palette while the page is dark. Called once the layout runs interactively.
+    /// The site theme changed without this state being asked - the header's toggle, the OS, or the theme theme.js
+    /// applied from storage before the first paint, reported once the palette is interactive - so a reload does not
+    /// show "auto" in the palette while the page is dark.
     /// </summary>
-    public async Task RestoreThemeAsync()
+    public void FollowSiteTheme(string theme)
     {
-        try
-        {
-            var applied = await _js.InvokeAsync<string?>("document.documentElement.getAttribute", "data-theme");
-            if (applied is "light" or "dark" && applied != Theme)
-            {
-                Theme = applied;
-                Changed?.Invoke();
-            }
-        }
-        catch (Exception ex) when (ex is JSException or InvalidOperationException or JSDisconnectedException)
-        {
-        }
+        if (theme is not ("auto" or "light" or "dark") || theme == Theme) return;
+
+        Theme = theme;
+        Changed?.Invoke();
     }
 
     // ---- Preferences ---------------------------------------------------------------------------------------------
diff --git a/src/Utilities/Balette/Demo/Client/Services/FakeData.cs b/src/Utilities/Balette/Demo/Client/Services/FakeData.cs
index 06170718185..7816997e247 100644
--- a/src/Utilities/Balette/Demo/Client/Services/FakeData.cs
+++ b/src/Utilities/Balette/Demo/Client/Services/FakeData.cs
@@ -47,7 +47,7 @@ public sealed class FakeDirectory
     // Every entry points at the demo page that shows it, so a documentation hit is a working link.
     public IReadOnlyList<Doc> Docs { get; } =
     [
-        new("Getting started", "/#get-started", "Install the package, add the services, put the component in your layout."),
+        new("Getting started", "/getting-started", "Install the package, add the services, put the component in your layout."),
         new("Registering commands", "/commands", "Fluent builder, declarative markup, page-scoped registration."),
         new("Nested pages and prompts", "/pages", "Multi-step flows, action panels, free-text prompts, multi-select."),
         new("Search operators", "/search#operators", "Exact, prefix, suffix and negated terms, combined with AND."),
diff --git a/src/Utilities/Balette/Demo/Client/_Imports.razor b/src/Utilities/Balette/Demo/Client/_Imports.razor
index 486d49e5142..2488dccad22 100644
--- a/src/Utilities/Balette/Demo/Client/_Imports.razor
+++ b/src/Utilities/Balette/Demo/Client/_Imports.razor
@@ -8,5 +8,6 @@
 @using Microsoft.JSInterop
 @using Bit.Balette.Demo.Client
 @using Bit.Balette.Demo.Client.Layout
+@using Bit.Balette.Demo.Client.Components
 @using Bit.Balette.Demo.Client.Services
 @using Bit.Balette
diff --git a/src/Utilities/Balette/Demo/Server/Bit.Balette.Demo.Server.csproj b/src/Utilities/Balette/Demo/Server/Bit.Balette.Demo.Server.csproj
index ffa4d923cc9..dcdfff7d8d5 100644
--- a/src/Utilities/Balette/Demo/Server/Bit.Balette.Demo.Server.csproj
+++ b/src/Utilities/Balette/Demo/Server/Bit.Balette.Demo.Server.csproj
@@ -54,10 +54,12 @@
         <EmbeddedResource Include="..\..\Bit.Balette\Components\Balette.razor.cs" LogicalName="BaletteInternal/Balette.razor.cs" />
 
         <!-- Every demo page - each one is a working palette feature - plus the commands, state and
-             sources they share and the client half of the hosting. The MCP page describes this server
-             rather than the library, and the not-found page teaches nothing about palettes. -->
+             sources they share, the palette host and the client half of the hosting. The MCP page
+             describes this server rather than the library, and the not-found page teaches nothing
+             about palettes. Neither does the site chrome: Layout\ and DocsCatalog.cs are the header,
+             docs shell, search and footer every Utilities demo shares, so they are left out too. -->
         <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
+                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
             <LogicalName>BaletteSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
         </EmbeddedResource>
 
diff --git a/src/Utilities/Balette/Demo/Server/Components/App.razor b/src/Utilities/Balette/Demo/Server/Components/App.razor
index af8fd096d06..b5b718dd012 100644
--- a/src/Utilities/Balette/Demo/Server/Components/App.razor
+++ b/src/Utilities/Balette/Demo/Server/Components/App.razor
@@ -3,31 +3,34 @@
 
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="description" content="bit Balette (Bit.Balette) - a Blazor-native, accessible, keyboard-first command palette: fuzzy search, nested pages, prefix modes, async sources, recents and frecency, global shortcuts and sequences, multi-select, prompts, theming and templates, with every decision made in C#." />
-    <meta name="color-scheme" content="light dark" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
-    <ResourcePreloader />
-    @* The library's stylesheet is linked by the host page - Bit.Balette does not add it by itself - and it
-       comes first: the site's own one restyles the palette through the library's custom properties, which
-       only works if it comes later in the cascade. *@
-    <link rel="stylesheet" href="@Assets["_content/Bit.Balette/bit-balette.css"]" />
-    <link rel="stylesheet" href="@Assets["app.css"]" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Balette (Bit.Balette) - a Blazor-native, accessible, keyboard-first command palette: fuzzy search, nested pages, prefix modes, async sources, recents and frecency, global shortcuts and sequences, multi-select, prompts, theming and templates, with every decision made in C#." />
 
-    @* A stored theme is applied here, in the head, rather than once the app is interactive: both
-       stylesheets key off the data-theme attribute, and setting it after the first paint would show
-       the reader a flash of the other theme. "auto", or nothing stored, leaves it to the system. *@
-    <script>
-        (function () {
-            try {
-                var stored = localStorage.getItem('bit-balette-demo.theme');
-                if (stored === 'light' || stored === 'dark') {
-                    document.documentElement.setAttribute('data-theme', stored);
-                }
-            } catch (e) { /* storage disabled: follow the system */ }
-        })();
-    </script>
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Balette" />
+    <meta property="og:title" content="Balette - a command palette for Blazor" />
+    <meta property="og:description" content="The Ctrl+K box for Blazor apps: fuzzy search, nested pages, modes, async sources and global shortcuts - with matching, ranking and every decision in C#." />
+    <meta name="twitter:card" content="summary" />
 
+    <ResourcePreloader />
+    @* The site kit's stylesheet (app.css - shared by every Utilities demo), then the library's.
+       Bit.Balette does not add its stylesheet by itself: the host page links it, before any rule
+       that restyles the palette through its custom properties. demo.css is that rule here - it
+       styles this demo's samples and points the palette's tokens at the site's theme - so it comes
+       after it. *@
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["_content/Bit.Balette/bit-balette.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Balette.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -44,6 +47,11 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
+    @* The demo's own glue between the site kit and the palette: the site theme as the Theme command knows it,
+       and which of the two palettes on this site a key belongs to. Its key listener is on the window, so it
+       hears a key before the library's, which is on the document. *@
+    <script src="@Assets["demo.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Balette/Demo/Server/Controllers/McpController.cs b/src/Utilities/Balette/Demo/Server/Controllers/McpController.cs
index 340db8e95fd..6e8c6e1aedd 100644
--- a/src/Utilities/Balette/Demo/Server/Controllers/McpController.cs
+++ b/src/Utilities/Balette/Demo/Server/Controllers/McpController.cs
@@ -140,7 +140,7 @@ public BaletteSearchInspectionDto InspectBaletteSearch(
 
     [HttpGet]
     [McpServerTool(Name = nameof(GetBaletteSourceFile), Title = "Read a source file", ReadOnly = true, OpenWorld = false)]
-    [Description("Gets one working Bit.Balette source file verbatim - e.g. 'Demo/Client/Services/DemoCommands.cs' (a whole app's registry: navigation, prompts, multi-select, lazy pages, toggles, destructive commands), 'Demo/Client/Pages/Commands.razor' (page-scoped commands and the service API), 'Demo/Client/Pages/PagesAndFlows.razor', 'Demo/Client/Services/FakeData.cs' (async sources), 'Demo/Client/Layout/MainLayout.razor' (one palette with declarative items and a detail pane), 'Library/Styles/bit-balette.css' (the shipped stylesheet) or 'Library/Components/Balette.razor' (the markup it styles). Omit the path for the index of files. These are worked examples - for what a parameter means, GetBaletteApi answers in a fraction of the characters.")]
+    [Description("Gets one working Bit.Balette source file verbatim - e.g. 'Demo/Client/Services/DemoCommands.cs' (a whole app's registry: navigation, prompts, multi-select, lazy pages, toggles, destructive commands), 'Demo/Client/Pages/Commands.razor' (page-scoped commands and the service API), 'Demo/Client/Pages/PagesAndFlows.razor', 'Demo/Client/Services/FakeData.cs' (async sources), 'Demo/Client/Components/AppPalette.razor' (one palette with declarative items and a detail pane), 'Library/Styles/bit-balette.css' (the shipped stylesheet) or 'Library/Components/Balette.razor' (the markup it styles). Omit the path for the index of files. These are worked examples - for what a parameter means, GetBaletteApi answers in a fraction of the characters.")]
     public string GetBaletteSourceFile(
         [Description("The file's path as the index lists it, e.g. 'Demo/Client/Pages/Commands.razor'. Omit it for the index of files.")] string? path = null)
     {
diff --git a/src/Utilities/Balette/Demo/Server/Services/BaletteSearchLab.cs b/src/Utilities/Balette/Demo/Server/Services/BaletteSearchLab.cs
index 199851058ef..acb216a977b 100644
--- a/src/Utilities/Balette/Demo/Server/Services/BaletteSearchLab.cs
+++ b/src/Utilities/Balette/Demo/Server/Services/BaletteSearchLab.cs
@@ -69,7 +69,7 @@ public static BaletteSearchInspectionDto Inspect(string? query, string? commands
         {
             options = _demo.Value.Options;
             candidates = [.. _demo.Value.Commands];
-            source = $"this demo's registry: the {candidates.Count} root commands Layout/MainLayout.razor registers from Services/DemoCommands.cs - the candidates the demo's own Search and ranking page runs its lab over";
+            source = $"this demo's registry: the {candidates.Count} root commands Components/AppPalette.razor registers from Services/DemoCommands.cs - the candidates the demo's own Search and ranking page runs its lab over";
 
             query = ApplyMode(query, options, candidates, notes);
         }
diff --git a/src/Utilities/Balette/Demo/Server/Services/BaletteSetupGuide.cs b/src/Utilities/Balette/Demo/Server/Services/BaletteSetupGuide.cs
index 9baac870724..5153927947a 100644
--- a/src/Utilities/Balette/Demo/Server/Services/BaletteSetupGuide.cs
+++ b/src/Utilities/Balette/Demo/Server/Services/BaletteSetupGuide.cs
@@ -29,7 +29,7 @@ public static partial class BaletteSetupGuide
         "Demo/Client/Program.cs",
         "Demo/Server/Components/App.razor",
         "Demo/Client/Routes.razor",
-        "Demo/Client/Layout/MainLayout.razor",
+        BaletteSourceCatalog.PaletteHostPath,
         "Demo/Client/_Imports.razor",
     ];
 
@@ -143,7 +143,9 @@ private static string Compose(Mode mode)
         {
             builder.AppendLine("## The files, from this demo").AppendLine();
             builder.AppendLine("Everything below compiles as-is once the projects and namespaces are renamed to your own - except what is the ")
-                   .AppendLine("demo's own: `<NavMenu />` and the `DemoState`/`DemoCommands` the layout uses stand for your navigation and your commands.")
+                   .AppendLine("demo's own: the `DocsLayout` `Routes.razor` names stands for your layout, and the `DemoState`/`DemoCommands` the ")
+                   .AppendLine("palette host uses for your state and your commands. The host is rendered by `Routes.razor`, next to the router, ")
+                   .AppendLine("so the one palette is interactive on every page and outlives every layout - a layout of your own works as well.")
                    .AppendLine();
 
             foreach (var path in _hostingFiles)
@@ -186,10 +188,11 @@ both get the same options.
            `<link rel="stylesheet" href="_content/Bit.Balette/bit-balette.css" />`. It is NOT injected for you: without it the
            palette opens as unstyled markup.
         4. Add `@using Bit.Balette` to the `_Imports.razor` of every project with palette markup or commands.
-        5. Render exactly one `<Balette />`, in a layout that is rendered interactively (global interactivity, as below). In a
-           statically rendered layout it never attaches its keyboard handling, so Ctrl+K does nothing. With per-page
-           interactivity, wrap it in a small component rendered with an interactive mode, and register commands from
-           components in that same mode - the registry is scoped to one circuit or one WebAssembly runtime.
+        5. Render exactly one `<Balette />`, in a layout - or, as in the demo, a component `Routes.razor` renders next to the
+           router - that is rendered interactively (global interactivity, as below). Rendered statically it never attaches
+           its keyboard handling, so Ctrl+K does nothing. With per-page interactivity, wrap it in a small component
+           rendered with an interactive mode, and register commands from components in that same mode - the registry is
+           scoped to one circuit or one WebAssembly runtime.
         6. Register commands with `IBaletteService.Register(...)` - and dispose the handle it returns when the page goes - or
            with `<BaletteCommands Commands="_commands" />`, which does both for you; app-wide ones once, from the layout or
            through `options.Commands`. Commands are immutable: to change one, hand over a new list or call `Update`.
diff --git a/src/Utilities/Balette/Demo/Server/Services/BaletteSourceCatalog.cs b/src/Utilities/Balette/Demo/Server/Services/BaletteSourceCatalog.cs
index 97a49eb48d2..5ab5015409c 100644
--- a/src/Utilities/Balette/Demo/Server/Services/BaletteSourceCatalog.cs
+++ b/src/Utilities/Balette/Demo/Server/Services/BaletteSourceCatalog.cs
@@ -24,6 +24,9 @@ public static partial class BaletteSourceCatalog
     /// <summary>The path the shipped stylesheet is served under, next to the demo's files.</summary>
     public const string StylesheetPath = "Library/Styles/bit-balette.css";
 
+    /// <summary>The demo file that renders the app's one palette, with its declarative items and its detail pane.</summary>
+    public const string PaletteHostPath = "Demo/Client/Components/AppPalette.razor";
+
     /// <summary>Separates a parent heading from a child one in the key of a heading the README uses twice.</summary>
     public const string KeySeparator = " > ";
 
@@ -271,8 +274,9 @@ private static BaletteSourceFileDto[] BuildSourceFileList()
 
     /// <summary>
     /// What a file is for: a demo page is a working palette feature to copy, the hosting files are
-    /// the wiring every app needs once, a library file is shipped by the package itself, and the rest
-    /// is the commands, state and sources the pages share.
+    /// the wiring every app needs once - the palette host included, which is where the one
+    /// <c>&lt;Balette /&gt;</c> is rendered - a library file is shipped by the package itself, and the
+    /// rest is the commands, state, sources and the trigger bar the pages share.
     /// </summary>
     private static string KindOf(string path)
     {
@@ -280,7 +284,7 @@ private static string KindOf(string path)
         if (path.StartsWith("Library/", StringComparison.OrdinalIgnoreCase)) return "Library";
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
-            path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
+            path.Equals(PaletteHostPath, StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -435,7 +439,7 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"///\s*<summary>(?<text>.*?)</summary>", RegexOptions.Singleline)]
     private static partial Regex XmlSummaryRegex();
 
-    [GeneratedRegex(@"<p class=""page-intro"">(?<text>.*?)</p>", RegexOptions.Singleline)]
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex PageIntroRegex();
 
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/app.css b/src/Utilities/Balette/Demo/Server/wwwroot/app.css
index f0b6be237f8..7b51a42ea90 100644
--- a/src/Utilities/Balette/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/app.css
@@ -1,817 +1,2820 @@
-/* The site's own look. The palette's comes from the library's stylesheet, linked before this one in
-   App.razor; this file only styles the pages around it, plus the few demo icons the commands name
-   through IconCss and the content of the detail pane, which is the demo's own template. */
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
 
-:root {
-    --bg: #f6f7f9;
-    --surface: #ffffff;
-    --surface-2: #f1f3f5;
-    --border: #dfe3e8;
-    --text: #1a1d21;
-    --text-muted: #616a75;
-    --accent: #4f46e5;
-    --accent-soft: #e0e7ff;
-    --danger: #dc2626;
-    --radius: 10px;
-    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
-    color-scheme: light dark;
-}
-
-/* The theme follows the system unless <html data-theme> says otherwise - the same two selectors the
-   library's stylesheet uses, so the site and the palette always agree on which one is showing. */
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) {
-        --bg: #14161a;
-        --surface: #1c1f24;
-        --surface-2: #24282e;
-        --border: #333940;
-        --text: #e8eaed;
-        --text-muted: #9aa4b0;
-        --accent: #818cf8;
-        --accent-soft: #2a2d5c;
-        --danger: #f87171;
-        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
-    }
-}
-
-:root[data-theme="dark"] {
-    --bg: #14161a;
-    --surface: #1c1f24;
-    --surface-2: #24282e;
-    --border: #333940;
-    --text: #e8eaed;
-    --text-muted: #9aa4b0;
-    --accent: #818cf8;
-    --accent-soft: #2a2d5c;
-    --danger: #f87171;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
     color-scheme: dark;
-}
 
-:root[data-theme="light"] {
-    color-scheme: light;
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
 }
 
-* {
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
 }
 
 html,
 body {
     margin: 0;
     padding: 0;
-    height: 100%;
-}
-
-body {
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    font-size: 15px;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
     line-height: 1.5;
-    color: var(--text);
-    background: var(--bg);
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
 }
 
-h1 {
-    font-size: 1.6rem;
-    margin: 0 0 0.25rem;
-    letter-spacing: -0.01em;
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
 }
 
-h2 {
-    font-size: 1.05rem;
-    margin: 1.75rem 0 0.5rem;
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
 }
 
-h3 {
-    font-size: 0.95rem;
-    margin: 0 0 0.35rem;
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-p {
-    margin: 0 0 0.75rem;
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
 }
 
-ul {
-    margin: 0 0 0.75rem;
-    padding-left: 1.2rem;
+img,
+svg {
+    max-width: 100%;
 }
 
-li {
-    margin-bottom: 0.3rem;
-}
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
 
-code {
-    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-    font-size: 0.875em;
-    background: var(--surface-2);
-    padding: 0.1em 0.35em;
-    border-radius: 4px;
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
 }
 
-pre {
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 0.85rem 1rem;
-    overflow-x: auto;
-    font-size: 0.85rem;
-    margin: 0 0 1rem;
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
 }
 
-pre code {
-    background: none;
-    padding: 0;
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
 }
 
-/* The same keycap as the library's own hints (.bit-balette-kbd), so a key written in a sentence and one
-   rendered by BaletteShortcutHint look alike. */
-kbd {
-    display: inline-block;
-    min-width: 1.5em;
-    padding: 0 0.35em;
-    border: 1px solid var(--border);
-    border-bottom-width: 2px;
-    border-radius: 5px;
-    background: var(--surface);
-    color: var(--text);
-    font-family: inherit;
-    font-size: 0.8em;
-    line-height: 1.6;
-    text-align: center;
-}
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
 
-a {
-    color: var(--accent);
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
 }
 
-/* ---- Layout ---------------------------------------------------------------------------------- */
-
-.app {
-    display: grid;
-    grid-template-columns: 232px 1fr;
-    min-height: 100vh;
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
 }
 
-.sidebar {
-    background: var(--surface);
-    border-right: 1px solid var(--border);
-    padding: 1.25rem 0.85rem;
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    overflow-y: auto;
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
 }
 
-.brand {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    font-weight: 650;
-    font-size: 1.05rem;
-    padding: 0 0.5rem 1rem;
-    letter-spacing: -0.01em;
-    color: var(--text);
-    text-decoration: none;
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
 }
 
-.brand-mark {
-    width: 26px;
-    height: 26px;
-    flex: none;
-    color: var(--accent);
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
 }
 
-.nav-section {
-    font-size: 0.7rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--text-muted);
-    padding: 0.9rem 0.6rem 0.35rem;
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
 }
 
-.nav-link {
-    display: block;
-    padding: 0.4rem 0.6rem;
-    border-radius: 7px;
-    color: var(--text);
-    text-decoration: none;
-    font-size: 0.9rem;
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
 }
 
-.nav-link:hover {
-    background: var(--surface-2);
+p {
+    margin: 0 0 .75rem;
 }
 
-.nav-link.active {
-    background: var(--accent-soft);
-    color: var(--accent);
-    font-weight: 550;
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
 }
 
-.content {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
 }
 
-/* The palette is one keystroke away on every page, but a visitor who has not learnt the keystroke yet
-   needs something to click: the trigger and the mode buttons stay in view while the page scrolls. */
-.topbar {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.6rem 2rem;
-    background: color-mix(in srgb, var(--bg) 88%, transparent);
-    -webkit-backdrop-filter: blur(6px);
-    backdrop-filter: blur(6px);
-    border-bottom: 1px solid var(--border);
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
 }
 
-.topbar .topbar-trigger {
-    flex: 1 1 260px;
-    max-width: 420px;
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
 }
 
-.topbar-modes {
-    display: flex;
-    gap: 0.35rem;
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
 }
 
-.topbar-modes .btn kbd {
-    min-width: 1.4em;
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-.main {
-    padding: 1.75rem 2rem 3rem;
-    max-width: 1180px;
+.bb-site-content {
+    flex: 1;
     width: 100%;
+    background: var(--bb-bg);
 }
 
-.page-intro {
-    color: var(--text-muted);
-    max-width: 72ch;
-    margin-bottom: 1.25rem;
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
 }
 
-/* ---- Panels and controls ---------------------------------------------------------------------- */
-
-.panel {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    overflow: hidden;
-    margin-bottom: 1rem;
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
 }
 
-.padded,
-.panel.padded {
-    padding: 1rem 1.15rem;
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
 }
 
-.panel.padded > h2:first-child {
-    margin-top: 0;
+article {
+    width: 100%;
+    min-width: 0;
 }
 
-.panel > table {
-    margin: 0;
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
 }
 
-.toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.5rem 0.6rem;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
-}
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
 
-.toolbar-group {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
+.bb-intro {
+    margin-bottom: 2.5rem;
 }
 
-.toolbar-separator {
-    width: 1px;
-    align-self: stretch;
-    background: var(--border);
-    margin: 0.15rem 0.35rem;
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
 }
 
-.toolbar-spacer {
-    flex: 1;
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
 }
 
-.actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin: 0 0 1.25rem;
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
 }
 
-.stack {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.4rem;
-    margin-bottom: 0.75rem;
-}
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
 
-.btn {
+.btn,
+button.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.35rem;
-    min-height: 34px;
-    padding: 0.3rem 0.65rem;
-    border: 1px solid var(--border);
-    border-radius: 7px;
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    font-size: 0.85rem;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
     cursor: pointer;
+    text-decoration: none;
     white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
     text-decoration: none;
 }
 
-.btn:hover:not(:disabled) {
-    background: var(--surface-2);
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
 }
 
+.btn[disabled],
 .btn:disabled {
-    opacity: 0.45;
     cursor: not-allowed;
+    opacity: .45;
 }
 
-.btn:focus-visible,
-.swatch:focus-visible,
-.card:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
 }
 
-.btn.active {
-    background: var(--accent-soft);
-    border-color: var(--accent);
-    color: var(--accent);
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
 }
 
-.btn.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
 }
 
-:root[data-theme="dark"] .btn.primary {
-    color: #0b0c10;
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
 }
 
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) .btn.primary {
-        color: #0b0c10;
-    }
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-.btn.primary:hover:not(:disabled) {
-    background: var(--accent);
-    filter: brightness(1.08);
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
 }
 
-.btn.danger {
-    color: var(--danger);
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
 }
 
-.btn code {
-    background: var(--surface-2);
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
 }
 
-.swatch {
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    border: 2px solid var(--border);
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
     padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
     cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.swatch.active {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-.field {
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
     display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.82rem;
-    color: var(--text-muted);
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.field.grow {
-    flex: 1 1 260px;
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
 }
 
-.field input.grow {
-    flex: 1;
-    min-width: 0;
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
 }
 
-.try-box {
-    max-width: 420px;
-    margin-bottom: 1rem;
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
 }
 
-.try-box input {
-    flex: 1;
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
 }
 
-select,
-input[type="text"],
-input[type="number"] {
-    font: inherit;
-    font-size: 0.85rem;
-    padding: 0.3rem 0.45rem;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    background: var(--surface);
-    color: var(--text);
-    min-height: 34px;
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
 }
 
-input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: var(--accent);
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
 }
 
-.statusbar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    padding: 0.45rem 0.7rem;
-    border-top: 1px solid var(--border);
-    background: var(--surface);
-    font-size: 0.78rem;
-    color: var(--text-muted);
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
 }
 
-.statusbar strong {
-    color: var(--text);
-    font-weight: 600;
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
 }
 
-.badge {
-    display: inline-block;
-    padding: 0.05rem 0.4rem;
-    border-radius: 999px;
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    font-size: 0.72rem;
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
 }
 
-.badge.on {
-    background: var(--accent-soft);
-    border-color: var(--accent);
-    color: var(--accent);
+.bb-card-desc:last-child {
+    margin-bottom: 0;
 }
 
-.muted {
-    color: var(--text-muted);
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.small {
-    font-size: 0.8rem;
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
 }
 
-.grid {
+.bb-grid {
     display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
     gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    margin-bottom: 1rem;
 }
 
-.card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1rem 1.1rem;
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
 }
 
-a.card {
-    display: block;
-    color: var(--text);
-    text-decoration: none;
-    transition: border-color 120ms;
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
-a.card:hover {
-    border-color: var(--accent);
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.card p {
-    margin: 0;
-    color: var(--text-muted);
-    font-size: 0.87rem;
+.bb-flex > .bb-card {
+    margin-bottom: 0;
 }
 
-.note {
-    border-left: 3px solid var(--accent);
-    background: var(--surface);
-    border-radius: 0 var(--radius) var(--radius) 0;
-    padding: 0.7rem 0.9rem;
-    font-size: 0.87rem;
-    color: var(--text-muted);
-    margin: 1rem 0;
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
 }
 
-.output {
-    max-height: 260px;
-    overflow: auto;
-    font-size: 0.75rem;
-    white-space: pre-wrap;
-    word-break: break-all;
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
 }
 
-table {
-    border-collapse: collapse;
-    width: 100%;
-    font-size: 0.85rem;
-    margin: 0 0 1rem;
-}
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
 
-th,
-td {
-    text-align: left;
-    padding: 0.4rem 0.6rem;
-    border-bottom: 1px solid var(--border);
-    vertical-align: top;
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
 }
 
-tbody tr:last-child td {
-    border-bottom: none;
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
 }
 
-th {
-    font-weight: 600;
-    color: var(--text-muted);
-    font-size: 0.78rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
 }
 
-th.num,
-td.num {
-    text-align: right;
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
 }
 
-td .btn {
-    min-height: 28px;
-    padding: 0.15rem 0.55rem;
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-/* Matched characters in the search lab: the same mark the palette draws. */
-td mark.bit-balette-mark {
-    background: var(--bit-balette-mark-bg);
-    color: inherit;
-    border-radius: 2px;
-    padding: 0 1px;
-    margin: 0 -1px;
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
 }
 
-.split {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 1fr;
-    align-items: start;
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
 }
 
-/* ---- Page pieces ------------------------------------------------------------------------------ */
-
-.try-list li {
-    margin-bottom: 0.45rem;
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
 }
 
-.log {
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
     list-style: none;
-    padding: 0;
     margin: 0;
-    max-height: 320px;
-    overflow-y: auto;
-    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-    font-size: 0.8rem;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
-.log li {
-    padding: 0.2rem 0;
-    margin: 0;
-    border-bottom: 1px dashed var(--border);
+.bb-link-list li {
+    display: flex;
+    align-items: center;
 }
 
-.counter {
-    font-size: 1.1rem;
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.settings {
-    max-width: 560px;
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
 }
 
-.setting {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 0.6rem 1rem;
-    border-bottom: 1px solid var(--border);
-    cursor: pointer;
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
 }
 
-.setting:last-child {
-    border-bottom: none;
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
 }
 
-.setting > span {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
 }
 
-.inline-hint {
-    margin-right: 0.6rem;
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
 }
 
-/* ---- Inside the palette: the icons the commands name through IconCss, and the detail template ---- */
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
 
-.demo-avatar {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #818cf8, #22d3ee);
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
 }
 
-.demo-plus::before {
-    content: "+";
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 1;
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
 }
 
-.demo-dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
 }
 
-.demo-dot-red {
-    background: #ef4444;
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
 }
 
-.demo-dot-blue {
-    background: #3b82f6;
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
 }
 
-.demo-dot-green {
-    background: #22c55e;
-}
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
 
-.demo-dot-yellow {
-    background: #eab308;
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
 }
 
-.demo-dot-purple {
-    background: #a855f7;
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
 }
 
-.demo-detail h3 {
-    font-size: 1rem;
-    margin: 4px 0 8px;
-    color: var(--bit-balette-fg);
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
 }
 
-.demo-detail p {
-    margin: 0 0 8px;
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
 }
 
-.demo-detail-kind {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--bit-balette-fg-subtle);
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
 }
 
-.demo-detail-sub {
-    color: var(--bit-balette-fg-muted);
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
 }
 
-.demo-detail dl {
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
     display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 2px 12px;
-    margin: 8px 0;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
 }
 
-.demo-detail dt {
-    color: var(--bit-balette-fg-subtle);
-    font-weight: 500;
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
 }
 
-.demo-detail dd {
+.bb-params dd {
     margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
 }
 
-.demo-detail-id {
-    font-size: 11px;
-    color: var(--bit-balette-fg-subtle);
-    background: none;
-    padding: 0;
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
 }
 
-/* ---- Small screens ---------------------------------------------------------------------------- */
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
 
-@media (max-width: 900px) {
-    .app {
-        grid-template-columns: 1fr;
-    }
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
 
-    .sidebar {
-        position: static;
-        height: auto;
-        border-right: none;
-        border-bottom: 1px solid var(--border);
-    }
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
 
-    .topbar {
-        padding: 0.6rem 1rem;
-    }
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
 
-    .main {
-        padding: 1.25rem 1rem 2.5rem;
-    }
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
 
-    .split {
-        grid-template-columns: 1fr;
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
     }
+}
 
-    .panel {
-        overflow-x: auto;
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
     }
 }
 
-/* The mode buttons keep their prefix and lose their label before they wrap under the trigger. */
-@media (max-width: 560px) {
-    .topbar-modes .btn span {
-        display: none;
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
     }
 }
 
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
 #blazor-error-ui {
     position: fixed;
+    inset-inline: 0;
     bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
+    z-index: 1300;
     display: none;
-    padding: 0.7rem 1.2rem;
-    background: #fee2e2;
-    color: #7f1d1d;
-    border-top: 1px solid #fca5a5;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
 }
 
 #blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
     cursor: pointer;
-    float: right;
-    font-weight: 700;
 }
 
-/* A keyboard user should not have to tab through every navigation link to reach the page. */
-.skip-link {
-    position: absolute;
-    left: -9999px;
-    top: 0;
-    z-index: 100;
-    padding: 0.6rem 1rem;
-    background: #111827;
-    color: #ffffff;
-    border-radius: 0 0 6px 0;
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
 }
 
-.skip-link:focus {
-    left: 0;
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
 }
 
-main:focus,
-h1:focus {
-    outline: none;
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
 }
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/demo.css b/src/Utilities/Balette/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..ec04a871245
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,446 @@
+/* ============================================================================================
+   Balette demo - the palette's tokens, and the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Balette's own - the palette's colours, the bar that opens
+   it, the icons and the detail pane its commands render, and the readouts of the demo pages - and
+   it is written against the kit's --bb-* names, so it follows the light/dark theme with no rules
+   of its own for either.
+   ============================================================================================ */
+
+/* ---------- The palette's tokens, on the site's theme and in the bit brand ----------
+
+   bit-balette.css follows prefers-color-scheme, or <html data-theme>. This site's theme is the kit's
+   <html bit-theme="light|dark"> instead, which the header's toggle sets - so the same custom
+   properties are given again here, once for each theme, in the site's own palette. The trigger and
+   the shortcut hints outside the dialog read them from :root too, so they follow along.
+
+   html:root rather than :root: the library's prefers-color-scheme rule has the specificity of
+   :root[...] and would otherwise win on a dark OS with the site switched to light. The dialog's own
+   Theme parameter (data-theme on the dialog) gets the same values, so a dark palette over a light
+   page - or the other way round - is still this brand's. */
+html:root,
+html:root[bit-theme="light"],
+:root dialog[data-balette="dialog"][data-theme="light"] {
+    --bit-balette-font: var(--bb-font-sans);
+    --bit-balette-mono: var(--bb-mono);
+
+    --bit-balette-bg: #FFFFFF;
+    --bit-balette-bg-elevated: #F5F5F5;
+    --bit-balette-fg: #1A1A1A;
+    --bit-balette-fg-muted: #525252;
+    --bit-balette-fg-subtle: #6B6B6B;
+    --bit-balette-border: #E0E0E0;
+    --bit-balette-accent: #1276C6;
+    --bit-balette-accent-fg: #FFFFFF;
+    --bit-balette-accent-soft: rgba(18, 118, 198, .10);
+    --bit-balette-active-bg: rgba(0, 0, 0, .05);
+    --bit-balette-danger: #D2393B;
+    --bit-balette-danger-soft: rgba(210, 57, 59, .10);
+    --bit-balette-mark-bg: rgba(18, 118, 198, .18);
+    --bit-balette-kbd-bg: #F5F5F5;
+    --bit-balette-kbd-fg: #424242;
+    --bit-balette-kbd-border: #D1D1D1;
+    --bit-balette-backdrop: rgba(0, 0, 0, .40);
+    --bit-balette-shadow: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --bit-balette-scrollbar: #ADADAD;
+}
+
+html:root[bit-theme="dark"],
+:root dialog[data-balette="dialog"][data-theme="dark"] {
+    --bit-balette-bg: #171C22;
+    --bit-balette-bg-elevated: #1D2329;
+    --bit-balette-fg: #E6ECF2;
+    --bit-balette-fg-muted: #B9BEC4;
+    --bit-balette-fg-subtle: #8E9398;
+    --bit-balette-border: #2B3138;
+    --bit-balette-accent: #4FA3F4;
+    --bit-balette-accent-fg: #0F1318;
+    --bit-balette-accent-soft: rgba(79, 163, 244, .16);
+    --bit-balette-active-bg: rgba(255, 255, 255, .07);
+    --bit-balette-danger: #E67A73;
+    --bit-balette-danger-soft: rgba(230, 122, 115, .14);
+    --bit-balette-mark-bg: rgba(79, 163, 244, .28);
+    --bit-balette-kbd-bg: #22272C;
+    --bit-balette-kbd-fg: #D0D5DA;
+    --bit-balette-kbd-border: #454C53;
+    --bit-balette-backdrop: rgba(0, 0, 0, .62);
+    --bit-balette-shadow: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36), 0 0 0 1px rgba(255, 255, 255, .06);
+    --bit-balette-scrollbar: #454C53;
+}
+
+/* The kit dresses every text input as a Fluent field. The palette's input is the dialog's own -
+   borderless, filling its row - so the field's padding, height and corners are taken back off it. */
+.bit-balette-dialog .bit-balette-input,
+.bit-balette-dialog .bit-balette-input:focus-visible {
+    min-height: 0;
+    max-width: none;
+    padding: 0;
+    border-radius: 0;
+    line-height: normal;
+}
+
+/* The palette host: a wrapper for the ready marker that lays nothing out of its own. A closed
+   <dialog> takes no space, and an open one is in the top layer. */
+.demo-palette {
+    display: contents;
+}
+
+/* ---------- The bar that opens it: the trigger and a button per mode ---------- */
+
+.demo-palette-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 2rem;
+}
+
+/* The trigger drawn as a Fluent search box: the field's hairline with the heavier bottom stroke. */
+.demo-palette-bar .demo-trigger {
+    flex: 1 1 260px;
+    max-width: 420px;
+    min-width: 0;
+    height: 2rem;
+    padding: 0 .375rem 0 .625rem;
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.demo-palette-bar .demo-trigger:hover {
+    color: var(--bb-text-muted);
+    border-color: var(--bb-text-soft);
+}
+
+.demo-palette-bar .demo-trigger .bit-balette-trigger-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.demo-palette-modes {
+    display: flex;
+    gap: .375rem;
+}
+
+.demo-palette-modes .btn kbd {
+    min-width: 1.25rem;
+    padding: 0 .25rem;
+}
+
+/* The mode buttons keep their prefix and lose their label before they wrap under the trigger. */
+@media (max-width: 560px) {
+    .demo-palette-modes .btn span {
+        display: none;
+    }
+}
+
+/* ---------- Inside the palette: the icons the commands name through IconCss, and the detail template ---------- */
+
+.demo-avatar {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--bb-primary), var(--bb-accent));
+}
+
+.demo-plus::before {
+    content: "+";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 1;
+}
+
+.demo-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.demo-dot-red { background: #D2393B; }
+.demo-dot-blue { background: #1276C6; }
+.demo-dot-green { background: #228422; }
+.demo-dot-yellow { background: #EDAE12; }
+.demo-dot-purple { background: #8B5CF6; }
+
+.demo-detail h3 {
+    margin: 4px 0 8px;
+    font-family: var(--bit-balette-font);
+    font-size: 1rem;
+    color: var(--bit-balette-fg);
+}
+
+.demo-detail p {
+    margin: 0 0 8px;
+}
+
+.demo-detail-kind {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bit-balette-fg-subtle);
+}
+
+.demo-detail-sub {
+    color: var(--bit-balette-fg-muted);
+}
+
+.demo-detail dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 2px 12px;
+    margin: 8px 0;
+}
+
+.demo-detail dt {
+    color: var(--bit-balette-fg-subtle);
+    font-weight: 500;
+}
+
+.demo-detail dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+/* The command's id: a caption, not an inline identifier chip. */
+.demo-detail-id {
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 11px;
+    color: var(--bit-balette-fg-subtle);
+}
+
+/* ---------- The landing hero: the app the palette runs in ---------- */
+
+.demo-hero-app {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+}
+
+.demo-hero-app .demo-palette-bar {
+    margin: 0;
+}
+
+/* The frame is narrower than a docs column: the trigger takes the whole first row, so its label is
+   never cut short, and the mode buttons go under it. */
+.demo-hero-app .demo-palette-bar .demo-trigger {
+    flex-basis: 100%;
+    max-width: none;
+}
+
+.demo-hero-try {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .375rem;
+}
+
+.demo-hero-try .bb-overline {
+    margin-inline-end: .25rem;
+}
+
+/* A query to open the palette with: the query itself is the label. */
+.demo-chip.btn {
+    min-height: 1.75rem;
+    padding: .125rem .5rem;
+    border-radius: var(--bb-radius-pill);
+}
+
+.demo-chip code {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+}
+
+.demo-hero-state {
+    margin: 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+    overflow-wrap: anywhere;
+}
+
+.demo-hero-state strong {
+    color: var(--bb-text);
+}
+
+.demo-hero-log {
+    height: 9rem;
+    margin: 0;
+}
+
+.demo-hero-log kbd {
+    color: var(--bb-code-fg);
+    background: transparent;
+}
+
+/* ---------- Readouts and controls of the demo pages ---------- */
+
+.demo-small {
+    font-size: var(--fl-font-size-100);
+}
+
+.demo-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.demo-stack .btn {
+    white-space: normal;
+    text-align: start;
+}
+
+.demo-counter {
+    font-size: var(--fl-font-size-400);
+    color: var(--bb-text);
+}
+
+/* A bar of live numbers under a sample. */
+.demo-statusbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .25rem 1rem;
+    margin-top: 1rem;
+    padding-top: .75rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-muted);
+}
+
+.demo-statusbar strong {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* A list of settings: the label at the start, its control at the end. */
+.demo-settings {
+    max-width: 560px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.demo-setting {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: .625rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+.demo-setting:last-child {
+    border-bottom: 0;
+}
+
+.demo-setting > span {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+/* Numbers line up on their right edge, digit under digit. */
+.bb-table th.demo-num,
+.bb-table td.demo-num {
+    text-align: end;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Matched characters in the search lab: the same mark the palette draws. */
+.bb-table mark.bit-balette-mark {
+    padding: 0 1px;
+    margin: 0 -1px;
+    border-radius: 2px;
+    background: var(--bit-balette-mark-bg);
+    color: inherit;
+}
+
+/* The lab's command column holds titles of two or three words: never narrower than that. */
+.demo-lab td:nth-child(2) {
+    min-width: 13rem;
+}
+
+.demo-weights {
+    max-width: 360px;
+}
+
+.bb-field.demo-grow {
+    flex: 1 1 260px;
+}
+
+.bb-field.demo-grow input {
+    width: 100%;
+}
+
+.demo-try-box {
+    display: flex;
+    max-width: 420px;
+    margin: 0 0 1.25rem;
+}
+
+.demo-try-box input {
+    width: 100%;
+}
+
+.demo-inline-hint {
+    margin-inline-end: .625rem;
+}
+
+.demo-card-heading {
+    margin: 0 0 .375rem;
+}
+
+/* The palette's accents, as round swatches; the pressed one is ringed. */
+.demo-swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    min-height: 2rem;
+    align-items: center;
+}
+
+.demo-swatch {
+    width: 1.625rem;
+    height: 1.625rem;
+    padding: 0;
+    border: 2px solid var(--bb-surface);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px var(--bb-border-strong);
+    cursor: pointer;
+}
+
+.demo-swatch-default {
+    background: var(--bit-balette-accent);
+}
+
+.demo-swatch[aria-pressed="true"] {
+    box-shadow: 0 0 0 2px var(--bb-text);
+}
+
+.demo-output {
+    max-height: 16rem;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/demo.js b/src/Utilities/Balette/Demo/Server/wwwroot/demo.js
new file mode 100644
index 00000000000..4a894d604b0
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/demo.js
@@ -0,0 +1,101 @@
+/* Balette demo - the glue between the site kit (theme.js, site.js) and this demo's own palette.
+
+   1. The site theme the way the demo's Theme command and its Theming page know it - "auto", "light" or
+      "dark" - on top of theme.js, which knows the light/dark it applied and whether the reader chose it.
+   2. A truce between the two palettes on this site. Balette's own (Ctrl+K, plus the demo's global
+      shortcuts) listens at the document in the capture phase, so it hears every key first; the site's
+      docs search (the kit's CommandPalette) answers to "/". Whichever of the two is open owns the keys. */
+(function () {
+    'use strict';
+
+    // The key theme.js keeps the reader's choice under; absent means "follow the system".
+    var THEME_KEY = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function storedTheme() {
+        try {
+            var value = localStorage.getItem(THEME_KEY);
+            return value === 'light' || value === 'dark' ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function themeMode() {
+        return storedTheme() || 'auto';
+    }
+
+    function setThemeMode(mode) {
+        var system = darkQuery.matches ? 'dark' : 'light';
+        var target = mode === 'light' || mode === 'dark' ? mode : system;
+
+        // toggle() repaints the page and tells every listener; it also stores the new theme, unless it is the
+        // system's - so the reader's own choice is written after it.
+        if (window.bitDemoTheme.get() !== target) window.bitDemoTheme.toggle();
+        try {
+            if (target === mode) {
+                localStorage.setItem(THEME_KEY, mode);
+            } else {
+                localStorage.removeItem(THEME_KEY);
+            }
+        } catch (_) { }
+
+        return themeMode();
+    }
+
+    var stopWatching = null;
+
+    function isEditable(element) {
+        if (!(element instanceof Element)) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    /* While the site's docs search is open, its keys are its own. Balette leaves alone a key whose default
+       was prevented (its guide's Troubleshooting says as much), but preventing it would also take what the
+       key does in the search box - typing, the editing chords, the browser's own shortcuts. So the event is
+       marked as claimed for the listeners after this one instead, and keeps its default: Ctrl+K pressed in
+       the docs search does not open a second palette on top of it, and G then S does not navigate behind it. */
+    function claimForSitePalette(e) {
+        if (!(e.target instanceof Element) || e.target.closest('.bb-palette') === null) return;
+        Object.defineProperty(e, 'defaultPrevented', { configurable: true, value: true });
+    }
+
+    /* The other way round: "/" opens the docs search from anywhere but a text field - which includes a button
+       inside Balette's open dialog, where the search would open behind the modal and wait there. */
+    function keepSlashFromSitePalette(e) {
+        if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey) return;
+        if (document.querySelector('dialog[data-balette="dialog"][open]') === null) return;
+        if (isEditable(document.activeElement)) return;
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    // On the window, in the capture phase: the one place that hears a key before the document does.
+    window.addEventListener('keydown', function (e) {
+        claimForSitePalette(e);
+        keepSlashFromSitePalette(e);
+    }, true);
+
+    window.baletteDemo = {
+        themeMode: themeMode,
+
+        /** Applies "auto", "light" or "dark" to the site and answers with the mode in effect. */
+        setThemeMode: setThemeMode,
+
+        /** Calls dotNetRef.OnSiteThemeChanged(mode) now and after every change of the site theme. */
+        watchTheme: function (dotNetRef) {
+            if (stopWatching) stopWatching();
+            stopWatching = window.bitDemoTheme.onChange(function () {
+                // Deferred: a change made through setThemeMode stores the reader's choice only after the
+                // repaint that announced it, and the mode reported has to be the final one.
+                setTimeout(function () { dotNetRef.invokeMethodAsync('OnSiteThemeChanged', themeMode()); }, 0);
+            });
+        },
+
+        unwatchTheme: function () {
+            if (stopWatching) stopWatching();
+            stopWatching = null;
+        }
+    };
+})();
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Balette/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/site.js b/src/Utilities/Balette/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Balette/Demo/Server/wwwroot/theme.js b/src/Utilities/Balette/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Balette/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/DemoPagesTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/DemoPagesTests.cs
index 3b23634b84a..86e5d55b81a 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/DemoPagesTests.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/DemoPagesTests.cs
@@ -5,14 +5,15 @@ namespace Bit.Balette.Tests.E2E;
 
 /// <summary>
 /// Whether every page of the demo actually works: it turns interactive, logs no error, and every button on it runs
-/// without one - the palette it opens included. An address that does not exist gets the not-found page, which is
-/// still a working page of the app.
+/// without one - the palette it opens and the site's own chrome (the docs search, the theme toggle) included. An
+/// address that does not exist gets the not-found page, which is still a working page of the app.
 /// </summary>
 [TestClass]
 public sealed class DemoPagesTests : BaletteTest
 {
     [TestMethod]
-    [DataRow("/", "bit Balette")]
+    [DataRow("/", LandingHeading)]
+    [DataRow("/getting-started", "Getting started")]
     [DataRow("/commands", "Registering commands")]
     [DataRow("/pages", "Nested pages & flows")]
     [DataRow("/search", "Search & ranking")]
@@ -23,7 +24,11 @@ public sealed class DemoPagesTests : BaletteTest
     [DataRow("/mcp-server", "MCP server")]
     public async Task Every_demo_page_loads_and_every_button_on_it_runs_without_console_errors(string path, string heading)
     {
-        var page = await NewPageAsync(await NewContextAsync());
+        // The copy button the site kit puts on every code sample writes to the clipboard, which a browser lets a
+        // click do; headless Chromium asks for the permission first, and refuses the write without it.
+        var options = DefaultContextOptions();
+        options.Permissions = ["clipboard-read", "clipboard-write"];
+        var page = await NewPageAsync(await NewContextAsync(options));
 
         var problems = new List<string>();
         page.Console += (_, message) => { if (message.Type == "error") lock (problems) problems.Add("console: " + message.Text); };
@@ -34,11 +39,12 @@ public async Task Every_demo_page_loads_and_every_button_on_it_runs_without_cons
         await WaitForReadyAsync(page);
         await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync(heading);
 
-        // Every enabled button of the page, the top bar's included, must run without throwing: a dead or broken
-        // control is a demo bug. Many of them open the palette, which is modal - it is closed before the next click,
-        // so each click lands on its own button rather than on the backdrop.
-        var buttons = page.Locator(".app button:enabled:visible");
-        int count = Math.Min(await buttons.CountAsync(), 40);
+        // Every enabled button of the page, the site header's and the palette bar's included, must run without
+        // throwing: a dead or broken control is a demo bug. Many of them open a palette - Balette's, or the header's
+        // docs search - which is modal: it is closed before the next click, so each click lands on its own button
+        // rather than on a backdrop.
+        var buttons = page.Locator(".page button:enabled:visible");
+        int count = Math.Min(await buttons.CountAsync(), 60);
         for (int i = 0; i < count; i++)
         {
             await CloseThePaletteAsync(page);
@@ -75,19 +81,31 @@ public async Task An_unknown_address_gets_the_not_found_page_and_the_palette_sti
 
         Assert.AreEqual(404, response?.Status, "an unknown address did not answer 404");
         await WaitForReadyAsync(page);
-        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("Not found");
+        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("404");
 
         // The layout is there, and with it the palette: the way out is one search away.
         await OpenPaletteAsync(page);
         await TypeAsync(page, "introduction");
         await ExpectFirstItemAsync(page, "navigation.introduction");
         await page.Keyboard.PressAsync("Enter");
-        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("bit Balette");
+        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync(LandingHeading);
     }
 
-    /// <summary>Esc until the palette is closed: a page or a confirmation takes one Esc each before the close.</summary>
+    /// <summary>The landing page's title (Pages/Home.razor).</summary>
+    private const string LandingHeading = "A command palette for Blazor, every decision in C#.";
+
+    /// <summary>
+    /// Esc until both palettes are closed: the header's docs search takes one, and in Balette's a page or a
+    /// confirmation takes one Esc each before the close.
+    /// </summary>
     private static async Task CloseThePaletteAsync(IPage page)
     {
+        if (await SiteSearch(page).IsVisibleAsync())
+        {
+            await page.Keyboard.PressAsync("Escape");
+            await Assertions.Expect(SiteSearch(page)).ToHaveCountAsync(0);
+        }
+
         for (int i = 0; i < 6; i++)
         {
             if (await Dialog(page).IsVisibleAsync() is false) return;
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/FlowTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/FlowTests.cs
index 5fc2b0101ae..47a1e4ff926 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/FlowTests.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/FlowTests.cs
@@ -24,13 +24,26 @@ public async Task A_nested_page_has_breadcrumbs_and_its_choice_applies_to_the_pa
         Assert.AreEqual("theme:auto,theme:light,theme:dark", string.Join(",", await ItemIdsAsync(page)));
         await Assertions.Expect(Item(page, "theme:auto").Locator(".bit-balette-toggle")).ToHaveAttributeAsync("data-on", "true");
 
-        // The option's handler answers Back: the theme is set on <html>, and the palette lands on the list again.
+        // The option's handler answers Back: the site theme is set on <html> (the site kit's bit-theme, which the
+        // header's toggle sets too), and the palette lands on the list again - painted dark with the page.
         await TypeAsync(page, "dark");
         await ExpectFirstItemAsync(page, "theme:dark");
         await page.Keyboard.PressAsync("Enter");
-        await Assertions.Expect(page.Locator("html")).ToHaveAttributeAsync("data-theme", "dark");
+        await Assertions.Expect(page.Locator("html")).ToHaveAttributeAsync("bit-theme", "dark");
         await Assertions.Expect(Crumbs(page)).ToHaveCountAsync(0);
         await Assertions.Expect(Dialog(page)).ToBeVisibleAsync();
+        await Assertions.Expect(Dialog(page)).ToHaveCSSAsync("background-color", "rgb(23, 28, 34)");
+
+        // The choice is the reader's, so it is remembered: after a reload the page is still dark, and the Theme
+        // command still says so rather than "auto".
+        await page.Keyboard.PressAsync("Escape");
+        await ExpectClosedAsync(page);
+        await ReloadAsync(page);
+        await Assertions.Expect(page.Locator("html")).ToHaveAttributeAsync("bit-theme", "dark");
+        await OpenPaletteAsync(page);
+        await TypeAsync(page, "theme");
+        await ExpectFirstItemAsync(page, "preferences.theme");
+        await Assertions.Expect(Item(page, "preferences.theme")).ToContainTextAsync("Dark");
     }
 
     [TestMethod]
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/GlobalShortcutTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/GlobalShortcutTests.cs
index cdf80e919fa..2bb0d6a1110 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/GlobalShortcutTests.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/GlobalShortcutTests.cs
@@ -36,7 +36,7 @@ public async Task Plain_keys_typed_in_a_page_field_are_typing_while_chords_still
         await page.Keyboard.TypeAsync("gsc");
         await Assertions.Expect(field).ToHaveValueAsync("gsc");
         Assert.IsTrue(page.Url.EndsWith("/keyboard", StringComparison.Ordinal), $"typing in a text field ran a shortcut and moved to {page.Url}");
-        await Assertions.Expect(page.Locator(".statusbar")).ToContainTextAsync("nothing yet");
+        await Assertions.Expect(page.Locator(".demo-statusbar")).ToContainTextAsync("nothing yet");
 
         // A chord with a modifier is not typing, so it still opens the palette from the field.
         await OpenPaletteAsync(page);
@@ -97,10 +97,10 @@ public async Task Mod_slash_lands_on_the_keyboard_page()
     public async Task Chords_run_their_commands_with_the_palette_closed()
     {
         var page = await OpenAsync("/commands");
-        var wordWrap = page.Locator("label.setting", new() { HasTextString = "Word wrap" }).Locator("input[type=checkbox]");
+        var wordWrap = page.Locator("label.demo-setting", new() { HasTextString = "Word wrap" }).Locator("input[type=checkbox]");
         await Assertions.Expect(wordWrap).ToBeCheckedAsync();
 
-        // Alt+Z, registered app-wide by the layout. Both commands answer KeepOpen, which keeps an open palette where it
+        // Alt+Z, registered app-wide by the palette host. Both commands answer KeepOpen, which keeps an open palette where it
         // was; with the palette closed - here it has not even been opened once since the page loaded - there is no
         // input to focus, and nothing may try to (a failure to do so is a fatal page error; see BaletteTest).
         await page.Keyboard.PressAsync("Alt+z");
@@ -111,7 +111,7 @@ public async Task Chords_run_their_commands_with_the_palette_closed()
         // Ctrl+Up, registered by this page only, while it is on screen.
         await page.Keyboard.PressAsync("Control+ArrowUp");
         await page.Keyboard.PressAsync("Control+ArrowUp");
-        await Assertions.Expect(page.Locator(".counter")).ToHaveTextAsync("Counter: 2");
+        await Assertions.Expect(page.Locator(".demo-counter")).ToHaveTextAsync("Counter: 2");
         await ExpectClosedAsync(page);
     }
 
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/Infrastructure/BaletteTest.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/Infrastructure/BaletteTest.cs
index 0803f147023..2e3a46314d3 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/Infrastructure/BaletteTest.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/Infrastructure/BaletteTest.cs
@@ -114,14 +114,13 @@ protected async Task<IPage> NewPageAsync(IBrowserContext context)
     /// <summary>
     /// Waits until the page runs in the browser and the palette's browser layer listens for keys. Every page is
     /// prerendered, so its markup - the trigger and the mode buttons included - is on screen long before anything
-    /// handles a click, and the layer that hears Ctrl+K starts a moment after the page turns interactive.
+    /// handles a click, and the layer that hears Ctrl+K starts a moment after the page turns interactive. The layout
+    /// says the first (data-interactive on the site shell's .page), the palette host the second (data-palette-ready).
     /// </summary>
     protected static Task WaitForReadyAsync(IPage page) => page.WaitForFunctionAsync(
         """
-        () => {
-          const app = document.querySelector('.app');
-          return app?.dataset.interactive === 'true' && app?.dataset.paletteReady === 'true';
-        }
+        () => document.querySelector('.page')?.dataset.interactive === 'true'
+           && document.querySelector('[data-palette-ready]')?.dataset.paletteReady === 'true'
         """, null, new PageWaitForFunctionOptions { Timeout = 90_000 });
 
     protected static async Task ReloadAsync(IPage page)
@@ -156,6 +155,12 @@ protected static async Task ReloadAsync(IPage page)
 
     protected static ILocator Detail(IPage page) => page.Locator("[data-balette='detail']");
 
+    /// <summary>The bar every demo page opens with: the trigger and a button per mode (Components/PaletteBar.razor).</summary>
+    protected static ILocator ModeButton(IPage page, string title) => page.Locator($".demo-palette-modes button[title='{title}']");
+
+    /// <summary>The site's own documentation search (the site kit's CommandPalette), which answers to "/".</summary>
+    protected static ILocator SiteSearch(IPage page) => page.Locator(".bb-palette[role='dialog']");
+
     /// <summary>The polite live region the palette announces result counts in.</summary>
     protected static ILocator LiveRegion(IPage page) => page.Locator("dialog[data-balette='dialog'] [aria-live='polite']");
 
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ModesAndSourcesTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ModesAndSourcesTests.cs
index 7a582d1a8c9..191f52c1c28 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ModesAndSourcesTests.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ModesAndSourcesTests.cs
@@ -41,7 +41,7 @@ public async Task A_mode_button_opens_the_palette_with_its_prefix_kept_for_typin
     {
         var page = await OpenAsync("/");
 
-        await page.Locator($".topbar-modes button[title='{button}']").ClickAsync();
+        await ModeButton(page, button).ClickAsync();
         await ExpectOpenAsync(page);
         await Assertions.Expect(Input(page)).ToHaveValueAsync(prefix);
 
@@ -106,7 +106,7 @@ public async Task Keystrokes_typed_in_a_burst_reach_the_source_far_fewer_times_t
 
         // The modes page logs every call that reached a source. Most keystrokes of a burst are swallowed by the
         // debounce, and the call for the whole query is the one that completed.
-        var log = page.Locator("main .panel").Filter(new() { Has = page.GetByRole(AriaRole.Button, new() { Name = "Clear", Exact = true }) });
+        var log = page.Locator("main .bb-demo").Filter(new() { Has = page.GetByRole(AriaRole.Button, new() { Name = "Clear", Exact = true }) });
         var calls = log.Locator("tbody tr").Filter(new() { Has = page.Locator("td:nth-child(2)", new() { HasTextRegex = new Regex("^People$") }) });
         await Assertions.Expect(calls.First.Locator("code")).ToHaveTextAsync(query);
         await Assertions.Expect(calls.First).ToContainTextAsync("Completed");
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/OpenAndCloseTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/OpenAndCloseTests.cs
index 01d22fde1c6..33dd00f04fb 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/OpenAndCloseTests.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/OpenAndCloseTests.cs
@@ -118,7 +118,7 @@ public async Task The_page_behind_it_can_be_neither_focused_nor_clicked()
         var probe = await page.EvaluateAsync<bool[]>(
             """
             () => {
-              const button = document.querySelector('.topbar-modes button');
+              const button = document.querySelector('.demo-palette-modes button');
               button.focus();
               const r = button.getBoundingClientRect();
               const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/README.md b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/README.md
index e8ff71193e6..db4cc4f626b 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/README.md
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/README.md
@@ -25,15 +25,17 @@ shows after a command ran.
 |---|---|
 | `OpenAndCloseTests` | `Ctrl+K` and `Ctrl+Shift+P` open a modal dialog in the top layer with the focus in the input; inside it `Ctrl+Shift+P` pins instead of closing; `Esc` closes it and gives the focus back to the field or the trigger that had it; a click on the backdrop closes it and one inside does not; the page behind it can be neither focused nor hit; the scroll lock on `<html>` is what keeps the page from scrolling, and it goes with the palette. |
 | `SearchAndNavigationTests` | Typing filters and ranks (`gs` puts Settings first); the `<mark>`s are on the matched characters, and the segments of a title touch, with no gap between them (they share one inline box); the live region announces the result count; `↑` `↓` `Ctrl+N` `Ctrl+P` `Home` `End` move the active row, with `aria-activedescendant`, `aria-selected` and the focus following; the active row is scrolled into view in a long list; `Tab` stays in the dialog and opens the action panel; `Backspace` deletes text when there is some and goes back a page when there is none, without eating the query it restores. |
-| `FlowTests` | A nested page with breadcrumbs whose choice sets the page's theme; the lazy page's loading state, then its items; the rename prompt, pre-filled, renaming the project; a multi-select page toggled with `Enter` and `Space` and applied with `Ctrl+Enter`; a destructive command that needs a second `Enter`, disarmed by `Esc`; Pin to top from the action panel, listed under Pinned when reopened; a recent that survives a reload; toasts, a disabled row explaining itself, and the toast of a handler that closes the palette shown before it closes; choosing a page navigates there by keyboard and by mouse. |
-| `ModesAndSourcesTests` | A typed prefix selects its mode and shows the chip; the top bar's mode buttons open the palette with the prefix kept and the caret after it, so typing goes on from there; `#105` finds that issue; `@ada` answers only after the debounce and the source's latency, with the detail pane showing the person; a burst of keystrokes reaches the source far fewer times than it was typed; the documentation source answers next to the registry. |
+| `FlowTests` | A nested page with breadcrumbs whose choice sets the page's theme, remembered across a reload; the lazy page's loading state, then its items; the rename prompt, pre-filled, renaming the project; a multi-select page toggled with `Enter` and `Space` and applied with `Ctrl+Enter`; a destructive command that needs a second `Enter`, disarmed by `Esc`; Pin to top from the action panel, listed under Pinned when reopened; a recent that survives a reload; toasts, a disabled row explaining itself, and the toast of a handler that closes the palette shown before it closes; choosing a page navigates there by keyboard and by mouse. |
+| `ModesAndSourcesTests` | A typed prefix selects its mode and shows the chip; the palette bar's mode buttons open the palette with the prefix kept and the caret after it, so typing goes on from there; `#105` finds that issue; `@ada` answers only after the debounce and the source's latency, with the detail pane showing the person; a burst of keystrokes reaches the source far fewer times than it was typed; the documentation source answers next to the registry. |
 | `GlobalShortcutTests` | `G` then `S` navigates with the palette closed; plain keys typed in a page field are typing while chords still fire from it; a single-key shortcut declared in markup; `F2` runs Rename project… and opens the palette on its prompt; `Mod+/` lands on the keyboard page; `Alt+Z` and a page's own `Ctrl+Up` run with the palette closed; with Vim bindings on, `Ctrl+K` inside the palette moves up instead of closing. |
-| `ThemingAndLayoutTests` | The palette and site theme buttons change the colours the dialog is painted with; the accent token recolours the mode chip and the highlights; the detail pane follows the page's checkbox and the palette's own toggle, and the dialog's width with it; on a 390 px phone the dialog fills the screen and nothing overflows sideways. |
-| `DemoPagesTests` | Every demo page loads, turns interactive and logs no error, and every button on it runs without one; an unknown address gets the not-found page (404), where the palette still works. |
+| `ThemingAndLayoutTests` | The palette and site theme buttons change the colours the dialog is painted with - the site's `bit-theme`, which demo.css points the palette's custom properties at; the header's own theme toggle is followed by the palette and shown by the Theme command, and `auto` drops the pinned choice again; the accent token recolours the mode chip and the highlights; the detail pane follows the page's checkbox and the palette's own toggle, and the dialog's width with it; on a 390 px phone the dialog fills the screen and nothing overflows sideways. |
+| `TwoPalettesTests` | The site has two palettes - Balette on `Ctrl+K` and the header's docs search on `/` - and a key never reaches both: each opens the one it belongs to; while the docs search is open Balette's toggle, chords and page shortcuts stay quiet and the search keeps typing, its arrows and `Enter`; while Balette is open a `/` is typed into it, and from one of its buttons does not open the search behind it. |
+| `DemoPagesTests` | Every demo page loads, turns interactive and logs no error, and every button on it - the site header's included - runs without one; an unknown address gets the not-found page (404), where the palette still works. |
 
 Every page is prerendered, so its markup - the trigger and the mode buttons included - is on screen before anything
 handles a click, and the browser layer that hears `Ctrl+K` starts a moment after the page turns interactive. Each test
-waits for both: `data-interactive="true"` and `data-palette-ready="true"` on the layout's `.app` element.
+waits for both: `data-interactive="true"` on the site shell's `.page` element and `data-palette-ready="true"` on the
+palette host (`Components/AppPalette.razor`).
 
 Every test also fails on any uncaught page error and on any console error in which Blazor reports an unhandled
 exception, whatever the test was looking at: an exception that escapes a handler can leave every later keystroke
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ThemingAndLayoutTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ThemingAndLayoutTests.cs
index d97c7acad9e..1d5394275d5 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ThemingAndLayoutTests.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/ThemingAndLayoutTests.cs
@@ -8,11 +8,17 @@ namespace Bit.Balette.Tests.E2E;
 /// coming and going, and the full-screen layout on a phone-sized viewport. Every value is read back with
 /// getComputedStyle or getBoundingClientRect, never from the markup.
 /// </summary>
+/// <remarks>
+/// The colours are this site's, not the library's defaults: demo.css points the palette's custom properties at the
+/// site kit's bit-theme attribute, in the bit brand - which is itself what these tests prove reaches the dialog.
+/// </remarks>
 [TestClass]
 public sealed class ThemingAndLayoutTests : BaletteTest
 {
     private const string LightBackground = "rgb(255, 255, 255)";
-    private const string DarkBackground = "rgb(23, 24, 28)";
+    private const string DarkBackground = "rgb(23, 28, 34)";
+    private const string DarkForeground = "rgb(230, 236, 242)";
+    private const string BrandAccent = "rgb(18, 118, 198)";
 
     [TestMethod]
     public async Task The_theme_buttons_change_the_colours_the_dialog_is_painted_with()
@@ -22,33 +28,65 @@ public async Task The_theme_buttons_change_the_colours_the_dialog_is_painted_wit
         // The palette's own Theme parameter: a dark palette over the light page.
         await ThemeButton(page, "Palette theme", "Dark").ClickAsync();
         Assert.AreEqual(DarkBackground, await OpenAndReadAsync(page, "backgroundColor"));
-        Assert.AreEqual("rgb(243, 244, 246)", await OpenAndReadAsync(page, "color"));
+        Assert.AreEqual(DarkForeground, await OpenAndReadAsync(page, "color"));
         await Assertions.Expect(Dialog(page)).ToHaveAttributeAsync("data-theme", "dark");
 
         await ThemeButton(page, "Palette theme", "Light").ClickAsync();
         Assert.AreEqual(LightBackground, await OpenAndReadAsync(page, "backgroundColor"));
 
-        // Back to following the page, and the page turned dark: <html data-theme> restyles the palette with it.
+        // Back to following the page, and the page turned dark: <html bit-theme> restyles the palette with it.
         await ThemeButton(page, "Palette theme", "Follows the page").ClickAsync();
         await ThemeButton(page, "Site theme", "Dark").ClickAsync();
-        await Assertions.Expect(page.Locator("html")).ToHaveAttributeAsync("data-theme", "dark");
+        await Assertions.Expect(page.Locator("html")).ToHaveAttributeAsync("bit-theme", "dark");
         Assert.AreEqual(DarkBackground, await OpenAndReadAsync(page, "backgroundColor"));
+
+        // And a light palette over the dark page: the palette's own Theme wins for the palette alone.
+        await ThemeButton(page, "Palette theme", "Light").ClickAsync();
+        Assert.AreEqual(LightBackground, await OpenAndReadAsync(page, "backgroundColor"));
+    }
+
+    [TestMethod]
+    public async Task The_header_toggle_is_the_site_theme_the_palette_follows_and_the_Theme_command_shows()
+    {
+        var page = await OpenAsync("/theming");
+        Assert.AreEqual(LightBackground, await OpenAndReadAsync(page, "backgroundColor"));
+
+        // The site kit's own toggle, not one of the demo's: the palette follows it like any other change of theme,
+        // and the demo's state hears of it, so the Site buttons and the Theme command show what is on screen.
+        await page.Locator(".bb-theme-toggle").ClickAsync();
+        await Assertions.Expect(page.Locator("html")).ToHaveAttributeAsync("bit-theme", "dark");
+        await Assertions.Expect(ThemeButton(page, "Site theme", "Dark")).ToHaveAttributeAsync("aria-pressed", "true");
+        Assert.AreEqual(DarkBackground, await OpenAndReadAsync(page, "backgroundColor"));
+
+        await OpenPaletteAsync(page);
+        await TypeAsync(page, "theme");
+        await ExpectFirstItemAsync(page, "preferences.theme");
+        await Assertions.Expect(Item(page, "preferences.theme")).ToContainTextAsync("Dark");
+        await page.Keyboard.PressAsync("Enter");
+        await Assertions.Expect(Item(page, "theme:dark").Locator(".bit-balette-toggle")).ToHaveAttributeAsync("data-on", "true");
+
+        // Back to the system's light theme from the palette: the toggle's choice is dropped rather than pinned.
+        await TypeAsync(page, "auto");
+        await ExpectFirstItemAsync(page, "theme:auto");
+        await page.Keyboard.PressAsync("Enter");
+        await Assertions.Expect(page.Locator("html")).ToHaveAttributeAsync("bit-theme", "light");
+        Assert.IsNull(await page.EvaluateAsync<string?>("() => localStorage.getItem('bit-demo-theme')"), "auto left a theme pinned");
     }
 
     [TestMethod]
     public async Task The_accent_token_recolours_the_mode_chip_and_the_highlights()
     {
         var page = await OpenAsync("/theming");
-        await page.Locator(".topbar-modes button[title='Commands mode']").ClickAsync();
+        await ModeButton(page, "Commands mode").ClickAsync();
         await ExpectOpenAsync(page);
         await TypeAsync(page, "ren");
         var defaultMark = await ComputedAsync(page, "[data-balette='mark']", "backgroundColor");
-        Assert.AreEqual("rgb(79, 70, 229)", await ComputedAsync(page, "[data-balette='mode']", "color"), "the default accent is not the stylesheet's");
+        Assert.AreEqual(BrandAccent, await ComputedAsync(page, "[data-balette='mode']", "color"), "the default accent is not the site's");
         await page.Keyboard.PressAsync("Escape");
         await ExpectClosedAsync(page);
 
         await page.GetByRole(AriaRole.Button, new() { Name = "Teal", Exact = true }).ClickAsync();
-        await page.Locator(".topbar-modes button[title='Commands mode']").ClickAsync();
+        await ModeButton(page, "Commands mode").ClickAsync();
         await ExpectOpenAsync(page);
         await TypeAsync(page, "ren");
         await Assertions.Expect(page.Locator("[data-balette='mark']").First).ToBeVisibleAsync();
@@ -72,7 +110,7 @@ public async Task The_detail_pane_comes_and_goes_with_its_toggle()
         await ExpectClosedAsync(page);
 
         // The checkbox on the page...
-        await page.Locator("label.field", new() { HasTextString = "Detail pane" }).Locator("input").UncheckAsync();
+        await page.Locator("label.bb-check", new() { HasTextString = "Detail pane" }).Locator("input").UncheckAsync();
         await OpenPaletteAsync(page);
         await Assertions.Expect(Detail(page)).ToHaveCountAsync(0);
         await Assertions.Expect(Dialog(page)).ToHaveAttributeAsync("data-has-detail", "false");
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/TwoPalettesTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/TwoPalettesTests.cs
new file mode 100644
index 00000000000..7e60c365ddb
--- /dev/null
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.E2E/TwoPalettesTests.cs
@@ -0,0 +1,91 @@
+using Bit.Balette.Tests.E2E.Infrastructure;
+using Microsoft.Playwright;
+
+namespace Bit.Balette.Tests.E2E;
+
+/// <summary>
+/// This site has two palettes: Balette, which this demo is about and which answers to Ctrl+K, and the site's own
+/// documentation search in the header (the site kit's CommandPalette), which answers to "/". The keys must never
+/// reach both: each key opens the one it belongs to, and whichever palette is open owns the keyboard - typing in
+/// it included - while the other stays shut.
+/// </summary>
+[TestClass]
+public sealed class TwoPalettesTests : BaletteTest
+{
+    [TestMethod]
+    public async Task Ctrl_K_opens_Balette_and_slash_opens_the_docs_search_never_both()
+    {
+        var page = await OpenAsync("/getting-started");
+
+        await OpenPaletteAsync(page);
+        await Assertions.Expect(SiteSearch(page)).ToHaveCountAsync(0);
+        await page.Keyboard.PressAsync("Escape");
+        await ExpectClosedAsync(page);
+
+        await page.Locator("h1").ClickAsync();
+        await page.Keyboard.PressAsync("/");
+        await Assertions.Expect(SiteSearch(page)).ToBeVisibleAsync();
+        await Assertions.Expect(page.Locator(".bb-palette-input input")).ToBeFocusedAsync();
+        await ExpectClosedAsync(page);
+    }
+
+    [TestMethod]
+    public async Task While_the_docs_search_is_open_Balettes_shortcuts_stay_quiet_and_its_keys_still_work()
+    {
+        var page = await OpenAsync("/commands");
+        var search = page.Locator(".bb-palette-input input");
+
+        await page.Locator("h1").ClickAsync();
+        await page.Keyboard.PressAsync("/");
+        await Assertions.Expect(search).ToBeFocusedAsync();
+
+        // Balette's toggle and one of its chords, pressed in the docs search: neither opens Balette on top of it,
+        // and the page-scoped Ctrl+Up behind it does not run either.
+        await page.Keyboard.PressAsync("Control+k");
+        await page.Keyboard.PressAsync("Control+Shift+P");
+        await page.Keyboard.PressAsync("Control+ArrowUp");
+        await page.WaitForTimeoutAsync(300);
+        await ExpectClosedAsync(page);
+        await Assertions.Expect(page.Locator(".demo-counter")).ToHaveTextAsync("Counter: 0");
+
+        // ...while the docs search keeps every key of its own: typing (a "g s" that is not a sequence here), the
+        // arrows that move its cursor, and Enter, which opens the page under it.
+        await search.PressSequentiallyAsync("g s");
+        await Assertions.Expect(search).ToHaveValueAsync("g s");
+        Assert.IsTrue(page.Url.EndsWith("/commands", StringComparison.Ordinal), $"typing in the docs search ran a Balette shortcut and moved to {page.Url}");
+
+        await search.FillAsync("");
+        await search.PressSequentiallyAsync("keyboard");
+        var active = page.Locator(".bb-palette-hit.bb-active .bb-palette-hit-url");
+        await Assertions.Expect(active).ToHaveTextAsync("/keyboard");
+        await page.Keyboard.PressAsync("Enter");
+        await page.WaitForURLAsync("**/keyboard");
+        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("Keyboard & shortcuts");
+        await Assertions.Expect(SiteSearch(page)).ToHaveCountAsync(0);
+
+        // Closed, the same chord is Balette's again.
+        await OpenPaletteAsync(page);
+    }
+
+    [TestMethod]
+    public async Task While_Balette_is_open_a_slash_is_typed_into_it_and_never_opens_the_docs_search()
+    {
+        var page = await OpenAsync("/");
+        await OpenPaletteAsync(page);
+
+        await TypeAsync(page, "/");
+        await Assertions.Expect(Input(page)).ToHaveValueAsync("/");
+
+        // Even with the focus on one of the dialog's own buttons rather than its input.
+        await Input(page).FillAsync("");
+        await TypeAsync(page, "theme");
+        await page.Keyboard.PressAsync("Enter");
+        await Assertions.Expect(Crumbs(page)).ToHaveTextAsync(["Theme"]);
+        await page.Locator("dialog[data-balette='dialog'] .bit-balette-crumb-home").FocusAsync();
+        await page.Keyboard.PressAsync("/");
+        await page.WaitForTimeoutAsync(300);
+
+        await Assertions.Expect(SiteSearch(page)).ToHaveCountAsync(0);
+        await Assertions.Expect(Dialog(page)).ToBeVisibleAsync();
+    }
+}
diff --git a/src/Utilities/Balette/Tests/Bit.Balette.Tests.Mcp/McpToolTests.cs b/src/Utilities/Balette/Tests/Bit.Balette.Tests.Mcp/McpToolTests.cs
index d129cc8961c..126f6220065 100644
--- a/src/Utilities/Balette/Tests/Bit.Balette.Tests.Mcp/McpToolTests.cs
+++ b/src/Utilities/Balette/Tests/Bit.Balette.Tests.Mcp/McpToolTests.cs
@@ -265,7 +265,10 @@ public async Task The_webassembly_mode_quotes_the_demo_files_verbatim()
         Assert.Contains(BaletteSourceCatalog.GetSourceFile("Demo/Client/Extensions/IServiceCollectionExtensions.cs")!.TrimEnd(), guide);
         Assert.Contains(BaletteSourceCatalog.GetSourceFile("Demo/Server/Program.cs")!.TrimEnd(), guide);
         Assert.Contains("### `Demo/Server/Components/App.razor`", guide);
-        Assert.Contains("### `Demo/Client/Layout/MainLayout.razor`", guide);
+        Assert.Contains("### `Demo/Client/Routes.razor`", guide);
+        Assert.Contains($"### `{BaletteSourceCatalog.PaletteHostPath}`", guide);
+        Assert.Contains(BaletteSourceCatalog.GetSourceFile(BaletteSourceCatalog.PaletteHostPath)!.TrimEnd(), guide);
+        Assert.Contains("<Balette Theme=", BaletteSourceCatalog.GetSourceFile(BaletteSourceCatalog.PaletteHostPath)!, "the palette host no longer renders the palette");
     }
 
     [TestMethod]
@@ -311,6 +314,24 @@ public async Task The_source_index_lists_the_demo_pages_and_the_library_files_bu
         Assert.DoesNotContain("McpServer.razor", index);
         Assert.DoesNotContain("NotFound.razor", index);
         Assert.DoesNotContain("Error.razor", index);
+
+        // The header, the docs shell, the docs search and the footer are the site kit every Utilities demo shares,
+        // not palette code - an agent asking how to build a command palette must not be handed the site's search.
+        Assert.DoesNotContain("Demo/Client/Layout/", index);
+        Assert.DoesNotContain("DocsCatalog.cs", index);
+        Assert.IsFalse(BaletteSourceCatalog.SourceFiles.Any(file => file.Path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase)));
+
+        // The palette host is, though: it is where this app renders its one <Balette />.
+        Assert.Contains(BaletteSourceCatalog.PaletteHostPath, index);
+        Assert.AreEqual("Hosting", BaletteSourceCatalog.SourceFiles.Single(file => file.Path == BaletteSourceCatalog.PaletteHostPath).Kind);
+    }
+
+    [TestMethod]
+    public void A_demo_page_is_described_by_its_own_introduction()
+    {
+        var commands = BaletteSourceCatalog.SourceFiles.Single(file => file.Path == "Demo/Client/Pages/Commands.razor");
+
+        Assert.AreEqual("A command is an immutable record: a title, where it is listed, what it matches and what it does.", commands.Description);
     }
 
     [TestMethod]
diff --git a/src/Utilities/BbScanner/Demo/Client/DocsCatalog.cs b/src/Utilities/BbScanner/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..d17ccd39eb4
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,188 @@
+using Bit.BbScanner.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.BbScanner.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "BbScanner";
+
+    public const string PackageId = "Bit.BbScanner";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/BbScanner";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "BbScanner is a barcode scanner for Blazor with the decoding written from scratch in C#: QR Code, " +
+        "Data Matrix, Code 128, Code 39, EAN, UPC and ITF, from the camera or from still images, with no " +
+        "barcode SDK and no JavaScript scanner library. This site is itself a Blazor WebAssembly app built on it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["qr", "torch", "region", "image", "options"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/scan", "Playground"),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, add the namespace and put a working scanner on a WebAssembly page - there is nothing to register.",
+                "install setup nuget package quick start using namespace rendermode InteractiveWebAssembly first scanner pipeline how it works",
+                typeof(GettingStarted)),
+            new("/samples", "Sample barcodes",
+                "One scannable example of every supported symbology, drawn as SVG and decoded in place without a camera.",
+                "samples qr data matrix code 128 code 39 ean-13 ean-8 upc-a upc-e itf pdf417 symbology generated svg self test",
+                typeof(Samples)),
+        ]),
+        new("Scanning",
+        [
+            new("/scan", "Live playground",
+                "Every parameter of BbScanner in one place - formats, frame rate, processing size, region, options and chrome - applied to the running camera.",
+                "playground parameters formats targetframerate maxprocessingsize region options bbscanneroptions showcontrols overlay fill",
+                typeof(Scan)),
+            new("/lifecycle", "Lifecycle & duplicates",
+                "StartAsync, StopAsync, Pause and Resume driven from the page, and DuplicateSuppressionWindow tuned live.",
+                "lifecycle start stop pause resume autostart duplicate suppression window dispose camera release",
+                typeof(Lifecycle)),
+            new("/camera", "Camera, torch & zoom",
+                "Enumerate the cameras, switch between them, and turn the torch and the zoom on where the hardware offers them.",
+                "camera device switch GetCamerasAsync SwitchCameraAsync torch flashlight SetTorchAsync zoom SetZoomAsync facing front rear",
+                typeof(Camera)),
+            new("/region", "Scan region",
+                "Aim the decoder at part of the frame with a normalized BbScanRegion; corner points still come back in frame pixels.",
+                "region BbScanRegion CenteredSquare crop aim mask corners bounding box normalized",
+                typeof(Region)),
+            new("/image", "Image & file scanning",
+                "Scan a picked photo with the built-in file input, or hand DecodeImage pixels the application already has.",
+                "image file picker photo still OpenFilePickerAsync DecodeImage ForStillImages rgba upload",
+                typeof(Image)),
+        ]),
+        new("Advanced",
+        [
+            new("/performance", "Performance",
+                "An in-browser decoder benchmark and the live cost of a camera frame, stage by stage.",
+                "performance benchmark speed fps frame time milliseconds diagnostics MaxScanLines TryHarder DownsampleFactor",
+                typeof(Performance)),
+            new("/customize", "Customisation",
+                "Restyle the scanner through its CSS custom properties, and replace the reticle and the messages with render fragments.",
+                "customise customize theme css custom properties overlay MessageTemplate reticle accent radius style accessibility rtl",
+                typeof(Customize)),
+            new("/errors", "Errors & permissions",
+                "Permission denied, no camera, camera in use: every failure classified as a BbScannerErrorKind, with how to handle it.",
+                "errors permissions denied NotSupported NoCamera CameraUnavailable ConstraintsUnsatisfied BbScannerException OnError https secure context",
+                typeof(Errors)),
+            new("/api", "API reference",
+                "Every parameter, event, method and property of BbScanner, BbBarcodeResult, BbScannerOptions and the headless decoder.",
+                "api reference parameters events methods properties BbBarcodeResult BbScannerOptions BbBarcodeDecoder IBbRowDecoder IBbMatrixDecoder headless",
+                typeof(Api)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/BbScanner/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/BbScanner/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/BbScanner/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/BbScanner/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/DocsPager.razor b/src/Utilities/BbScanner/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/Footer.razor b/src/Utilities/BbScanner/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/Footer.razor.css b/src/Utilities/BbScanner/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/Header.razor b/src/Utilities/BbScanner/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/Header.razor.css b/src/Utilities/BbScanner/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/MainLayout.razor b/src/Utilities/BbScanner/Demo/Client/Layout/MainLayout.razor
index 35cfd72f7c4..44980dda101 100644
--- a/src/Utilities/BbScanner/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/MainLayout.razor
@@ -1,13 +1,30 @@
 @inherits LayoutComponentBase
 
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. *@
-<div class="shell" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
-    <a class="skip-link" href="#main">Skip to content</a>
-    <NavMenu />
-    <main class="content" id="main" tabindex="-1">
-        <div class="content__inner">
-            @Body
-        </div>
-    </main>
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
+
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
+
+    <Footer />
 </div>
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/BbScanner/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Layout/NavMenu.razor b/src/Utilities/BbScanner/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 316f968e583..00000000000
--- a/src/Utilities/BbScanner/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,50 +0,0 @@
-<nav class="sidebar" aria-label="Documentation">
-    <a class="sidebar__brand" href="">
-        <span class="sidebar__mark" aria-hidden="true">&#9635;</span>
-        <span>bit BbScanner</span>
-    </a>
-
-    <div class="sidebar__group">
-        <p class="sidebar__label">Overview</p>
-        <div class="sidebar__nav">
-            <NavLink class="sidebar__link" href="" Match="NavLinkMatch.All">Introduction</NavLink>
-            <NavLink class="sidebar__link" href="samples">Sample barcodes</NavLink>
-        </div>
-    </div>
-
-    <div class="sidebar__group">
-        <p class="sidebar__label">Scanning</p>
-        <div class="sidebar__nav">
-            <NavLink class="sidebar__link" href="scan">Live playground</NavLink>
-            <NavLink class="sidebar__link" href="lifecycle">Lifecycle &amp; duplicates</NavLink>
-            <NavLink class="sidebar__link" href="camera">Camera, torch &amp; zoom</NavLink>
-            <NavLink class="sidebar__link" href="region">Scan region</NavLink>
-            <NavLink class="sidebar__link" href="image">Image &amp; file scanning</NavLink>
-        </div>
-    </div>
-
-    <div class="sidebar__group">
-        <p class="sidebar__label">Advanced</p>
-        <div class="sidebar__nav">
-            <NavLink class="sidebar__link" href="performance">Performance</NavLink>
-            <NavLink class="sidebar__link" href="customize">Customisation</NavLink>
-            <NavLink class="sidebar__link" href="errors">Errors &amp; permissions</NavLink>
-            <NavLink class="sidebar__link" href="api">API reference</NavLink>
-        </div>
-    </div>
-
-    <div class="sidebar__group">
-        <p class="sidebar__label">AI</p>
-        <div class="sidebar__nav">
-            <NavLink class="sidebar__link" href="mcp-server">MCP server</NavLink>
-        </div>
-    </div>
-
-    <div class="sidebar__group">
-        <p class="sidebar__label">Project</p>
-        <div class="sidebar__nav">
-            <a class="sidebar__link" href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/BbScanner" target="_blank" rel="noopener">Source on GitHub</a>
-            <a class="sidebar__link" href="https://www.nuget.org/packages/Bit.BbScanner" target="_blank" rel="noopener">NuGet package</a>
-        </div>
-    </div>
-</nav>
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Api.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Api.razor
index 81a98320bf4..11029f273b1 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Api.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Api.razor
@@ -1,162 +1,190 @@
 @page "/api"
 
-<PageTitle>API reference - bit BbScanner</PageTitle>
-
-<h1>API reference</h1>
-<p class="lede">
-    The whole public surface. Everything is nullable-annotated and documented in XML, so the same
-    text appears in IntelliSense.
-</p>
-
-<h2>&lt;BbScanner&gt; parameters</h2>
-<table>
-    <thead>
-        <tr><th>Parameter</th><th>Type</th><th>Default</th><th>Purpose</th></tr>
-    </thead>
-    <tbody>
-        <tr><td class="mono">Formats</td><td class="mono">BbBarcodeFormat</td><td class="mono">All</td><td>Symbologies to look for. A flags enum.</td></tr>
-        <tr><td class="mono">Region</td><td class="mono">BbScanRegion</td><td class="mono">Full</td><td>Normalized sub-rectangle to search.</td></tr>
-        <tr><td class="mono">Options</td><td class="mono">BbScannerOptions?</td><td class="mono">null</td><td>Advanced tuning applied under Formats and Region.</td></tr>
-        <tr><td class="mono">TargetFrameRate</td><td class="mono">int</td><td class="mono">15</td><td>Frames a second to decode.</td></tr>
-        <tr><td class="mono">RequestedWidth / Height</td><td class="mono">int</td><td class="mono">1280 / 720</td><td>Camera constraints; the browser may negotiate otherwise.</td></tr>
-        <tr><td class="mono">MaxProcessingSize</td><td class="mono">int</td><td class="mono">640</td><td>Longest edge of the image the decoder sees.</td></tr>
-        <tr><td class="mono">Facing</td><td class="mono">BbCameraFacing</td><td class="mono">Rear</td><td>Preferred camera when no device id is given.</td></tr>
-        <tr><td class="mono">DeviceId</td><td class="mono">string?</td><td class="mono">null</td><td>A specific camera to open.</td></tr>
-        <tr><td class="mono">AutoStart</td><td class="mono">bool</td><td class="mono">true</td><td>Open the camera as soon as the component is ready.</td></tr>
-        <tr><td class="mono">DuplicateSuppressionWindow</td><td class="mono">TimeSpan?</td><td class="mono">null (2s)</td><td>How long an identical value stays suppressed. Set, it overrides <code>Options</code>; unset, <code>Options</code> decides, else 2 s.</td></tr>
-        <tr><td class="mono">ShowControls</td><td class="mono">bool</td><td class="mono">true</td><td>Built-in control bar.</td></tr>
-        <tr><td class="mono">ShowStatusBar</td><td class="mono">bool</td><td class="mono">true</td><td>Built-in status bar.</td></tr>
-        <tr><td class="mono">ShowReticle</td><td class="mono">bool</td><td class="mono">true</td><td>Corner reticle over the scan region.</td></tr>
-        <tr><td class="mono">ShowMask</td><td class="mono">bool</td><td class="mono">true</td><td>Dim outside the scan region.</td></tr>
-        <tr><td class="mono">HighlightResults</td><td class="mono">bool</td><td class="mono">true</td><td>Outline a decoded symbol in place.</td></tr>
-        <tr><td class="mono">EnableFileScanning</td><td class="mono">bool</td><td class="mono">true</td><td>Offer still image scanning.</td></tr>
-        <tr><td class="mono">Fill</td><td class="mono">bool</td><td class="mono">false</td><td>Fill the parent instead of keeping the camera's aspect ratio.</td></tr>
-        <tr><td class="mono">AriaLabel</td><td class="mono">string</td><td class="mono">"Barcode scanner"</td><td>Accessible name for the region.</td></tr>
-        <tr><td class="mono">CssClass</td><td class="mono">string?</td><td class="mono">null</td><td>Extra classes on the root element.</td></tr>
-        <tr><td class="mono">Overlay</td><td class="mono">RenderFragment&lt;BbScanner&gt;?</td><td class="mono">null</td><td>Replaces the reticle; receives the scanner.</td></tr>
-        <tr><td class="mono">MessageTemplate</td><td class="mono">RenderFragment&lt;string&gt;?</td><td class="mono">null</td><td>Replaces status and error message rendering.</td></tr>
-        <tr><td class="mono">ControlsContent</td><td class="mono">RenderFragment?</td><td class="mono">null</td><td>Extra controls in the built-in bar.</td></tr>
-        <tr><td class="mono">ChildContent</td><td class="mono">RenderFragment?</td><td class="mono">null</td><td>Arbitrary content over the viewport.</td></tr>
-        <tr><td class="mono">@@attributes</td><td class="mono">any</td><td class="mono">-</td><td>Any other attribute is applied to the root element. A <code>class</code> or <code>style</code> given this way is merged with the component's own rather than replacing it.</td></tr>
-    </tbody>
-</table>
-
-<h2>&lt;BbScanner&gt; events</h2>
-<table>
-    <thead><tr><th>Event</th><th>Payload</th><th>Raised when</th></tr></thead>
-    <tbody>
-        <tr><td class="mono">OnScan</td><td class="mono">BbBarcodeResult</td><td>A symbol is decoded and passes duplicate suppression.</td></tr>
-        <tr><td class="mono">OnError</td><td class="mono">BbScannerException</td><td>The camera cannot start, or a frame fails.</td></tr>
-        <tr><td class="mono">OnStatusChanged</td><td class="mono">BbScannerStatus</td><td>The lifecycle state changes.</td></tr>
-        <tr><td class="mono">OnCameraChanged</td><td class="mono">BbCameraInfo</td><td>A camera opens, with what was negotiated.</td></tr>
-        <tr><td class="mono">OnDiagnostics</td><td class="mono">BbScanDiagnostics</td><td>At most twice a second, with frame timings.</td></tr>
-    </tbody>
-</table>
-
-<h2>&lt;BbScanner&gt; methods and properties</h2>
-<pre><code>Task            StartAsync(string? deviceId = null)
+<PageTitle>API reference · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>API reference</h1>
+    <p class="bb-subtitle">
+        The whole public surface. Everything is nullable-annotated and documented in XML, so the same
+        text appears in IntelliSense.
+    </p>
+</div>
+
+<h2>The component</h2>
+
+@* Four-column tables of type names: the page gives up the "on this page" rail so the names keep
+   their lines instead of breaking letter by letter. *@
+<div class="bb-card bb-page-wide">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> &lt;BbScanner&gt; parameters</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Parameter</th><th>Type</th><th>Default</th><th>Purpose</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key">Formats</td><td class="bb-mono bb-table-key">BbBarcodeFormat</td><td class="bb-mono bb-table-key">All</td><td>Symbologies to look for. A flags enum.</td></tr>
+                <tr><td class="bb-table-key">Region</td><td class="bb-mono bb-table-key">BbScanRegion</td><td class="bb-mono bb-table-key">Full</td><td>Normalized sub-rectangle to search.</td></tr>
+                <tr><td class="bb-table-key">Options</td><td class="bb-mono bb-table-key">BbScannerOptions?</td><td class="bb-mono bb-table-key">null</td><td>Advanced tuning applied under Formats and Region.</td></tr>
+                <tr><td class="bb-table-key">TargetFrameRate</td><td class="bb-mono bb-table-key">int</td><td class="bb-mono bb-table-key">15</td><td>Frames a second to decode.</td></tr>
+                <tr><td class="bb-table-key">RequestedWidth / Height</td><td class="bb-mono bb-table-key">int</td><td class="bb-mono bb-table-key">1280 / 720</td><td>Camera constraints; the browser may negotiate otherwise.</td></tr>
+                <tr><td class="bb-table-key">MaxProcessingSize</td><td class="bb-mono bb-table-key">int</td><td class="bb-mono bb-table-key">640</td><td>Longest edge of the image the decoder sees.</td></tr>
+                <tr><td class="bb-table-key">Facing</td><td class="bb-mono bb-table-key">BbCameraFacing</td><td class="bb-mono bb-table-key">Rear</td><td>Preferred camera when no device id is given.</td></tr>
+                <tr><td class="bb-table-key">DeviceId</td><td class="bb-mono bb-table-key">string?</td><td class="bb-mono bb-table-key">null</td><td>A specific camera to open.</td></tr>
+                <tr><td class="bb-table-key">AutoStart</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">true</td><td>Open the camera as soon as the component is ready.</td></tr>
+                <tr><td class="bb-table-key">DuplicateSuppressionWindow</td><td class="bb-mono bb-table-key">TimeSpan?</td><td class="bb-mono bb-table-key">null (2s)</td><td>How long an identical value stays suppressed. Set, it overrides <code>Options</code>; unset, <code>Options</code> decides, else 2 s.</td></tr>
+                <tr><td class="bb-table-key">ShowControls</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">true</td><td>Built-in control bar.</td></tr>
+                <tr><td class="bb-table-key">ShowStatusBar</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">true</td><td>Built-in status bar.</td></tr>
+                <tr><td class="bb-table-key">ShowReticle</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">true</td><td>Corner reticle over the scan region.</td></tr>
+                <tr><td class="bb-table-key">ShowMask</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">true</td><td>Dim outside the scan region.</td></tr>
+                <tr><td class="bb-table-key">HighlightResults</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">true</td><td>Outline a decoded symbol in place.</td></tr>
+                <tr><td class="bb-table-key">EnableFileScanning</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">true</td><td>Offer still image scanning.</td></tr>
+                <tr><td class="bb-table-key">Fill</td><td class="bb-mono bb-table-key">bool</td><td class="bb-mono bb-table-key">false</td><td>Fill the parent instead of keeping the camera's aspect ratio.</td></tr>
+                <tr><td class="bb-table-key">AriaLabel</td><td class="bb-mono bb-table-key">string</td><td class="bb-mono bb-table-key">"Barcode scanner"</td><td>Accessible name for the region.</td></tr>
+                <tr><td class="bb-table-key">CssClass</td><td class="bb-mono bb-table-key">string?</td><td class="bb-mono bb-table-key">null</td><td>Extra classes on the root element.</td></tr>
+                <tr><td class="bb-table-key">Overlay</td><td class="bb-mono bb-table-key">RenderFragment&lt;BbScanner&gt;?</td><td class="bb-mono bb-table-key">null</td><td>Replaces the reticle; receives the scanner.</td></tr>
+                <tr><td class="bb-table-key">MessageTemplate</td><td class="bb-mono bb-table-key">RenderFragment&lt;string&gt;?</td><td class="bb-mono bb-table-key">null</td><td>Replaces status and error message rendering.</td></tr>
+                <tr><td class="bb-table-key">ControlsContent</td><td class="bb-mono bb-table-key">RenderFragment?</td><td class="bb-mono bb-table-key">null</td><td>Extra controls in the built-in bar.</td></tr>
+                <tr><td class="bb-table-key">ChildContent</td><td class="bb-mono bb-table-key">RenderFragment?</td><td class="bb-mono bb-table-key">null</td><td>Arbitrary content over the viewport.</td></tr>
+                <tr><td class="bb-table-key">@@attributes</td><td class="bb-mono bb-table-key">any</td><td class="bb-mono bb-table-key">-</td><td>Any other attribute is applied to the root element. A <code>class</code> or <code>style</code> given this way is merged with the component's own rather than replacing it.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> &lt;BbScanner&gt; events</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead><tr><th>Event</th><th>Payload</th><th>Raised when</th></tr></thead>
+            <tbody>
+                <tr><td class="bb-table-key">OnScan</td><td class="bb-mono bb-table-key">BbBarcodeResult</td><td>A symbol is decoded and passes duplicate suppression.</td></tr>
+                <tr><td class="bb-table-key">OnError</td><td class="bb-mono bb-table-key">BbScannerException</td><td>The camera cannot start, or a frame fails.</td></tr>
+                <tr><td class="bb-table-key">OnStatusChanged</td><td class="bb-mono bb-table-key">BbScannerStatus</td><td>The lifecycle state changes.</td></tr>
+                <tr><td class="bb-table-key">OnCameraChanged</td><td class="bb-mono bb-table-key">BbCameraInfo</td><td>A camera opens, with what was negotiated.</td></tr>
+                <tr><td class="bb-table-key">OnDiagnostics</td><td class="bb-mono bb-table-key">BbScanDiagnostics</td><td>At most twice a second, with frame timings.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> &lt;BbScanner&gt; methods and properties</h3>
+    <pre class="bb-code">Task            StartAsync(<span class="k">string</span>? deviceId = <span class="k">null</span>)
 Task            StopAsync()
-void            Pause()
-void            Resume()
-Task            SwitchCameraAsync(string deviceId)
-Task&lt;bool&gt;      SetTorchAsync(bool on)
-Task&lt;bool&gt;      SetZoomAsync(double zoom)
+<span class="k">void</span>            Pause()
+<span class="k">void</span>            Resume()
+Task            SwitchCameraAsync(<span class="k">string</span> deviceId)
+Task&lt;<span class="k">bool</span>&gt;      SetTorchAsync(<span class="k">bool</span> on)
+Task&lt;<span class="k">bool</span>&gt;      SetZoomAsync(<span class="k">double</span> zoom)
 Task            OpenFilePickerAsync()
 Task&lt;IReadOnlyList&lt;BbCameraDevice&gt;&gt; GetCamerasAsync()
-BbBarcodeResult?  DecodeImage(ReadOnlySpan&lt;byte&gt; pixels, int width, int height, BbPixelFormat format)
+BbBarcodeResult?  DecodeImage(ReadOnlySpan&lt;<span class="k">byte</span>&gt; pixels, <span class="k">int</span> width, <span class="k">int</span> height, BbPixelFormat format)
 
 BbScannerStatus   Status
 BbCameraInfo?     Camera
 IReadOnlyList&lt;BbCameraDevice&gt; Cameras
 BbScanDiagnostics Diagnostics
-long            FramesDecoded
-long            FramesWithSymbol
-bool            IsTorchOn
-double          Zoom
-(int, int)      ProcessingSize</code></pre>
-
-<p class="field__hint">
-    <code>StartAsync</code> is safe to call at any time: a call that arrives while an earlier one
-    is still waiting for the permission prompt supersedes it, and the superseded request releases
-    its camera rather than leaving it running. The same holds for <code>StopAsync</code> and for
-    disposal, so navigating away mid-prompt never leaves the camera indicator lit.
-</p>
-
-<h2>BbBarcodeResult</h2>
-<table>
-    <thead><tr><th>Member</th><th>Type</th><th>Meaning</th></tr></thead>
-    <tbody>
-        <tr><td class="mono">Text</td><td class="mono">string</td><td>Decoded value after character set interpretation.</td></tr>
-        <tr><td class="mono">RawBytes</td><td class="mono">ReadOnlyMemory&lt;byte&gt;</td><td>Payload bytes before interpretation.</td></tr>
-        <tr><td class="mono">Format</td><td class="mono">BbBarcodeFormat</td><td>The symbology that produced the value.</td></tr>
-        <tr><td class="mono">Timestamp</td><td class="mono">DateTimeOffset</td><td>When the frame was decoded.</td></tr>
-        <tr><td class="mono">Corners</td><td class="mono">IReadOnlyList&lt;BbScanPoint&gt;</td><td>Locator points in frame pixels.</td></tr>
-        <tr><td class="mono">BoundingBox</td><td class="mono">BbScanRect</td><td>Axis aligned box around the corners.</td></tr>
-        <tr><td class="mono">FrameWidth / FrameHeight</td><td class="mono">int</td><td>Size of the frame the value came from.</td></tr>
-        <tr><td class="mono">Metadata</td><td class="mono">BbBarcodeResultMetadata?</td><td>Version, error correction level, corrections, ECI, GS1, structured append.</td></tr>
-    </tbody>
-</table>
-
-<h2>BbScannerOptions</h2>
-<pre><code>BbBarcodeFormat Formats                    = BbBarcodeFormat.All
+<span class="k">long</span>            FramesDecoded
+<span class="k">long</span>            FramesWithSymbol
+<span class="k">bool</span>            IsTorchOn
+<span class="k">double</span>          Zoom
+(<span class="k">int</span>, <span class="k">int</span>)      ProcessingSize</pre>
+    <p class="bb-card-desc">
+        <code>StartAsync</code> is safe to call at any time: a call that arrives while an earlier one
+        is still waiting for the permission prompt supersedes it, and the superseded request releases
+        its camera rather than leaving it running. The same holds for <code>StopAsync</code> and for
+        disposal, so navigating away mid-prompt never leaves the camera indicator lit.
+    </p>
+</div>
+
+<h2>The results and the options</h2>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> BbBarcodeResult</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead><tr><th>Member</th><th>Type</th><th>Meaning</th></tr></thead>
+            <tbody>
+                <tr><td class="bb-table-key">Text</td><td class="bb-mono bb-table-key">string</td><td>Decoded value after character set interpretation.</td></tr>
+                <tr><td class="bb-table-key">RawBytes</td><td class="bb-mono bb-table-key">ReadOnlyMemory&lt;byte&gt;</td><td>Payload bytes before interpretation.</td></tr>
+                <tr><td class="bb-table-key">Format</td><td class="bb-mono bb-table-key">BbBarcodeFormat</td><td>The symbology that produced the value.</td></tr>
+                <tr><td class="bb-table-key">Timestamp</td><td class="bb-mono bb-table-key">DateTimeOffset</td><td>When the frame was decoded.</td></tr>
+                <tr><td class="bb-table-key">Corners</td><td class="bb-mono bb-table-key">IReadOnlyList&lt;BbScanPoint&gt;</td><td>Locator points in frame pixels.</td></tr>
+                <tr><td class="bb-table-key">BoundingBox</td><td class="bb-mono bb-table-key">BbScanRect</td><td>Axis aligned box around the corners.</td></tr>
+                <tr><td class="bb-table-key">FrameWidth / FrameHeight</td><td class="bb-mono bb-table-key">int</td><td>Size of the frame the value came from.</td></tr>
+                <tr><td class="bb-table-key">Metadata</td><td class="bb-mono bb-table-key">BbBarcodeResultMetadata?</td><td>Version, error correction level, corrections, ECI, GS1, structured append.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> BbScannerOptions</h3>
+    <pre class="bb-code">BbBarcodeFormat Formats                    = BbBarcodeFormat.All
 BbScanRegion    Region                     = BbScanRegion.Full
-int           MaxScanLines               = 15      // lines per orientation
-int           DownsampleFactor           = 1
-bool          TryHarder                  = false   // exhaustive detection, full rotation sweep
-bool          AllowInverted              = false   // light on dark symbols
-bool          TryReversedRows            = true    // linear symbols read right to left
-bool          TryVerticalLines           = true    // columns and tilted lines, for rotated symbols
-IReadOnlyCollection&lt;int&gt; ItfLengths      = 6..20 even
-bool          Code39CheckDigit           = false   // require the modulo 43 check character
-bool          Code39ExtendedMode         = false   // interpret Code 39 as full ASCII
+<span class="k">int</span>           MaxScanLines               = 15      <span class="c">// lines per orientation</span>
+<span class="k">int</span>           DownsampleFactor           = 1
+<span class="k">bool</span>          TryHarder                  = <span class="k">false</span>   <span class="c">// exhaustive detection, full rotation sweep</span>
+<span class="k">bool</span>          AllowInverted              = <span class="k">false</span>   <span class="c">// light on dark symbols</span>
+<span class="k">bool</span>          TryReversedRows            = <span class="k">true</span>    <span class="c">// linear symbols read right to left</span>
+<span class="k">bool</span>          TryVerticalLines           = <span class="k">true</span>    <span class="c">// columns and tilted lines, for rotated symbols</span>
+IReadOnlyCollection&lt;<span class="k">int</span>&gt; ItfLengths      = 6..20 even
+<span class="k">bool</span>          Code39CheckDigit           = <span class="k">false</span>   <span class="c">// require the modulo 43 check character</span>
+<span class="k">bool</span>          Code39ExtendedMode         = <span class="k">false</span>   <span class="c">// interpret Code 39 as full ASCII</span>
 TimeSpan      DuplicateSuppressionWindow = 2 seconds
 
-BbScannerOptions.ForStillImages()   // 60 scan lines, TryHarder, AllowInverted, no suppression
-options.Clone()                   // take a copy before editing a running scanner's options
-options.Validate()                // throws on an out of range value</code></pre>
-
-<p class="field__hint">
-    ITF has no check character, so <code>ItfLengths</code> is the main defence against a
-    truncated symbol being reported as a shorter, structurally valid number. Narrow it to the
-    lengths your application actually uses.
-</p>
-
-<h2>Headless use</h2>
-<p>
-    The decoding pipeline has no dependency on Blazor or on a browser. It runs anywhere .NET
-    runs, which is what makes it testable and benchmarkable.
-</p>
-<pre><code>using var decoder = new BbBarcodeDecoder(new BbScannerOptions
+BbScannerOptions.ForStillImages()   <span class="c">// 60 scan lines, TryHarder, AllowInverted, no suppression</span>
+options.Clone()                   <span class="c">// take a copy before editing a running scanner's options</span>
+options.Validate()                <span class="c">// throws on an out of range value</span></pre>
+    <p class="bb-card-desc">
+        ITF has no check character, so <code>ItfLengths</code> is the main defence against a
+        truncated symbol being reported as a shorter, structurally valid number. Narrow it to the
+        lengths your application actually uses.
+    </p>
+</div>
+
+<h2>The decoder</h2>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Headless use</h3>
+    <p class="bb-card-desc">
+        The decoding pipeline has no dependency on Blazor or on a browser. It runs anywhere .NET
+        runs, which is what makes it testable and benchmarkable.
+    </p>
+    <pre class="bb-code"><span class="k">using var</span> decoder = <span class="k">new</span> BbBarcodeDecoder(<span class="k">new</span> BbScannerOptions
 {
     Formats = BbBarcodeFormat.QrCode | BbBarcodeFormat.DataMatrix,
     DuplicateSuppressionWindow = TimeSpan.Zero,
 });
 
-var result = decoder.Decode(rgbaPixels, width, height, BbPixelFormat.Rgba32);
-if (result is not null)
+<span class="k">var</span> result = decoder.Decode(rgbaPixels, width, height, BbPixelFormat.Rgba32);
+<span class="k">if</span> (result <span class="k">is not null</span>)
 {
-    Console.WriteLine($"{result.Format}: {result.Text}");
-    Console.WriteLine($"took {decoder.LastFrame.Total.TotalMilliseconds:0.00} ms");
-}</code></pre>
-
-<h2>Extending the decoder</h2>
-<p>
-    A new symbology implements <code>IBbRowDecoder</code> for a linear code or
-    <code>IBbMatrixDecoder</code> for a two dimensional one. Both receive already binarised input,
-    so a new reader only has to contribute its own character table and structure.
-</p>
-<pre><code>public interface IBbRowDecoder
+    Console.WriteLine(<span class="s">$"{result.Format}: {result.Text}"</span>);
+    Console.WriteLine(<span class="s">$"took {decoder.LastFrame.Total.TotalMilliseconds:0.00} ms"</span>);
+}</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Extending the decoder</h3>
+    <p class="bb-card-desc">
+        A new symbology implements <code>IBbRowDecoder</code> for a linear code or
+        <code>IBbMatrixDecoder</code> for a two dimensional one. Both receive already binarised input,
+        so a new reader only has to contribute its own character table and structure.
+    </p>
+    <pre class="bb-code"><span class="k">public interface</span> IBbRowDecoder
 {
-    BbBarcodeFormat Formats { get; }
-    BbSymbolDecodeResult? DecodeRow(int rowNumber, BbBitRow row, BbBarcodeFormat enabledFormats);
+    BbBarcodeFormat Formats { <span class="k">get</span>; }
+    BbSymbolDecodeResult? DecodeRow(<span class="k">int</span> rowNumber, BbBitRow row, BbBarcodeFormat enabledFormats);
 }
 
-public interface IBbMatrixDecoder
+<span class="k">public interface</span> IBbMatrixDecoder
 {
-    BbBarcodeFormat Formats { get; }
+    BbBarcodeFormat Formats { <span class="k">get</span>; }
     BbSymbolDecodeResult? Decode(BbBitMatrix image, BbMatrixDecodeOptions options);
-}</code></pre>
-<p>
-    Binarisation is an extension point too: <code>IBbBinarizer</code> has one implementation tuned
-    for matrix codes and one for linear rows, and a replacement can be substituted for either.
-</p>
+}</pre>
+    <p class="bb-card-desc">
+        Binarisation is an extension point too: <code>IBbBinarizer</code> has one implementation tuned
+        for matrix codes and one for linear rows, and a replacement can be substituted for either.
+    </p>
+</div>
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Camera.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Camera.razor
index 43c86a7b0d3..542469eca30 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Camera.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Camera.razor
@@ -1,151 +1,161 @@
 @page "/camera"
 
-<PageTitle>Camera control - bit BbScanner</PageTitle>
-
-<h1>Camera, torch and zoom</h1>
-<p class="lede">
-    Camera selection, torch and zoom are all capabilities of the running media track. The
-    component reports what the browser says is available and never offers a control the hardware
-    will refuse.
-</p>
-
-<div class="split">
-    <div class="stack">
-        <BbScanner @ref="_scanner"
-                   Facing="_facing"
-                   ShowControls="true"
-                   OnScan="r => _last = r"
-                   OnCameraChanged="OnCameraChanged"
-                   OnStatusChanged="OnStatusChanged"
-                   OnError="e => _error = e" />
-
-        @if (_error is not null)
-        {
-            <div class="note note--warning"><strong>@_error.Kind</strong> — @_error.Message</div>
-        }
-    </div>
+<PageTitle>Camera control · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Camera, torch and zoom</h1>
+    <p class="bb-subtitle">
+        Camera selection, torch and zoom are all capabilities of the running media track. The
+        component reports what the browser says is available and never offers a control the hardware
+        will refuse.
+    </p>
+</div>
 
-    <div class="stack">
-        <div class="card">
-            <h3 style="margin-block-start:0;">Available cameras</h3>
-            <div class="button-row" style="margin-block-end:0.6rem;">
-                <button class="button" type="button" @onclick="RefreshCameras">Enumerate</button>
-            </div>
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live</span>
+        <StatusBadge Status="_scanner?.Status" />
+    </div>
 
-            @if (_cameras.Count == 0)
-            {
-                <p class="empty" style="padding:0.25rem;">
-                    None listed yet. Browsers withhold the list, and camera labels, until permission
-                    has been granted at least once.
-                </p>
-            }
-            else
-            {
-                <table>
-                    <tbody>
-                        @foreach (var camera in _cameras)
-                        {
-                            <tr>
-                                <td>@camera.Label</td>
-                                <td style="text-align:end;">
-                                    <button class="button" type="button" @onclick="() => Switch(camera.DeviceId)">Use</button>
-                                </td>
-                            </tr>
-                        }
-                    </tbody>
-                </table>
-            }
-
-            <div class="field" style="margin-block-start:0.75rem;">
-                <label class="field__label" for="facing">Preferred facing for the next start</label>
-                <select id="facing" value="@_facing" @onchange="OnFacingChanged">
-                    <option value="@BbCameraFacing.Rear">Rear</option>
-                    <option value="@BbCameraFacing.Front">Front</option>
-                    <option value="@BbCameraFacing.Any">Any</option>
-                </select>
+    <div class="scan-sample">
+        <div class="scan-layout">
+            <div class="scan-view">
+                <BbScanner @ref="_scanner"
+                           Facing="_facing"
+                           ShowControls="true"
+                           OnScan="r => _last = r"
+                           OnCameraChanged="OnCameraChanged"
+                           OnStatusChanged="OnStatusChanged"
+                           OnError="e => _error = e" />
+
+                @if (_error is not null)
+                {
+                    <div class="bb-note bb-note-warn"><strong>@_error.Kind</strong> — @_error.Message</div>
+                }
+
+                @if (_last is not null)
+                {
+                    <dl class="bb-params">
+                        <dt>Last scan</dt>
+                        <dd><span class="bb-badge">@_last.Format</span> @_last.Text</dd>
+                    </dl>
+                }
             </div>
-        </div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Negotiated track</h3>
-            @if (_camera is null)
-            {
-                <p class="empty" style="padding:0.25rem;">No camera open.</p>
-            }
-            else
-            {
-                <table>
-                    <tbody>
-                        <tr><th>Label</th><td>@_camera.Label</td></tr>
-                        <tr><th>Resolution</th><td class="mono">@_camera.Width × @_camera.Height</td></tr>
-                        <tr><th>Frame rate</th><td class="mono">@_camera.FrameRate.ToString("0.#") fps</td></tr>
-                        <tr><th>Facing</th><td>@(_camera.FacingMode.Length == 0 ? "unreported" : _camera.FacingMode)</td></tr>
-                        <tr>
-                            <th>Torch</th>
-                            <td>
+            <div class="scan-panels">
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Available cameras</h3>
+                    <div class="bb-toolbar">
+                        <button class="btn btn-secondary" type="button" @onclick="RefreshCameras">Enumerate</button>
+                    </div>
+
+                    @if (_cameras.Count == 0)
+                    {
+                        <div class="bb-empty">
+                            None listed yet. Browsers withhold the list, and camera labels, until permission
+                            has been granted at least once.
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="bb-scroll">
+                            <table class="bb-table">
+                                <tbody>
+                                    @foreach (var camera in _cameras)
+                                    {
+                                        <tr>
+                                            <td>@camera.Label</td>
+                                            <td class="bb-table-action">
+                                                <button class="btn btn-secondary" type="button" @onclick="() => Switch(camera.DeviceId)">Use</button>
+                                            </td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </div>
+                    }
+
+                    <label class="bb-field">
+                        <span>Preferred facing for the next start</span>
+                        <select id="facing" value="@_facing" @onchange="OnFacingChanged">
+                            <option value="@BbCameraFacing.Rear">Rear</option>
+                            <option value="@BbCameraFacing.Front">Front</option>
+                            <option value="@BbCameraFacing.Any">Any</option>
+                        </select>
+                    </label>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Negotiated track</h3>
+                    @if (_camera is null)
+                    {
+                        <div class="bb-empty">No camera open.</div>
+                    }
+                    else
+                    {
+                        <dl class="bb-params">
+                            <dt>Label</dt>
+                            <dd>@_camera.Label</dd>
+                            <dt>Resolution</dt>
+                            <dd>@_camera.Width × @_camera.Height</dd>
+                            <dt>Frame rate</dt>
+                            <dd>@_camera.FrameRate.ToString("0.#") fps</dd>
+                            <dt>Facing</dt>
+                            <dd>@(_camera.FacingMode.Length == 0 ? "unreported" : _camera.FacingMode)</dd>
+                            <dt>Torch</dt>
+                            <dd>
                                 @if (_camera.SupportsTorch)
                                 {
-                                    <span class="pill pill--success">supported</span>
+                                    <span class="bb-badge bb-badge-success">supported</span>
                                 }
                                 else
                                 {
-                                    <span class="pill pill--muted">not supported</span>
+                                    <span class="bb-soft">not supported</span>
                                 }
-                            </td>
-                        </tr>
-                        <tr>
-                            <th>Zoom</th>
-                            <td>
+                            </dd>
+                            <dt>Zoom</dt>
+                            <dd>
                                 @if (_camera.SupportsZoom)
                                 {
-                                    <span class="pill pill--success">@_camera.ZoomMin.ToString("0.#") to @_camera.ZoomMax.ToString("0.#")</span>
+                                    <span class="bb-badge bb-badge-success">@_camera.ZoomMin.ToString("0.#") to @_camera.ZoomMax.ToString("0.#")</span>
                                 }
                                 else
                                 {
-                                    <span class="pill pill--muted">not supported</span>
+                                    <span class="bb-soft">not supported</span>
                                 }
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            }
-        </div>
-
-        <div class="card">
-            <h3 style="margin-block-start:0;">Controls</h3>
-            <div class="button-row">
-                <button class="button" type="button" disabled="@(_camera?.SupportsTorch != true)" @onclick="ToggleTorch">
-                    @(_scanner?.IsTorchOn == true ? "Torch off" : "Torch on")
-                </button>
+                            </dd>
+                        </dl>
+                    }
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Controls</h3>
+                    <div class="bb-toolbar">
+                        <button class="btn btn-secondary" type="button" disabled="@(_camera?.SupportsTorch != true)" @onclick="ToggleTorch">
+                            @(_scanner?.IsTorchOn == true ? "Torch off" : "Torch on")
+                        </button>
+                    </div>
+
+                    @if (_camera?.SupportsZoom == true)
+                    {
+                        <label class="bb-field">
+                            <span class="scan-field-head"><span>Zoom</span><output>@(_scanner?.Zoom.ToString("0.##"))</output></span>
+                            <input type="range"
+                                   min="@Invariant(_camera.ZoomMin)"
+                                   max="@Invariant(_camera.ZoomMax)"
+                                   step="@Invariant(_camera.ZoomStep > 0 ? _camera.ZoomStep : 0.1)"
+                                   value="@Invariant(_scanner?.Zoom ?? 0)"
+                                   @onchange="OnZoomChanged" />
+                        </label>
+                    }
+
+                    <p class="bb-card-desc">
+                        Torch and zoom are almost always rear-camera-only, and support varies by browser.
+                        Both calls report whether the browser accepted them rather than throwing.
+                    </p>
+                </section>
             </div>
-
-            @if (_camera?.SupportsZoom == true)
-            {
-                <div class="field" style="margin-block-start:0.75rem;">
-                    <label class="field__label">Zoom: @(_scanner?.Zoom.ToString("0.##"))</label>
-                    <input type="range"
-                           min="@Invariant(_camera.ZoomMin)"
-                           max="@Invariant(_camera.ZoomMax)"
-                           step="@Invariant(_camera.ZoomStep > 0 ? _camera.ZoomStep : 0.1)"
-                           value="@Invariant(_scanner?.Zoom ?? 0)"
-                           @onchange="OnZoomChanged" />
-                </div>
-            }
-
-            <p class="field__hint" style="margin-block-start:0.6rem;">
-                Torch and zoom are almost always rear-camera-only, and support varies by browser.
-                Both calls report whether the browser accepted them rather than throwing.
-            </p>
         </div>
-
-        @if (_last is not null)
-        {
-            <div class="card">
-                <h3 style="margin-block-start:0;">Last scan</h3>
-                <p style="margin:0;"><span class="pill">@_last.Format</span></p>
-                <pre style="margin:0.5rem 0 0;"><code>@_last.Text</code></pre>
-            </div>
-        }
     </div>
 </div>
 
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Customize.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Customize.razor
index dc81766a591..14386294b3e 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Customize.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Customize.razor
@@ -1,136 +1,157 @@
 @page "/customize"
 
-<PageTitle>Customisation - bit BbScanner</PageTitle>
+<PageTitle>Customisation · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Customisation</h1>
+    <p class="bb-subtitle">
+        Every colour, radius and dimension is a CSS custom property, and every visual element can be
+        replaced with a render fragment. Nothing needs a selector override.
+    </p>
+</div>
 
-<h1>Customisation</h1>
-<p class="lede">
-    Every colour, radius and dimension is a CSS custom property, and every visual element can be
-    replaced with a render fragment. Nothing needs a selector override.
-</p>
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live</span>
+    </div>
 
-<div class="split">
-    <div class="stack">
+    <div class="scan-sample">
+        <div class="scan-layout">
+            <div class="scan-view">
 @* The custom properties are set on the scanner itself, through the unmatched attribute
    capture, because a declaration on the element always beats one inherited from an ancestor. *@
-        <BbScanner Formats="BbBarcodeFormat.All"
-                   Region="BbScanRegion.CenteredSquare(0.72)"
-                   ShowControls="_showControls"
-                   CssClass="demo-scanner"
-                   AriaLabel="Customisable barcode scanner"
-                   Overlay="CurrentOverlay"
-                   MessageTemplate="MessageTemplate"
-                   style="@ThemeStyle()"
-                   OnScan="r => _last = r" />
-
-        @if (_last is not null)
-        {
-            <div class="card">
-                <h3 style="margin-block-start:0;">Last scan</h3>
-                <p style="margin:0;"><span class="pill">@_last.Format</span></p>
-                <pre style="margin:0.5rem 0 0;"><code>@_last.Text</code></pre>
-            </div>
-        }
-    </div>
-
-    <div class="stack">
-        <div class="card">
-            <h3 style="margin-block-start:0;">Theme</h3>
-
-            <div class="field">
-                <label class="field__label" for="accent">Accent and reticle</label>
-                <select id="accent" value="@_accent" @onchange="e => _accent = e.Value?.ToString() ?? _accent">
-                    <option value="#4f8cff">Blue</option>
-                    <option value="#35c77c">Green</option>
-                    <option value="#ff9f45">Amber</option>
-                    <option value="#ff5f9e">Pink</option>
-                    <option value="#ffffff">White</option>
-                </select>
-            </div>
-
-            <div class="field">
-                <label class="field__label">Corner radius: @_radius rem</label>
-                <input type="range" min="0" max="2" step="0.25" value="@_radius" @onchange="e => _radius = ToDouble(e, 0.75)" />
-            </div>
-
-            <div class="field">
-                <label class="field__label">Reticle thickness: @_thickness px</label>
-                <input type="range" min="1" max="8" step="1" value="@_thickness" @onchange="e => _thickness = (int)ToDouble(e, 3)" />
+                <BbScanner Formats="BbBarcodeFormat.All"
+                           Region="BbScanRegion.CenteredSquare(0.72)"
+                           ShowControls="_showControls"
+                           CssClass="demo-scanner"
+                           AriaLabel="Customisable barcode scanner"
+                           Overlay="CurrentOverlay"
+                           MessageTemplate="MessageTemplate"
+                           style="@ThemeStyle()"
+                           OnScan="r => _last = r" />
+
+                @if (_last is not null)
+                {
+                    <dl class="bb-params">
+                        <dt>Last scan</dt>
+                        <dd><span class="bb-badge">@_last.Format</span> @_last.Text</dd>
+                    </dl>
+                }
             </div>
 
-            <div class="field">
-                <label class="field__label">Reticle corner length: @_cornerLength %</label>
-                <input type="range" min="5" max="50" step="1" value="@_cornerLength" @onchange="e => _cornerLength = (int)ToDouble(e, 14)" />
+            <div class="scan-panels">
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Theme</h3>
+
+                    <label class="bb-field">
+                        <span>Accent and reticle</span>
+                        <select id="accent" value="@_accent" @onchange="e => _accent = e.Value?.ToString() ?? _accent">
+                            <option value="#4fa3f4">Blue</option>
+                            <option value="#35c77c">Green</option>
+                            <option value="#ff9f45">Amber</option>
+                            <option value="#ff5f9e">Pink</option>
+                            <option value="#ffffff">White</option>
+                        </select>
+                    </label>
+
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Corner radius</span><output>@_radius rem</output></span>
+                        <input type="range" min="0" max="2" step="0.25" value="@_radius" @onchange="e => _radius = ToDouble(e, 0.75)" />
+                    </label>
+
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Reticle thickness</span><output>@_thickness px</output></span>
+                        <input type="range" min="1" max="8" step="1" value="@_thickness" @onchange="e => _thickness = (int)ToDouble(e, 3)" />
+                    </label>
+
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Reticle corner length</span><output>@_cornerLength %</output></span>
+                        <input type="range" min="5" max="50" step="1" value="@_cornerLength" @onchange="e => _cornerLength = (int)ToDouble(e, 14)" />
+                    </label>
+
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Overlay dimming</span><output>@_dim %</output></span>
+                        <input type="range" min="0" max="90" step="5" value="@_dim" @onchange="e => _dim = (int)ToDouble(e, 55)" />
+                    </label>
+
+                    <label class="bb-check">
+                        <input type="checkbox" checked="@_showControls" @onchange="e => _showControls = (bool)(e.Value ?? true)" />
+                        Built-in controls
+                    </label>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Overlay</h3>
+                    <label class="bb-field">
+                        <span>Overlay fragment</span>
+                        <select value="@_overlayStyle" @onchange="OnOverlayChanged">
+                            <option value="@OverlayStyle.Default">Built-in reticle</option>
+                            <option value="@OverlayStyle.Crosshair">Custom crosshair</option>
+                            <option value="@OverlayStyle.Instruction">Instruction text</option>
+                        </select>
+                    </label>
+                    <p class="bb-card-desc">
+                        The <code>Overlay</code> fragment receives the scanner itself, so a custom overlay
+                        can read the status, the open camera and the current zoom without extra plumbing.
+                    </p>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Generated CSS</h3>
+                    <pre class="bb-code">@ThemeStyle().Replace(";", ";\n")</pre>
+                </section>
             </div>
-
-            <div class="field">
-                <label class="field__label">Overlay dimming: @_dim %</label>
-                <input type="range" min="0" max="90" step="5" value="@_dim" @onchange="e => _dim = (int)ToDouble(e, 55)" />
-            </div>
-
-            <label class="checkbox">
-                <input type="checkbox" checked="@_showControls" @onchange="e => _showControls = (bool)(e.Value ?? true)" />
-                Built-in controls
-            </label>
-        </div>
-
-        <div class="card">
-            <h3 style="margin-block-start:0;">Overlay</h3>
-            <div class="field">
-                <select value="@_overlayStyle" @onchange="OnOverlayChanged">
-                    <option value="@OverlayStyle.Default">Built-in reticle</option>
-                    <option value="@OverlayStyle.Crosshair">Custom crosshair</option>
-                    <option value="@OverlayStyle.Instruction">Instruction text</option>
-                </select>
-            </div>
-            <p class="field__hint">
-                The <code>Overlay</code> fragment receives the scanner itself, so a custom overlay
-                can read the status, the open camera and the current zoom without extra plumbing.
-            </p>
         </div>
+    </div>
+</div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Generated CSS</h3>
-            <pre style="margin:0;"><code>@ThemeStyle().Replace(";", ";\n")</code></pre>
-        </div>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Every custom property</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Property</th><th>Default</th><th>Controls</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key">--bit-bbscanner-radius</td><td class="bb-mono">0.75rem</td><td>Corner radius of the viewport</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-bg</td><td class="bb-mono">#0b0d12</td><td>Backdrop behind the video</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-fg</td><td class="bb-mono">#f5f7fa</td><td>Text colour</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-muted</td><td class="bb-mono">#9aa4b2</td><td>Secondary text and idle indicator</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-accent</td><td class="bb-mono">#4f8cff</td><td>Active controls and starting state</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-danger</td><td class="bb-mono">#ff5f57</td><td>Faulted state</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-success</td><td class="bb-mono">#35c77c</td><td>Scanning state and result highlight</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-overlay</td><td class="bb-mono">rgba(6,8,12,0.55)</td><td>Dimming outside the scan region</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-reticle-color</td><td class="bb-mono">#ffffff</td><td>Reticle corners</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-reticle-thickness</td><td class="bb-mono">3px</td><td>Reticle stroke width</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-reticle-length</td><td class="bb-mono">14%</td><td>Reticle corner arm length</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-reticle-radius</td><td class="bb-mono">0.5rem</td><td>Reticle corner rounding</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-control-bg</td><td class="bb-mono">rgba(18,22,30,0.72)</td><td>Control background</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-control-fg</td><td class="bb-mono">#f5f7fa</td><td>Control text</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-control-hover-bg</td><td class="bb-mono">rgba(40,48,62,0.9)</td><td>Control hover background</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-focus-ring</td><td class="bb-mono">0 0 0 3px …</td><td>Keyboard focus indicator</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-font</td><td class="bb-mono">system-ui, …</td><td>Font stack</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-gap</td><td class="bb-mono">0.5rem</td><td>Spacing inside the control bars</td></tr>
+                <tr><td class="bb-table-key">--bit-bbscanner-transition</td><td class="bb-mono">160ms ease</td><td>Transition timing</td></tr>
+            </tbody>
+        </table>
     </div>
+    <p class="bb-card-desc">
+        This site tints the accent, the focus ring, the radius and the font of its scanners with one
+        rule on <code>.bit-bbscanner</code>, which outranks the zero-specificity defaults wherever it is
+        declared; the <code>style</code> attribute of the scanner above outranks that rule in turn.
+    </p>
 </div>
 
-<h2>Every custom property</h2>
-<table>
-    <thead>
-        <tr><th>Property</th><th>Default</th><th>Controls</th></tr>
-    </thead>
-    <tbody>
-        <tr><td class="mono">--bit-bbscanner-radius</td><td class="mono">0.75rem</td><td>Corner radius of the viewport</td></tr>
-        <tr><td class="mono">--bit-bbscanner-bg</td><td class="mono">#0b0d12</td><td>Backdrop behind the video</td></tr>
-        <tr><td class="mono">--bit-bbscanner-fg</td><td class="mono">#f5f7fa</td><td>Text colour</td></tr>
-        <tr><td class="mono">--bit-bbscanner-muted</td><td class="mono">#9aa4b2</td><td>Secondary text and idle indicator</td></tr>
-        <tr><td class="mono">--bit-bbscanner-accent</td><td class="mono">#4f8cff</td><td>Active controls and starting state</td></tr>
-        <tr><td class="mono">--bit-bbscanner-danger</td><td class="mono">#ff5f57</td><td>Faulted state</td></tr>
-        <tr><td class="mono">--bit-bbscanner-success</td><td class="mono">#35c77c</td><td>Scanning state and result highlight</td></tr>
-        <tr><td class="mono">--bit-bbscanner-overlay</td><td class="mono">rgba(6,8,12,0.55)</td><td>Dimming outside the scan region</td></tr>
-        <tr><td class="mono">--bit-bbscanner-reticle-color</td><td class="mono">#ffffff</td><td>Reticle corners</td></tr>
-        <tr><td class="mono">--bit-bbscanner-reticle-thickness</td><td class="mono">3px</td><td>Reticle stroke width</td></tr>
-        <tr><td class="mono">--bit-bbscanner-reticle-length</td><td class="mono">14%</td><td>Reticle corner arm length</td></tr>
-        <tr><td class="mono">--bit-bbscanner-reticle-radius</td><td class="mono">0.5rem</td><td>Reticle corner rounding</td></tr>
-        <tr><td class="mono">--bit-bbscanner-control-bg</td><td class="mono">rgba(18,22,30,0.72)</td><td>Control background</td></tr>
-        <tr><td class="mono">--bit-bbscanner-control-fg</td><td class="mono">#f5f7fa</td><td>Control text</td></tr>
-        <tr><td class="mono">--bit-bbscanner-control-hover-bg</td><td class="mono">rgba(40,48,62,0.9)</td><td>Control hover background</td></tr>
-        <tr><td class="mono">--bit-bbscanner-focus-ring</td><td class="mono">0 0 0 3px …</td><td>Keyboard focus indicator</td></tr>
-        <tr><td class="mono">--bit-bbscanner-font</td><td class="mono">system-ui, …</td><td>Font stack</td></tr>
-        <tr><td class="mono">--bit-bbscanner-gap</td><td class="mono">0.5rem</td><td>Spacing inside the control bars</td></tr>
-        <tr><td class="mono">--bit-bbscanner-transition</td><td class="mono">160ms ease</td><td>Transition timing</td></tr>
-    </tbody>
-</table>
-
-<h2>Accessibility and direction</h2>
-<p>
-    The scanner is a labelled region, the controls are real buttons with pressed state, results
-    are announced through a polite live region, and the layout uses logical properties throughout
-    so a right to left document needs no extra work. Animation is suppressed under
-    <code>prefers-reduced-motion</code>, and the reticle and controls switch to system colours
-    under <code>forced-colors</code>.
-</p>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Accessibility and direction</h3>
+    <p class="bb-card-desc">
+        The scanner is a labelled region, the controls are real buttons with pressed state, results
+        are announced through a polite live region, and the layout uses logical properties throughout
+        so a right to left document needs no extra work. Animation is suppressed under
+        <code>prefers-reduced-motion</code>, and the reticle and controls switch to system colours
+        under <code>forced-colors</code>.
+    </p>
+</div>
 
 @code {
     private readonly RenderFragment<string> MessageTemplate = message =>
@@ -172,7 +193,7 @@
             @(scanner.Status == BbScannerStatus.Scanning ? "Looking..." : scanner.Status.ToString())
         </p>
     </div>;
-    private string _accent = "#4f8cff";
+    private string _accent = "#4fa3f4";
     private double _radius = 0.75;
     private int _thickness = 3;
     private int _cornerLength = 14;
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Errors.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Errors.razor
index f8e646b14dc..cfac8409b66 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Errors.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Errors.razor
@@ -1,91 +1,110 @@
 @page "/errors"
 
-<PageTitle>Errors and permissions - bit BbScanner</PageTitle>
+<PageTitle>Errors and permissions · BbScanner</PageTitle>
 
-<h1>Errors and permissions</h1>
-<p class="lede">
-    Camera failures are ordinary and expected: permission denied, no camera, camera already in
-    use. The component classifies each one so an application can respond without parsing message
-    text.
-</p>
+<div class="bb-intro">
+    <h1>Errors and permissions</h1>
+    <p class="bb-subtitle">
+        Camera failures are ordinary and expected: permission denied, no camera, camera already in
+        use. The component classifies each one so an application can respond without parsing message
+        text.
+    </p>
+</div>
 
-<div class="split">
-    <div class="stack">
-        <BbScanner @ref="_scanner"
-                   AutoStart="false"
-                   DeviceId="@_deviceId"
-                   RequestedWidth="_width"
-                   RequestedHeight="_height"
-                   OnError="HandleError"
-                   OnStatusChanged="HandleStatus" />
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live</span>
+        <StatusBadge Status="_status" />
+    </div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Provoke a failure</h3>
-            <div class="button-row">
-                <button class="button" type="button" @onclick="StartNormally">Start normally</button>
-                <button class="button" type="button" @onclick="StartWithBadDevice">Unknown camera id</button>
+    <div class="scan-sample">
+        <div class="scan-layout">
+            <div class="scan-view">
+                <BbScanner @ref="_scanner"
+                           AutoStart="false"
+                           DeviceId="@_deviceId"
+                           RequestedWidth="_width"
+                           RequestedHeight="_height"
+                           OnError="HandleError"
+                           OnStatusChanged="HandleStatus" />
             </div>
-            <p class="field__hint" style="margin-block-start:0.6rem;">
-                An unknown <code>DeviceId</code> is requested as an exact constraint, so browsers
-                reject it with <code>OverconstrainedError</code>, which the component reports as
-                <code>ConstraintsUnsatisfied</code>.
-            </p>
-            <p class="field__hint">
-                <code>RequestedWidth</code> and <code>RequestedHeight</code> are sent as
-                <em>ideal</em> constraints, so an unreachable resolution is negotiated down rather
-                than refused; resolution alone never produces an error.
-            </p>
-            <p class="field__hint">
-                To see a permission denial, block camera access for this site in the browser and
-                press <em>Start normally</em>.
-            </p>
-        </div>
-    </div>
 
-    <div class="stack">
-        <div class="card">
-            <h3 style="margin-block-start:0;">Current state</h3>
-            <p style="margin:0;">Status: <span class="pill">@_status</span></p>
-            @if (_error is not null)
-            {
-                <div class="note note--warning" style="margin-block-start:0.75rem;">
-                    <p style="margin:0 0 0.35rem;"><strong>@_error.Kind</strong></p>
-                    <p style="margin:0;">@_error.Message</p>
-                </div>
-                <p class="field__hint" style="margin-block-start:0.6rem;">Suggested handling: @Advice(_error.Kind)</p>
-            }
-            else
-            {
-                <p class="empty" style="padding:0.25rem;">No error.</p>
-            }
-        </div>
+            <div class="scan-panels">
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Provoke a failure</h3>
+                    <div class="bb-toolbar">
+                        <button class="btn btn-secondary" type="button" @onclick="StartNormally">Start normally</button>
+                        <button class="btn btn-secondary" type="button" @onclick="StartWithBadDevice">Unknown camera id</button>
+                    </div>
+                    <p class="bb-card-desc">
+                        An unknown <code>DeviceId</code> is requested as an exact constraint, so browsers
+                        reject it with <code>OverconstrainedError</code>, which the component reports as
+                        <code>ConstraintsUnsatisfied</code>.
+                    </p>
+                    <p class="bb-card-desc">
+                        <code>RequestedWidth</code> and <code>RequestedHeight</code> are sent as
+                        <em>ideal</em> constraints, so an unreachable resolution is negotiated down rather
+                        than refused; resolution alone never produces an error.
+                    </p>
+                    <p class="bb-card-desc">
+                        To see a permission denial, block camera access for this site in the browser and
+                        press <em>Start normally</em>.
+                    </p>
+                </section>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Error kinds</h3>
-            <table>
-                <tbody>
-                    <tr><td class="mono">PermissionDenied</td><td>The user or a policy refused the camera.</td></tr>
-                    <tr><td class="mono">NoCamera</td><td>No device matched the request.</td></tr>
-                    <tr><td class="mono">CameraUnavailable</td><td>A device exists but is held by something else.</td></tr>
-                    <tr><td class="mono">ConstraintsUnsatisfied</td><td>No camera can meet the requested constraints.</td></tr>
-                    <tr><td class="mono">NotSupported</td><td>No camera API, or the page is not a secure context.</td></tr>
-                    <tr><td class="mono">Unknown</td><td>Anything the browser did not classify.</td></tr>
-                </tbody>
-            </table>
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Current state</h3>
+                    @if (_error is not null)
+                    {
+                        <div class="bb-note bb-note-warn">
+                            <p><strong>@_error.Kind</strong></p>
+                            <p>@_error.Message</p>
+                        </div>
+                        <p class="bb-card-desc">Suggested handling: @Advice(_error.Kind)</p>
+                    }
+                    else
+                    {
+                        <div class="bb-empty">No error.</div>
+                    }
+                </section>
+            </div>
         </div>
+    </div>
+</div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Secure context</h3>
-            <p style="font-size:0.9rem;color:var(--fg-muted);margin:0;">
-                Browsers only expose <code>getUserMedia</code> over HTTPS or on
-                <code>localhost</code>. Served any other way the component reports
-                <code>NotSupported</code> immediately, with a message that says exactly that,
-                instead of hanging on a permission prompt that will never appear.
-            </p>
-        </div>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Error kinds</h3>
+    <p class="bb-card-desc">
+        Every failure reaches <code>OnError</code> as a <code>BbScannerException</code> whose
+        <code>Kind</code> is one of these.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Kind</th><th>Meaning</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key">PermissionDenied</td><td>The user or a policy refused the camera.</td></tr>
+                <tr><td class="bb-table-key">NoCamera</td><td>No device matched the request.</td></tr>
+                <tr><td class="bb-table-key">CameraUnavailable</td><td>A device exists but is held by something else.</td></tr>
+                <tr><td class="bb-table-key">ConstraintsUnsatisfied</td><td>No camera can meet the requested constraints.</td></tr>
+                <tr><td class="bb-table-key">NotSupported</td><td>No camera API, or the page is not a secure context.</td></tr>
+                <tr><td class="bb-table-key">Unknown</td><td>Anything the browser did not classify.</td></tr>
+            </tbody>
+        </table>
     </div>
 </div>
 
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Secure context</h3>
+    <p class="bb-card-desc">
+        Browsers only expose <code>getUserMedia</code> over HTTPS or on
+        <code>localhost</code>. Served any other way the component reports
+        <code>NotSupported</code> immediately, with a message that says exactly that,
+        instead of hanging on a permission prompt that will never appear.
+    </p>
+</div>
+
 @code {
     private BbScanner? _scanner;
     private BbScannerException? _error;
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/BbScanner/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..4e8750b71ec
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,170 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package and one namespace - there are no services to register, no script tag and no stylesheet
+        link. Put the scanner on a page that runs on WebAssembly and it opens the camera by itself; everything
+        after the camera hands over its pixels is managed code.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        In a Blazor Web App, add the package to the <code>.Client</code> project: the scanner runs in the
+        browser, so its assembly has to be downloaded there.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.BbScanner</pre>
+    <p class="bb-card-desc">Then add the namespace to <code>_Imports.razor</code>:</p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.BbScanner</pre>
+    <p class="bb-card-desc">
+        That is the whole setup. The package's Blazor initializer adds
+        <code>_content/Bit.BbScanner/bit-bbscanner.css</code> to the page, and the component imports its own
+        JavaScript module the first time it renders. Linking the stylesheet yourself also works - the
+        injection then stands down.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> A first scanner</h3>
+    <p class="bb-card-desc">
+        The camera starts as soon as the component is ready (<code>AutoStart</code> is on by default) and the
+        browser asks for permission the first time. The scanner prerenders safely on the server and starts once
+        WebAssembly takes over. In a standalone Blazor WebAssembly app leave the <code>@@rendermode</code> line
+        out: everything there already runs on WebAssembly.
+    </p>
+    <pre class="bb-code"><span class="k">@@page</span> <span class="s">"/scan"</span>
+<span class="k">@@rendermode</span> InteractiveWebAssembly
+
+&lt;<span class="k">BbScanner</span> Formats=<span class="s">"BbBarcodeFormat.QrCode"</span>
+           Region=<span class="s">"BbScanRegion.CenteredSquare(0.7)"</span>
+           OnScan=<span class="s">"HandleScan"</span>
+           OnError=<span class="s">"HandleError"</span> /&gt;
+
+<span class="k">@@if</span> (_error <span class="k">is not null</span>)
+{
+    &lt;<span class="k">p</span> role=<span class="s">"alert"</span>&gt;@@_error.Message&lt;/<span class="k">p</span>&gt;
+}
+
+<span class="k">@@code</span> {
+    <span class="k">private</span> BbScannerException? _error;
+
+    <span class="k">private void</span> HandleScan(BbBarcodeResult result)
+    {
+        _error = <span class="k">null</span>;
+        Console.WriteLine(<span class="s">$"{result.Format}: {result.Text}"</span>);
+    }
+
+    <span class="k">private void</span> HandleError(BbScannerException error) =&gt; _error = error;
+}</pre>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <span class="bb-soft">Needs HTTPS or localhost, and camera permission</span>
+        </div>
+        <div class="scan-sample">
+            <div class="scan-layout">
+                <div class="scan-view">
+                    <BbScanner Formats="BbBarcodeFormat.All"
+                               Region="BbScanRegion.CenteredSquare(0.75)"
+                               OnScan="OnScan" />
+                </div>
+                <div class="scan-panels">
+                    <section class="scan-panel">
+                        <h4 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Last scan</h4>
+                        @if (_last is not null)
+                        {
+                            <dl class="bb-params">
+                                <dt>Format</dt>
+                                <dd><span class="bb-badge">@_last.Format</span></dd>
+                                <dt>Text</dt>
+                                <dd>@_last.Text</dd>
+                            </dl>
+                        }
+                        else
+                        {
+                            <div class="bb-empty">Scan something to see the strongly typed result here.</div>
+                        }
+                        <p class="bb-card-desc">
+                            No camera to hand? Use <a href="image">image scanning</a>, or open the
+                            <a href="samples">sample barcodes</a> on another screen.
+                        </p>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Where it runs</h3>
+    <p class="bb-card-desc">
+        Camera scanning runs in the browser: the component reads frames through <code>[JSImport]</code> memory
+        views, which only exist on the WebAssembly runtime, and only in a secure context - a page served over
+        HTTPS, or from <code>localhost</code>.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Hosting model</th><th>What to do</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key">Blazor WebAssembly</td><td>Nothing else: put <code>&lt;BbScanner /&gt;</code> on a page.</td></tr>
+                <tr><td class="bb-table-key">Blazor Web App</td><td>Put the package and the scanning pages in the .Client project and render them with <code>InteractiveWebAssembly</code>. Under <code>InteractiveAuto</code> give the scanning pages <code>@@rendermode InteractiveWebAssembly</code> explicitly; the rest of the app can stay on Auto.</td></tr>
+                <tr><td class="bb-table-key">Blazor Server</td><td>The component reports <code>NotSupported</code>. Render the page with <code>InteractiveWebAssembly</code>, or decode uploads on the server with <code>BbBarcodeDecoder</code>.</td></tr>
+                <tr><td class="bb-table-key">Blazor Hybrid</td><td>The component reports <code>NotSupported</code>. Feed the platform camera's frames to <code>BbBarcodeDecoder</code>, which runs in-process.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> How it works</h3>
+    <p class="bb-card-desc">
+        The browser opens the camera and copies pixels; every stage after that is C#, and reuses its buffers
+        from frame to frame.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Stage</th><th>Where</th><th>What happens</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key">Capture</td><td>Browser</td><td><code>getUserMedia</code> feeds a <code>&lt;video&gt;</code>; a canvas scales frames to the processing size.</td></tr>
+                <tr><td class="bb-table-key">Transfer</td><td>Boundary</td><td>One <code>JSImport</code> call copies RGBA into a reused managed buffer.</td></tr>
+                <tr><td class="bb-table-key">Luminance</td><td>C#</td><td>Fixed point BT.601 weights, with optional subsampling in the same pass.</td></tr>
+                <tr><td class="bb-table-key">Binarise</td><td>C#</td><td>Adaptive 8×8 block thresholds for matrix codes, per-row histograms for linear ones.</td></tr>
+                <tr><td class="bb-table-key">Detect</td><td>C#</td><td>Finder pattern search, perspective transform and grid sampling.</td></tr>
+                <tr><td class="bb-table-key">Decode</td><td>C#</td><td>Reed-Solomon correction, de-interleaving and bit stream parsing.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where to go next</h3>
+    <p class="bb-card-desc">
+        Narrow <code>Formats</code> to the symbologies you need - it is the single most effective speed-up -
+        then aim with a region and tune the rest in the playground.
+    </p>
+    <div class="bb-try">
+        <a href="scan" class="btn btn-outline">Every parameter, live →</a>
+        <a href="samples" class="btn btn-outline">Barcodes to scan →</a>
+        <a href="image" class="btn btn-outline">Scan a photo →</a>
+        <a href="api" class="btn btn-outline">API reference →</a>
+    </div>
+</div>
+
+@code {
+    private BbBarcodeResult? _last;
+
+    private void OnScan(BbBarcodeResult result)
+    {
+        _last = result;
+        StateHasChanged();
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Home.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Home.razor
index 666f18a1b10..7a7fcb8aefd 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Home.razor
@@ -1,142 +1,348 @@
 @page "/"
+@layout MainLayout
+@using System.Diagnostics
+@using Bit.BbScanner.TestKit
 
-<PageTitle>bit BbScanner - barcode scanning for Blazor</PageTitle>
-
-<h1>bit BbScanner</h1>
-<p class="lede">
-    A barcode scanner for Blazor with the decoding written from scratch in C#. No barcode SDK, no
-    JavaScript scanner library, no component framework. The browser opens the camera and copies
-    pixels; everything after that is managed code.
-</p>
-
-<div class="grid grid--3" style="margin-block-start:1.5rem;">
-    <div class="card">
-        <h3 style="margin-block-start:0;">Nine symbologies</h3>
-        <p style="margin:0;color:var(--fg-muted);font-size:0.9rem;">
-            QR Code, Data Matrix, Code 128, Code 39, EAN-13, EAN-8, UPC-A, UPC-E and ITF, each
-            decoded by a reader written against the specification. PDF417 is implemented but needs
-            its specification symbol table.
-        </p>
-    </div>
-    <div class="card">
-        <h3 style="margin-block-start:0;">One copy per frame</h3>
-        <p style="margin:0;color:var(--fg-muted);font-size:0.9rem;">
-            JavaScript writes the frame straight into managed memory through a memory view. There
-            is no JSON, no base64 and no second buffer.
-        </p>
-    </div>
-    <div class="card">
-        <h3 style="margin-block-start:0;">No garbage per frame</h3>
-        <p style="margin:0;color:var(--fg-muted);font-size:0.9rem;">
-            Buffers, bit planes, detectors and scan lines are all reused across frames. A frame
-            with no barcode in it allocates nothing on the linear path and a few dozen bytes on
-            the matrix one, whatever the frame contains.
-        </p>
-    </div>
-</div>
+<PageTitle>BbScanner - barcode scanning for Blazor, decoded in C#</PageTitle>
+
+@* The landing page: hero → proof strip → feature grid → code walkthrough → comparison with a
+   JavaScript scanner → persona tiles → FAQ → final call to action. Everything else on the site is
+   a documentation page under DocsLayout. The hero's sample decodes a real symbol in the visitor's
+   own tab rather than showing a picture of a result - without opening a camera, so the first page
+   of the site never asks for a permission. *@
+
+<div class="bb-landing">
 
-<h2>Try it</h2>
-<div class="split">
-    <div>
-        <BbScanner Formats="BbBarcodeFormat.All"
-                   Region="BbScanRegion.CenteredSquare(0.75)"
-                   OnScan="OnScan" />
-        <p class="field__hint" style="margin-block-start:0.6rem;">
-            Needs HTTPS or localhost, and camera permission. No camera to hand? Use
-            <a href="image">image scanning</a> or open the
-            <a href="samples">sample barcodes</a> on another screen.
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Barcode scanning for Blazor,<br /><span class="bb-hero-accent">decoded in C#.</span></h1>
+            <p class="bb-hero-sub">
+                QR Code, Data Matrix, Code 128, Code 39, EAN-13, EAN-8, UPC-A, UPC-E and ITF - from the camera
+                or from still images. No barcode SDK and no JavaScript scanner library: the browser opens the
+                camera and copies pixels, and everything after that is managed code you can step into.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.BbScanner</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="scan" class="btn btn-secondary bb-btn-lg">Live playground</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The sample, framed as a window: the markup on top, and underneath it the library's own
+           decoder reading a symbol this page drew - live, in this tab. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Checkout.razor</span>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BbScanner</span> Formats=<span class="s">"BbBarcodeFormat.QrCode | BbBarcodeFormat.Ean13"</span>
+           Region=<span class="s">"BbScanRegion.CenteredSquare(0.7)"</span>
+           OnScan=<span class="s">"HandleScan"</span> /&gt;
+
+<span class="k">private void</span> HandleScan(BbBarcodeResult result)
+    =&gt; Console.WriteLine(<span class="s">$"{result.Format}: {result.Text}"</span>);</pre>
+                <div class="home-live">
+                    <div class="home-viewfinder @(_hero is not null ? "home-viewfinder-found" : null)">
+                        <BarcodeSvg Matrix="Symbol.Matrix" Caption="@Symbol.Caption" Value="@Symbol.Value" Size="116" ShowCaption="false" />
+                        <span class="home-corner home-corner-tl"></span>
+                        <span class="home-corner home-corner-tr"></span>
+                        <span class="home-corner home-corner-bl"></span>
+                        <span class="home-corner home-corner-br"></span>
+                    </div>
+                    <div class="home-live-side">
+                        <p class="bb-overline">Live · in this tab</p>
+                        <p class="home-live-copy">The same decoder a camera frame goes through, on the symbol beside this text.</p>
+                        <button type="button" class="btn btn-primary" id="hero-decode" @onclick="DecodeHero" disabled="@(RendererInfo.IsInteractive is false)">
+                            Decode it in C#
+                        </button>
+                        <div class="home-live-result" role="status" aria-live="polite">
+                            @if (_hero is { } hit)
+                            {
+                                <span class="bb-badge bb-badge-success">@hit.Format</span>
+                                <code id="hero-text">@hit.Text</code>
+                                <span class="bb-soft">@hit.Milliseconds.ToString("0.0") ms</span>
+                            }
+                            else if (_heroMissed)
+                            {
+                                <span class="bb-badge bb-badge-danger">Not decoded</span>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>Decoding in C#</strong><span>no barcode SDK, no JavaScript scanner library</span></div>
+        <div><strong>One copy per frame</strong><span>a <code>[JSImport]</code> memory view, no JSON or base64</span></div>
+        <div><strong>Nine symbologies</strong><span>read to specification, check digits verified</span></div>
+        <div><strong>Runs anywhere .NET runs</strong><span><code>BbBarcodeDecoder</code> needs no browser</span></div>
+    </section>
+
+    @* ============================== Feature grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>A scanner component, and the decoder behind it</h2>
+        <p class="bb-section-sub">
+            <code>&lt;BbScanner&gt;</code> owns the camera, the frame loop, the overlays and the controls;
+            <code>BbBarcodeDecoder</code> turns pixels into a strongly typed <code>BbBarcodeResult</code> - with
+            the corner points, the raw bytes and the symbol's metadata - wherever .NET runs.
         </p>
-    </div>
-    <div class="stack">
-        @if (_last is not null)
-        {
-            <div class="card">
-                <h3 style="margin-block-start:0;">Last scan</h3>
-                <p style="margin:0 0 0.5rem;"><span class="pill">@_last.Format</span></p>
-                <pre style="margin:0;"><code>@_last.Text</code></pre>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Every parameter, live</h3>
+                <p class="bb-card-desc">
+                    Formats, frame rate, processing size, region, duplicate suppression and the advanced
+                    <code>BbScannerOptions</code> - all applied to the running camera without dropping it.
+                </p>
+                <a href="scan" class="btn btn-outline">Live playground →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Camera, torch and zoom</h3>
+                <p class="bb-card-desc">
+                    Device selection, front and rear cameras, torch and zoom where the hardware offers them -
+                    and never a control the hardware will refuse.
+                </p>
+                <a href="camera" class="btn btn-outline">Camera control →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Aim with a region</h3>
+                <p class="bb-card-desc">
+                    A normalized <code>BbScanRegion</code> crops the frame before any pixel is touched, so every
+                    later stage gets cheaper in proportion to the area removed.
+                </p>
+                <a href="region" class="btn btn-outline">Scan region →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Photos and buffers</h3>
+                <p class="bb-card-desc">
+                    A built-in file picker for still images, and <code>DecodeImage</code> for pixels the
+                    application already has - tuned for one exhaustive attempt rather than fifteen a second.
+                </p>
+                <a href="image" class="btn btn-outline">Image scanning →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Measured, not guessed</h3>
+                <p class="bb-card-desc">
+                    Per-stage timings for every frame, and a decoder benchmark that runs in your browser on your
+                    device - with no garbage allocated per frame.
+                </p>
+                <a href="performance" class="btn btn-outline">Performance →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Yours to restyle</h3>
+                <p class="bb-card-desc">
+                    Every colour, radius and dimension is a CSS custom property, and the reticle and the messages
+                    are render fragments - with right-to-left, reduced motion and forced colours built in.
+                </p>
+                <a href="customize" class="btn btn-outline">Customisation →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>One package, one namespace</h3>
+                    <p>
+                        No services to register, no script tag and no stylesheet link: the package's initializer
+                        adds the stylesheet and the component imports its own module. Put it on a page rendered
+                        with <code>InteractiveWebAssembly</code>.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code">dotnet add package Bit.BbScanner
+
+<span class="c">@@* _Imports.razor *@@</span>
+<span class="k">@@using</span> Bit.BbScanner
+
+<span class="c">@@* Scan.razor *@@</span>
+&lt;<span class="k">BbScanner</span> OnScan=<span class="s">"r =&gt; _last = r"</span> /&gt;</pre>
             </div>
-        }
-        else
-        {
-            <div class="card">
-                <p class="empty" style="padding:0.5rem;">Scan something to see the strongly typed result here.</p>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Ask for less, get it faster</h3>
+                    <p>
+                        Narrow <code>Formats</code> to the symbologies you need - an unused one costs nothing because
+                        its decoder is never created - and aim the decoder at the part of the frame that matters.
+                    </p>
+                    <a href="scan">Live playground →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BbScanner</span> Formats=<span class="s">"BbBarcodeFormat.Ean13"</span>
+           Region=<span class="s">"BbScanRegion.CenteredSquare(0.6)"</span>
+           OnScan=<span class="s">"AddToBasket"</span> /&gt;</pre>
             </div>
-        }
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Decode without a camera</h3>
+                    <p>
+                        The pipeline has no dependency on Blazor, JavaScript or a camera: a server decoding uploads,
+                        a MAUI app feeding the platform camera's frames, or a unit test uses the same decoder.
+                    </p>
+                    <a href="api">API reference →</a>
+                </div>
+                <pre class="bb-code"><span class="k">using var</span> decoder = <span class="k">new</span> BbBarcodeDecoder(BbScannerOptions.ForStillImages());
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Quick start</h3>
-            <pre><code>&lt;BbScanner Formats="BbBarcodeFormat.QrCode | BbBarcodeFormat.Ean13"
-                Region="BbScanRegion.CenteredSquare(0.7)"
-                OnScan="HandleScan" /&gt;
+<span class="k">var</span> result = decoder.Decode(rgbaPixels, width, height, BbPixelFormat.Rgba32);
+<span class="k">if</span> (result <span class="k">is not null</span>)
+    Console.WriteLine(<span class="s">$"{result.Format}: {result.Text}"</span>);
 
-@@code {
-    private void HandleScan(BbBarcodeResult result)
-    {
-        Console.WriteLine($"{result.Format}: {result.Text}");
-    }
-}</code></pre>
+<span class="c">// result.Corners, result.RawBytes, result.Metadata …</span></pre>
+            </div>
         </div>
-    </div>
-</div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not wrap a JavaScript scanner?</h2>
+        <p class="bb-section-sub">
+            Wrapping a JavaScript barcode library puts the part that matters - the decoding - on the far side of
+            interop, in code your .NET tests, debugger and server cannot reach. BbScanner keeps only the camera in
+            the browser.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A wrapped JavaScript scanner compared with BbScanner">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>JavaScript scanner behind interop</th><th>BbScanner</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Where the decoding runs</td><td>JavaScript, outside the .NET debugger</td><td>C#, in managed code you can step into</td></tr>
+                    <tr><td>What crosses interop</td><td>Results marshalled back as JSON</td><td>One memory-view copy of each frame into a reused buffer</td></tr>
+                    <tr><td>Dependencies</td><td>A script library to ship and keep up to date</td><td>None beyond <code>Microsoft.AspNetCore.Components.Web</code></td></tr>
+                    <tr><td>The result</td><td>Whatever shape the library returns</td><td><code>BbBarcodeResult</code>: text, raw bytes, corners, metadata</td></tr>
+                    <tr><td>Without a browser</td><td>A second decoder for the server</td><td>The same <code>BbBarcodeDecoder</code>, anywhere .NET runs</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to BbScanner?</h3>
+                <p class="bb-card-desc">Install, add the namespace, drop the component on a page - scanning in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> No barcode to hand?</h3>
+                <p class="bb-card-desc">Every symbology is drawn on the samples page: open it on a second screen and scan it with the playground.</p>
+                <a href="samples" class="btn btn-outline">Sample barcodes →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
 
-<h2>Installation</h2>
-<pre><code>dotnet add package Bit.BbScanner</code></pre>
-<p>Then add the namespace to <code>_Imports.razor</code>:</p>
-<pre><code>@@using Bit.BbScanner</code></pre>
-<p>
-    That is the whole setup. There is no service registration, no JavaScript tag, no stylesheet
-    link and no initialisation call: the package's Blazor initializer adds
-    <code>_content/Bit.BbScanner/bit-bbscanner.css</code> to the page, and the component loads its
-    own module the first time it renders. Camera scanning runs on WebAssembly, so put the scanner
-    on a page rendered with <code>InteractiveWebAssembly</code>, or in a standalone Blazor
-    WebAssembly app.
-</p>
-
-<h2>How it works</h2>
-<table>
-    <thead>
-        <tr><th>Stage</th><th>Where</th><th>What happens</th></tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>Capture</td>
-            <td>Browser</td>
-            <td><code>getUserMedia</code> feeds a <code>&lt;video&gt;</code>; a canvas scales frames to the processing size.</td>
-        </tr>
-        <tr>
-            <td>Transfer</td>
-            <td>Boundary</td>
-            <td>One <code>JSImport</code> call copies RGBA into a reused managed buffer.</td>
-        </tr>
-        <tr>
-            <td>Luminance</td>
-            <td>C#</td>
-            <td>Fixed point BT.601 weights, with optional subsampling in the same pass.</td>
-        </tr>
-        <tr>
-            <td>Binarise</td>
-            <td>C#</td>
-            <td>Adaptive 8×8 block thresholds for matrix codes, per-row histograms for linear ones.</td>
-        </tr>
-        <tr>
-            <td>Detect</td>
-            <td>C#</td>
-            <td>Finder pattern search, perspective transform and grid sampling.</td>
-        </tr>
-        <tr>
-            <td>Decode</td>
-            <td>C#</td>
-            <td>Reed-Solomon correction, de-interleaving and bit stream parsing.</td>
-        </tr>
-    </tbody>
-</table>
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Which render modes can open the camera?</summary>
+                <p>
+                    WebAssembly: a standalone Blazor WebAssembly app, or the <code>InteractiveWebAssembly</code> pages of
+                    a Blazor Web App, on .NET 8, 9 and 10. Under Blazor Server and Blazor Hybrid the component reports
+                    <code>NotSupported</code> instead, and <code>BbBarcodeDecoder</code> decodes pixels in-process there.
+                </p>
+            </details>
+            <details>
+                <summary>Why does the camera not start on my test server?</summary>
+                <p>
+                    Browsers only expose the camera in a secure context - a page served over HTTPS, or from
+                    <code>localhost</code>. Anywhere else the component reports <code>NotSupported</code> straight away,
+                    with a message that says so, rather than waiting on a prompt that will never appear.
+                </p>
+            </details>
+            <details>
+                <summary>How does it avoid misreads?</summary>
+                <p>
+                    Misreading is treated as worse than missing: check digits and guard patterns are verified, a
+                    Reed-Solomon correction is only accepted when the corrected block re-verifies, and ITF, UPC-E and
+                    unchecked Code 39 results must repeat on a second scan line before they are reported.
+                </p>
+            </details>
+            <details>
+                <summary>Does it read PDF417?</summary>
+                <p>
+                    PDF417 is implemented end to end except its symbol character table, which is specification data
+                    the library cannot derive. It ships a placeholder table, does not create the PDF417 reader while
+                    that is the case, and reads real symbols once the specification table is registered.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Point it at a barcode</h2>
+        <p class="bb-section-sub">One package, one namespace, one component - and the camera hands its pixels to C#.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.BbScanner</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="samples" class="btn btn-secondary bb-btn-lg">Sample barcodes</a>
+        </div>
+    </section>
+</div>
 
 @code {
-    private BbBarcodeResult? _last;
+    private sealed record HeroHit(BbBarcodeFormat Format, string Text, double Milliseconds);
 
-    private void OnScan(BbBarcodeResult result)
+    /// <summary>The site's own address as a QR code - the first sample of the samples page.</summary>
+    private static BarcodeSample Symbol => SampleCatalog.All[0];
+
+    private HeroHit? _hero;
+    private bool _heroMissed;
+
+    /// <summary>
+    /// Rasterises the symbol into a grayscale frame and decodes it with the library, exactly as a
+    /// camera frame is decoded - only without the camera.
+    /// </summary>
+    private void DecodeHero()
     {
-        _last = result;
-        StateHasChanged();
+        using var image = SyntheticImage.FromMatrix(Symbol.Matrix!, scale: 6);
+        using var decoder = new BbBarcodeDecoder(new BbScannerOptions
+        {
+            Formats = BbBarcodeFormat.All,
+            DuplicateSuppressionWindow = TimeSpan.Zero,
+        });
+
+        var start = Stopwatch.GetTimestamp();
+        var result = decoder.Decode(image.View, suppressDuplicates: false);
+        var elapsed = Stopwatch.GetElapsedTime(start).TotalMilliseconds;
+
+        _hero = result is null ? null : new HeroHit(result.Format, result.Text, elapsed);
+        _heroMissed = result is null;
     }
 }
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Image.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Image.razor
index 97005b827b8..ff2bde92d97 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Image.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Image.razor
@@ -1,77 +1,86 @@
 @page "/image"
 
-<PageTitle>Image scanning - bit BbScanner</PageTitle>
-
-<h1>Image and file scanning</h1>
-<p class="lede">
-    The same decoder reads a still image. Nothing about the pipeline changes; only the tuning
-    does, because a one-shot decode can afford to be exhaustive.
-</p>
-
-<div class="split">
-    <div class="stack">
-        <BbScanner @ref="_scanner"
-                   AutoStart="false"
-                   ShowStatusBar="true"
-                   Formats="BbBarcodeFormat.All"
-                   EnableFileScanning="true"
-                   OnScan="HandleScan"
-                   OnError="e => _error = e" />
-
-        <div class="card">
-            <h3 style="margin-block-start:0;">Pick an image</h3>
-            <p class="field__hint">
-                The component ships a hidden file input and the plumbing to read it. Opening it
-                from your own button is a single call.
-            </p>
-            <div class="button-row">
-                <button class="button button--primary" type="button" @onclick="OpenPicker">Choose an image</button>
-                <button class="button" type="button" @onclick="DecodeGeneratedImage">Decode a generated image</button>
-                <button class="button" type="button" @onclick="() => _results.Clear()" disabled="@(_results.Count == 0)">Clear</button>
-            </div>
-            <p class="field__hint" style="margin-block-start:0.6rem;">
-                The second button skips the picker entirely: it renders a symbol into a pixel
-                buffer and hands it to <code>DecodeImage</code>, which is the path an application
-                uses when it sources images itself.
-            </p>
-        </div>
+<PageTitle>Image scanning · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Image and file scanning</h1>
+    <p class="bb-subtitle">
+        The same decoder reads a still image. Nothing about the pipeline changes; only the tuning
+        does, because a one-shot decode can afford to be exhaustive.
+    </p>
+</div>
 
-        @if (_error is not null)
-        {
-            <div class="note note--warning"><strong>@_error.Kind</strong> — @_error.Message</div>
-        }
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live</span>
+        <span class="bb-soft">No camera needed</span>
     </div>
 
-    <div class="stack">
-        <div class="card">
-            <h3 style="margin-block-start:0;">Why still images differ</h3>
-            <p style="font-size:0.9rem;color:var(--fg-muted);">
-                A camera gets another chance in fifty milliseconds, so a live frame should give up
-                early. A file gets one chance, so
-                <code>BbScannerOptions.ForStillImages()</code> raises the scan line count, enables the
-                exhaustive detector path and allows inverted symbols.
-            </p>
-            <pre><code>var options = BbScannerOptions.ForStillImages();
-options.Formats = BbBarcodeFormat.QrCode;
+    <div class="scan-sample">
+        <div class="scan-layout">
+            <div class="scan-view">
+                <BbScanner @ref="_scanner"
+                           AutoStart="false"
+                           ShowStatusBar="true"
+                           Formats="BbBarcodeFormat.All"
+                           EnableFileScanning="true"
+                           OnScan="HandleScan"
+                           OnError="e => _error = e" />
+
+                @if (_error is not null)
+                {
+                    <div class="bb-note bb-note-warn"><strong>@_error.Kind</strong> — @_error.Message</div>
+                }
+            </div>
 
-using var decoder = new BbBarcodeDecoder(options);
-var result = decoder.Decode(pixels, width, height, BbPixelFormat.Rgba32);</code></pre>
+            <div class="scan-panels">
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Pick an image</h3>
+                    <p class="bb-card-desc">
+                        The component ships a hidden file input and the plumbing to read it. Opening it
+                        from your own button is a single call.
+                    </p>
+                    <div class="bb-toolbar">
+                        <button class="btn btn-primary" type="button" @onclick="OpenPicker">Choose an image</button>
+                        <button class="btn btn-secondary" type="button" @onclick="DecodeGeneratedImage">Decode a generated image</button>
+                        <button class="btn btn-secondary" type="button" @onclick="() => _results.Clear()" disabled="@(_results.Count == 0)">Clear</button>
+                    </div>
+                    <p class="bb-card-desc">
+                        The second button skips the picker entirely: it renders a symbol into a pixel
+                        buffer and hands it to <code>DecodeImage</code>, which is the path an application
+                        uses when it sources images itself.
+                    </p>
+                </section>
+            </div>
         </div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Large photographs</h3>
-            <p style="font-size:0.9rem;color:var(--fg-muted);margin:0;">
-                A twelve megapixel photo carries no more barcode detail than a two megapixel one,
-                so the component asks the browser to scale anything larger than 1600 pixels on its
-                longest edge before it crosses into managed code. That alone is the difference
-                between a snappy decode and a visible pause on a phone.
-            </p>
-        </div>
+        <ResultLog Results="_results" OnClear="() => _results.Clear()" />
     </div>
 </div>
 
-<div style="margin-block-start:1.25rem;">
-    <ResultLog Results="_results" OnClear="() => _results.Clear()" />
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Why still images differ</h3>
+    <p class="bb-card-desc">
+        A camera gets another chance in fifty milliseconds, so a live frame should give up
+        early. A file gets one chance, so
+        <code>BbScannerOptions.ForStillImages()</code> raises the scan line count, enables the
+        exhaustive detector path and allows inverted symbols.
+    </p>
+    <pre class="bb-code"><span class="k">var</span> options = BbScannerOptions.ForStillImages();
+options.Formats = BbBarcodeFormat.QrCode;
+
+<span class="k">using var</span> decoder = <span class="k">new</span> BbBarcodeDecoder(options);
+<span class="k">var</span> result = decoder.Decode(pixels, width, height, BbPixelFormat.Rgba32);</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Large photographs</h3>
+    <p class="bb-card-desc">
+        A twelve megapixel photo carries no more barcode detail than a two megapixel one,
+        so the component asks the browser to scale anything larger than 1600 pixels on its
+        longest edge before it crosses into managed code. That alone is the difference
+        between a snappy decode and a visible pause on a phone.
+    </p>
 </div>
 
 @code {
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Lifecycle.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Lifecycle.razor
index 42543a23e61..1c2d176a88f 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Lifecycle.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Lifecycle.razor
@@ -1,84 +1,88 @@
 @page "/lifecycle"
 
-<PageTitle>Lifecycle - bit BbScanner</PageTitle>
-
-<h1>Lifecycle and duplicate prevention</h1>
-<p class="lede">
-    Start, stop, pause and resume are explicit and cheap. Pausing keeps the camera open, so
-    resuming is instant; stopping releases the track and turns the camera indicator off.
-</p>
-
-<div class="split">
-    <div class="stack">
-        <BbScanner @ref="_scanner"
-                   AutoStart="false"
-                   ShowControls="false"
-                   DuplicateSuppressionWindow="TimeSpan.FromSeconds(_windowSeconds)"
-                   OnScan="HandleScan"
-                   OnStatusChanged="HandleStatus" />
-
-        <div class="card">
-            <div class="button-row">
-                <button class="button button--primary" type="button" @onclick="Start">Start</button>
-                <button class="button" type="button" @onclick="Stop">Stop</button>
-                <button class="button" type="button" @onclick="Pause">Pause</button>
-                <button class="button" type="button" @onclick="Resume">Resume</button>
-            </div>
-            <p class="field__hint" style="margin-block-start:0.6rem;">
-                Status: <span class="pill">@(_scanner?.Status.ToString() ?? "Idle")</span>
-            </p>
-        </div>
+<PageTitle>Lifecycle · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Lifecycle and duplicate prevention</h1>
+    <p class="bb-subtitle">
+        Start, stop, pause and resume are explicit and cheap. Pausing keeps the camera open, so
+        resuming is instant; stopping releases the track and turns the camera indicator off.
+    </p>
+</div>
+
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live</span>
+        <StatusBadge Status="_scanner?.Status" />
     </div>
 
-    <div class="stack">
-        <div class="card">
-            <h3 style="margin-block-start:0;">Duplicate suppression</h3>
-            <div class="field">
-                <label class="field__label">Window: @_windowSeconds s</label>
-                <input type="range" min="0" max="10" step="1" value="@_windowSeconds" @onchange="OnWindowChanged" />
+    <div class="scan-sample">
+        <div class="scan-layout">
+            <div class="scan-view">
+                <BbScanner @ref="_scanner"
+                           AutoStart="false"
+                           ShowControls="false"
+                           DuplicateSuppressionWindow="TimeSpan.FromSeconds(_windowSeconds)"
+                           OnScan="HandleScan"
+                           OnStatusChanged="HandleStatus" />
+
+                <div class="bb-toolbar">
+                    <button class="btn btn-primary" type="button" @onclick="Start">Start</button>
+                    <button class="btn btn-secondary" type="button" @onclick="Stop">Stop</button>
+                    <button class="btn btn-secondary" type="button" @onclick="Pause">Pause</button>
+                    <button class="btn btn-secondary" type="button" @onclick="Resume">Resume</button>
+                </div>
             </div>
-            <p class="field__hint">
-                Suppression is keyed on the value and the symbology together, so moving the camera
-                to a different barcode reports immediately instead of waiting out the window.
-                Holding the same one in view keeps it suppressed rather than re-firing on a timer.
-            </p>
-            <p class="field__hint">
-                Set it to zero and the scanner reports every frame that decodes, which is the
-                right setting for measuring throughput.
-            </p>
-        </div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Scan counters</h3>
-            <div class="stat-grid">
-                <div class="stat">
-                    <div class="stat__label">Reported</div>
-                    <div class="stat__value">@_reported</div>
-                </div>
-                <div class="stat">
-                    <div class="stat__label">Distinct values</div>
-                    <div class="stat__value">@_distinct.Count</div>
-                </div>
-                <div class="stat">
-                    <div class="stat__label">Status changes</div>
-                    <div class="stat__value">@_statusChanges</div>
-                </div>
+            <div class="scan-panels">
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Duplicate suppression</h3>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Window</span><output>@_windowSeconds s</output></span>
+                        <input type="range" min="0" max="10" step="1" value="@_windowSeconds" @onchange="OnWindowChanged" />
+                    </label>
+                    <p class="bb-card-desc">
+                        Suppression is keyed on the value and the symbology together, so moving the camera
+                        to a different barcode reports immediately instead of waiting out the window.
+                        Holding the same one in view keeps it suppressed rather than re-firing on a timer.
+                    </p>
+                    <p class="bb-card-desc">
+                        Set it to zero and the scanner reports every frame that decodes, which is the
+                        right setting for measuring throughput.
+                    </p>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Scan counters</h3>
+                    <div class="bb-stats">
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Reported</span>
+                            <span class="bb-stat-value">@_reported</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Distinct values</span>
+                            <span class="bb-stat-value">@_distinct.Count</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Status changes</span>
+                            <span class="bb-stat-value">@_statusChanges</span>
+                        </div>
+                    </div>
+                </section>
             </div>
         </div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Disposal</h3>
-            <p style="font-size:0.9rem;color:var(--fg-muted);margin:0;">
-                The component implements <code>IAsyncDisposable</code>. Navigating away cancels the
-                frame loop, stops every media track, releases the JavaScript session and returns
-                the pooled buffers. Nothing keeps the camera alive after the component is gone.
-            </p>
-        </div>
+        <ResultLog Results="_results" OnClear="Clear" />
     </div>
 </div>
 
-<div style="margin-block-start:1.25rem;">
-    <ResultLog Results="_results" OnClear="Clear" />
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Disposal</h3>
+    <p class="bb-card-desc">
+        The component implements <code>IAsyncDisposable</code>. Navigating away cancels the
+        frame loop, stops every media track, releases the JavaScript session and returns
+        the pooled buffers. Nothing keeps the camera alive after the component is gone.
+    </p>
 </div>
 
 @code {
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/McpServer.razor b/src/Utilities/BbScanner/Demo/Client/Pages/McpServer.razor
index cf46989851a..1e04f8d622e 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/McpServer.razor
@@ -3,19 +3,20 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - bit BbScanner</PageTitle>
+<PageTitle>MCP server · BbScanner</PageTitle>
 
-<h1>MCP server</h1>
-
-<p class="lede">
-    This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing scanning code
-    with Bit.BbScanner reads the library itself - its compiled API documentation, its guide, its symbology flags
-    and option defaults, its decoder and these demo pages - instead of guessing at an API it half remembers.
-    Every tool is read-only.
-</p>
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
+        This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing scanning code
+        with Bit.BbScanner reads the library itself - its compiled API documentation, its guide, its symbology flags
+        and option defaults, its decoder and these demo pages - instead of guessing at an API it half remembers.
+        Every tool is read-only.
+    </p>
+</div>
 
-<div class="card">
-    <h2 style="margin-block-start:0;">Connect a client</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
@@ -23,69 +24,51 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre><code>@ClientConfig</code></pre>
-</div>
+    <pre class="bb-code">@ClientConfig</pre>
+</section>
 
-<h2>Tools</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
-<div class="table-scroll">
-    <table>
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code>SearchBbScanner</code></td>
-                <td>Everything at once - the guide, every public member, the symbologies, the setup guides, the stylesheet and the demo sources - each hit with the exact follow-up call.</td>
-            </tr>
-            <tr>
-                <td><code>GetBbScannerSetupGuide</code></td>
-                <td>The complete wiring for one render mode: wasm, standalone-wasm, auto, server or hybrid.</td>
-            </tr>
-            <tr>
-                <td><code>GetBbScannerGuideSection</code></td>
-                <td>One section of the reference guide, or the index of sections.</td>
-            </tr>
-            <tr>
-                <td><code>GetBbScannerApi</code></td>
-                <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
-            </tr>
-            <tr>
-                <td><code>GetBbScannerFormats</code></td>
-                <td>The symbologies with their flags, what of each is read, whether the pipeline reads it, and the options that steer it with their real defaults.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBbScannerSymbol</code></td>
-                <td>Renders a symbol, rotated and blurred if asked, decodes it with the library and returns the <code>BbBarcodeResult</code> it produced.</td>
-            </tr>
-            <tr>
-                <td><code>GetBbScannerSourceFile</code></td>
-                <td>One demo or library file verbatim - every page here is a working scanner - or the index of files.</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var tool in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        <td>@((MarkupString)tool.Description)</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
 
-<p>
-    The guide, the API, the symbologies and the sources are also exposed as <code>bbscanner://</code> resources, and
-    three prompts - <code>add-bbscanner-to-app</code>, <code>implement-bbscanner-feature</code> and
-    <code>debug-bbscanner</code> - walk an agent through the common jobs in the right order.
-</p>
+    <p>
+        The guide, the API, the symbologies and the sources are also exposed as <code>bbscanner://</code> resources, and
+        three prompts - <code>add-bbscanner-to-app</code>, <code>implement-bbscanner-feature</code> and
+        <code>debug-bbscanner</code> - walk an agent through the common jobs in the right order.
+    </p>
+</section>
 
-<h2>The same tools over plain HTTP</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
-<p>
-    Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
-    exactly what an agent is handed.
-</p>
+    <p>
+        Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
+        exactly what an agent is handed.
+    </p>
 
-<ul>
-    <li><a href="/api/mcp/SearchBbScanner?query=scan%20image%20file" target="_blank" rel="noopener">/api/mcp/SearchBbScanner?query=scan image file</a></li>
-    <li><a href="/api/mcp/GetBbScannerApi?typeName=BbScanner" target="_blank" rel="noopener">/api/mcp/GetBbScannerApi?typeName=BbScanner</a></li>
-    <li><a href="/api/mcp/GetBbScannerFormats?format=Ean13" target="_blank" rel="noopener">/api/mcp/GetBbScannerFormats?format=Ean13</a></li>
-    <li><a href="/api/mcp/InspectBbScannerSymbol?format=QrCode&amp;rotation=30" target="_blank" rel="noopener">/api/mcp/InspectBbScannerSymbol?format=QrCode&amp;rotation=30</a></li>
-    <li><a href="/api/mcp/GetBbScannerSourceFile?path=Demo/Client/Pages/Scan.razor" target="_blank" rel="noopener">/api/mcp/GetBbScannerSourceFile?path=Demo/Client/Pages/Scan.razor</a></li>
-</ul>
+    <ul class="bb-detail-list">
+        @foreach (var (href, text) in HttpExamples)
+        {
+            <li><a href="@href" target="_blank" rel="noopener">@text</a></li>
+        }
+    </ul>
+</section>
 
 @code {
     private const string ClientConfig = """
@@ -99,4 +82,33 @@
           }
         }
         """;
+
+    // The server's tools, in the order an agent usually needs them. The one place to change when a tool is
+    // added, renamed or retired; the description is markup.
+    private static readonly (string Name, string Description)[] Tools =
+    [
+        ("SearchBbScanner",
+            "Everything at once - the guide, every public member, the symbologies, the setup guides, the stylesheet and the demo sources - each hit with the exact follow-up call."),
+        ("GetBbScannerSetupGuide",
+            "The complete wiring for one render mode: wasm, standalone-wasm, auto, server or hybrid."),
+        ("GetBbScannerGuideSection",
+            "One section of the reference guide, or the index of sections."),
+        ("GetBbScannerApi",
+            "One public type with every parameter, property and method, its real default and its documentation - or the index of types."),
+        ("GetBbScannerFormats",
+            "The symbologies with their flags, what of each is read, whether the pipeline reads it, and the options that steer it with their real defaults."),
+        ("InspectBbScannerSymbol",
+            "Renders a symbol, rotated and blurred if asked, decodes it with the library and returns the <code>BbBarcodeResult</code> it produced."),
+        ("GetBbScannerSourceFile",
+            "One demo or library file verbatim - every page here is a working scanner - or the index of files."),
+    ];
+
+    private static readonly (string Href, string Text)[] HttpExamples =
+    [
+        ("/api/mcp/SearchBbScanner?query=scan%20image%20file", "/api/mcp/SearchBbScanner?query=scan image file"),
+        ("/api/mcp/GetBbScannerApi?typeName=BbScanner", "/api/mcp/GetBbScannerApi?typeName=BbScanner"),
+        ("/api/mcp/GetBbScannerFormats?format=Ean13", "/api/mcp/GetBbScannerFormats?format=Ean13"),
+        ("/api/mcp/InspectBbScannerSymbol?format=QrCode&rotation=30", "/api/mcp/InspectBbScannerSymbol?format=QrCode&rotation=30"),
+        ("/api/mcp/GetBbScannerSourceFile?path=Demo/Client/Pages/Scan.razor", "/api/mcp/GetBbScannerSourceFile?path=Demo/Client/Pages/Scan.razor"),
+    ];
 }
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/NotFound.razor b/src/Utilities/BbScanner/Demo/Client/Pages/NotFound.razor
index 4b17b229e28..1a1fb3f789a 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/NotFound.razor
@@ -1,7 +1,14 @@
 @page "/not-found"
+@layout MainLayout
 
-<PageTitle>Not found - bit BbScanner</PageTitle>
+<PageTitle>Not found · BbScanner</PageTitle>
 
-<h1>Not found</h1>
-<p class="lede">There is nothing at that address.</p>
-<p><a href="">Back to the introduction</a></p>
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>Page not found. There is no page at this address - it may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Performance.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Performance.razor
index cd249af0ae4..afa7b2a86a8 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Performance.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Performance.razor
@@ -1,193 +1,230 @@
 @page "/performance"
 
-<PageTitle>Performance - bit BbScanner</PageTitle>
-
-<h1>Performance</h1>
-<p class="lede">
-    The decoder runs on the same thread as the UI, so the only number that matters is how long a
-    frame takes. Everything below measures that in this browser, on this device, right now.
-</p>
-
-<h2>Decoder benchmark</h2>
-<p>
-    Decodes generated symbols in a loop with no camera involved, so the result isolates the
-    managed pipeline from capture and compositing.
-</p>
-
-<div class="card">
-    <div class="grid grid--3">
-        <div class="field">
-            <label class="field__label" for="bench-size">Frame size</label>
-            <select id="bench-size" value="@_benchSize" @onchange="e => _benchSize = ToInt(e, 640)">
-                <option value="320">320 × 240</option>
-                <option value="640">640 × 480</option>
-                <option value="960">960 × 720</option>
-                <option value="1280">1280 × 960</option>
-            </select>
-        </div>
-        <div class="field">
-            <label class="field__label" for="bench-iterations">Iterations</label>
-            <select id="bench-iterations" value="@_iterations" @onchange="e => _iterations = ToInt(e, 30)">
-                <option value="10">10</option>
-                <option value="30">30</option>
-                <option value="100">100</option>
-            </select>
-        </div>
-        <div class="field">
-            <label class="field__label" for="bench-formats">Enabled formats</label>
-            <select id="bench-formats" value="@_benchFormats" @onchange="OnBenchFormatsChanged">
-                <option value="@BbBarcodeFormat.All">All</option>
-                <option value="@BbBarcodeFormat.AllMatrix">Matrix only</option>
-                <option value="@BbBarcodeFormat.AllLinear">Linear only</option>
-                <option value="@BbBarcodeFormat.QrCode">QR only</option>
-            </select>
-        </div>
-    </div>
-
-    <div class="button-row">
-        <button class="button button--primary" type="button" @onclick="RunBenchmark" disabled="@_running">
-            @(_running ? "Running..." : "Run benchmark")
-        </button>
-        <button class="button" type="button" @onclick="() => _benchmarks.Clear()" disabled="@(_benchmarks.Count == 0)">Clear</button>
-    </div>
-
-    @if (_benchmarks.Count > 0)
-    {
-        <table style="margin-block-start:1rem;">
-            <thead>
-                <tr>
-                    <th>Case</th>
-                    <th>Median</th>
-                    <th>Best</th>
-                    <th>Worst</th>
-                    <th>Throughput</th>
-                    <th>Found</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var row in _benchmarks)
-                {
-                    <tr>
-                        <td>@row.Name</td>
-                        <td class="mono">@row.Median.ToString("0.00") ms</td>
-                        <td class="mono">@row.Best.ToString("0.00") ms</td>
-                        <td class="mono">@row.Worst.ToString("0.00") ms</td>
-                        <td class="mono">@((1000 / Math.Max(row.Median, 0.001)).ToString("0")) fps</td>
-                        <td>
-                            @if (row.Found)
-                            {
-                                <span class="pill pill--success">yes</span>
-                            }
-                            else if (row.ExpectedFound)
-                            {
-                                <span class="pill pill--danger">not found</span>
-                            }
-                            else
-                            {
-                                <span class="pill pill--muted">empty frame</span>
-                            }
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    }
+<PageTitle>Performance · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Performance</h1>
+    <p class="bb-subtitle">
+        The decoder runs on the same thread as the UI, so the only number that matters is how long a
+        frame takes. Everything below measures that in this browser, on this device, right now.
+    </p>
 </div>
 
-<h2>Live camera cost</h2>
-<div class="split">
-    <div>
-        <BbScanner @ref="_scanner"
-                   Formats="_liveFormats"
-                   TargetFrameRate="_frameRate"
-                   MaxProcessingSize="_processingSize"
-                   Region="_region"
-                   DuplicateSuppressionWindow="TimeSpan.Zero"
-                   OnDiagnostics="OnDiagnostics" />
-    </div>
-    <div class="stack">
-        <DiagnosticsPanel Diagnostics="_diagnostics"
-                          FramesDecoded="_scanner?.FramesDecoded ?? 0"
-                          FramesWithSymbol="_scanner?.FramesWithSymbol ?? 0" />
-
-        <div class="card">
-            <h3 style="margin-block-start:0;">Knobs</h3>
-
-            <div class="field">
-                <label class="field__label">Processing size: @_processingSize px</label>
-                <input type="range" min="240" max="1280" step="40" value="@_processingSize"
-                       @onchange="e => _processingSize = ToInt(e, 640)" />
-                <span class="field__hint">Cost scales with area, so halving this quarters most of the pipeline.</span>
-            </div>
-
-            <div class="field">
-                <label class="field__label">Frame rate: @_frameRate fps</label>
-                <input type="range" min="1" max="30" step="1" value="@_frameRate"
-                       @onchange="e => _frameRate = ToInt(e, 15)" />
-            </div>
-
-            <div class="field">
-                <label class="field__label">Region: @((_regionFraction * 100).ToString("0"))%</label>
-                <input type="range" min="20" max="100" step="10" value="@(_regionFraction * 100)"
-                       @onchange="OnRegionChanged" />
-            </div>
+<div class="bb-card bb-page-wide">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Decoder benchmark</h3>
+    <p class="bb-card-desc">
+        Decodes generated symbols in a loop with no camera involved, so the result isolates the
+        managed pipeline from capture and compositing.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Benchmark</span>
+            @if (_running)
+            {
+                <span class="bb-spinner"></span>
+            }
+        </div>
 
-            <div class="field">
-                <label class="field__label">Formats</label>
-                <select value="@_liveFormats" @onchange="OnLiveFormatsChanged">
+        <div class="bb-fields">
+            <label class="bb-field">
+                Frame size
+                <select id="bench-size" value="@_benchSize" @onchange="e => _benchSize = ToInt(e, 640)">
+                    <option value="320">320 × 240</option>
+                    <option value="640">640 × 480</option>
+                    <option value="960">960 × 720</option>
+                    <option value="1280">1280 × 960</option>
+                </select>
+            </label>
+            <label class="bb-field">
+                Iterations
+                <select id="bench-iterations" value="@_iterations" @onchange="e => _iterations = ToInt(e, 30)">
+                    <option value="10">10</option>
+                    <option value="30">30</option>
+                    <option value="100">100</option>
+                </select>
+            </label>
+            <label class="bb-field">
+                Enabled formats
+                <select id="bench-formats" value="@_benchFormats" @onchange="OnBenchFormatsChanged">
                     <option value="@BbBarcodeFormat.All">All</option>
                     <option value="@BbBarcodeFormat.AllMatrix">Matrix only</option>
                     <option value="@BbBarcodeFormat.AllLinear">Linear only</option>
                     <option value="@BbBarcodeFormat.QrCode">QR only</option>
                 </select>
+            </label>
+            <div class="bb-toolbar perf-actions">
+                <button class="btn btn-primary" type="button" @onclick="RunBenchmark" disabled="@_running">
+                    @(_running ? "Running..." : "Run benchmark")
+                </button>
+                <button class="btn btn-secondary" type="button" @onclick="() => _benchmarks.Clear()" disabled="@(_benchmarks.Count == 0)">Clear</button>
+            </div>
+        </div>
+
+        @if (_benchmarks.Count > 0)
+        {
+            <div class="bb-scroll">
+                <table class="bb-table">
+                    <thead>
+                        <tr>
+                            <th>Case</th>
+                            <th>Median</th>
+                            <th>Best</th>
+                            <th>Worst</th>
+                            <th>Throughput</th>
+                            <th>Found</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach (var row in _benchmarks)
+                        {
+                            <tr>
+                                <td class="bb-table-key">@row.Name</td>
+                                <td class="bb-mono bb-nowrap">@row.Median.ToString("0.00") ms</td>
+                                <td class="bb-mono bb-nowrap">@row.Best.ToString("0.00") ms</td>
+                                <td class="bb-mono bb-nowrap">@row.Worst.ToString("0.00") ms</td>
+                                <td class="bb-mono bb-nowrap">@((1000 / Math.Max(row.Median, 0.001)).ToString("0")) fps</td>
+                                <td>
+                                    @if (row.Found)
+                                    {
+                                        <span class="bb-badge bb-badge-success">yes</span>
+                                    }
+                                    else if (row.ExpectedFound)
+                                    {
+                                        <span class="bb-badge bb-badge-danger">not found</span>
+                                    }
+                                    else
+                                    {
+                                        <span class="bb-soft">empty frame</span>
+                                    }
+                                </td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
+        else
+        {
+            <div class="bb-empty">Run the benchmark to time six symbologies and an empty frame on this device.</div>
+        }
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Live camera cost</h3>
+    <p class="bb-card-desc">
+        The same pipeline on real camera frames, with duplicate suppression off so every decoded
+        frame counts. Turn the knobs and watch the stage split move.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+        </div>
+
+        <div class="scan-sample">
+            <div class="scan-layout">
+                <div class="scan-view">
+                    <BbScanner @ref="_scanner"
+                               Formats="_liveFormats"
+                               TargetFrameRate="_frameRate"
+                               MaxProcessingSize="_processingSize"
+                               Region="_region"
+                               DuplicateSuppressionWindow="TimeSpan.Zero"
+                               OnDiagnostics="OnDiagnostics" />
+
+                    <DiagnosticsPanel Diagnostics="_diagnostics"
+                                      FramesDecoded="_scanner?.FramesDecoded ?? 0"
+                                      FramesWithSymbol="_scanner?.FramesWithSymbol ?? 0" />
+                </div>
+
+                <div class="scan-panels">
+                    <section class="scan-panel">
+                        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Knobs</h3>
+
+                        <label class="bb-field">
+                            <span class="scan-field-head"><span>Processing size</span><output>@_processingSize px</output></span>
+                            <input type="range" min="240" max="1280" step="40" value="@_processingSize"
+                                   @onchange="e => _processingSize = ToInt(e, 640)" />
+                            <small>Cost scales with area, so halving this quarters most of the pipeline.</small>
+                        </label>
+
+                        <label class="bb-field">
+                            <span class="scan-field-head"><span>Frame rate</span><output>@_frameRate fps</output></span>
+                            <input type="range" min="1" max="30" step="1" value="@_frameRate"
+                                   @onchange="e => _frameRate = ToInt(e, 15)" />
+                        </label>
+
+                        <label class="bb-field">
+                            <span class="scan-field-head"><span>Region</span><output>@((_regionFraction * 100).ToString("0"))%</output></span>
+                            <input type="range" min="20" max="100" step="10" value="@(_regionFraction * 100)"
+                                   @onchange="OnRegionChanged" />
+                        </label>
+
+                        <label class="bb-field">
+                            <span>Formats</span>
+                            <select value="@_liveFormats" @onchange="OnLiveFormatsChanged">
+                                <option value="@BbBarcodeFormat.All">All</option>
+                                <option value="@BbBarcodeFormat.AllMatrix">Matrix only</option>
+                                <option value="@BbBarcodeFormat.AllLinear">Linear only</option>
+                                <option value="@BbBarcodeFormat.QrCode">QR only</option>
+                            </select>
+                        </label>
+                    </section>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
-<h2>What costs what</h2>
-<table>
-    <thead>
-        <tr><th>Setting</th><th>Effect</th><th>When to change it</th></tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td><code>MaxProcessingSize</code></td>
-            <td>Quadratic. The dominant control.</td>
-            <td>Lower until the smallest symbol you care about stops decoding, then go one step back.</td>
-        </tr>
-        <tr>
-            <td><code>Formats</code></td>
-            <td>Linear in the number of decoders that run.</td>
-            <td>Always. Most applications need one or two symbologies.</td>
-        </tr>
-        <tr>
-            <td><code>Region</code></td>
-            <td>Proportional to the area kept.</td>
-            <td>Whenever the interface asks the user to aim.</td>
-        </tr>
-        <tr>
-            <td><code>MaxScanLines</code></td>
-            <td>Linear, and only for linear symbologies.</td>
-            <td>Lower for aimed scanning, raise for hands-off scanning.</td>
-        </tr>
-        <tr>
-            <td><code>TryHarder</code></td>
-            <td>Roughly triples matrix detection cost.</td>
-            <td>Still images only; it is off for live frames by design.</td>
-        </tr>
-        <tr>
-            <td><code>AllowInverted</code></td>
-            <td>Doubles the cost of frames that find nothing.</td>
-            <td>Only when white-on-black symbols are expected.</td>
-        </tr>
-        <tr>
-            <td><code>DownsampleFactor</code></td>
-            <td>Quadratic, applied inside the grayscale pass.</td>
-            <td>When frames arrive larger than you asked for and you cannot change the source.</td>
-        </tr>
-    </tbody>
-</table>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What costs what</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Setting</th><th>Effect</th><th>When to change it</th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bb-table-key">MaxProcessingSize</td>
+                    <td>Quadratic. The dominant control.</td>
+                    <td>Lower until the smallest symbol you care about stops decoding, then go one step back.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Formats</td>
+                    <td>Linear in the number of decoders that run.</td>
+                    <td>Always. Most applications need one or two symbologies.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Region</td>
+                    <td>Proportional to the area kept.</td>
+                    <td>Whenever the interface asks the user to aim.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">MaxScanLines</td>
+                    <td>Linear, and only for linear symbologies.</td>
+                    <td>Lower for aimed scanning, raise for hands-off scanning.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">TryHarder</td>
+                    <td>Roughly triples matrix detection cost.</td>
+                    <td>Still images only; it is off for live frames by design.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">AllowInverted</td>
+                    <td>Doubles the cost of frames that find nothing.</td>
+                    <td>Only when white-on-black symbols are expected.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">DownsampleFactor</td>
+                    <td>Quadratic, applied inside the grayscale pass.</td>
+                    <td>When frames arrive larger than you asked for and you cannot change the source.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
 
 @code {
     private sealed record BenchmarkRow(string Name, double Median, double Best, double Worst, bool Found, bool ExpectedFound);
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Region.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Region.razor
index 9a23b39ebc6..bdfe8d66895 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Region.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Region.razor
@@ -1,76 +1,86 @@
 @page "/region"
 
-<PageTitle>Scan region - bit BbScanner</PageTitle>
+<PageTitle>Scan region · BbScanner</PageTitle>
 
-<h1>Scan region</h1>
-<p class="lede">
-    A region is expressed in normalized coordinates, so it survives whatever resolution the
-    browser negotiates. Cropping happens before any pixel is touched, which makes every later
-    stage cheaper in proportion to the area removed.
-</p>
-
-<div class="split">
-    <div class="stack">
-        <BbScanner Region="_region"
-                   ShowMask="_showMask"
-                   Formats="BbBarcodeFormat.All"
-                   OnScan="r => _last = r"
-                   OnDiagnostics="d => { _diagnostics = d; StateHasChanged(); }" />
+<div class="bb-intro">
+    <h1>Scan region</h1>
+    <p class="bb-subtitle">
+        A region is expressed in normalized coordinates, so it survives whatever resolution the
+        browser negotiates. Cropping happens before any pixel is touched, which makes every later
+        stage cheaper in proportion to the area removed.
+    </p>
+</div>
 
-        <DiagnosticsPanel Diagnostics="_diagnostics" />
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live</span>
+        <span class="bb-badge">@_label</span>
     </div>
 
-    <div class="stack">
-        <div class="card">
-            <h3 style="margin-block-start:0;">Presets</h3>
-            <div class="button-row">
-                <button class="button" type="button" @onclick='() => Set(BbScanRegion.Full, "Full frame")'>Full frame</button>
-                <button class="button" type="button" @onclick='() => Set(BbScanRegion.CenteredSquare(0.7), "Centred square")'>Centred square</button>
-                <button class="button" type="button" @onclick='() => Set(new BbScanRegion(0.05, 0.35, 0.9, 0.3), "Linear band")'>Linear band</button>
-                <button class="button" type="button" @onclick='() => Set(new BbScanRegion(0.5, 0, 0.5, 1), "Right half")'>Right half</button>
-            </div>
-            <p class="field__hint" style="margin-block-start:0.6rem;">Current: @_label</p>
-        </div>
+    <div class="scan-sample">
+        <div class="scan-layout">
+            <div class="scan-view">
+                <BbScanner Region="_region"
+                           ShowMask="_showMask"
+                           Formats="BbBarcodeFormat.All"
+                           OnScan="r => _last = r"
+                           OnDiagnostics="d => { _diagnostics = d; StateHasChanged(); }" />
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Custom</h3>
-            <div class="field">
-                <label class="field__label">X: @_x.ToString("0.00")</label>
-                <input type="range" min="0" max="0.9" step="0.05" value="@_x" @onchange="e => Update(x: ToDouble(e))" />
-            </div>
-            <div class="field">
-                <label class="field__label">Y: @_y.ToString("0.00")</label>
-                <input type="range" min="0" max="0.9" step="0.05" value="@_y" @onchange="e => Update(y: ToDouble(e))" />
-            </div>
-            <div class="field">
-                <label class="field__label">Width: @_w.ToString("0.00")</label>
-                <input type="range" min="0.1" max="1" step="0.05" value="@_w" @onchange="e => Update(w: ToDouble(e))" />
+                <DiagnosticsPanel Diagnostics="_diagnostics" />
             </div>
-            <div class="field">
-                <label class="field__label">Height: @_h.ToString("0.00")</label>
-                <input type="range" min="0.1" max="1" step="0.05" value="@_h" @onchange="e => Update(h: ToDouble(e))" />
-            </div>
-            <label class="checkbox">
-                <input type="checkbox" checked="@_showMask" @onchange="e => _showMask = (bool)(e.Value ?? true)" />
-                Dim the area outside the region
-            </label>
-        </div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Result positions</h3>
-            <p style="font-size:0.9rem;color:var(--fg-muted);">
-                Corner points are always reported in the coordinates of the frame the camera
-                produced, not of the cropped region, so an overlay drawn from them lines up with
-                what the user sees.
-            </p>
-            @if (_last is not null)
-            {
-                <pre style="margin:0;"><code>@Describe(_last)</code></pre>
-            }
-            else
-            {
-                <p class="empty" style="padding:0.25rem;">Scan something to see its corner points.</p>
-            }
+            <div class="scan-panels">
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Presets</h3>
+                    <div class="bb-segmented" role="group" aria-label="Region presets">
+                        <button type="button" aria-pressed="@Pressed("Full frame")" @onclick='() => Set(BbScanRegion.Full, "Full frame")'>Full frame</button>
+                        <button type="button" aria-pressed="@Pressed("Centred square")" @onclick='() => Set(BbScanRegion.CenteredSquare(0.7), "Centred square")'>Centred square</button>
+                        <button type="button" aria-pressed="@Pressed("Linear band")" @onclick='() => Set(new BbScanRegion(0.05, 0.35, 0.9, 0.3), "Linear band")'>Linear band</button>
+                        <button type="button" aria-pressed="@Pressed("Right half")" @onclick='() => Set(new BbScanRegion(0.5, 0, 0.5, 1), "Right half")'>Right half</button>
+                    </div>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Custom</h3>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>X</span><output>@_x.ToString("0.00")</output></span>
+                        <input type="range" min="0" max="0.9" step="0.05" value="@_x" @onchange="e => Update(x: ToDouble(e))" />
+                    </label>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Y</span><output>@_y.ToString("0.00")</output></span>
+                        <input type="range" min="0" max="0.9" step="0.05" value="@_y" @onchange="e => Update(y: ToDouble(e))" />
+                    </label>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Width</span><output>@_w.ToString("0.00")</output></span>
+                        <input type="range" min="0.1" max="1" step="0.05" value="@_w" @onchange="e => Update(w: ToDouble(e))" />
+                    </label>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Height</span><output>@_h.ToString("0.00")</output></span>
+                        <input type="range" min="0.1" max="1" step="0.05" value="@_h" @onchange="e => Update(h: ToDouble(e))" />
+                    </label>
+                    <label class="bb-check">
+                        <input type="checkbox" checked="@_showMask" @onchange="e => _showMask = (bool)(e.Value ?? true)" />
+                        Dim the area outside the region
+                    </label>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Result positions</h3>
+                    <p class="bb-card-desc">
+                        Corner points are always reported in the coordinates of the frame the camera
+                        produced, not of the cropped region, so an overlay drawn from them lines up with
+                        what the user sees.
+                    </p>
+                    @if (_last is not null)
+                    {
+                        <pre class="bb-code">@Describe(_last)</pre>
+                    }
+                    else
+                    {
+                        <div class="bb-empty">Scan something to see its corner points.</div>
+                    }
+                </section>
+            </div>
         </div>
     </div>
 </div>
@@ -87,6 +97,8 @@
     private double _w = 0.7;
     private double _h = 0.7;
 
+    private string Pressed(string label) => _label == label ? "true" : "false";
+
     private void Set(BbScanRegion region, string label)
     {
         _region = region;
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Samples.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Samples.razor
index bf2c3653ca9..dd01efff486 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Samples.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Samples.razor
@@ -1,93 +1,114 @@
 @page "/samples"
 
-<PageTitle>Sample barcodes - bit BbScanner</PageTitle>
-
-<h1>Sample barcodes</h1>
-<p class="lede">
-    One scannable example of every supported symbology, generated in the browser and drawn as
-    SVG. Point a phone at the screen, or open this page on a second device and scan it with the
-    <a href="scan">playground</a>.
-</p>
+<PageTitle>Sample barcodes · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Sample barcodes</h1>
+    <p class="bb-subtitle">
+        One scannable example of every supported symbology, generated in the browser and drawn as
+        SVG. Point a phone at the screen, or open this page on a second device and scan it with the
+        <a href="scan">playground</a>.
+    </p>
+</div>
 
-<div class="note">
+<div class="bb-note">
     These are rendered by encoders that live in the test project, not in the library. The library
     itself only reads barcodes; the encoders exist so that the decoders can be validated by round
     trip and so that this page has something real to show.
 </div>
 
-<div class="note note--warning">
+<div class="bb-note bb-note-warn">
     The PDF417 sample is drawn with the library's <em>placeholder</em> symbol character table. It
     round trips here, which is what validates the detector, the GF(929) error correction and the
     compaction modes, but it is not a conforming PDF417 symbol and no other scanner will read it.
     See the PDF417 section of the README for why the real table cannot be derived.
 </div>
 
-<h2>Two dimensional</h2>
-<div class="grid grid--3">
-    @foreach (var sample in SampleCatalog.All.Where(s => (s.Format & BbBarcodeFormat.AllMatrix) != 0))
-    {
-        <BarcodeSvg Matrix="sample.Matrix" Caption="@sample.Caption" Value="@sample.Value" Size="200" />
-    }
+@* The linear symbols are drawn at two pixels a module, up to 720 wide: the page gives up the
+   "on this page" rail for the width. *@
+<div class="bb-card bb-page-wide">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Two dimensional</h3>
+    <div class="sample-grid">
+        @foreach (var sample in SampleCatalog.All.Where(s => (s.Format & BbBarcodeFormat.AllMatrix) != 0))
+        {
+            <BarcodeSvg Matrix="sample.Matrix" Caption="@sample.Caption" Value="@sample.Value" Size="200" />
+        }
+    </div>
 </div>
 
-<h2>Linear</h2>
-<div class="grid grid--2">
-    @foreach (var sample in SampleCatalog.All.Where(s => (s.Format & BbBarcodeFormat.AllLinear) != 0))
-    {
-        @* Two CSS pixels per module, so the bars survive rasterisation on a 1x display and a
-           phone camera can read them off the screen. *@
-        <BarcodeSvg Modules="sample.Modules"
-                    Caption="@sample.Caption"
-                    Value="@sample.Value"
-                    Size="@Math.Clamp((sample.Modules!.Length + 24) * 2, 300, 720)"
-                    LinearHeight="26"
-                    QuietZone="12" />
-    }
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Linear</h3>
+    <div class="sample-grid sample-grid-linear">
+        @foreach (var sample in SampleCatalog.All.Where(s => (s.Format & BbBarcodeFormat.AllLinear) != 0))
+        {
+            @* Two CSS pixels per module, so the bars survive rasterisation on a 1x display and a
+               phone camera can read them off the screen. *@
+            <BarcodeSvg Modules="sample.Modules"
+                        Caption="@sample.Caption"
+                        Value="@sample.Value"
+                        Size="@Math.Clamp((sample.Modules!.Length + 24) * 2, 300, 720)"
+                        LinearHeight="26"
+                        QuietZone="12" />
+        }
+    </div>
 </div>
 
-<h2>Decode them right here</h2>
-<p>
-    The same symbols, decoded in place without a camera: each one is rasterised into a grayscale
-    buffer and pushed through <code>BbBarcodeDecoder</code>, exactly as a camera frame would be.
-</p>
-
-<button class="button button--primary" type="button" @onclick="RunSelfTest" disabled="@_running">
-    @(_running ? "Decoding..." : "Decode every sample")
-</button>
-
-@if (_selfTest.Count > 0)
-{
-    <table style="margin-block-start:1rem;">
-        <thead>
-            <tr><th>Sample</th><th>Expected</th><th>Decoded</th><th>Time</th><th></th></tr>
-        </thead>
-        <tbody>
-            @foreach (var row in _selfTest)
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Decode them right here</h3>
+    <p class="bb-card-desc">
+        The same symbols, decoded in place without a camera: each one is rasterised into a grayscale
+        buffer and pushed through <code>BbBarcodeDecoder</code>, exactly as a camera frame would be.
+    </p>
+
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" type="button" @onclick="RunSelfTest" disabled="@_running">
+            @if (_running)
             {
-                <tr>
-                    <td>@row.Caption</td>
-                    <td class="mono">@row.Expected</td>
-                    <td class="mono">@(row.Actual ?? "-")</td>
-                    <td class="mono">@row.Milliseconds.ToString("0.00") ms</td>
-                    <td>
-                        @if (row.Ok)
-                        {
-                            <span class="pill pill--success">match</span>
-                        }
-                        else
-                        {
-                            <span class="pill pill--danger">miss</span>
-                        }
-                    </td>
-                </tr>
+                <span class="bb-spinner"></span>
             }
-        </tbody>
-    </table>
-    <p class="field__hint">
-        @_selfTest.Count(r => r.Ok) of @_selfTest.Count samples decoded in
-        @_selfTest.Sum(r => r.Milliseconds).ToString("0.0") ms total.
-    </p>
-}
+            @(_running ? "Decoding..." : "Decode every sample")
+        </button>
+        @if (_selfTest.Count > 0 && !_running)
+        {
+            <span class="bb-muted">
+                @_selfTest.Count(r => r.Ok) of @_selfTest.Count samples decoded in
+                @_selfTest.Sum(r => r.Milliseconds).ToString("0.0") ms total.
+            </span>
+        }
+    </div>
+
+    @if (_selfTest.Count > 0)
+    {
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead>
+                    <tr><th>Sample</th><th>Expected</th><th>Decoded</th><th>Time</th><th>Result</th></tr>
+                </thead>
+                <tbody>
+                    @foreach (var row in _selfTest)
+                    {
+                        <tr>
+                            <td class="bb-table-key">@row.Caption</td>
+                            <td class="bb-mono">@row.Expected</td>
+                            <td class="bb-mono">@(row.Actual ?? "-")</td>
+                            <td class="bb-mono bb-nowrap">@row.Milliseconds.ToString("0.00") ms</td>
+                            <td>
+                                @if (row.Ok)
+                                {
+                                    <span class="bb-badge bb-badge-success">match</span>
+                                }
+                                else
+                                {
+                                    <span class="bb-badge bb-badge-danger">miss</span>
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    }
+</div>
 
 @code {
     private sealed record SelfTestRow(string Caption, string Expected, string? Actual, double Milliseconds, bool Ok);
diff --git a/src/Utilities/BbScanner/Demo/Client/Pages/Scan.razor b/src/Utilities/BbScanner/Demo/Client/Pages/Scan.razor
index 9c7f5870357..14b65ae9b65 100644
--- a/src/Utilities/BbScanner/Demo/Client/Pages/Scan.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Pages/Scan.razor
@@ -1,231 +1,238 @@
 @page "/scan"
 
-<PageTitle>Live playground - bit BbScanner</PageTitle>
-
-<h1>Live playground</h1>
-<p class="lede">
-    Every parameter of <code>&lt;BbScanner&gt;</code> in one place. Changes apply to the
-    running scanner without dropping the camera.
-</p>
-
-<div class="split">
-    <div class="stack">
-    <div style="@(_fill ? "block-size:22rem;" : null)">
-        <BbScanner @ref="_scanner"
-                   Formats="_formats"
-                   Region="_region"
-                   Options="_options"
-                   TargetFrameRate="_frameRate"
-                   MaxProcessingSize="_processingSize"
-                   DuplicateSuppressionWindow="TimeSpan.FromSeconds(_duplicateSeconds)"
-                   Facing="_facing"
-                   ShowControls="_showControls"
-                   ShowStatusBar="_showStatus"
-                   ShowReticle="_showReticle"
-                   ShowMask="_showMask"
-                   HighlightResults="_highlight"
-                   EnableFileScanning="true"
-                   AutoStart="true"
-                   Fill="_fill"
-                   OnScan="HandleScan"
-                   OnError="HandleError"
-                   OnStatusChanged="HandleStatus"
-                   OnDiagnostics="HandleDiagnostics">
-            <ControlsContent>
-                @* Appended to the built-in control bar. *@
-                <button type="button" class="bit-bbscanner__button" @onclick="() => _results.Clear()">Clear log</button>
-            </ControlsContent>
-            <ChildContent>
-                @* Arbitrary content on top of the viewfinder. *@
-                @if (_lastFormat is not null)
-                {
-                    <div class="scan-badge">@_lastFormat</div>
-                }
-            </ChildContent>
-        </BbScanner>
-    </div>
+<PageTitle>Live playground · BbScanner</PageTitle>
+
+<div class="bb-intro">
+    <h1>Live playground</h1>
+    <p class="bb-subtitle">
+        Every parameter of <code>&lt;BbScanner&gt;</code> in one place. Changes apply to the
+        running scanner without dropping the camera.
+    </p>
+</div>
 
-        <DiagnosticsPanel Diagnostics="_diagnostics"
-                          FramesDecoded="_scanner?.FramesDecoded ?? 0"
-                          FramesWithSymbol="_scanner?.FramesWithSymbol ?? 0" />
+<div class="bb-demo bb-page-wide">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live</span>
+        <StatusBadge Status="_scanner?.Status" />
+        @if (_scanner?.Camera is { } camera)
+        {
+            <span class="bb-badge">@camera.Width×@camera.Height</span>
+        }
     </div>
 
-    <div class="stack">
-        <div class="card">
-            <h3 style="margin-block-start:0;">Formats</h3>
-            <p class="field__hint">
-                Narrowing the set is the cheapest speed-up available: an unused symbology costs
-                nothing because its decoder is never created.
-            </p>
-            <p class="field__hint">
-                PDF417 stays inert until a specification symbol character table is registered;
-                see the README for why.
-            </p>
-            <div class="grid grid--2" style="gap:0 1rem;">
-                @foreach (var format in Formats)
-                {
-                    <label class="checkbox">
-                        <input type="checkbox"
-                               checked="@_formats.HasFlag(format)"
-                               @onchange="e => ToggleFormat(format, (bool)(e.Value ?? false))" />
-                        <span>@Label(format)</span>
-                    </label>
-                }
+    <div class="scan-sample">
+        <div class="scan-layout">
+            <div class="scan-view">
+                <div style="@(_fill ? "block-size:22rem;" : null)">
+                    <BbScanner @ref="_scanner"
+                               Formats="_formats"
+                               Region="_region"
+                               Options="_options"
+                               TargetFrameRate="_frameRate"
+                               MaxProcessingSize="_processingSize"
+                               DuplicateSuppressionWindow="TimeSpan.FromSeconds(_duplicateSeconds)"
+                               Facing="_facing"
+                               ShowControls="_showControls"
+                               ShowStatusBar="_showStatus"
+                               ShowReticle="_showReticle"
+                               ShowMask="_showMask"
+                               HighlightResults="_highlight"
+                               EnableFileScanning="true"
+                               AutoStart="true"
+                               Fill="_fill"
+                               OnScan="HandleScan"
+                               OnError="HandleError"
+                               OnStatusChanged="HandleStatus"
+                               OnDiagnostics="HandleDiagnostics">
+                        <ControlsContent>
+                            @* Appended to the built-in control bar. *@
+                            <button type="button" class="bit-bbscanner__button" @onclick="() => _results.Clear()">Clear log</button>
+                        </ControlsContent>
+                        <ChildContent>
+                            @* Arbitrary content on top of the viewfinder. *@
+                            @if (_lastFormat is not null)
+                            {
+                                <div class="scan-badge">@_lastFormat</div>
+                            }
+                        </ChildContent>
+                    </BbScanner>
+                </div>
+
+                <DiagnosticsPanel Diagnostics="_diagnostics"
+                                  FramesDecoded="_scanner?.FramesDecoded ?? 0"
+                                  FramesWithSymbol="_scanner?.FramesWithSymbol ?? 0" />
             </div>
-            <div class="button-row" style="margin-block-start:0.75rem;">
-                <button class="button" type="button" @onclick="() => SetFormats(BbBarcodeFormat.All)">All</button>
-                <button class="button" type="button" @onclick="() => SetFormats(BbBarcodeFormat.AllMatrix)">Matrix only</button>
-                <button class="button" type="button" @onclick="() => SetFormats(BbBarcodeFormat.AllLinear)">Linear only</button>
-            </div>
-        </div>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Capture</h3>
-
-            <div class="field">
-                <label class="field__label" for="fps">Target frame rate: @_frameRate fps</label>
-                <input id="fps" type="range" min="1" max="30" step="1"
-                       value="@_frameRate" @onchange="e => _frameRate = ToInt(e, 15)" />
-                <span class="field__hint">Above about twenty the extra frames rarely change how fast a symbol is found.</span>
-            </div>
-
-            <div class="field">
-                <label class="field__label" for="size">Processing size: @_processingSize px</label>
-                <input id="size" type="range" min="240" max="1280" step="40"
-                       value="@_processingSize" @onchange="e => _processingSize = ToInt(e, 640)" />
-                <span class="field__hint">Longest edge of the image the decoder sees. The browser scales the frame before it crosses into C#.</span>
-            </div>
-
-            <div class="field">
-                <label class="field__label" for="region">Scan region: @((_regionFraction * 100).ToString("0"))%</label>
-                <input id="region" type="range" min="20" max="100" step="5"
-                       value="@(_regionFraction * 100)" @onchange="OnRegionChanged" />
-            </div>
-
-            <div class="field">
-                <label class="field__label" for="dupe">Duplicate suppression: @_duplicateSeconds s</label>
-                <input id="dupe" type="range" min="0" max="10" step="1"
-                       value="@_duplicateSeconds" @onchange="e => _duplicateSeconds = ToInt(e, 2)" />
-                <span class="field__hint">Zero reports every frame that decodes, which is useful for measuring throughput.</span>
-            </div>
+            <div class="scan-panels">
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Formats</h3>
+                    <p class="bb-card-desc">
+                        Narrowing the set is the cheapest speed-up available: an unused symbology costs
+                        nothing because its decoder is never created. PDF417 stays inert until a
+                        specification symbol character table is registered; see the README for why.
+                    </p>
+                    <div class="scan-checks scan-checks-grid">
+                        @foreach (var format in Formats)
+                        {
+                            <label class="bb-check">
+                                <input type="checkbox"
+                                       checked="@_formats.HasFlag(format)"
+                                       @onchange="e => ToggleFormat(format, (bool)(e.Value ?? false))" />
+                                <span>@Label(format)</span>
+                            </label>
+                        }
+                    </div>
+                    <div class="bb-segmented scan-presets" role="group" aria-label="Format presets">
+                        <button type="button" aria-pressed="@(_formats == BbBarcodeFormat.All ? "true" : "false")" @onclick="() => SetFormats(BbBarcodeFormat.All)">All</button>
+                        <button type="button" aria-pressed="@(_formats == BbBarcodeFormat.AllMatrix ? "true" : "false")" @onclick="() => SetFormats(BbBarcodeFormat.AllMatrix)">Matrix only</button>
+                        <button type="button" aria-pressed="@(_formats == BbBarcodeFormat.AllLinear ? "true" : "false")" @onclick="() => SetFormats(BbBarcodeFormat.AllLinear)">Linear only</button>
+                    </div>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Capture</h3>
+
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Target frame rate</span><output>@_frameRate fps</output></span>
+                        <input id="fps" type="range" min="1" max="30" step="1"
+                               value="@_frameRate" @onchange="e => _frameRate = ToInt(e, 15)" />
+                        <small>Above about twenty the extra frames rarely change how fast a symbol is found.</small>
+                    </label>
 
-            <div class="field">
-                <label class="field__label" for="facing">Preferred camera</label>
-                <select id="facing" value="@_facing" @onchange="OnFacingChanged">
-                    <option value="@BbCameraFacing.Rear">Rear</option>
-                    <option value="@BbCameraFacing.Front">Front</option>
-                    <option value="@BbCameraFacing.Any">Any</option>
-                </select>
-                <span class="field__hint">Applied the next time the camera is started.</span>
-            </div>
-        </div>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Processing size</span><output>@_processingSize px</output></span>
+                        <input id="size" type="range" min="240" max="1280" step="40"
+                               value="@_processingSize" @onchange="e => _processingSize = ToInt(e, 640)" />
+                        <small>Longest edge of the image the decoder sees. The browser scales the frame before it crosses into C#.</small>
+                    </label>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Advanced tuning</h3>
-            <p class="field__hint">
-                Everything here is a property of <code>BbScannerOptions</code>, passed through the
-                <code>Options</code> parameter. <code>Formats</code> and <code>Region</code> are
-                still applied on top of it.
-            </p>
-
-            <div class="field">
-                <label class="field__label" for="lines">Scan lines per orientation: @_options.MaxScanLines</label>
-                <input id="lines" type="range" min="1" max="60" step="1"
-                       value="@_options.MaxScanLines" @onchange="e => Tune(o => o.MaxScanLines = ToInt(e, 15))" />
-                <span class="field__hint">How many lines each orientation gets when looking for linear symbols.</span>
-            </div>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Scan region</span><output>@((_regionFraction * 100).ToString("0"))%</output></span>
+                        <input id="region" type="range" min="20" max="100" step="5"
+                               value="@(_regionFraction * 100)" @onchange="OnRegionChanged" />
+                    </label>
 
-            <div class="field">
-                <label class="field__label" for="downsample">Downsample factor: @_options.DownsampleFactor</label>
-                <input id="downsample" type="range" min="1" max="4" step="1"
-                       value="@_options.DownsampleFactor" @onchange="e => Tune(o => o.DownsampleFactor = ToInt(e, 1))" />
-                <span class="field__hint">Subsamples while converting to grayscale. Quadratic, and costs the smallest readable symbol.</span>
-            </div>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Duplicate suppression</span><output>@_duplicateSeconds s</output></span>
+                        <input id="dupe" type="range" min="0" max="10" step="1"
+                               value="@_duplicateSeconds" @onchange="e => _duplicateSeconds = ToInt(e, 2)" />
+                        <small>Zero reports every frame that decodes, which is useful for measuring throughput.</small>
+                    </label>
 
-            <label class="checkbox">
-                <input type="checkbox" checked="@_options.TryHarder"
-                       @onchange="e => Tune(o => o.TryHarder = (bool)(e.Value ?? false))" />
-                Try harder (exhaustive detection and the full rotation sweep)
-            </label>
-            <label class="checkbox">
-                <input type="checkbox" checked="@_options.AllowInverted"
-                       @onchange="e => Tune(o => o.AllowInverted = (bool)(e.Value ?? false))" />
-                Allow inverted (light on dark) symbols
-            </label>
-            <label class="checkbox">
-                <input type="checkbox" checked="@_options.TryReversedRows"
-                       @onchange="e => Tune(o => o.TryReversedRows = (bool)(e.Value ?? false))" />
-                Read linear symbols right to left as well
-            </label>
-            <label class="checkbox">
-                <input type="checkbox" checked="@_options.TryVerticalLines"
-                       @onchange="e => Tune(o => o.TryVerticalLines = (bool)(e.Value ?? false))" />
-                Scan columns and tilted lines, for rotated linear symbols
-            </label>
-            <label class="checkbox">
-                <input type="checkbox" checked="@_options.Code39CheckDigit"
-                       @onchange="e => Tune(o => o.Code39CheckDigit = (bool)(e.Value ?? false))" />
-                Require the Code 39 modulo 43 check character
-            </label>
-            <label class="checkbox">
-                <input type="checkbox" checked="@_options.Code39ExtendedMode"
-                       @onchange="e => Tune(o => o.Code39ExtendedMode = (bool)(e.Value ?? false))" />
-                Interpret Code 39 as full ASCII
-            </label>
-
-            <div class="field" style="margin-block-start:0.75rem;">
-                <label class="field__label" for="itf">Accepted ITF lengths</label>
-                <select id="itf" value="@_itfLengths" @onchange="OnItfLengthsChanged">
-                    <option value="default">6 to 20, even (default)</option>
-                    <option value="14">14 only (ITF-14)</option>
-                    <option value="any">Any even length</option>
-                </select>
-                <span class="field__hint">ITF has no check character, so its accepted lengths are the main guard against a truncated read.</span>
-            </div>
-        </div>
+                    <label class="bb-field">
+                        <span>Preferred camera</span>
+                        <select id="facing" value="@_facing" @onchange="OnFacingChanged">
+                            <option value="@BbCameraFacing.Rear">Rear</option>
+                            <option value="@BbCameraFacing.Front">Front</option>
+                            <option value="@BbCameraFacing.Any">Any</option>
+                        </select>
+                        <small>Applied the next time the camera is started.</small>
+                    </label>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Advanced tuning</h3>
+                    <p class="bb-card-desc">
+                        Everything here is a property of <code>BbScannerOptions</code>, passed through the
+                        <code>Options</code> parameter. <code>Formats</code> and <code>Region</code> are
+                        still applied on top of it.
+                    </p>
+
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Scan lines per orientation</span><output>@_options.MaxScanLines</output></span>
+                        <input id="lines" type="range" min="1" max="60" step="1"
+                               value="@_options.MaxScanLines" @onchange="e => Tune(o => o.MaxScanLines = ToInt(e, 15))" />
+                        <small>How many lines each orientation gets when looking for linear symbols.</small>
+                    </label>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Chrome</h3>
-            <label class="checkbox"><input type="checkbox" checked="@_showControls" @onchange="e => _showControls = (bool)(e.Value ?? true)" /> Built-in controls</label>
-            <label class="checkbox"><input type="checkbox" checked="@_showStatus" @onchange="e => _showStatus = (bool)(e.Value ?? true)" /> Status bar</label>
-            <label class="checkbox"><input type="checkbox" checked="@_showReticle" @onchange="e => _showReticle = (bool)(e.Value ?? true)" /> Reticle</label>
-            <label class="checkbox"><input type="checkbox" checked="@_showMask" @onchange="e => _showMask = (bool)(e.Value ?? true)" /> Dim outside the region</label>
-            <label class="checkbox"><input type="checkbox" checked="@_highlight" @onchange="e => _highlight = (bool)(e.Value ?? true)" /> Highlight decoded symbol</label>
-            <label class="checkbox"><input type="checkbox" checked="@_fill" @onchange="e => _fill = (bool)(e.Value ?? false)" /> Fill the parent instead of keeping the camera's aspect ratio</label>
-        </div>
+                    <label class="bb-field">
+                        <span class="scan-field-head"><span>Downsample factor</span><output>@_options.DownsampleFactor</output></span>
+                        <input id="downsample" type="range" min="1" max="4" step="1"
+                               value="@_options.DownsampleFactor" @onchange="e => Tune(o => o.DownsampleFactor = ToInt(e, 1))" />
+                        <small>Subsamples while converting to grayscale. Quadratic, and costs the smallest readable symbol.</small>
+                    </label>
 
-        <div class="card">
-            <h3 style="margin-block-start:0;">Programmatic control</h3>
-            <p class="field__hint">The same operations the built-in controls perform, driven from the page.</p>
-            <div class="button-row">
-                <button class="button" type="button" @onclick="() => _scanner!.StartAsync()">Start</button>
-                <button class="button" type="button" @onclick="() => _scanner!.StopAsync()">Stop</button>
-                <button class="button" type="button" @onclick="() => _scanner!.Pause()">Pause</button>
-                <button class="button" type="button" @onclick="() => _scanner!.Resume()">Resume</button>
-                <button class="button" type="button" @onclick="OpenPicker">Scan an image</button>
-            </div>
-            <p class="field__hint" style="margin-block-start:0.6rem;">
-                Status: <span class="pill">@(_scanner?.Status.ToString() ?? "-")</span>
-                @if (_scanner?.Camera is { } camera)
+                    <div class="scan-checks">
+                        <label class="bb-check">
+                            <input type="checkbox" checked="@_options.TryHarder"
+                                   @onchange="e => Tune(o => o.TryHarder = (bool)(e.Value ?? false))" />
+                            Try harder (exhaustive detection and the full rotation sweep)
+                        </label>
+                        <label class="bb-check">
+                            <input type="checkbox" checked="@_options.AllowInverted"
+                                   @onchange="e => Tune(o => o.AllowInverted = (bool)(e.Value ?? false))" />
+                            Allow inverted (light on dark) symbols
+                        </label>
+                        <label class="bb-check">
+                            <input type="checkbox" checked="@_options.TryReversedRows"
+                                   @onchange="e => Tune(o => o.TryReversedRows = (bool)(e.Value ?? false))" />
+                            Read linear symbols right to left as well
+                        </label>
+                        <label class="bb-check">
+                            <input type="checkbox" checked="@_options.TryVerticalLines"
+                                   @onchange="e => Tune(o => o.TryVerticalLines = (bool)(e.Value ?? false))" />
+                            Scan columns and tilted lines, for rotated linear symbols
+                        </label>
+                        <label class="bb-check">
+                            <input type="checkbox" checked="@_options.Code39CheckDigit"
+                                   @onchange="e => Tune(o => o.Code39CheckDigit = (bool)(e.Value ?? false))" />
+                            Require the Code 39 modulo 43 check character
+                        </label>
+                        <label class="bb-check">
+                            <input type="checkbox" checked="@_options.Code39ExtendedMode"
+                                   @onchange="e => Tune(o => o.Code39ExtendedMode = (bool)(e.Value ?? false))" />
+                            Interpret Code 39 as full ASCII
+                        </label>
+                    </div>
+
+                    <label class="bb-field scan-field-spaced">
+                        <span>Accepted ITF lengths</span>
+                        <select id="itf" value="@_itfLengths" @onchange="OnItfLengthsChanged">
+                            <option value="default">6 to 20, even (default)</option>
+                            <option value="14">14 only (ITF-14)</option>
+                            <option value="any">Any even length</option>
+                        </select>
+                        <small>ITF has no check character, so its accepted lengths are the main guard against a truncated read.</small>
+                    </label>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Chrome</h3>
+                    <div class="scan-checks">
+                        <label class="bb-check"><input type="checkbox" checked="@_showControls" @onchange="e => _showControls = (bool)(e.Value ?? true)" /> Built-in controls</label>
+                        <label class="bb-check"><input type="checkbox" checked="@_showStatus" @onchange="e => _showStatus = (bool)(e.Value ?? true)" /> Status bar</label>
+                        <label class="bb-check"><input type="checkbox" checked="@_showReticle" @onchange="e => _showReticle = (bool)(e.Value ?? true)" /> Reticle</label>
+                        <label class="bb-check"><input type="checkbox" checked="@_showMask" @onchange="e => _showMask = (bool)(e.Value ?? true)" /> Dim outside the region</label>
+                        <label class="bb-check"><input type="checkbox" checked="@_highlight" @onchange="e => _highlight = (bool)(e.Value ?? true)" /> Highlight decoded symbol</label>
+                        <label class="bb-check"><input type="checkbox" checked="@_fill" @onchange="e => _fill = (bool)(e.Value ?? false)" /> Fill the parent instead of keeping the camera's aspect ratio</label>
+                    </div>
+                </section>
+
+                <section class="scan-panel">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Programmatic control</h3>
+                    <p class="bb-card-desc">The same operations the built-in controls perform, driven from the page.</p>
+                    <div class="bb-toolbar">
+                        <button class="btn btn-secondary" type="button" @onclick="() => _scanner!.StartAsync()">Start</button>
+                        <button class="btn btn-secondary" type="button" @onclick="() => _scanner!.StopAsync()">Stop</button>
+                        <button class="btn btn-secondary" type="button" @onclick="() => _scanner!.Pause()">Pause</button>
+                        <button class="btn btn-secondary" type="button" @onclick="() => _scanner!.Resume()">Resume</button>
+                        <button class="btn btn-secondary" type="button" @onclick="OpenPicker">Scan an image</button>
+                    </div>
+                </section>
+
+                @if (_error is not null)
                 {
-                    <span class="pill pill--muted">@camera.Width×@camera.Height</span>
+                    <div class="bb-note bb-note-warn">
+                        <strong>@_error.Kind</strong> — @_error.Message
+                    </div>
                 }
-            </p>
+            </div>
         </div>
 
-        @if (_error is not null)
-        {
-            <div class="note note--warning">
-                <strong>@_error.Kind</strong> — @_error.Message
-            </div>
-        }
+        <ResultLog Results="_results" OnClear="() => _results.Clear()" />
     </div>
 </div>
 
-<div style="margin-block-start:1.25rem;">
-    <ResultLog Results="_results" OnClear="() => _results.Clear()" />
-</div>
-
 @code {
     private BbScannerOptions _options = new();
     private string _itfLengths = "default";
diff --git a/src/Utilities/BbScanner/Demo/Client/Routes.razor b/src/Utilities/BbScanner/Demo/Client/Routes.razor
index 105855d4577..989f92736d1 100644
--- a/src/Utilities/BbScanner/Demo/Client/Routes.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Routes.razor
@@ -1,6 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/BbScanner/Demo/Client/Shared/BarcodeSvg.razor b/src/Utilities/BbScanner/Demo/Client/Shared/BarcodeSvg.razor
index 55c2f290285..702aa81888b 100644
--- a/src/Utilities/BbScanner/Demo/Client/Shared/BarcodeSvg.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Shared/BarcodeSvg.razor
@@ -7,22 +7,31 @@
     The demo needs real, scannable barcodes on screen so that a visitor can point a phone at the
     page, and so that the file scanning page has something to load. Emitting SVG keeps that free
     of any image encoder: the module grid becomes a single path, which stays crisp at any size.
+
+    The symbol sits on white "paper" in either theme: a scanner reads dark modules on a light
+    ground, and a symbol inverted along with the page would only decode with AllowInverted. The
+    frame and the caption around it follow the theme.
 *@
 
 <figure class="sample">
-    <svg class="sample__svg"
-         viewBox="@_viewBox"
-         style="max-inline-size:@(Size)px;aspect-ratio:@_aspectRatio;"
-         shape-rendering="crispEdges"
-         role="img"
-         aria-label="@($"{Caption} barcode encoding {Value}")">
-        <rect width="100%" height="100%" fill="#ffffff" />
-        <path d="@_path" fill="#000000" />
-    </svg>
-    <figcaption class="sample__caption">
-        <strong>@Caption</strong>
-        <span class="sample__value">@Value</span>
-    </figcaption>
+    <div class="sample-paper">
+        <svg class="sample-svg"
+             viewBox="@_viewBox"
+             style="max-inline-size:@(Size)px;aspect-ratio:@_aspectRatio;"
+             shape-rendering="crispEdges"
+             role="img"
+             aria-label="@($"{Caption} barcode encoding {Value}")">
+            <rect width="100%" height="100%" fill="#ffffff" />
+            <path d="@_path" fill="#000000" />
+        </svg>
+    </div>
+    @if (ShowCaption)
+    {
+        <figcaption class="sample-caption">
+            <strong>@Caption</strong>
+            <span class="sample-value">@Value</span>
+        </figcaption>
+    }
 </figure>
 
 @code {
@@ -58,6 +67,10 @@
     [Parameter]
     public string Value { get; set; } = string.Empty;
 
+    /// <summary>Whether the caption and the value are shown under the symbol. The accessible name always carries both.</summary>
+    [Parameter]
+    public bool ShowCaption { get; set; } = true;
+
     protected override void OnParametersSet()
     {
         if (Matrix is not null)
diff --git a/src/Utilities/BbScanner/Demo/Client/Shared/DiagnosticsPanel.razor b/src/Utilities/BbScanner/Demo/Client/Shared/DiagnosticsPanel.razor
index 72a9039bfa6..8991a684dd3 100644
--- a/src/Utilities/BbScanner/Demo/Client/Shared/DiagnosticsPanel.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Shared/DiagnosticsPanel.razor
@@ -3,50 +3,46 @@
     what tells you whether to lower the processing size, narrow the region or drop a symbology.
 *@
 
-<div class="card">
-    <h3 style="margin-block-start:0;">Frame diagnostics</h3>
+<section class="bb-stage diag">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Frame diagnostics</h3>
 
-    <div class="stat-grid">
-        <div class="stat">
-            <div class="stat__label">Frame</div>
-            <div class="stat__value">@Diagnostics.Total.TotalMilliseconds.ToString("0.00") ms</div>
+    <div class="bb-stats">
+        <div class="bb-stat">
+            <span class="bb-stat-label">Frame</span>
+            <span class="bb-stat-value">@Diagnostics.Total.TotalMilliseconds.ToString("0.00") ms</span>
         </div>
-        <div class="stat">
-            <div class="stat__label">Headroom</div>
-            <div class="stat__value">@Diagnostics.EquivalentFramesPerSecond.ToString("0") fps</div>
+        <div class="bb-stat">
+            <span class="bb-stat-label">Headroom</span>
+            <span class="bb-stat-value">@Diagnostics.EquivalentFramesPerSecond.ToString("0") fps</span>
         </div>
-        <div class="stat">
-            <div class="stat__label">Decoded size</div>
-            <div class="stat__value">@Diagnostics.DecodedWidth×@Diagnostics.DecodedHeight</div>
+        <div class="bb-stat">
+            <span class="bb-stat-label">Decoded size</span>
+            <span class="bb-stat-value">@Diagnostics.DecodedWidth×@Diagnostics.DecodedHeight</span>
         </div>
-        <div class="stat">
-            <div class="stat__label">Scan lines</div>
-            <div class="stat__value">@Diagnostics.RowsScanned</div>
+        <div class="bb-stat">
+            <span class="bb-stat-label">Scan lines</span>
+            <span class="bb-stat-value">@Diagnostics.RowsScanned</span>
         </div>
     </div>
 
-    <div style="margin-block-start:1rem;">
-        <div class="bar" role="img" aria-label="Time split between pipeline stages">
-            <div class="bar__segment" style="background:#4f8cff;width:@Percent(Diagnostics.Grayscale)%"></div>
-            <div class="bar__segment" style="background:#9d7bff;width:@Percent(Diagnostics.Binarize)%"></div>
-            <div class="bar__segment" style="background:#35c77c;width:@Percent(Diagnostics.Matrix)%"></div>
-            <div class="bar__segment" style="background:#e6b800;width:@Percent(Diagnostics.Linear)%"></div>
-        </div>
-        <div class="legend">
-            <span><span class="legend__swatch" style="background:#4f8cff"></span>Grayscale @Ms(Diagnostics.Grayscale)</span>
-            <span><span class="legend__swatch" style="background:#9d7bff"></span>Binarise @Ms(Diagnostics.Binarize)</span>
-            <span><span class="legend__swatch" style="background:#35c77c"></span>Matrix @Ms(Diagnostics.Matrix)</span>
-            <span><span class="legend__swatch" style="background:#e6b800"></span>Linear @Ms(Diagnostics.Linear)</span>
-        </div>
+    <div class="diag-bar" role="img" aria-label="Time split between pipeline stages">
+        <div class="diag-seg diag-seg-gray" style="width:@Percent(Diagnostics.Grayscale)%"></div>
+        <div class="diag-seg diag-seg-binarize" style="width:@Percent(Diagnostics.Binarize)%"></div>
+        <div class="diag-seg diag-seg-matrix" style="width:@Percent(Diagnostics.Matrix)%"></div>
+        <div class="diag-seg diag-seg-linear" style="width:@Percent(Diagnostics.Linear)%"></div>
+    </div>
+    <div class="diag-legend">
+        <span><span class="diag-swatch diag-seg-gray"></span>Grayscale @Ms(Diagnostics.Grayscale)</span>
+        <span><span class="diag-swatch diag-seg-binarize"></span>Binarise @Ms(Diagnostics.Binarize)</span>
+        <span><span class="diag-swatch diag-seg-matrix"></span>Matrix @Ms(Diagnostics.Matrix)</span>
+        <span><span class="diag-swatch diag-seg-linear"></span>Linear @Ms(Diagnostics.Linear)</span>
     </div>
 
     @if (FramesDecoded > 0)
     {
-        <p class="field__hint" style="margin-block-start:0.75rem;">
-            @FramesDecoded frames decoded, @FramesWithSymbol contained a symbol.
-        </p>
+        <p class="diag-foot">@FramesDecoded frames decoded, @FramesWithSymbol contained a symbol.</p>
     }
-</div>
+</section>
 
 @code {
     /// <summary>The most recent frame timings.</summary>
@@ -64,7 +60,7 @@
     private string Percent(TimeSpan part)
     {
         var total = Diagnostics.Total.TotalMilliseconds;
-        return total <= 0 ? "0" : (part.TotalMilliseconds / total * 100).ToString("0.##");
+        return total <= 0 ? "0" : (part.TotalMilliseconds / total * 100).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture);
     }
 
     private static string Ms(TimeSpan value) => $"{value.TotalMilliseconds:0.00} ms";
diff --git a/src/Utilities/BbScanner/Demo/Client/Shared/ResultLog.razor b/src/Utilities/BbScanner/Demo/Client/Shared/ResultLog.razor
index 0a322d5ddae..6285de7663b 100644
--- a/src/Utilities/BbScanner/Demo/Client/Shared/ResultLog.razor
+++ b/src/Utilities/BbScanner/Demo/Client/Shared/ResultLog.razor
@@ -3,48 +3,47 @@
     doubles as documentation of the result type.
 *@
 
-<div class="card">
-    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;">
-        <h3 style="margin:0;">Results</h3>
-        <div class="button-row">
-            <span class="pill pill--muted">@Results.Count total</span>
-            <button class="button" type="button" @onclick="Clear" disabled="@(Results.Count == 0)">Clear</button>
-        </div>
+<section class="result-log">
+    <div class="bb-toolbar result-log-head">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Results</h3>
+        <span class="bb-spacer"></span>
+        <span class="bb-badge">@Results.Count total</span>
+        <button class="btn btn-secondary" type="button" @onclick="Clear" disabled="@(Results.Count == 0)">Clear</button>
     </div>
 
     @if (Results.Count == 0)
     {
-        <p class="empty">Nothing scanned yet. Point the camera at a barcode, or use the sample codes.</p>
+        <div class="bb-empty">Nothing scanned yet. Point the camera at a barcode, or use the sample codes.</div>
     }
     else
     {
-        <div class="table-scroll">
-        <table>
-            <thead>
-                <tr>
-                    <th>Time</th>
-                    <th>Format</th>
-                    <th>Value</th>
-                    <th>Position</th>
-                    <th>Details</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var entry in Results)
-                {
-                    <tr data-testid="result-row">
-                        <td style="white-space:nowrap;">@entry.Timestamp.ToLocalTime().ToString("HH:mm:ss")</td>
-                        <td><span class="pill" data-testid="result-format">@entry.Format</span></td>
-                        <td class="mono" data-testid="result-value">@entry.Text</td>
-                        <td class="mono" style="white-space:nowrap;">@Describe(entry.BoundingBox)</td>
-                        <td>@Describe(entry.Metadata)</td>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead>
+                    <tr>
+                        <th>Time</th>
+                        <th>Format</th>
+                        <th>Value</th>
+                        <th>Position</th>
+                        <th>Details</th>
                     </tr>
-                }
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                    @foreach (var entry in Results)
+                    {
+                        <tr data-testid="result-row">
+                            <td class="bb-nowrap">@entry.Timestamp.ToLocalTime().ToString("HH:mm:ss")</td>
+                            <td><span class="bb-badge" data-testid="result-format">@entry.Format</span></td>
+                            <td class="bb-mono result-value" data-testid="result-value">@entry.Text</td>
+                            <td class="bb-mono bb-nowrap">@Describe(entry.BoundingBox)</td>
+                            <td>@Describe(entry.Metadata)</td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
         </div>
     }
-</div>
+</section>
 
 @code {
     /// <summary>The results to display, newest first.</summary>
diff --git a/src/Utilities/BbScanner/Demo/Client/Shared/StatusBadge.razor b/src/Utilities/BbScanner/Demo/Client/Shared/StatusBadge.razor
new file mode 100644
index 00000000000..4b1e0a98d9b
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Client/Shared/StatusBadge.razor
@@ -0,0 +1,20 @@
+@*
+    The scanner's lifecycle status as a badge in a sample's title bar, tinted the way the scanner's
+    own status dot is: scanning is success, paused a warning, faulted an error.
+*@
+
+<span class="@CssClass">@(Status?.ToString() ?? "Idle")</span>
+
+@code {
+    /// <summary>The status to show, or null before the scanner has rendered.</summary>
+    [Parameter]
+    public BbScannerStatus? Status { get; set; }
+
+    private string CssClass => Status switch
+    {
+        BbScannerStatus.Scanning => "bb-badge bb-badge-success",
+        BbScannerStatus.Paused => "bb-badge bb-badge-warn",
+        BbScannerStatus.Faulted => "bb-badge bb-badge-danger",
+        _ => "bb-badge",
+    };
+}
diff --git a/src/Utilities/BbScanner/Demo/Server/Bit.BbScanner.Demo.Server.csproj b/src/Utilities/BbScanner/Demo/Server/Bit.BbScanner.Demo.Server.csproj
index 9f56b316601..015531faebc 100644
--- a/src/Utilities/BbScanner/Demo/Server/Bit.BbScanner.Demo.Server.csproj
+++ b/src/Utilities/BbScanner/Demo/Server/Bit.BbScanner.Demo.Server.csproj
@@ -46,9 +46,11 @@
 
     <!-- Every demo page - each one is a working scanner - plus the components they share and the
          client half of the hosting. The MCP page describes this server rather than the library, and
-         the not-found page teaches nothing about scanning. -->
+         the not-found page teaches nothing about scanning. Nor does the site chrome: the landing
+         page, the shell in Layout\ and the catalog that drives it (DocsCatalog.cs) are the docs site
+         every Utilities demo shares, not code an app needs in order to scan. -->
     <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
+                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\Home.razor;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
       <LogicalName>BbScannerSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
     </EmbeddedResource>
 
diff --git a/src/Utilities/BbScanner/Demo/Server/Components/App.razor b/src/Utilities/BbScanner/Demo/Server/Components/App.razor
index 314d64567dd..07f18e6391e 100644
--- a/src/Utilities/BbScanner/Demo/Server/Components/App.razor
+++ b/src/Utilities/BbScanner/Demo/Server/Components/App.razor
@@ -4,12 +4,33 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="description" content="bit BbScanner (Bit.BbScanner) - a dependency-free barcode scanner for Blazor: QR Code, Data Matrix, Code 128, Code 39, EAN-13, EAN-8, UPC-A, UPC-E and ITF from the camera or from still images, with the decoding written in C#." />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit BbScanner (Bit.BbScanner) - a dependency-free barcode scanner for Blazor: QR Code, Data Matrix, Code 128, Code 39, EAN-13, EAN-8, UPC-A, UPC-E and ITF from the camera or from still images, with the decoding written in C#." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.BbScanner" />
+    <meta property="og:title" content="BbScanner - barcode scanning for Blazor, decoded in C#" />
+    <meta property="og:description" content="QR Code, Data Matrix, Code 128, Code 39, EAN, UPC and ITF from the camera or from still images - no barcode SDK, no JavaScript scanner library." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
-    @* The scanner stylesheet (_content/Bit.BbScanner/bit-bbscanner.css) is not linked here: Bit.BbScanner's JS
-       initializer adds it to the page by itself. *@
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. None of them is needed by the scanner itself.
+
+       The scanner stylesheet (_content/Bit.BbScanner/bit-bbscanner.css) is not linked here:
+       Bit.BbScanner's JS initializer adds it to the page by itself. Its defaults sit in a :where()
+       block, so the brand tint demo.css gives the scanner wins whichever file loads last. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.BbScanner.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -26,6 +47,7 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/BbScanner/Demo/Server/Services/BbScannerSourceCatalog.cs b/src/Utilities/BbScanner/Demo/Server/Services/BbScannerSourceCatalog.cs
index 77fb816db4a..6c09b4e0ff2 100644
--- a/src/Utilities/BbScanner/Demo/Server/Services/BbScannerSourceCatalog.cs
+++ b/src/Utilities/BbScanner/Demo/Server/Services/BbScannerSourceCatalog.cs
@@ -265,7 +265,6 @@ private static string KindOf(string path)
         if (path.StartsWith("Library/", StringComparison.OrdinalIgnoreCase)) return "Library";
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
-            path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -410,7 +409,7 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"///\s*<summary>(?<text>.*?)</summary>", RegexOptions.Singleline)]
     private static partial Regex XmlSummaryRegex();
 
-    [GeneratedRegex(@"<p class=""lede"">(?<text>.*?)</p>", RegexOptions.Singleline)]
+    [GeneratedRegex(@"<p class=""bb-subtitle"">(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex PageIntroRegex();
 
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/app.css b/src/Utilities/BbScanner/Demo/Server/wwwroot/app.css
index ec73b61a7b4..7b51a42ea90 100644
--- a/src/Utilities/BbScanner/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/app.css
@@ -1,581 +1,2820 @@
-/* Demo site styles. No CSS framework: the library has no dependencies and neither does its demo. */
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
 
 :root {
-    color-scheme: dark;
-    --bg: #0a0c11;
-    --bg-elevated: #12151d;
-    --bg-inset: #0d1017;
-    --border: #232833;
-    --fg: #e8ecf3;
-    --fg-muted: #97a1b2;
-    --accent: #4f8cff;
-    --accent-soft: rgba(79, 140, 255, 0.14);
-    --success: #35c77c;
-    --warning: #e6b800;
-    --danger: #ff5f57;
-    --radius: 0.75rem;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
-    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
-    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-}
-
-* {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
 html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
     scroll-behavior: smooth;
 }
 
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
 body {
     margin: 0;
-    background: var(--bg);
-    color: var(--fg);
-    font-family: var(--sans);
-    font-size: 16px;
-    line-height: 1.6;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
 }
 
 a {
-    color: var(--accent);
+    color: var(--bb-primary);
     text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
 a:hover {
+    color: var(--bb-primary-hover);
     text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
 }
 
-h1, h2, h3, h4 {
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
     line-height: 1.25;
-    margin: 0 0 0.5em;
-    font-weight: 650;
-    letter-spacing: -0.01em;
+    letter-spacing: -.02em;
 }
 
-h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
-h2 { font-size: 1.4rem; margin-block-start: 2.5rem; }
-h3 { font-size: 1.1rem; margin-block-start: 1.75rem; }
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
 
-p { margin: 0 0 1rem; }
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
 
-code {
-    font-family: var(--mono);
-    font-size: 0.875em;
-    padding: 0.1em 0.35em;
-    border-radius: 0.3rem;
-    background: var(--bg-inset);
-    border: 1px solid var(--border);
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
 }
 
-pre {
-    margin: 0 0 1rem;
-    padding: 1rem;
-    overflow-x: auto;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--bg-inset);
-    font-family: var(--mono);
-    font-size: 0.82rem;
-    line-height: 1.6;
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
 }
 
-pre code {
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: inherit;
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
 }
 
-/* Layout */
+p {
+    margin: 0 0 .75rem;
+}
 
-.shell {
-    display: grid;
-    grid-template-columns: 16rem minmax(0, 1fr);
-    min-block-size: 100dvh;
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
 }
 
-.sidebar {
-    position: sticky;
-    inset-block-start: 0;
-    block-size: 100dvh;
-    padding: 1.25rem 1rem;
-    border-inline-end: 1px solid var(--border);
-    background: var(--bg-elevated);
-    overflow-y: auto;
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
 }
 
-.sidebar__brand {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    margin-block-end: 1.5rem;
-    font-weight: 700;
-    font-size: 1.05rem;
-    color: var(--fg);
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
 }
 
-.sidebar__brand:hover {
-    text-decoration: none;
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
 }
 
-.sidebar__mark {
-    display: grid;
-    place-items: center;
-    inline-size: 2rem;
-    block-size: 2rem;
-    border-radius: 0.5rem;
-    background: var(--accent-soft);
-    color: var(--accent);
-    font-size: 1.1rem;
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
 }
 
-.sidebar__group {
-    margin-block-end: 1.25rem;
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
 }
 
-.sidebar__label {
-    margin: 0 0 0.4rem;
-    padding-inline-start: 0.65rem;
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.09em;
-    text-transform: uppercase;
-    color: var(--fg-muted);
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-.sidebar__link {
-    display: block;
-    padding: 0.4rem 0.65rem;
-    border-radius: 0.5rem;
-    color: var(--fg-muted);
-    font-size: 0.9rem;
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
 }
 
-.sidebar__link:hover {
-    background: var(--bg-inset);
-    color: var(--fg);
-    text-decoration: none;
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
 }
 
-.sidebar__link.active {
-    background: var(--accent-soft);
-    color: var(--accent);
-    font-weight: 600;
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
 }
 
-.content {
-    min-inline-size: 0;
-    padding: 2.5rem clamp(1rem, 4vw, 3rem) 5rem;
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
 }
 
-.content__inner {
-    max-inline-size: 62rem;
-    margin-inline: auto;
+article {
+    width: 100%;
+    min-width: 0;
 }
 
-.lede {
-    max-inline-size: 46rem;
-    color: var(--fg-muted);
-    font-size: 1.05rem;
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
 }
 
-/* Cards and panels */
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
 
-.card {
-    padding: 1.25rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--bg-elevated);
-    box-shadow: var(--shadow);
+.bb-intro {
+    margin-bottom: 2.5rem;
 }
 
-.grid {
-    display: grid;
-    gap: 1rem;
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
 }
 
-.grid--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
-.grid--3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
 
-.split {
-    display: grid;
-    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
-    gap: 1.25rem;
-    align-items: start;
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
 }
 
-.stack {
-    display: grid;
-    gap: 1rem;
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-/* Controls */
+.btn:hover {
+    text-decoration: none;
+}
 
-.field {
-    display: grid;
-    gap: 0.3rem;
-    margin-block-end: 0.9rem;
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
 }
 
-.field__label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--fg-muted);
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
 }
 
-.field__hint {
-    font-size: 0.75rem;
-    color: var(--fg-muted);
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
 }
 
-select, input[type="text"], input[type="number"] {
-    inline-size: 100%;
-    padding: 0.45rem 0.6rem;
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    background: var(--bg-inset);
-    color: var(--fg);
-    font: inherit;
-    font-size: 0.9rem;
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
 }
 
-input[type="range"] {
-    inline-size: 100%;
-    accent-color: var(--accent);
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
 }
 
-select:focus-visible,
-input:focus-visible,
-button:focus-visible,
-a:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
 }
 
-.checkbox {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.3rem 0;
-    font-size: 0.9rem;
-    cursor: pointer;
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
 }
 
-.checkbox input {
-    accent-color: var(--accent);
-    inline-size: 1rem;
-    block-size: 1rem;
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
 }
 
-.button {
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.4rem;
-    padding: 0.5rem 0.9rem;
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    background: var(--bg-inset);
-    color: var(--fg);
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 550;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
     cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
 }
 
-.button:hover:not(:disabled) {
-    border-color: var(--accent);
-    color: var(--accent);
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
 }
 
-.button:disabled {
-    opacity: 0.45;
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
     cursor: not-allowed;
 }
 
-.button--primary {
-    border-color: transparent;
-    background: var(--accent);
-    color: #06090f;
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
 }
 
-.button--primary:hover:not(:disabled) {
-    background: #6ea0ff;
-    color: #06090f;
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
 }
 
-.button-row {
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
 }
 
-/* Data display */
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
 
-.stat-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
-    gap: 0.75rem;
+.bb-card-desc:last-child {
+    margin-bottom: 0;
 }
 
-.stat {
-    padding: 0.7rem 0.8rem;
-    border: 1px solid var(--border);
-    border-radius: 0.6rem;
-    background: var(--bg-inset);
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.stat__label {
-    font-size: 0.7rem;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--fg-muted);
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
 }
 
-.stat__value {
-    font-family: var(--mono);
-    font-size: 1.15rem;
-    font-variant-numeric: tabular-nums;
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.bar {
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
     display: flex;
-    block-size: 0.55rem;
-    border-radius: 999px;
-    overflow: hidden;
-    background: var(--bg-inset);
+    flex-direction: column;
+    margin-bottom: 0;
 }
 
-.bar__segment {
-    block-size: 100%;
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
-.legend {
+.bb-flex {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    margin-block-start: 0.5rem;
-    font-size: 0.75rem;
-    color: var(--fg-muted);
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.legend__swatch {
-    display: inline-block;
-    inline-size: 0.6rem;
-    block-size: 0.6rem;
-    border-radius: 2px;
-    margin-inline-end: 0.3rem;
+.bb-flex > .bb-card {
+    margin-bottom: 0;
 }
 
-table {
-    inline-size: 100%;
-    border-collapse: collapse;
-    font-size: 0.875rem;
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
 }
 
-th, td {
-    padding: 0.5rem 0.6rem;
-    text-align: start;
-    border-block-end: 1px solid var(--border);
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
 }
 
-th {
-    font-size: 0.72rem;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--fg-muted);
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-td.mono {
-    font-family: var(--mono);
-    font-size: 0.82rem;
-    word-break: break-all;
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
 }
 
-.pill {
-    display: inline-block;
-    padding: 0.1rem 0.5rem;
-    border-radius: 999px;
-    background: var(--accent-soft);
-    color: var(--accent);
-    font-size: 0.72rem;
-    font-weight: 650;
-    white-space: nowrap;
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
 }
 
-.pill--muted { background: var(--bg-inset); color: var(--fg-muted); }
-.pill--success { background: rgba(53, 199, 124, 0.16); color: var(--success); }
-.pill--warning { background: rgba(230, 184, 0, 0.16); color: var(--warning); }
-.pill--danger { background: rgba(255, 95, 87, 0.16); color: var(--danger); }
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
 
-.note {
-    padding: 0.85rem 1rem;
-    border: 1px solid var(--border);
-    border-inline-start: 3px solid var(--accent);
-    border-radius: 0.5rem;
-    background: var(--bg-inset);
-    font-size: 0.9rem;
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
-.note--warning { border-inline-start-color: var(--warning); }
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
 
-.empty {
-    padding: 1.5rem;
-    text-align: center;
-    color: var(--fg-muted);
-    font-size: 0.9rem;
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.sample {
-    display: grid;
-    gap: 0.6rem;
-    justify-items: center;
-    /* figure carries a 40px inline margin by default, which would shrink the card
-       under its own contents. */
-    margin: 0;
-    /* A grid item defaults to min-content width, so a wide symbol would push the
-       track instead of fitting it. */
-    min-inline-size: 0;
-    padding: 1rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: #ffffff;
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
 }
 
-/* The symbol keeps its aspect ratio from the viewBox and never exceeds the card. */
-.sample__svg {
-    inline-size: 100%;
-    block-size: auto;
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
 }
 
-.sample__caption {
-    inline-size: 100%;
-    min-inline-size: 0;
-    color: #10131a;
-    font-size: 0.78rem;
-    text-align: center;
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
 }
 
-.sample__value {
-    font-family: var(--mono);
-    color: #4a5261;
-    font-size: 0.72rem;
-    overflow-wrap: anywhere;
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
 }
 
-/* Skip link: the first stop for keyboard users, hidden until it is focused. */
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
 
-.skip-link {
-    position: absolute;
-    inset-block-start: -3rem;
-    inset-inline-start: 1rem;
-    z-index: 1001;
-    padding: 0.5rem 0.9rem;
-    border-radius: var(--radius);
-    background: var(--accent);
-    color: #fff;
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
 }
 
-.skip-link:focus {
-    inset-block-start: 1rem;
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
 }
 
-.content:focus {
-    outline: none;
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
 }
 
-#blazor-error-ui {
-    display: none;
-    position: fixed;
-    inset-block-end: 0;
-    inset-inline: 0;
-    z-index: 1000;
-    padding: 0.7rem 1.2rem;
-    background: var(--danger);
-    color: #fff;
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
 }
 
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    float: inline-end;
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
 }
 
-/* Responsive */
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
 
-@media (max-width: 900px) {
-    .shell {
-        grid-template-columns: 1fr;
-    }
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
 
-    .sidebar {
-        position: static;
-        block-size: auto;
-        border-inline-end: 0;
-        border-block-end: 1px solid var(--border);
-    }
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
 
-    .sidebar__nav {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.35rem;
-    }
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
 
-    .sidebar__group {
-        margin-block-end: 0.5rem;
-    }
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
 
-    .sidebar__label {
-        inline-size: 100%;
-    }
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
 
-    .split {
-        grid-template-columns: minmax(0, 1fr);
-    }
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html { scroll-behavior: auto; }
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
 }
 
-/* Wide content scrolls inside its own box rather than making the page scroll sideways on a
-   phone. */
-.table-scroll {
-    inline-size: 100%;
-    max-inline-size: 100%;
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
     overflow-x: auto;
-    overscroll-behavior-x: contain;
+    margin-bottom: 1.25rem;
 }
 
-/* The custom message template used on the customisation page. */
-.demo-message {
-    display: inline-block;
-    font-weight: 600;
-    letter-spacing: 0.02em;
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
 }
 
-@media (forced-colors: active) {
-    .sidebar__link.active {
-        border-inline-start: 3px solid Highlight;
-        forced-color-adjust: none;
-    }
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
 
-    .bar__segment {
-        forced-color-adjust: none;
-        border-inline-end: 1px solid CanvasText;
-    }
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
 }
 
-/* The badge the live playground draws over the viewfinder through ChildContent. */
-.scan-badge {
-    position: absolute;
-    inset-block-start: 2.5rem;
-    inset-inline-end: 0.75rem;
-    padding: 0.2rem 0.55rem;
-    border-radius: 999px;
-    background: rgba(53, 199, 124, 0.9);
-    color: #06240f;
-    font-size: 0.75rem;
-    font-weight: 700;
-    pointer-events: none;
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
 }
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/demo.css b/src/Utilities/BbScanner/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..73244d25465
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,509 @@
+/* ============================================================================================
+   BbScanner demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is BbScanner's own - the scanner pages' layout, the
+   diagnostics readout, the result log, the generated barcodes and the landing page's live decode -
+   and it is written against the kit's --bb-* names, so it follows the light/dark theme with no
+   rules of its own for either.
+   ============================================================================================ */
+
+/* The scanner, tinted with the site's design. Its defaults sit in a zero-specificity :where()
+   block, so one class selector outranks them wherever bit-bbscanner.css lands in the head (the
+   package's initializer injects it at runtime). The viewport is a camera feed - dark in either
+   theme - so the accent stays the brand's light-theme blue in both: it is the fill of a pressed
+   control under white text, and the dark theme's lighter blue would not hold that contrast. The
+   focus ring takes the lighter one, which is what reads against the video. A page that sets these
+   inline (the customisation page) still wins. */
+.bit-bbscanner {
+    --bit-bbscanner-accent: #1276C6;
+    --bit-bbscanner-focus-ring: 0 0 0 3px rgba(79, 163, 244, .6);
+    --bit-bbscanner-radius: var(--bb-radius-xl);
+    --bit-bbscanner-font: var(--bb-font-sans);
+}
+
+/* ---------- The scanner pages: viewfinder on one side, the knobs on the other ----------
+
+   Sized by the sample's own width rather than the window's: the docs column is flanked by the nav
+   panel (and on some pages the rail), so the same window can leave it wide or narrow. */
+.scan-sample {
+    container: scan-sample / inline-size;
+}
+
+.scan-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+    gap: 1.5rem;
+    align-items: start;
+}
+
+@container scan-sample (max-width: 720px) {
+    .scan-layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+.scan-view {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-width: 0;
+}
+
+.scan-view > .bb-toolbar,
+.scan-view > .bb-note,
+.scan-view > .bb-params {
+    margin: 0;
+}
+
+/* Side by side, the viewfinder stays in view while the knobs beside it scroll - a change shows up
+   on the camera it was made for. Only where the window is tall enough to hold the column whole. */
+@media (min-height: 760px) {
+    @container scan-sample (min-width: 721px) {
+        .scan-view {
+            position: sticky;
+            top: calc(var(--bb-header-height) + 1rem);
+        }
+    }
+}
+
+/* The knobs: one recessed pane, its groups divided by hairlines - Fluent's property pane. */
+.scan-panels {
+    container: scan-panels / inline-size;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    padding: 0 1.25rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.scan-panels > .bb-note {
+    margin: 0 0 1.125rem;
+}
+
+.scan-panel {
+    padding: 1.125rem 0;
+}
+
+.scan-panel + .scan-panel {
+    border-top: 1px solid var(--bb-border);
+}
+
+.scan-panel > .bb-card-title {
+    margin-bottom: .625rem;
+}
+
+.scan-panel > :last-child {
+    margin-bottom: 0;
+}
+
+.scan-panel .bb-card-desc {
+    margin-bottom: .75rem;
+}
+
+/* A field takes the pane's width: the sliders are the controls here, and a short one is hard to
+   set precisely. */
+.scan-panel .bb-field {
+    display: flex;
+    width: 100%;
+    margin-bottom: .875rem;
+}
+
+.scan-panel .bb-field:last-child {
+    margin-bottom: 0;
+}
+
+.scan-panel .bb-field input[type="range"],
+.scan-panel .bb-field select {
+    width: 100%;
+}
+
+.scan-field-spaced {
+    margin-top: 1rem;
+}
+
+/* The label on the left, the value it is set to on the right. */
+.scan-field-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: .75rem;
+}
+
+.scan-field-head output {
+    color: var(--bb-text-muted);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    font-weight: var(--fl-weight-regular);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.scan-checks {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin-bottom: .875rem;
+}
+
+.scan-checks-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
+    gap: .5rem 1rem;
+}
+
+.scan-checks .bb-check {
+    align-items: flex-start;
+    line-height: 1.43;
+}
+
+.scan-checks .bb-check input {
+    margin-top: .125rem;
+}
+
+.scan-presets {
+    margin-top: .25rem;
+}
+
+@container scan-sample (max-width: 480px) {
+    .scan-panels {
+        padding: 0 1rem;
+    }
+}
+
+/* Counters in a pane: one row of them, so no cell of the hairline grid is left empty - and one
+   column once the pane is too narrow for their labels. */
+.scan-panel .bb-stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-bottom: 0;
+}
+
+@container scan-panels (max-width: 20rem) {
+    .scan-panel .bb-stats {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+/* The badge the live playground draws over the viewfinder through ChildContent. It sits on the
+   camera feed, so its colors are the scanner's own rather than the page's. */
+.scan-badge {
+    position: absolute;
+    inset-block-start: 2.5rem;
+    inset-inline-end: .75rem;
+    padding: .1875rem .5625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bit-bbscanner-success, #35c77c);
+    color: #06240f;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    pointer-events: none;
+}
+
+/* The custom message template used on the customisation page. */
+.demo-message {
+    display: inline-block;
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .02em;
+}
+
+/* ---------- Frame diagnostics (Shared/DiagnosticsPanel) ---------- */
+
+.diag {
+    container: diag / inline-size;
+}
+
+.diag > .bb-card-title {
+    margin-bottom: .75rem;
+}
+
+/* Four readings: one row of four, or two by two - never three and an empty cell. */
+.diag .bb-stats {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    margin-bottom: 1rem;
+}
+
+@container diag (max-width: 30rem) {
+    .diag .bb-stats {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+.diag .bb-stat {
+    padding: .625rem .75rem;
+}
+
+.diag .bb-stat-value {
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-300);
+}
+
+/* The time split between the stages: one stacked bar, a segment per stage. The stage colors have
+   no role token of their own, so they are set here for both themes. */
+.diag {
+    --diag-gray: var(--bb-primary);
+    --diag-binarize: #8764B8;
+    --diag-matrix: var(--bb-success);
+    --diag-linear: var(--bb-warning);
+}
+
+:root[bit-theme="dark"] .diag {
+    --diag-binarize: #B696E0;
+}
+
+.diag-bar {
+    display: flex;
+    height: .5rem;
+    overflow: hidden;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface-2);
+}
+
+.diag-seg {
+    height: 100%;
+    transition: width var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.diag-seg-gray { background: var(--diag-gray); }
+.diag-seg-binarize { background: var(--diag-binarize); }
+.diag-seg-matrix { background: var(--diag-matrix); }
+.diag-seg-linear { background: var(--diag-linear); }
+
+.diag-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem 1rem;
+    margin-top: .625rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-100);
+    font-variant-numeric: tabular-nums;
+}
+
+.diag-legend > span {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+}
+
+.diag-swatch {
+    display: inline-block;
+    width: .625rem;
+    height: .625rem;
+    border-radius: var(--bb-radius-sm);
+}
+
+.diag-foot {
+    margin: .75rem 0 0;
+    color: var(--bb-text-soft);
+    font-size: var(--fl-font-size-100);
+}
+
+/* ---------- The result log (Shared/ResultLog) ---------- */
+
+.result-log {
+    margin-top: 1.5rem;
+}
+
+.result-log-head {
+    margin-bottom: .75rem;
+}
+
+.result-log-head > .bb-card-title {
+    margin: 0;
+}
+
+.result-log .bb-empty {
+    margin-bottom: 0;
+}
+
+.result-value {
+    color: var(--bb-text);
+}
+
+/* ---------- Generated barcodes (Shared/BarcodeSvg) ---------- */
+
+.sample-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.sample-grid-linear {
+    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
+}
+
+/* A tile in the theme, holding a sheet of white "paper": a scanner reads dark modules on a light
+   ground, so the symbol keeps its own colors in the dark theme while the frame around it follows. */
+.sample {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    /* figure carries a 40px inline margin by default, which would shrink the tile under its own
+       contents; and a grid item defaults to its min-content width, so a wide symbol would push the
+       track instead of fitting it. */
+    margin: 0;
+    min-width: 0;
+    padding: .75rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* The paper takes whatever height the row gives the tile, with the symbol centred on it, so the
+   sheets of one row line up and the captions under them share a baseline. */
+.sample-paper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5rem;
+    background: #FFFFFF;
+    border-radius: var(--bb-radius);
+}
+
+/* The symbol keeps its aspect ratio from the viewBox and never exceeds the tile. */
+.sample-svg {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.sample-caption {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    text-align: center;
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+}
+
+.sample-caption strong {
+    font-weight: var(--fl-weight-semibold);
+}
+
+.sample-value {
+    color: var(--bb-text-muted);
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    overflow-wrap: anywhere;
+}
+
+/* ---------- The performance page ---------- */
+
+.perf-actions {
+    margin: 0;
+}
+
+/* ---------- The landing page's hero: a symbol, and the decoder reading it ---------- */
+
+.home-live {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 1.25rem;
+    align-items: center;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+/* A viewfinder in miniature, drawn the way the scanner draws its own: the camera's dark ground,
+   the corner reticle, and the green outline it puts round a symbol it has read. */
+.home-viewfinder {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 12rem;
+    aspect-ratio: 1;
+    border-radius: var(--bb-radius-xl);
+    background: #0b0d12;
+}
+
+.home-viewfinder .sample {
+    padding: 0;
+    background: none;
+    border: 0;
+    box-shadow: none;
+}
+
+.home-viewfinder .sample-paper {
+    padding: .25rem;
+    outline: 2px solid transparent;
+    outline-offset: 3px;
+    transition: outline-color var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.home-viewfinder-found .sample-paper {
+    outline-color: #35c77c;
+}
+
+.home-corner {
+    position: absolute;
+    width: 1.375rem;
+    height: 1.375rem;
+    border: 0 solid #FFFFFF;
+}
+
+.home-corner-tl { top: .625rem; left: .625rem; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: .5rem; }
+.home-corner-tr { top: .625rem; right: .625rem; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: .5rem; }
+.home-corner-bl { bottom: .625rem; left: .625rem; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: .5rem; }
+.home-corner-br { bottom: .625rem; right: .625rem; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: .5rem; }
+
+.home-live-side {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .625rem;
+    min-width: 0;
+}
+
+.home-live-side > .bb-overline {
+    color: var(--bb-primary);
+}
+
+.home-live-copy {
+    margin: 0;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+}
+
+.home-live-result {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .375rem .5rem;
+    min-height: 1.75rem;
+    font-size: var(--fl-font-size-200);
+}
+
+@media (max-width: 480px) {
+    .home-live {
+        grid-template-columns: minmax(0, 1fr);
+        justify-items: center;
+        text-align: center;
+    }
+
+    .home-live-side {
+        align-items: center;
+    }
+}
+
+@media (forced-colors: active) {
+    .diag-seg,
+    .diag-swatch {
+        forced-color-adjust: none;
+        border-inline-end: 1px solid CanvasText;
+    }
+
+    .home-corner {
+        border-color: CanvasText;
+    }
+
+    .home-viewfinder-found .sample-paper {
+        outline-color: Highlight;
+    }
+}
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/site.js b/src/Utilities/BbScanner/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/BbScanner/Demo/Server/wwwroot/theme.js b/src/Utilities/BbScanner/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/BbScanner/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/Infrastructure/ScannerSession.cs b/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/Infrastructure/ScannerSession.cs
index 7f3ed45b5fb..b181be4f516 100644
--- a/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/Infrastructure/ScannerSession.cs
+++ b/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/Infrastructure/ScannerSession.cs
@@ -102,14 +102,16 @@ public async Task GoToAsync(string route)
     /// <summary>Waits until the page runs in the browser rather than as prerendered markup.</summary>
     public async Task WaitForInteractiveAsync()
     {
-        await Page.WaitForSelectorAsync(".shell[data-interactive='true'] h1", new PageWaitForSelectorOptions { Timeout = 90_000 }).ConfigureAwait(false);
+        await Page.WaitForSelectorAsync(".page[data-interactive='true'] h1", new PageWaitForSelectorOptions { Timeout = 90_000 }).ConfigureAwait(false);
     }
 
-    /// <summary>Navigates within the application without a full page load.</summary>
+    /// <summary>Navigates within the application without a full page load, through the docs nav panel.</summary>
     /// <param name="linkText">Visible text of the navigation link to click.</param>
+    /// <remarks>The panel marks the link of the page on screen as active, which is what says the navigation landed.</remarks>
     public async Task NavigateByLinkAsync(string linkText)
     {
-        await Page.ClickAsync($"nav a:has-text('{linkText}')").ConfigureAwait(false);
+        await Page.ClickAsync($".bb-docs-sidebar a:has-text('{linkText}')").ConfigureAwait(false);
+        await Page.WaitForSelectorAsync($".bb-docs-sidebar a.active:has-text('{linkText}')", new PageWaitForSelectorOptions { Timeout = 30_000 }).ConfigureAwait(false);
         await Page.WaitForSelectorAsync("h1", new PageWaitForSelectorOptions { Timeout = 30_000 }).ConfigureAwait(false);
     }
 
diff --git a/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/ScannerInterfaceTests.cs b/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/ScannerInterfaceTests.cs
index 245b6401c4c..94b2e46ed5f 100644
--- a/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/ScannerInterfaceTests.cs
+++ b/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.E2E/ScannerInterfaceTests.cs
@@ -13,8 +13,8 @@ public class ScannerInterfaceTests : BbScannerTest
 {
     private static readonly string[] Routes =
     [
-        "", "samples", "scan", "lifecycle", "camera", "region",
-        "image", "performance", "customize", "errors", "api",
+        "", "getting-started", "samples", "scan", "lifecycle", "camera", "region",
+        "image", "performance", "customize", "errors", "api", "mcp-server",
     ];
 
     [TestMethod]
@@ -42,6 +42,7 @@ public async Task AnUnknownRouteShowsTheNotFoundPage()
         var body = await session.Page.TextContentAsync("body");
         Assert.IsNotNull(body);
         Assert.Contains("not found", body, StringComparison.OrdinalIgnoreCase);
+        Assert.AreEqual("404", (await session.Page.TextContentAsync("h1"))?.Trim());
         Assert.IsEmpty(session.PageErrors);
     }
 
diff --git a/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.Mcp/McpToolTests.cs b/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.Mcp/McpToolTests.cs
index 9ddf04d5d03..a64b44f5fba 100644
--- a/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.Mcp/McpToolTests.cs
+++ b/src/Utilities/BbScanner/Tests/Bit.BbScanner.Tests.Mcp/McpToolTests.cs
@@ -249,10 +249,26 @@ public async Task The_source_index_lists_the_demo_pages_and_the_stylesheet_but_n
 
         Assert.Contains("Demo/Client/Pages/Scan.razor", index);
         Assert.Contains("Demo/Client/Pages/Camera.razor", index);
+        Assert.Contains("Demo/Client/Pages/GettingStarted.razor", index);
         Assert.Contains(BbScannerSourceCatalog.StylesheetPath, index);
         Assert.DoesNotContain("McpServer.razor", index);
         Assert.DoesNotContain("NotFound.razor", index);
         Assert.DoesNotContain("Error.razor", index);
+
+        // The docs site around the demos - the landing page, the shell and the catalog it is drawn
+        // from - is the same in every Utilities demo and teaches nothing about scanning.
+        Assert.DoesNotContain("Pages/Home.razor", index);
+        Assert.DoesNotContain("Demo/Client/Layout/", index);
+        Assert.DoesNotContain("DocsCatalog.cs", index);
+    }
+
+    [TestMethod]
+    public async Task A_demo_page_is_described_by_the_intro_it_opens_with()
+    {
+        var index = await McpCall.TextAsync("GetBbScannerSourceFile");
+        var line = index.Split('\n').Single(l => l.Contains("`Demo/Client/Pages/Region.razor`", StringComparison.Ordinal));
+
+        Assert.Contains("normalized coordinates", line);
     }
 
     [TestMethod]
diff --git a/src/Utilities/Bcrdt/Demo/Client/Components/ConnectionBadge.razor b/src/Utilities/Bcrdt/Demo/Client/Components/ConnectionBadge.razor
index 6c32b343a58..fec619928bf 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Components/ConnectionBadge.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Components/ConnectionBadge.razor
@@ -1,7 +1,7 @@
-@* A plain read-out of one replica's connection state. Purely presentational: it re-renders when its
-   parent does, and the parent is what subscribes to the sync provider. *@
+@* A plain read-out of one replica's connection state: a status light and a word. Purely presentational:
+   it re-renders when its parent does, and the parent is what subscribes to the sync provider. *@
 
-<span class="badge badge-@Tone" title="@Description">@Label</span>
+<span class="badge bb-badge @BadgeClass" title="@Description"><span class="bb-dot @DotClass" aria-hidden="true"></span>@Label</span>
 
 @code {
     /// <summary>The connection state to display.</summary>
@@ -22,15 +22,33 @@
         _ => "disconnected",
     };
 
-    private string Tone => !WantsConnection ? "offline" : Status switch
+    private Tone Kind => !WantsConnection ? Tone.Idle : Status switch
     {
-        BcrdtConnectionStatus.Synced => "good",
-        BcrdtConnectionStatus.Handshaking or BcrdtConnectionStatus.Connecting or BcrdtConnectionStatus.Reconnecting => "busy",
-        BcrdtConnectionStatus.Faulted => "bad",
-        _ => "offline",
+        BcrdtConnectionStatus.Synced => Tone.Good,
+        BcrdtConnectionStatus.Handshaking or BcrdtConnectionStatus.Connecting or BcrdtConnectionStatus.Reconnecting => Tone.Busy,
+        BcrdtConnectionStatus.Faulted => Tone.Bad,
+        _ => Tone.Idle,
+    };
+
+    private string BadgeClass => Kind switch
+    {
+        Tone.Good => "bb-badge-success",
+        Tone.Busy => "bb-badge-warn",
+        Tone.Bad => "bb-badge-danger",
+        _ => "badge-idle",
+    };
+
+    private string? DotClass => Kind switch
+    {
+        Tone.Good => "bb-dot-success",
+        Tone.Busy => "bb-dot-warning",
+        Tone.Bad => "bb-dot-danger",
+        _ => null,
     };
 
     private string Description => !WantsConnection
         ? "Disconnected on purpose. Edits still work and are kept locally until this replica reconnects."
         : $"BcrdtConnectionStatus.{Status}";
+
+    private enum Tone { Good, Busy, Bad, Idle }
 }
diff --git a/src/Utilities/Bcrdt/Demo/Client/Components/ReplicaPanel.razor b/src/Utilities/Bcrdt/Demo/Client/Components/ReplicaPanel.razor
index ac05d5319ad..b4b7c104c3f 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Components/ReplicaPanel.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Components/ReplicaPanel.razor
@@ -1,24 +1,22 @@
 @inherits BcrdtComponentBase
 
 @*
-    One replica, framed. The header bar is painted with the replica's presence colour - the same
+    One replica, framed as a live sample. The title bar carries the replica's presence colour - the same
     colour its collaborators see next to its name in their own presence lists - so a panel and a name
     in a list can be matched up by eye.
 
     This component subscribes to presence and to the connection itself rather than relying on the
-    page to re-render it, because the two things the header shows are exactly those two things.
+    page to re-render it, because the two things the title bar shows are exactly those two things.
 *@
 
-<section class="panel @(Replica.IsOnline ? "" : "panel-offline")">
-    <header class="panel-head" style="background: @Replica.Color">
+<section class="panel bb-demo replica @(Replica.IsOnline ? null : "panel-offline")" style="--replica-color: @Replica.Color">
+    <header class="panel-head bb-demo-bar">
+        <span class="replica-dot" aria-hidden="true"></span>
         <span class="panel-name">@Replica.Label</span>
-        <span class="panel-client" title="The engine's per-session client identifier. Every replica has its own.">
-            client @Replica.ShortClientId
-        </span>
         <ConnectionBadge Status="Replica.Status" WantsConnection="Replica.IsOnline" />
         @if (ShowConnectionToggle)
         {
-            <button class="panel-toggle" @onclick="ToggleAsync">
+            <button type="button" class="panel-toggle btn btn-secondary" @onclick="ToggleAsync">
                 @(Replica.IsOnline ? "Go offline" : "Go online")
             </button>
         }
@@ -40,9 +38,17 @@
         @ChildContent
     </div>
 
-    @if (Footer is not null)
+    @if (Footer is not null || ShowClientId)
     {
-        <footer class="panel-foot">@Footer</footer>
+        <footer class="panel-foot">
+            @Footer
+            @if (ShowClientId)
+            {
+                <span class="panel-client" title="The engine's per-session client identifier. Every replica has its own.">
+                    client @Replica.ShortClientId
+                </span>
+            }
+        </footer>
     }
 </section>
 
@@ -69,6 +75,10 @@
     [Parameter]
     public bool ShowConnectionToggle { get; set; } = true;
 
+    /// <summary>Whether to show the replica's client identifier at the end of the footer.</summary>
+    [Parameter]
+    public bool ShowClientId { get; set; } = true;
+
     protected override void OnParametersSet()
     {
         if (ReferenceEquals(_tracked, Replica)) return;
diff --git a/src/Utilities/Bcrdt/Demo/Client/DocsCatalog.cs b/src/Utilities/Bcrdt/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..7dad0e3f585
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,178 @@
+using Bit.Bcrdt.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bcrdt.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bcrdt";
+
+    public const string PackageId = "Bit.Bcrdt";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bcrdt";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bcrdt is real-time collaborative editing for .NET and Blazor, written natively in C#: a CRDT engine for " +
+        "text, lists, maps and sets, with synchronization, presence, offline-first persistence and selective undo. " +
+        "Every panel on this site is a separate replica, merging for real.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["offline", "undo", "conflict", "presence", "SignalR"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the packages, register the services, map the relay and put a collaborative editor on a page.",
+                "install setup nuget package AddBitBcrdtServices AddBitBcrdtHub MapHub BcrdtHub program.cs quick start five-minute data type",
+                typeof(GettingStarted)),
+        ]),
+        new("Collaborating",
+        [
+            new("/text", "Collaborative text",
+                "Three replicas editing one paragraph: take one offline, edit all three, and watch them converge without losing a word.",
+                "text BcrdtText BcrdtTextArea editor textarea offline merge converge replicas presence caret",
+                typeof(CollaborativeText)),
+            new("/list", "Collaborative list",
+                "A shared to-do list - a BcrdtArray of BcrdtMaps - where a rename and a concurrent tick of the same item both survive.",
+                "list array BcrdtArray BcrdtMap nested todo move reorder delete items",
+                typeof(CollaborativeList)),
+            new("/form", "Collaborative form",
+                "Map fields next to a nested text field, so last-writer-wins and a character-by-character merge show side by side.",
+                "form fields map BcrdtMap last writer wins EnsureText nested text scalar",
+                typeof(CollaborativeForm)),
+        ]),
+        new("Under the hood",
+        [
+            new("/conflicts", "Conflict lab",
+                "Six conflicting edits made on purpose - same position, same element, same key - each with its outcome stated before it runs.",
+                "conflict lab scenario concurrent insert delete same key converge verdict merge",
+                typeof(ConflictLab)),
+            new("/undo", "Collaborative undo",
+                "Selective undo: each replica undoes its own edits and leaves everyone else's work alone.",
+                "undo redo BcrdtUndoManager selective stack TrackedOrigins StopCapturing",
+                typeof(UndoRedo)),
+            new("/internals", "Internals",
+                "The engine laid open: state vectors, block counts, encoded sizes and every update as it is produced.",
+                "internals state vector blocks run-length encoding update size bytes delta log origin",
+                typeof(Internals)),
+        ]),
+        new("Across tabs",
+        [
+            new("/live", "Live, across tabs",
+                "One replica per browser tab, meeting through the demo server's SignalR hub or WebSocket endpoint.",
+                "live tabs SignalR hub WebSocket relay BcrdtCollaborationScope BcrdtPresenceView server share link room",
+                typeof(Live)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A page
+    /// whose route takes a parameter (/live/{Room}) is listed by its bare address, so a path below an entry's
+    /// address belongs to that entry when no entry names it exactly.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bcrdt/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bcrdt/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bcrdt/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bcrdt/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bcrdt/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/Footer.razor b/src/Utilities/Bcrdt/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bcrdt/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/Header.razor b/src/Utilities/Bcrdt/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bcrdt/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bcrdt/Demo/Client/Layout/MainLayout.razor
index 39518409f73..44980dda101 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/MainLayout.razor
@@ -1,8 +1,30 @@
 @inherits LayoutComponentBase
 
-<div class="shell">
-    <NavMenu />
-    <main class="content">
-        @Body
-    </main>
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
+
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
+
+    <Footer />
 </div>
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bcrdt/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Layout/NavMenu.razor b/src/Utilities/Bcrdt/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 51adf6c8474..00000000000
--- a/src/Utilities/Bcrdt/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,50 +0,0 @@
-<nav class="nav">
-    <div class="nav-brand">
-        <span class="nav-title">bit Bcrdt</span>
-        <span class="nav-subtitle">CRDT collaboration for .NET, demonstrated</span>
-    </div>
-
-    <ul class="nav-links">
-        <li>
-            <NavLink href="" Match="NavLinkMatch.All">Overview</NavLink>
-        </li>
-        <li>
-            <NavLink href="text">Collaborative text</NavLink>
-            <span class="nav-note">three replicas, offline merge</span>
-        </li>
-        <li>
-            <NavLink href="list">Collaborative list</NavLink>
-            <span class="nav-note">nested types in a sequence</span>
-        </li>
-        <li>
-            <NavLink href="form">Collaborative form</NavLink>
-            <span class="nav-note">scalar fields versus text</span>
-        </li>
-        <li>
-            <NavLink href="conflicts">Conflict lab</NavLink>
-            <span class="nav-note">provoke conflicts on purpose</span>
-        </li>
-        <li>
-            <NavLink href="undo">Collaborative undo</NavLink>
-            <span class="nav-note">undo mine, not yours</span>
-        </li>
-        <li>
-            <NavLink href="internals">Internals</NavLink>
-            <span class="nav-note">state vector, blocks, updates</span>
-        </li>
-        <li>
-            <NavLink href="live">Live, across tabs</NavLink>
-            <span class="nav-note">real tabs, through the server</span>
-        </li>
-        <li>
-            <NavLink href="mcp-server">MCP server</NavLink>
-            <span class="nav-note">the library, for AI agents</span>
-        </li>
-    </ul>
-
-    <p class="nav-foot">
-        Every panel on every page is a separate replica with its own client id, connected through the
-        library's in-memory transport, all inside this tab. Only the live page leaves it, and the server
-        it goes through only relays.
-    </p>
-</nav>
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeForm.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeForm.razor
index 315e1cdaa26..9bd60538910 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeForm.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeForm.razor
@@ -1,123 +1,148 @@
 @page "/form"
 @inherits ReplicaPageBase
 
-<h1>Collaborative forms</h1>
+<PageTitle>Collaborative form · Bcrdt</PageTitle>
 
-<section class="prose">
-    <p>
+<div class="bb-intro">
+    <h1>Collaborative form</h1>
+    <p class="bb-subtitle">
+        Two replicas of one form, there to make a single decision visible: which field type you pick determines what
+        happens when two people edit the same thing at once - one value wins for a map entry, both edits survive in a
+        nested text.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Two replicas of one form</h3>
+    <p class="bb-card-desc">
+        Three map entries and one nested text. Edit a field in either replica and watch the other follow.
+    </p>
+
+    @if (!Ready)
+    {
+        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening two replicas…</p>
+    }
+    else
+    {
+        <div class="bb-split replicas">
+            @foreach (DemoReplica replica in Replicas)
+            {
+                <ReplicaPanel Replica="replica">
+                    <ChildContent>
+                        <label class="field bb-field">
+                            <span class="field-label">Title</span>
+                            <input type="text"
+                                   class="field-input"
+                                   value="@Read(replica, TitleKey)"
+                                   @oninput="@(args => Write(replica, TitleKey, args))" />
+                            <small class="field-note">map entry - last writer wins</small>
+                        </label>
+
+                        <label class="field bb-field">
+                            <span class="field-label">Owner</span>
+                            <input type="text"
+                                   class="field-input"
+                                   value="@Read(replica, OwnerKey)"
+                                   @oninput="@(args => Write(replica, OwnerKey, args))" />
+                            <small class="field-note">map entry - independent of the others</small>
+                        </label>
+
+                        <label class="field bb-field">
+                            <span class="field-label">Status</span>
+                            <select class="field-input"
+                                    value="@Read(replica, StatusKey)"
+                                    @onchange="@(args => Write(replica, StatusKey, args))">
+                                @*
+                                    Shown while the field has no value. Without it the browser would
+                                    display the first real option even though nothing is stored, and
+                                    choosing that option would raise no change at all.
+                                *@
+                                <option value="" disabled selected="@(Read(replica, StatusKey).Length == 0)">Choose a status…</option>
+                                @foreach (string option in StatusOptions)
+                                {
+                                    <option value="@option" selected="@(Read(replica, StatusKey) == option)">@option</option>
+                                }
+                            </select>
+                            <small class="field-note">map entry - a menu is a natural fit for last-writer-wins</small>
+                        </label>
+
+                        <label class="field bb-field">
+                            <span class="field-label">Notes</span>
+                            @*
+                                The same component as the text page. Because the notes are a collaborative
+                                text type rather than a string in a map entry, two people typing here at
+                                once both keep their work.
+                            *@
+                            <BcrdtTextArea Text="Notes(replica)"
+                                           Presence="replica.Document.Presence"
+                                           Field="notes"
+                                           Rows="5"
+                                           Class="editor"
+                                           Placeholder="Both replicas can type here at once." />
+                            <small class="field-note">nested BcrdtText - concurrent edits merge</small>
+                        </label>
+                    </ChildContent>
+
+                    <Footer>
+                        <span class="metric">@Notes(replica).Count characters of notes</span>
+                    </Footer>
+                </ReplicaPanel>
+            }
+        </div>
+    }
+
+    <div class="bb-note bb-note-warn">
+        <strong>The thing worth trying.</strong> Take <em>Replica B</em> offline. In A, set the
+        title to <em>one thing</em> and add a sentence to the notes. In B, set the title to
+        <em>something else</em> and add a different sentence to the notes. Bring B back online.
+        One of the two titles wins outright and the other is lost - while <em>both</em> sentences
+        appear in the notes. Same two clients, same moment, same conflict; different outcome purely
+        because of how the field was modelled.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Map entries and a nested text</h3>
+    <p class="bb-card-desc">
         Most collaborative features are not documents. They are forms, settings panels and entity
         editors whose shape is already a C# type. This page is two replicas of one such form, and it
         exists to make a single decision visible: <strong>which field type you pick determines what
         happens when two people edit the same thing at once.</strong>
     </p>
-    <p>
+    <p class="bb-card-desc">
         The three fields at the top are plain map entries. Different fields never conflict - one
         person can change the title while another changes the owner and both survive, which is
         already better than the usual save-the-whole-record approach. But two people editing
         <em>the same</em> map field concurrently resolve last-writer-wins: one value survives,
         deterministically but arbitrarily, and the other is gone.
     </p>
-    <p>
+    <p class="bb-card-desc">
         The notes field at the bottom is a nested <code>BcrdtText</code> instead. Concurrent edits to
         it merge character by character, exactly as on the text page.
     </p>
-    <p class="callout">
-        <strong>The thing worth trying.</strong> Take <em>Replica B</em> offline. In A, set the
-        title to <em>one thing</em> and add a sentence to the notes. In B, set the title to
-        <em>something else</em> and add a different sentence to the notes. Bring B back online.
-        One of the two titles wins outright and the other is lost - while <em>both</em> sentences
-        appear in the notes. Same two clients, same moment, same conflict; different outcome purely
-        because of how the field was modelled.
-    </p>
-</section>
+    <pre class="bb-code">form.EnsureText(<span class="s">"notes"</span>).Insert(0, <span class="s">"..."</span>);   <span class="c">// a nested text: both edits merge</span>
+form.Set(<span class="s">"title"</span>, <span class="s">"..."</span>);                    <span class="c">// a map entry: one side wins</span></pre>
+</div>
 
-@if (!Ready)
+@if (Ready)
 {
-    <p class="loading">Opening two replicas…</p>
-}
-else
-{
-    <div class="panel-grid panel-grid-2">
-        @foreach (DemoReplica replica in Replicas)
-        {
-            <ReplicaPanel Replica="replica">
-                <ChildContent>
-                    <label class="field">
-                        <span class="field-label">Title</span>
-                        <span class="field-note">map entry - last writer wins</span>
-                        <input class="field-input"
-                               value="@Read(replica, TitleKey)"
-                               @oninput="@(args => Write(replica, TitleKey, args))" />
-                    </label>
-
-                    <label class="field">
-                        <span class="field-label">Owner</span>
-                        <span class="field-note">map entry - independent of the others</span>
-                        <input class="field-input"
-                               value="@Read(replica, OwnerKey)"
-                               @oninput="@(args => Write(replica, OwnerKey, args))" />
-                    </label>
-
-                    <label class="field">
-                        <span class="field-label">Status</span>
-                        <span class="field-note">map entry - a menu is a natural fit for last-writer-wins</span>
-                        <select class="field-input"
-                                value="@Read(replica, StatusKey)"
-                                @onchange="@(args => Write(replica, StatusKey, args))">
-                            @*
-                                Shown while the field has no value. Without it the browser would
-                                display the first real option even though nothing is stored, and
-                                choosing that option would raise no change at all.
-                            *@
-                            <option value="" disabled selected="@(Read(replica, StatusKey).Length == 0)">Choose a status…</option>
-                            @foreach (string option in StatusOptions)
-                            {
-                                <option value="@option" selected="@(Read(replica, StatusKey) == option)">@option</option>
-                            }
-                        </select>
-                    </label>
-
-                    <label class="field">
-                        <span class="field-label">Notes</span>
-                        <span class="field-note">nested BcrdtText - concurrent edits merge</span>
-                        @*
-                            The same component as the text page. Because the notes are a collaborative
-                            text type rather than a string in a map entry, two people typing here at
-                            once both keep their work.
-                        *@
-                        <BcrdtTextArea Text="Notes(replica)"
-                                       Presence="replica.Document.Presence"
-                                       Field="notes"
-                                       Rows="5"
-                                       Class="editor"
-                                       Placeholder="Both replicas can type here at once." />
-                    </label>
-                </ChildContent>
-
-                <Footer>
-                    <span class="metric">@Notes(replica).Count characters of notes</span>
-                </Footer>
-            </ReplicaPanel>
-        }
-    </div>
-
-    <section class="prose">
-        <h2>What the two replicas hold</h2>
-        <p>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What the two replicas hold</h3>
+        <p class="bb-card-desc">
             The projection below is what each replica would hand to your application. When both are
             online and idle they are identical; while one is offline they differ, and that is the
             divergence the handshake reconciles.
         </p>
-        <div class="panel-grid panel-grid-2">
+        <div class="bb-split">
             @foreach (DemoReplica replica in Replicas)
             {
-                <div>
-                    <h3 class="json-title" style="border-color: @replica.Color">@replica.Label</h3>
-                    <pre class="json">@DemoJson.Format(replica.Document.GetMap(FormKey).ToJson())</pre>
+                <div class="projection" style="--replica-color: @replica.Color">
+                    <p class="projection-title"><span class="replica-dot" aria-hidden="true"></span>@replica.Label</p>
+                    <pre class="json bb-code">@DemoJson.Format(replica.Document.GetMap(FormKey).ToJson())</pre>
                 </div>
             }
         </div>
-    </section>
+    </div>
 }
 
 @code {
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeList.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeList.razor
index 26271dda9f0..97f99533796 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeList.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeList.razor
@@ -1,16 +1,122 @@
 @page "/list"
 @inherits ReplicaPageBase
 
-<h1>Collaborative list</h1>
-
-<section class="prose">
-    <p>
-        A shared to-do list, held as a <code>BcrdtArray</code> whose elements are each a
-        <code>BcrdtMap</code> with a <code>title</code> and a <code>done</code> flag. Two independent
-        replicas of the document <code>demo-list</code> are shown; add, rename, tick and reorder in
-        either one.
+<PageTitle>Collaborative list · Bcrdt</PageTitle>
+
+<div class="bb-intro">
+    <h1>Collaborative list</h1>
+    <p class="bb-subtitle">
+        A shared to-do list, held as a <code>BcrdtArray</code> whose elements are each a <code>BcrdtMap</code> with a
+        <code>title</code> and a <code>done</code> flag. Two independent replicas of the document <code>demo-list</code>
+        are shown; add, rename, tick and reorder in either one.
     </p>
-    <p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Two replicas of one list</h3>
+    <p class="bb-card-desc">
+        Add an item in either replica, rename it, tick it, move it up or down - and watch the other follow.
+    </p>
+
+    @if (!Ready)
+    {
+        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening two replicas…</p>
+    }
+    else
+    {
+        <div class="bb-split replicas">
+            @foreach (DemoReplica replica in Replicas)
+            {
+                <ReplicaPanel Replica="replica">
+                    <ChildContent>
+                        <div class="list-add">
+                            <input type="text"
+                                   aria-label="New item"
+                                   placeholder="New item…"
+                                   value="@Draft(replica)"
+                                   @oninput="args => SetDraft(replica, args.Value as string)"
+                                   @onkeydown="args => OnDraftKey(replica, args)" />
+                            <button type="button" class="btn btn-primary" @onclick="() => Add(replica)">Add</button>
+                        </div>
+
+                        @{
+                            BcrdtArray items = Items(replica);
+                        }
+
+                        @if (items.Count == 0)
+                        {
+                            <p class="todo-empty">Nothing on the list yet.</p>
+                        }
+                        else
+                        {
+                            <ul class="todo">
+                                @for (int index = 0; index < items.Count; index++)
+                                {
+                                    int position = index;
+                                    BcrdtMap? item = items.GetMap(position);
+                                    if (item is null) continue;
+
+                                    @*
+                                        Keyed by the item itself. Remote insertions and deletions shift
+                                        positions; without a key the renderer would reuse the DOM row at
+                                        each index for a different item, overwriting a title somebody is
+                                        halfway through typing and sending their change to the wrong item.
+                                    *@
+                                    <li @key="item" class="todo-item @(IsDone(item) ? "todo-done" : "")">
+                                        <input type="checkbox"
+                                               aria-label="Done"
+                                               checked="@IsDone(item)"
+                                               @onchange="args => ToggleDone(item, args)" />
+
+                                        <input type="text"
+                                               class="todo-title"
+                                               aria-label="Title"
+                                               value="@Title(item)"
+                                               @onchange="args => Rename(item, args.Value as string)" />
+
+                                        <button type="button" class="bb-icon-btn"
+                                                title="Move up" aria-label="Move up"
+                                                disabled="@(position == 0)"
+                                                @onclick="() => MoveUp(replica, position)">↑</button>
+                                        <button type="button" class="bb-icon-btn"
+                                                title="Move down" aria-label="Move down"
+                                                disabled="@(position == items.Count - 1)"
+                                                @onclick="() => MoveDown(replica, position)">↓</button>
+                                        <button type="button" class="bb-icon-btn icon-danger"
+                                                title="Delete" aria-label="Delete"
+                                                @onclick="() => Delete(replica, position)">✕</button>
+                                    </li>
+                                }
+                            </ul>
+                        }
+                    </ChildContent>
+
+                    <Footer>
+                        <span class="metric">@Items(replica).Count items</span>
+                        <span class="metric">@DoneCount(replica) done</span>
+                        <span class="metric">@Blocks(replica) blocks</span>
+                    </Footer>
+                </ReplicaPanel>
+            }
+        </div>
+    }
+
+    <div class="bb-note bb-note-warn">
+        <strong>Worth trying.</strong> Take Replica B offline. In A, rename an item. In B, tick the
+        same item and add a new one. Bring B back: the rename and the tick both survive on the same
+        item, and B's new item is now in A as well. Then try the reorder arrows on both replicas
+        while one is offline. Moving an item removes it and inserts a copy of it at the new
+        position, so two people moving the <em>same</em> item concurrently can produce two copies of
+        it, and a rename or tick made concurrently with somebody else's move of that item is lost,
+        because it lands on the element the move removed. Those are genuine limitations of the
+        operation rather than bugs, and they are called out in the library's own documentation for
+        <code>Move</code>.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Why a list of maps</h3>
+    <p class="bb-card-desc">
         The nesting is the point. If each item were stored as a single string or a serialized blob,
         then one person renaming an item while another ticks it would be two writes of the same
         value, and one of them would have to lose. Because an item is a real collaborative map, the
@@ -18,120 +124,33 @@
         they never contend, and both survive. Two people editing the <em>same</em> key of the same
         item still resolves last-writer-wins - the merge is per key, not per keystroke.
     </p>
-    <p>
+    <p class="bb-card-desc">
         Ordering is handled by the sequence itself. Concurrent insertions at the same position are
         placed in an order every replica independently agrees on, and a run inserted by one person
         stays contiguous rather than interleaving with a run inserted by someone else. Concurrent
         deletion of the same item is idempotent: it disappears once and never comes back.
     </p>
-    <p class="callout">
-        <strong>Worth trying.</strong> Take Replica B offline. In A, rename an item. In B, tick the
-        same item and add a new one. Bring B back: the rename and the tick both survive on the same
-        item, and B's new item is now in A as well. Then try the reorder arrows on both replicas
-        while one is offline. Moving an item removes it and inserts a copy of it at the new
-        position, so two people moving the <em>same</em> item concurrently can produce two copies of
-        it, and a rename or tick made concurrently with somebody else's move of that item is lost,
-        because it lands on the element the move removed. Those are genuine limitations of the
-        operation rather than bugs, and they are called out in the library's own documentation for
-        <code>Move</code>.
-    </p>
-</section>
+</div>
 
-@if (!Ready)
-{
-    <p class="loading">Opening two replicas…</p>
-}
-else
+@if (Ready)
 {
-    <div class="panel-grid panel-grid-2">
-        @foreach (DemoReplica replica in Replicas)
-        {
-            <ReplicaPanel Replica="replica">
-                <ChildContent>
-                    <div class="list-add">
-                        <input class="input"
-                               placeholder="New item…"
-                               value="@Draft(replica)"
-                               @oninput="args => SetDraft(replica, args.Value as string)"
-                               @onkeydown="args => OnDraftKey(replica, args)" />
-                        <button class="button" @onclick="() => Add(replica)">Add</button>
-                    </div>
-
-                    @{
-                        BcrdtArray items = Items(replica);
-                    }
-
-                    @if (items.Count == 0)
-                    {
-                        <p class="empty">Nothing on the list yet.</p>
-                    }
-                    else
-                    {
-                        <ul class="todo">
-                            @for (int index = 0; index < items.Count; index++)
-                            {
-                                int position = index;
-                                BcrdtMap? item = items.GetMap(position);
-                                if (item is null) continue;
-
-                                @*
-                                    Keyed by the item itself. Remote insertions and deletions shift
-                                    positions; without a key the renderer would reuse the DOM row at
-                                    each index for a different item, overwriting a title somebody is
-                                    halfway through typing and sending their change to the wrong item.
-                                *@
-                                <li @key="item" class="todo-item @(IsDone(item) ? "todo-done" : "")">
-                                    <input type="checkbox"
-                                           checked="@IsDone(item)"
-                                           @onchange="args => ToggleDone(item, args)" />
-
-                                    <input class="input todo-title"
-                                           value="@Title(item)"
-                                           @onchange="args => Rename(item, args.Value as string)" />
-
-                                    <button class="icon-button"
-                                            title="Move up"
-                                            disabled="@(position == 0)"
-                                            @onclick="() => MoveUp(replica, position)">↑</button>
-                                    <button class="icon-button"
-                                            title="Move down"
-                                            disabled="@(position == items.Count - 1)"
-                                            @onclick="() => MoveDown(replica, position)">↓</button>
-                                    <button class="icon-button icon-danger"
-                                            title="Delete"
-                                            @onclick="() => Delete(replica, position)">✕</button>
-                                </li>
-                            }
-                        </ul>
-                    }
-                </ChildContent>
-
-                <Footer>
-                    <span class="metric">@Items(replica).Count items</span>
-                    <span class="metric">@DoneCount(replica) done</span>
-                    <span class="metric">@Blocks(replica) blocks</span>
-                </Footer>
-            </ReplicaPanel>
-        }
-    </div>
-
-    <section class="prose">
-        <h2>The raw state of each replica</h2>
-        <p>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The raw state of each replica</h3>
+        <p class="bb-card-desc">
             The same list as the engine holds it. When both replicas are online and idle these two
             projections are identical, character for character - that is the convergence property,
             and it is exactly the assertion the library's own correctness tests make.
         </p>
-        <div class="panel-grid panel-grid-2">
+        <div class="bb-split">
             @foreach (DemoReplica replica in Replicas)
             {
-                <div>
-                    <h3 class="json-title" style="border-color: @replica.Color">@replica.Label</h3>
-                    <pre class="json">@DemoJson.Format(replica.Document.ToJson())</pre>
+                <div class="projection" style="--replica-color: @replica.Color">
+                    <p class="projection-title"><span class="replica-dot" aria-hidden="true"></span>@replica.Label</p>
+                    <pre class="json bb-code">@DemoJson.Format(replica.Document.ToJson())</pre>
                 </div>
             }
         </div>
-    </section>
+    </div>
 }
 
 @code {
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeText.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeText.razor
index db28227a082..5638c149c81 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeText.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/CollaborativeText.razor
@@ -1,24 +1,68 @@
 @page "/text"
 @inherits ReplicaPageBase
 
-<h1>Collaborative text</h1>
+<PageTitle>Collaborative text · Bcrdt</PageTitle>
 
-<section class="prose">
-    <p>
-        Below are three independent replicas of the same document, <code>demo-text</code>. Each panel
-        has its own client identifier, its own presence identity, its own local storage and its own
-        connection to the in-memory network the other two are on. Nothing is shared between them
-        except the messages they send each other, which is why what follows is a real demonstration
-        rather than three views of one variable.
+<div class="bb-intro">
+    <h1>Collaborative text</h1>
+    <p class="bb-subtitle">
+        Three independent replicas of one paragraph, side by side. Type into any of them and watch it appear in the
+        others; take one offline, edit all three, bring it back, and watch a genuine divergence be reconciled without
+        anybody losing a word.
     </p>
-    <p>
-        Type into any panel. The edit is turned into the minimal insertion or deletion you actually
-        made - not "the textarea now says this", which would replace every character and destroy
-        concurrent work - encoded as a delta of a few bytes, sent, decoded, merged, and rendered in
-        the other two. The coloured header of each panel is that replica's presence colour, and it is
-        the same colour its collaborators show next to its name in their own presence lists.
+</div>
+
+@* Three panels side by side need the width the "on this page" rail would take. *@
+<div class="bb-card bb-page-wide">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Three replicas, one document</h3>
+    <p class="bb-card-desc">
+        Below are three independent replicas of the same document, <code>demo-text</code>. Nothing is shared
+        between them except the messages they send each other.
     </p>
-    <p class="callout">
+
+    @if (!Ready)
+    {
+        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening three replicas…</p>
+    }
+    else
+    {
+        <div class="bb-split replicas replicas-3">
+            @foreach (DemoReplica replica in Replicas)
+            {
+                <ReplicaPanel Replica="replica">
+                    <ChildContent>
+                        @*
+                            The library's own component. It handles the two things a naïve textarea
+                            binding gets wrong: it diffs the new value back into the edit the user made,
+                            and it maps the local caret through incoming remote edits so somebody typing
+                            above you does not push your cursor along.
+                        *@
+                        <BcrdtTextArea Text="replica.Document.Text(Field)"
+                                       Presence="replica.Document.Presence"
+                                       Field="@Field"
+                                       Rows="10"
+                                       Class="editor"
+                                       Placeholder="Type here - the other panels will follow." />
+                    </ChildContent>
+
+                    <Footer>
+                        <span class="metric">@Length(replica) characters</span>
+                        <span class="metric" title="Blocks in the underlying store. Run-length encoding keeps this far below the character count.">
+                            @Blocks(replica) blocks
+                        </span>
+                        @if (!replica.IsOnline)
+                        {
+                            <span class="metric metric-warn">
+                                editing offline - changes are held locally until this replica reconnects
+                            </span>
+                        }
+                    </Footer>
+                </ReplicaPanel>
+            }
+        </div>
+    }
+
+    <div class="bb-note bb-note-warn">
         <strong>The thing worth trying.</strong> Take <em>Replica A</em> offline with its
         <em>Go offline</em> button. Type a sentence into it. Now type different sentences into B and
         into C - note that those two still see each other, because only A left. Then bring A back
@@ -26,68 +70,45 @@
         three panels. Nothing was locked, nothing was queued keystroke by keystroke, and nothing was
         overwritten. Without a CRDT, the usual outcome here is that whichever replica saved last wins
         and the other two sentences are gone.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What a keystroke becomes</h3>
+    <p class="bb-card-desc">
+        Each panel has its own client identifier, its own presence identity, its own local storage and its own
+        connection to the in-memory network the other two are on, which is why what you see is a real
+        demonstration rather than three views of one variable.
     </p>
-</section>
+    <p class="bb-card-desc">
+        Type into any panel. The edit is turned into the minimal insertion or deletion you actually
+        made - not "the textarea now says this", which would replace every character and destroy
+        concurrent work - encoded as a delta of a few bytes, sent, decoded, merged, and rendered in
+        the other two. The coloured bar of each panel is that replica's presence colour, and it is
+        the same colour its collaborators show next to its name in their own presence lists.
+    </p>
+</div>
 
-@if (!Ready)
-{
-    <p class="loading">Opening three replicas…</p>
-}
-else
+@if (Ready)
 {
-    <div class="panel-grid panel-grid-3">
-        @foreach (DemoReplica replica in Replicas)
-        {
-            <ReplicaPanel Replica="replica">
-                <ChildContent>
-                    @*
-                        The library's own component. It handles the two things a naïve textarea
-                        binding gets wrong: it diffs the new value back into the edit the user made,
-                        and it maps the local caret through incoming remote edits so somebody typing
-                        above you does not push your cursor along.
-                    *@
-                    <BcrdtTextArea Text="replica.Document.Text(Field)"
-                                   Presence="replica.Document.Presence"
-                                   Field="@Field"
-                                   Rows="10"
-                                   Class="editor"
-                                   Placeholder="Type here - the other panels will follow." />
-                </ChildContent>
-
-                <Footer>
-                    <span class="metric">@Length(replica) characters</span>
-                    <span class="metric" title="Blocks in the underlying store. Run-length encoding keeps this far below the character count.">
-                        @Blocks(replica) blocks
-                    </span>
-                    @if (!replica.IsOnline)
-                    {
-                        <span class="metric metric-warn">
-                            editing offline - changes are held locally until this replica reconnects
-                        </span>
-                    }
-                </Footer>
-            </ReplicaPanel>
-        }
-    </div>
-
-    <section class="prose">
-        <h2>Are they actually the same document?</h2>
-        <p>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot @(AllConverged ? "bb-dot-success" : "bb-dot-warning")"></span> Are they actually the same document?</h3>
+        <p class="bb-card-desc">
             Convergence is a claim that can be checked rather than asserted: two replicas that have
             received the same updates must hold identical state. The three panels report
             @(AllConverged ? "identical" : "differing") content right now, which is
             @(AllConverged ? "what you should see whenever every replica is online and idle."
                            : "exactly what you should see while a replica is offline or an update is still in flight.")
         </p>
-        <p>
-            <button class="button" @onclick="ClearFromReplicaA">Clear the document (from Replica A)</button>
-            <span class="hint">
-                A deletion is an edit like any other, so it merges the same way. Issued from A, it
-                reaches B and C - unless one of them is offline, in which case it arrives when they
-                reconnect.
-            </span>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="ClearFromReplicaA">Clear the document (from Replica A)</button>
+        </div>
+        <p class="bb-card-desc">
+            A deletion is an edit like any other, so it merges the same way. Issued from A, it
+            reaches B and C - unless one of them is offline, in which case it arrives when they
+            reconnect.
         </p>
-    </section>
+    </div>
 }
 
 @code {
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/ConflictLab.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/ConflictLab.razor
index 3dd1d975067..5db7ec2ba0f 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/ConflictLab.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/ConflictLab.razor
@@ -1,52 +1,60 @@
 @page "/conflicts"
 @inherits ReplicaPageBase
 
-<h1>Conflict laboratory</h1>
-
-<section class="prose">
-    <p>
-        The other pages show collaboration working. This one is for disbelieving it. Each scenario
-        below gives both replicas the same starting point, takes them both offline, makes a specific
-        pair of conflicting edits - the exact cases that break naïve synchronization - and then
-        reconnects them so you can watch what the merge actually does.
+<PageTitle>Conflict lab · Bcrdt</PageTitle>
+
+<div class="bb-intro">
+    <h1>Conflict lab</h1>
+    <p class="bb-subtitle">
+        The other pages show collaboration working. This one is for disbelieving it: each scenario gives two replicas
+        the same starting point, takes them both offline, makes a specific pair of conflicting edits - the exact cases
+        that break naïve synchronization - and reconnects them, so you can watch what the merge actually does.
     </p>
-    <p>
+</div>
+
+@* Six scenario tiles and two state read-outs side by side want the full width of the column. *@
+<div class="bb-card bb-page-wide">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Six scenarios</h3>
+    <p class="bb-card-desc">
         Every scenario states its expectation before you run it. The point is not that something
         happens, but that the <em>stated</em> thing happens, on both replicas, every time.
     </p>
-</section>
 
-@if (!Ready || _session is null)
-{
-    <p class="loading">Opening two replicas…</p>
-}
-else
-{
-    <section class="lab">
-        @foreach (ConflictScenario scenario in ConflictLabSession.Scenarios)
-        {
-            <article class="lab-case">
-                <h3>@scenario.Title</h3>
-                <p>@scenario.Description</p>
-                <p class="lab-expect"><strong>Expected:</strong> @scenario.Expectation</p>
-                <button class="button" @onclick="() => RunAsync(scenario)" disabled="@_busy">
-                    Run this scenario
-                </button>
-            </article>
-        }
-    </section>
+    @if (!Ready || _session is null)
+    {
+        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening two replicas…</p>
+    }
+    else
+    {
+        <div class="bb-grid lab">
+            @foreach (ConflictScenario scenario in ConflictLabSession.Scenarios)
+            {
+                <article class="bb-card lab-case">
+                    <h3>@scenario.Title</h3>
+                    <p class="bb-card-desc">@scenario.Description</p>
+                    <p class="bb-card-desc lab-expect"><strong>Expected:</strong> @scenario.Expectation</p>
+                    <button type="button" class="btn btn-outline" @onclick="() => RunAsync(scenario)" disabled="@_busy">
+                        Run this scenario
+                    </button>
+                </article>
+            }
+        </div>
+    }
+</div>
 
+@if (Ready && _session is not null)
+{
     @if (_session.Log.Count > 0)
     {
-        <section class="prose">
-            <h2>What happened</h2>
-            <ol class="lab-log">
+        <div class="bb-card">
+            <h3 class="bb-card-title"><span class="bb-dot @(_session.Converged ? "bb-dot-success" : "bb-dot-warning")"></span> What happened</h3>
+            <ol class="lab-log bb-log">
                 @foreach (string entry in _session.Log)
                 {
-                    <li>@entry</li>
+                    <li class="bb-log-line">@entry</li>
                 }
             </ol>
-            <p class="@(_session.Converged ? "verdict verdict-ok" : "verdict verdict-warn")">
+            <p class="@(_session.Converged ? "verdict verdict-ok bb-note bb-note-success" : "verdict verdict-warn bb-note bb-note-warn")">
                 @if (_session.Converged)
                 {
                     <text>
@@ -63,33 +71,38 @@ else
                     </text>
                 }
             </p>
-        </section>
+        </div>
     }
 
-    <div class="panel-grid panel-grid-2">
-        @foreach (DemoReplica replica in Replicas)
-        {
-            <ReplicaPanel Replica="replica" ShowPresence="false">
-                <ChildContent>
-                    <h4 class="sub">Text</h4>
-                    <pre class="json">@ConflictLabSession.Quote(replica.Document.Text(ConflictLabSession.TextKey).ToString())</pre>
-
-                    <h4 class="sub">List</h4>
-                    <pre class="json">@DemoJson.Format(replica.Document.Array(ConflictLabSession.ListKey).ToJson())</pre>
-
-                    <h4 class="sub">Map</h4>
-                    <pre class="json">@DemoJson.Format(replica.Document.GetMap(ConflictLabSession.MapKey).ToJson())</pre>
-                </ChildContent>
-            </ReplicaPanel>
-        }
-    </div>
-
-    <section class="prose">
-        <p>
-            <button class="button" @onclick="ResetAsync" disabled="@_busy">Reset the document</button>
-            <span class="hint">Clears all three fields on both replicas and empties the log.</span>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The two replicas</h3>
+        <p class="bb-card-desc">
+            The raw state of each replica - the text, the list and the map every scenario writes to - read
+            straight from its own document.
         </p>
-    </section>
+        <div class="bb-split replicas">
+            @foreach (DemoReplica replica in Replicas)
+            {
+                <ReplicaPanel Replica="replica" ShowPresence="false">
+                    <ChildContent>
+                        <h4 class="sub">Text</h4>
+                        <pre class="json bb-code">@ConflictLabSession.Quote(replica.Document.Text(ConflictLabSession.TextKey).ToString())</pre>
+
+                        <h4 class="sub">List</h4>
+                        <pre class="json bb-code">@DemoJson.Format(replica.Document.Array(ConflictLabSession.ListKey).ToJson())</pre>
+
+                        <h4 class="sub">Map</h4>
+                        <pre class="json bb-code">@DemoJson.Format(replica.Document.GetMap(ConflictLabSession.MapKey).ToJson())</pre>
+                    </ChildContent>
+                </ReplicaPanel>
+            }
+        </div>
+
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="ResetAsync" disabled="@_busy">Reset the document</button>
+            <span class="bb-soft">Clears all three fields on both replicas and empties the log.</span>
+        </div>
+    </div>
 }
 
 @code {
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..22b59d52211
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,161 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · Bcrdt</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package for the engine and the Blazor components, one for the transport, one for the relay - then a
+        <code>BcrdtTextArea</code> inside a <code>BcrdtCollaborationScope</code> is a working collaborative editor
+        with live presence, automatic reconnection and offline support.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        <code>Bit.Bcrdt</code> carries the engine, the synchronization, presence and persistence, the in-memory and
+        WebSocket transports and the Blazor components. The SignalR client transport is a package of its own with no
+        ASP.NET Core server dependency, so it runs in WebAssembly and Hybrid apps too.
+    </p>
+    <pre class="bb-code"><span class="c"># the engine and the Blazor components</span>
+dotnet add package Bit.Bcrdt
+
+<span class="c"># the SignalR transport - or use the WebSocket transport built into Bit.Bcrdt, or none</span>
+dotnet add package Bit.Bcrdt.SignalR</pre>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Package</th><th>Contents</th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bb-table-key">Bit.Bcrdt</td>
+                    <td>The engine - <code>BcrdtText</code>, <code>BcrdtArray</code>, <code>BcrdtMap</code> and <code>BcrdtSet</code>, updates, snapshots and selective undo - with presence, the stores, the sync protocol, <code>AddBitBcrdtServices</code>, the input bindings, the in-memory and WebSocket transports and the Blazor components.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Bit.Bcrdt.SignalR</td>
+                    <td>The SignalR client transport.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Bit.Bcrdt.Server</td>
+                    <td>The ASP.NET Core relays: <code>BcrdtHub</code> for the SignalR transport and <code>MapBitBcrdtWebSocket</code> for the WebSocket transport.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Bit.Bcrdt.Testing</td>
+                    <td>A deterministic, seeded network simulator, random operation generators, a convergence harness and an update corrupter for fuzzing.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
+    <p class="bb-card-desc">
+        Register it once, in every project that renders collaborative components - in a Blazor Web App, that is both
+        the server and the client project. The .NET SignalR client needs an <strong>absolute</strong> hub URL, so
+        resolve it against the host; in Blazor WebAssembly that is the host page's base address.
+    </p>
+    <pre class="bb-code"><span class="k">using</span> Bit.Bcrdt;
+<span class="k">using</span> Bit.Bcrdt.SignalR;
+
+<span class="k">string</span> hubUrl = <span class="k">new</span> Uri(<span class="k">new</span> Uri(builder.HostEnvironment.BaseAddress), <span class="s">"hub/bcrdt"</span>).ToString();
+
+builder.Services.AddBitBcrdtServices(collaboration =&gt; collaboration
+    .UseTransport(<span class="k">new</span> BcrdtSignalRTransportFactory(hubUrl))
+    .UseInMemoryStore());</pre>
+    <p class="bb-card-desc">
+        <code>AddBitBcrdtSignalRTransport(hubUrl)</code> is the same registration as a one-liner. Each of the three
+        seams - transport, store and options - is optional: an application that configures none of them still gets a
+        working, purely local collaborative document, so a feature can be built and tested without a server and then
+        connected to one without changing how it reads or writes state.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Map the relay</h3>
+    <p class="bb-card-desc">
+        The hub lives in a separate server-side package, so that the client transport carries no ASP.NET Core server
+        dependency. Use <code>AddBitBcrdtHub</code> rather than a bare <code>AddSignalR</code>: SignalR's default
+        32 KB receive limit is smaller than the handshake reply for any document of real size.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.Bcrdt.Server    <span class="c"># in the server project</span></pre>
+    <pre class="bb-code"><span class="k">using</span> Bit.Bcrdt.Server;
+
+builder.Services.AddBitBcrdtHub();   <span class="c">// AddSignalR, with a receive limit sized for sync messages</span>
+<span class="c">// ...</span>
+app.MapHub&lt;BcrdtHub&gt;(<span class="s">"/hub/bcrdt"</span>);</pre>
+    <p class="bb-card-desc">
+        The raw WebSocket transport has its relay in the same package: call <code>app.UseWebSockets()</code> and map
+        it with <code>app.MapBitBcrdtWebSocket("/ws/bcrdt/{documentId}")</code>. Neither relay decodes a message or
+        holds a replica - they only forward bytes between the clients of a document.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A first editor</h3>
+    <p class="bb-card-desc">
+        <code>BcrdtCollaborationScope</code> opens the document, renders its content with the document as context,
+        shows <code>LoadingContent</code> while it opens and releases the document when it goes away.
+        <code>BcrdtTextArea</code> turns every keystroke into the minimal edit and publishes the caret through
+        presence. There is no stylesheet to reference and no script tag to add: the one small module the textarea
+        needs is imported on demand.
+    </p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.Bcrdt
+<span class="k">@@using</span> Bit.Bcrdt.Blazor
+
+&lt;<span class="k">BcrdtCollaborationScope</span> DocumentId=<span class="s">"notes-42"</span> User=<span class="s">"_me"</span> Context=<span class="s">"document"</span>&gt;
+    &lt;<span class="k">BcrdtPresenceView</span> Presence=<span class="s">"document.Presence"</span> /&gt;
+    &lt;<span class="k">BcrdtTextArea</span> Text=<span class="s">"@@document.Text("body")"</span> Presence=<span class="s">"document.Presence"</span> /&gt;
+&lt;/<span class="k">BcrdtCollaborationScope</span>&gt;
+
+<span class="k">@@code</span> {
+    <span class="k">private readonly</span> BcrdtCollaboratorInfo _me = <span class="k">new</span>(<span class="s">"u-1"</span>, <span class="s">"Ada"</span>, BcrdtPresenceService.SuggestColor(<span class="s">"u-1"</span>));
+}</pre>
+    <p class="bb-card-desc">
+        In a page that is prerendered and then becomes interactive, open documents only once the component is
+        interactive (<code>RendererInfo.IsInteractive</code>) - a document opened while prerendering belongs to a
+        request that is already over. The <a href="live">live page</a> is exactly this, across browser tabs.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Choose the data type</h3>
+    <p class="bb-card-desc">
+        This is the decision that matters most: the merge is decided by the data structure rather than by your
+        application, so it is worth knowing what each one will decide.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Type</th><th>Concurrent edits resolve as</th><th>Reach for it when</th></tr>
+            </thead>
+            <tbody>
+                <tr><td class="bb-table-key">BcrdtText</td><td>Both edits survive, each author's run stays contiguous</td><td>Anything a person types into at length</td></tr>
+                <tr><td class="bb-table-key">BcrdtArray</td><td>Both insertions survive, in a stable order</td><td>Lists, ordered collections</td></tr>
+                <tr><td class="bb-table-key">BcrdtMap</td><td><strong>One value wins</strong>, deterministically but arbitrarily</td><td>Fields where a later value legitimately replaces an earlier one</td></tr>
+                <tr><td class="bb-table-key">BcrdtSet</td><td>An add wins over a concurrent remove - if it added something</td><td>Tags, membership, flags</td></tr>
+            </tbody>
+        </table>
+    </div>
+    <p class="bb-card-desc">
+        The trap is a <code>BcrdtMap</code> with a long string in it: two people editing that field concurrently
+        means one of them loses everything they typed. If a field is something a human types prose into, make it a
+        nested <code>BcrdtText</code> and both edits merge - the <a href="form">collaborative form</a> shows the two
+        side by side.
+    </p>
+    <pre class="bb-code">document.Map.EnsureText(<span class="s">"description"</span>).Insert(0, <span class="s">"..."</span>);   <span class="c">// merges</span>
+document.Map.Set(<span class="s">"description"</span>, <span class="s">"..."</span>);                    <span class="c">// one side wins</span></pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where to go next</h3>
+    <ul class="bb-detail-list">
+        <li><a href="text">Collaborative text</a> - three replicas of one paragraph, and what happens when one goes offline.</li>
+        <li><a href="conflicts">Conflict lab</a> - six conflicts provoked on purpose, each with its outcome stated before it runs.</li>
+        <li><a href="undo">Collaborative undo</a> - a stack per replica that undoes only its own edits.</li>
+        <li><a href="mcp-server">MCP server</a> - point an AI agent at this site and it reads the real API, the guide and these pages.</li>
+        <li>The full reference guide - persistence, presence, transports, the architecture and the correctness tests - is the <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">README on GitHub</a>.</li>
+    </ul>
+</div>
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/Home.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/Home.razor
index 04c4aa55d87..c458f09e2e3 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/Home.razor
@@ -1,116 +1,329 @@
 @page "/"
+@layout MainLayout
+@inherits ReplicaPageBase
 
-<h1>Collaboration, in C#, with no server in the middle</h1>
-
-<p class="lede">
-    bit Bcrdt is a native .NET implementation of a conflict-free replicated data type - a
-    CRDT - together with the synchronization, presence, persistence and Blazor integration that a
-    collaborative feature actually needs. There is no JavaScript CRDT library underneath it and no
-    port of one: the engine, the wire format and the merge algorithm are all C#.
-</p>
-
-<section class="prose">
-    <h2>What a CRDT gives you</h2>
-    <p>
-        Suppose two people edit the same paragraph at the same moment and neither can see the other's
-        change yet. Without a CRDT you have to pick a loser. The usual approaches are to lock the
-        document so only one person can type, to funnel every keystroke through a server that
-        rewrites everyone's edits into a single agreed order, or to save last and overwrite the other
-        person's work. All three either need a permanently reachable authority or silently destroy
-        something somebody wrote.
-    </p>
-    <p>
-        A CRDT removes the need to choose. Every edit is expressed so that applying edits in any
-        order, more than once, or after an arbitrarily long delay always produces the same result on
-        every copy. That single property has consequences that stack up quickly: no server is
-        required to arbitrate, replicas can be edited while completely disconnected and reconciled
-        later, updates are small deltas rather than whole documents, and nobody's work is thrown
-        away. What you give up is the ability to say <em>which</em> of two truly simultaneous writes
-        to the same single value wins - the answer is deterministic and identical everywhere, but it
-        is arbitrary. Where losing a write is unacceptable, you model the value as a nested
-        collaborative type instead of a scalar, and both sides survive.
-    </p>
-
-    <h2>What the smallest useful program looks like</h2>
-    <p>
-        Opening a document does everything in the right order - load from storage so the document is
-        usable immediately and offline, then connect and let the handshake reconcile whatever changed
-        while it was away. After that, editing is ordinary method calls.
-    </p>
-
-    <pre class="code"><code>// Program.cs - one registration configures transport and storage.
-builder.Services.AddBitBcrdtServices(collaboration => collaboration
-    .UseTransport(documentId =&gt; BcrdtInMemoryNetwork.Shared.CreateTransport(documentId))
-    .UseInMemoryStore());
-
-// Anywhere with the service injected.
-BcrdtCollaborativeDocument document = await collaboration.OpenAsync("my-document");
-
-document.Text("body").Insert(0, "Hello, everyone.");
-document.Map.Set("title", "Draft");
-document.Presence.SetUser(new BcrdtCollaboratorInfo("ada", "Ada", BcrdtPresenceService.SuggestColor("ada")));
-
-// That is the whole thing. The edits are already merged locally, already encoded as a delta,
-// already on their way to every other replica, and already written to storage.</code></pre>
-
-    <h2>The demos</h2>
-    <p>
-        Each page below - except the live one - shows several replicas of one document, side by side, in this single browser
-        page. They are not views onto a shared object - each panel is a genuinely separate replica
-        with its own client identifier, its own presence identity, its own local storage and its own
-        connection, talking to the others through the library's in-memory transport. That is what
-        makes the merges you see real merges rather than a shared variable being redrawn.
-    </p>
-
-    <dl class="demo-list">
-        <dt><a href="text">Collaborative text</a></dt>
-        <dd>
-            Three replicas editing one paragraph. Type in any of them and watch it appear in the
-            others. Take one offline, edit it and the others, bring it back, and watch a genuine
-            divergence be reconciled without anybody losing a word. This is the headline demo.
-        </dd>
-
-        <dt><a href="list">Collaborative list</a></dt>
-        <dd>
-            A shared to-do list: a sequence whose elements are themselves collaborative maps. Shows
-            what nesting buys you - editing an item's title merges with a concurrent tick of its
-            checkbox, because they are different keys of a real map rather than two writes of one
-            blob.
-        </dd>
-
-        <dt><a href="form">Collaborative form</a></dt>
-        <dd>
-            Several fields on a map, plus one long-text field, so the difference in merge behaviour
-            between a scalar and a text type is visible next to each other in the same form.
-        </dd>
-
-        <dt><a href="conflicts">Conflict lab</a></dt>
-        <dd>
-            The page that proves the claims. Pause each replica's sync, make specific conflicting
-            edits on purpose - concurrent insert at the same position, concurrent delete of the same
-            element, concurrent write of the same key - then resume and compare the raw state of both
-            replicas as JSON.
-        </dd>
-
-        <dt><a href="undo">Collaborative undo</a></dt>
-        <dd>
-            Undo that reverses your own last action and leaves everyone else's work alone, which is
-            what users expect and what a naïve "restore the previous state" undo gets badly wrong in
-            a shared document.
-        </dd>
-
-        <dt><a href="internals">Internals</a></dt>
-        <dd>
-            An inspector: live state vector, block count, encoded size and a log of updates as they
-            are produced. Type five hundred characters and watch the block count stay in single
-            figures - that is the run-length encoding that makes large documents affordable.
-        </dd>
-
-        <dt><a href="live">Live, across tabs</a></dt>
-        <dd>
-            The same text editor, one replica per browser tab, meeting through the demo server's
-            SignalR hub or WebSocket endpoint - which relay messages and hold no copy of the document.
-            Share the link with another tab or device and type in both.
-        </dd>
-    </dl>
-</section>
+<PageTitle>Bcrdt - real-time collaboration for .NET and Blazor</PageTitle>
+
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with the
+   usual alternatives → persona tiles → FAQ → final call to action. Everything else on the site is a
+   documentation page under DocsLayout. The hero's sample is two live replicas rather than a picture
+   of them - a collaboration library is best introduced by typing into two copies of one document. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Live collaboration,<br /><span class="bb-hero-accent">merged in C#.</span></h1>
+            <p class="bb-hero-sub">
+                A CRDT engine for text, lists, maps and sets, with the synchronization, presence, offline-first
+                persistence and selective undo a collaborative feature actually needs - and no Yjs, no JavaScript
+                CRDT library, no interop in the engine. Two people editing the same document end up with the same
+                document, whether they were online at the time or not.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bcrdt</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="text" class="btn btn-secondary bb-btn-lg">Live demos</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The sample, framed as a window: the markup on top, and two replicas of one document
+           underneath - live, each with its own client id and its own connection, so the first thing a
+           visitor can do here is type into one and watch the other follow. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Notes.razor</span>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BcrdtCollaborationScope</span> DocumentId=<span class="s">"notes-42"</span> User=<span class="s">"_me"</span>
+                         Context=<span class="s">"document"</span>&gt;
+    &lt;<span class="k">BcrdtTextArea</span> Text=<span class="s">"@@document.Text("body")"</span>
+                   Presence=<span class="s">"document.Presence"</span> /&gt;
+&lt;/<span class="k">BcrdtCollaborationScope</span>&gt;</pre>
+                <div class="home-hero-live">
+                    @if (!Ready)
+                    {
+                        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening two replicas…</p>
+                    }
+                    else
+                    {
+                        <div class="bb-split replicas home-hero-replicas">
+                            @foreach (DemoReplica replica in Replicas)
+                            {
+                                <ReplicaPanel Replica="replica" ShowPresence="false" ShowClientId="false">
+                                    <ChildContent>
+                                        <BcrdtTextArea Text="replica.Document.Text(Field)"
+                                                       Presence="replica.Document.Presence"
+                                                       Field="@Field"
+                                                       Rows="4"
+                                                       Class="editor"
+                                                       Placeholder="@($"Type as {replica.Label}…")" />
+                                    </ChildContent>
+                                </ReplicaPanel>
+                            }
+                        </div>
+                    }
+                    <p class="home-hero-hint">Type into either one. Then take one offline, type into both, and bring it back.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>Engine in C#</strong><span>no Yjs, no JavaScript CRDT, no interop</span></div>
+        <div><strong>Offline-first</strong><span>edits merge whenever a replica comes back</span></div>
+        <div><strong>Deltas, not documents</strong><span>one small update per transaction</span></div>
+        <div><strong>Every hosting model</strong><span>WebAssembly, Server, Web App and Hybrid</span></div>
+    </section>
+
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>Everything a collaborative feature needs</h2>
+        <p class="bb-section-sub">
+            The hard part of collaboration is never the UI: it is two edits crossing in flight, a connection dropping
+            mid-sentence, a client coming back after a week offline. Every page of this site is a set of real,
+            separate replicas, so the merges you watch are real merges.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Collaborative text</h3>
+                <p class="bb-card-desc">
+                    <code>BcrdtTextArea</code> turns every keystroke into the minimal insertion or deletion and keeps
+                    your caret in place while somebody types above it.
+                </p>
+                <a href="text" class="btn btn-outline">Collaborative text →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Nested types</h3>
+                <p class="bb-card-desc">
+                    A <code>BcrdtArray</code> of <code>BcrdtMap</code>s: a rename and a concurrent tick of the same
+                    item touch different keys, so both survive.
+                </p>
+                <a href="list" class="btn btn-outline">Collaborative list →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> A merge you choose</h3>
+                <p class="bb-card-desc">
+                    A map entry is last-writer-wins, a nested text merges character by character - the field type you
+                    pick decides what happens when two people edit it at once.
+                </p>
+                <a href="form" class="btn btn-outline">Collaborative form →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Conflicts, on purpose</h3>
+                <p class="bb-card-desc">
+                    Concurrent insertion at the same position, deletion of the same element, writes to the same key -
+                    each provoked, with its outcome stated before it runs.
+                </p>
+                <a href="conflicts" class="btn btn-outline">Conflict lab →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Selective undo</h3>
+                <p class="bb-card-desc">
+                    <code>BcrdtUndoManager</code> reverses your own edits and leaves everyone else's alone - and the
+                    undo itself synchronizes like any other edit.
+                </p>
+                <a href="undo" class="btn btn-outline">Collaborative undo →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Live, across tabs</h3>
+                <p class="bb-card-desc">
+                    One replica per browser tab, through a SignalR hub or a WebSocket endpoint that only relays - no
+                    copy of the document lives on the server.
+                </p>
+                <a href="live" class="btn btn-outline">Live, across tabs →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Register it once</h3>
+                    <p>
+                        One registration configures the transport and the store, in every project that renders
+                        collaborative components. Each seam is optional: with none of them you still get a working,
+                        purely local document.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code">builder.Services.AddBitBcrdtServices(collaboration =&gt; collaboration
+    .UseTransport(<span class="k">new</span> BcrdtSignalRTransportFactory(hubUrl))
+    .UseInMemoryStore());</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Map a relay that only relays</h3>
+                    <p>
+                        <code>BcrdtHub</code> forwards each message to the other clients of a document without
+                        decoding it, and holds no copy of it. The WebSocket endpoint does the same for the built-in
+                        WebSocket transport.
+                    </p>
+                    <a href="live">Live, across tabs →</a>
+                </div>
+                <pre class="bb-code">builder.Services.AddBitBcrdtHub();
+<span class="c">// ...</span>
+app.MapHub&lt;BcrdtHub&gt;(<span class="s">"/hub/bcrdt"</span>);</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Open a document and edit it</h3>
+                    <p>
+                        Opening loads from storage first, so the document is usable at once and offline, then connects
+                        and lets the handshake reconcile whatever changed meanwhile. A transaction is one update and
+                        one round of events.
+                    </p>
+                    <a href="internals">Internals →</a>
+                </div>
+                <pre class="bb-code"><span class="k">var</span> document = <span class="k">await</span> collaboration.OpenAsync(<span class="s">"design-review"</span>);
+
+<span class="k">using</span> (<span class="k">var</span> transaction = document.BeginTransaction())
+{
+    document.Map.Set(<span class="s">"title"</span>, <span class="s">"Q3 planning"</span>);
+    document.Array(<span class="s">"attendees"</span>).Push(<span class="s">"Ada"</span>, <span class="s">"Grace"</span>);
+    document.Text(<span class="s">"notes"</span>).Insert(0, <span class="s">"Agenda:\n"</span>);
+}</pre>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why a CRDT?</h2>
+        <p class="bb-section-sub">
+            Without one you have to pick a loser: lock the document, funnel every keystroke through a server that
+            rewrites everyone's edits into one agreed order, or save last and overwrite somebody's work. A CRDT is
+            built so that applying edits in any order, more than once, or after any delay gives the same result on
+            every copy.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="Last write wins and operational transformation compared with Bcrdt">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>Last write wins</th><th>Operational transformation</th><th>Bcrdt</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Two people typing at once</td><td>One of them loses their work</td><td>Both survive, ordered by the server</td><td>Both survive, in the same order on every replica</td></tr>
+                    <tr><td>Editing offline</td><td>Overwrites whatever changed meanwhile</td><td>Not possible - every edit needs the server</td><td>A replica that has not heard anything for a while</td></tr>
+                    <tr><td>Central authority</td><td>The store - the last write to reach it wins</td><td>An ordering server, for every keystroke</td><td>None - a relay only forwards bytes</td></tr>
+                    <tr><td>What goes over the wire</td><td>The whole record</td><td>Every operation, transformed</td><td>One small delta per transaction</td></tr>
+                    <tr><td>A message delivered twice</td><td>A late duplicate can overwrite a newer value</td><td>Has to be prevented</td><td>Harmless - applying it again changes nothing</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bcrdt?</h3>
+                <p class="bb-card-desc">Install, register, map the relay - a collaborative editor in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Need to see it to believe it?</h3>
+                <p class="bb-card-desc">Provoke the conflicts that break naïve synchronization, and compare both replicas' raw state.</p>
+                <a href="conflicts" class="btn btn-outline">Open the conflict lab →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it runs the real engine instead of guessing what a merge decides.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this Yjs running through JavaScript interop?</summary>
+                <p>
+                    No. The engine, the wire format and the merge algorithm are C#. The only JavaScript is a small module
+                    that reads and sets the caret of a <code>&lt;textarea&gt;</code>, because the browser does not expose
+                    one to .NET - and nothing in the engine calls it.
+                </p>
+            </details>
+            <details>
+                <summary>What happens when two people change the same field at once?</summary>
+                <p>
+                    It depends on the type you chose. A <code>BcrdtMap</code> key keeps one of the two values -
+                    deterministically, the same one everywhere, but arbitrarily. A nested <code>BcrdtText</code> keeps
+                    both edits. Where losing a write is unacceptable, model the value as a nested collaborative type.
+                </p>
+            </details>
+            <details>
+                <summary>Does it need a server?</summary>
+                <p>
+                    Not to merge. Replicas need a way to exchange messages, and the relays in <code>Bit.Bcrdt.Server</code>
+                    forward them without decoding one or holding a replica. Replicas in one process - as on every page of
+                    this site but the live one - talk over the in-memory transport and need nothing at all.
+                </p>
+            </details>
+            <details>
+                <summary>What happens while a replica is offline?</summary>
+                <p>
+                    Nothing special. Local edits accumulate in the document, the sync provider reconnects with jittered
+                    backoff, and the handshake sends each side what the other is missing - in both directions. There is no
+                    outbound queue: the document is the queue, and it compacts itself.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    All of them - WebAssembly, Server, Web App and Hybrid, on .NET 8, 9 and 10. The service is registered
+                    scoped, so on Blazor Server every circuit gets its own replica and its own client identity.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Let them all type at once</h2>
+        <p class="bb-section-sub">One registration, one relay, one component - and nobody's work is overwritten again.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bcrdt</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="text" class="btn btn-secondary bb-btn-lg">Browse the demos</a>
+        </div>
+    </section>
+</div>
+
+@code {
+    private const string Field = "body";
+
+    protected override string DocumentId => "demo-home";
+
+    // Two replicas of one note, each with its own service, client id, store and connection.
+    protected override string[] ReplicaLabels => ["Ada", "Grace"];
+}
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/Internals.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/Internals.razor
index c2b06fd4037..86fd8fb1e41 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/Internals.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/Internals.razor
@@ -1,140 +1,159 @@
 @page "/internals"
 @inherits ReplicaPageBase
 
-<h1>Inside the engine</h1>
+<PageTitle>Internals · Bcrdt</PageTitle>
+
+<div class="bb-intro">
+    <h1>Internals</h1>
+    <p class="bb-subtitle">
+        The machinery the other pages hide: what a replica knows, how much it is storing, and what actually goes over
+        the wire - the page to open when you want to check that the efficiency claims are true rather than take them
+        on faith.
+    </p>
+</div>
 
-<section class="prose">
-    <p>
-        This page shows the machinery the other pages hide: what a replica knows, how much it is
-        storing, and what actually goes over the wire. It is the page to open when you want to check
-        that the efficiency claims are true rather than take them on faith.
+@* Each panel carries a table of measurements under its editor, so the panels take the width the "on this page" rail would. *@
+<div class="bb-card bb-page-wide">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Two replicas, measured</h3>
+    <p class="bb-card-desc">
+        Type into either replica, or let the buttons do it, and watch what each one stores and what it would send.
     </p>
-    <p>
+
+    @if (!Ready)
+    {
+        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening two replicas…</p>
+    }
+    else
+    {
+        <div class="bb-split replicas">
+            @foreach (DemoReplica replica in Replicas)
+            {
+                <ReplicaPanel Replica="replica" ShowPresence="false">
+                    <ChildContent>
+                        <BcrdtTextArea Text="replica.Document.Text(Field)"
+                                       Presence="replica.Document.Presence"
+                                       Field="@Field"
+                                       Rows="6"
+                                       Class="editor"
+                                       Placeholder="Type here and watch the numbers below." />
+
+                        <div class="toolbar bb-toolbar">
+                            <button type="button" class="btn btn-primary" @onclick="() => TypeBurst(replica, 500)">
+                                Type 500 characters
+                            </button>
+                            <button type="button" class="btn btn-secondary" @onclick="() => Scatter(replica, 200)">
+                                Make 200 scattered edits
+                            </button>
+                        </div>
+
+                        <dl class="stats bb-params">
+                            <dt>Characters</dt>
+                            <dd>@replica.Document.Text(Field).Count.ToString("N0")</dd>
+
+                            <dt title="One per contiguous run of content. Far fewer than the character count is the point.">
+                                Blocks
+                            </dt>
+                            <dd>@BlockCount(replica).ToString("N0")</dd>
+
+                            <dt title="Characters per block. Higher means run-length encoding is working harder for you.">
+                                Characters per block
+                            </dt>
+                            <dd>@Ratio(replica)</dd>
+
+                            <dt title="What a peer sends to ask for exactly what it is missing.">
+                                State vector
+                            </dt>
+                            <dd>@replica.Document.Crdt.GetStateVector().Encode().Length bytes</dd>
+
+                            <dt title="The whole document, encoded. What a brand-new peer would receive.">
+                                Full document
+                            </dt>
+                            <dd>@FullSize(replica).ToString("N0") bytes</dd>
+
+                            <dt title="What this replica would send to a peer that is already up to date.">
+                                Delta for an up-to-date peer
+                            </dt>
+                            <dd>@NoOpSize(replica).ToString("N0") bytes</dd>
+                        </dl>
+                    </ChildContent>
+
+                    <Footer>
+                        <span class="metric">clients known: @replica.Document.Crdt.GetStateVector().Count</span>
+                    </Footer>
+                </ReplicaPanel>
+            }
+        </div>
+    }
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> What the numbers mean</h3>
+    <p class="bb-card-desc">
         The <strong>state vector</strong> is a replica's complete summary of what it has seen - one
         entry per author, a few bytes each. It is the whole of what a peer needs in order to compute
         the exact delta this replica is missing, which is why reconnecting after a long absence costs
         one small message rather than a full document transfer.
     </p>
-    <p>
+    <p class="bb-card-desc">
         <strong>Blocks</strong> are the engine's internal unit of storage. Watch the ratio between
         characters and blocks as you type: a run of consecutive typing collapses into a single block,
         so a long document typically holds a few dozen blocks rather than one per character. That
         collapse is the single most important reason collaborative text is affordable at all.
     </p>
-</section>
+</div>
 
-@if (!Ready)
+@if (Ready)
 {
-    <p class="loading">Opening two replicas…</p>
-}
-else
-{
-    <div class="panel-grid panel-grid-2">
-        @foreach (DemoReplica replica in Replicas)
-        {
-            <ReplicaPanel Replica="replica" ShowPresence="false">
-                <ChildContent>
-                    <BcrdtTextArea Text="replica.Document.Text(Field)"
-                                   Presence="replica.Document.Presence"
-                                   Field="@Field"
-                                   Rows="6"
-                                   Class="editor"
-                                   Placeholder="Type here and watch the numbers below." />
-
-                    <div class="toolbar">
-                        <button class="button" @onclick="() => TypeBurst(replica, 500)">
-                            Type 500 characters
-                        </button>
-                        <button class="button button-quiet" @onclick="() => Scatter(replica, 200)">
-                            Make 200 scattered edits
-                        </button>
-                    </div>
-
-                    <dl class="stats">
-                        <dt>Characters</dt>
-                        <dd>@replica.Document.Text(Field).Count.ToString("N0")</dd>
-
-                        <dt title="One per contiguous run of content. Far fewer than the character count is the point.">
-                            Blocks
-                        </dt>
-                        <dd>@BlockCount(replica).ToString("N0")</dd>
-
-                        <dt title="Characters per block. Higher means run-length encoding is working harder for you.">
-                            Characters per block
-                        </dt>
-                        <dd>@Ratio(replica)</dd>
-
-                        <dt title="What a peer sends to ask for exactly what it is missing.">
-                            State vector
-                        </dt>
-                        <dd>@replica.Document.Crdt.GetStateVector().Encode().Length bytes</dd>
-
-                        <dt title="The whole document, encoded. What a brand-new peer would receive.">
-                            Full document
-                        </dt>
-                        <dd>@FullSize(replica).ToString("N0") bytes</dd>
-
-                        <dt title="What this replica would send to a peer that is already up to date.">
-                            Delta for an up-to-date peer
-                        </dt>
-                        <dd>@NoOpSize(replica).ToString("N0") bytes</dd>
-                    </dl>
-                </ChildContent>
-
-                <Footer>
-                    <span class="metric">clients known: @replica.Document.Crdt.GetStateVector().Count</span>
-                </Footer>
-            </ReplicaPanel>
-        }
-    </div>
-
-    <section class="prose">
-        <h2>Updates as they happen</h2>
-        <p>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Updates as they happen</h3>
+        <p class="bb-card-desc">
             Every committed change produces exactly one update, whatever it contained - this is why a
             paste of five hundred rows is one network message rather than five hundred. The most
             recent are listed newest first, with the replica that produced them.
         </p>
         @if (_updates.Count == 0)
         {
-            <p class="hint">Nothing yet. Type into a panel above.</p>
+            <p class="bb-empty">Nothing yet. Type into a panel above.</p>
         }
         else
         {
-            <table class="log-table">
-                <thead>
-                    <tr><th>Replica</th><th>Size</th><th>Origin</th><th>Content</th></tr>
-                </thead>
-                <tbody>
-                    @foreach (UpdateRecord record in _updates)
-                    {
-                        <tr>
-                            <td><span class="swatch" style="background: @record.Color"></span>@record.Label</td>
-                            <td>@record.Size bytes</td>
-                            <td>@record.Origin</td>
-                            <td class="mono">@record.Preview</td>
-                        </tr>
-                    }
-                </tbody>
-            </table>
+            <div class="bb-scroll">
+                <table class="bb-table log-table">
+                    <thead>
+                        <tr><th>Replica</th><th>Size</th><th>Origin</th><th>Content</th></tr>
+                    </thead>
+                    <tbody>
+                        @foreach (UpdateRecord record in _updates)
+                        {
+                            <tr>
+                                <td class="bb-table-key"><span class="replica-dot" style="--replica-color: @record.Color" aria-hidden="true"></span>@record.Label</td>
+                                <td class="bb-nowrap">@record.Size bytes</td>
+                                <td>@record.Origin</td>
+                                <td class="bb-mono">@record.Preview</td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
         }
-        <p>
-            <button class="button button-quiet" @onclick="() => _updates.Clear()">Clear the log</button>
-        </p>
-    </section>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="() => _updates.Clear()">Clear the log</button>
+        </div>
+    </div>
 
-    <section class="prose">
-        <h2>Full projection</h2>
-        <div class="panel-grid panel-grid-2">
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Full projection</h3>
+        <p class="bb-card-desc">The whole document as each replica projects it, which is what <code>ToJson()</code> hands an application.</p>
+        <div class="bb-split">
             @foreach (DemoReplica replica in Replicas)
             {
-                <div>
-                    <h3 class="json-title" style="border-color: @replica.Color">@replica.Label</h3>
-                    <pre class="json">@DemoJson.Format(replica.Document.ToJson())</pre>
+                <div class="projection" style="--replica-color: @replica.Color">
+                    <p class="projection-title"><span class="replica-dot" aria-hidden="true"></span>@replica.Label</p>
+                    <pre class="json bb-code">@DemoJson.Format(replica.Document.ToJson())</pre>
                 </div>
             }
         </div>
-    </section>
+    </div>
 }
 
 @code {
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/Live.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/Live.razor
index 19ab1779b32..10a2dcff474 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/Live.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/Live.razor
@@ -3,99 +3,122 @@
 @inject NavigationManager Navigation
 @inject LiveRelay Relay
 
-<h1>Live, across tabs</h1>
+<PageTitle>Live, across tabs · Bcrdt</PageTitle>
 
-<section class="prose">
-    <p>
+<div class="bb-intro">
+    <h1>Live, across tabs</h1>
+    <p class="bb-subtitle">
         Every other page in this demo keeps its replicas side by side in one tab, talking over the library's
         in-memory transport. This one is the real thing: one replica per browser tab, meeting through the demo
         server. Open the link below in another tab, another browser or on your phone and type in both.
     </p>
-    <p>
-        It is also the page an application would write. The document comes from the app's own
-        <code>AddBitBcrdtServices</code> registration and is opened by <code>BcrdtCollaborationScope</code>; the
-        editor is <code>BcrdtTextArea</code> and the list of people is <code>BcrdtPresenceView</code>. The server
-        only relays: <code>BcrdtHub</code> from <code>Bit.Bcrdt.Server</code> forwards each message to the other
-        tabs on the document without decoding it, and no copy of the document lives on the server - when the last
-        tab closes, it is gone.
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> One replica per tab</h3>
+    <p class="bb-card-desc">
+        This tab is one replica. Share the link, and every tab that opens it is another.
     </p>
-    <p class="callout">
+
+    @if (Room is null || !RendererInfo.IsInteractive)
+    {
+        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Connecting…</p>
+    }
+    else
+    {
+        <div class="live-bar">
+            <div class="live-share">
+                <span class="bb-overline">Share this link</span>
+                <a class="live-link" href="@ShareLink" target="_blank">@ShareLink</a>
+            </div>
+            <nav class="live-relays bb-tabs" aria-label="Relay">
+                <a class="@RelayClass(LiveRelayKind.SignalR)" href="@RelayLink(LiveRelayKind.SignalR)"
+                   aria-current="@(Kind == LiveRelayKind.SignalR ? "page" : null)">SignalR hub</a>
+                <a class="@RelayClass(LiveRelayKind.WebSocket)" href="@RelayLink(LiveRelayKind.WebSocket)"
+                   aria-current="@(Kind == LiveRelayKind.WebSocket ? "page" : null)">WebSocket endpoint</a>
+            </nav>
+        </div>
+
+        <BcrdtCollaborationScope DocumentId="@DocumentId" User="_me" OnOpened="Opened" Context="document">
+            <LoadingContent>
+                <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening the document…</p>
+            </LoadingContent>
+            <ChildContent>
+                <section class="panel bb-demo replica @(_online ? null : "panel-offline")" style="--replica-color: @_me.Color">
+                    <header class="panel-head bb-demo-bar">
+                        <span class="replica-dot" aria-hidden="true"></span>
+                        <span class="panel-name">You are @_me.Name</span>
+                        <ConnectionBadge Status="document.ConnectionStatus" WantsConnection="_online" />
+                        <button type="button" class="panel-toggle btn btn-secondary" @onclick="() => ToggleAsync(document)">
+                            @(_online ? "Go offline" : "Go online")
+                        </button>
+                    </header>
+
+                    <div class="panel-presence">
+                        <span class="presence-label">Here now:</span>
+                        <BcrdtPresenceView Presence="document.Presence" Class="presence-list" />
+                    </div>
+
+                    <div class="panel-body">
+                        <BcrdtTextArea Text="@document.Text(Field)"
+                                       Presence="document.Presence"
+                                       Field="@Field"
+                                       Rows="12"
+                                       Class="editor"
+                                       Placeholder="Type here, then open the link above in another tab." />
+                    </div>
+
+                    <footer class="panel-foot">
+                        <span class="metric">@document.Text(Field).Count characters</span>
+                        <span class="metric">@(document.Presence.Others.Count == 1 ? "1 other tab" : $"{document.Presence.Others.Count} other tabs") on this document</span>
+                        @if (!_online)
+                        {
+                            <span class="metric metric-warn">
+                                editing offline - changes are held locally until this tab reconnects
+                            </span>
+                        }
+                        <span class="panel-client" title="The engine's per-session client identifier. Every tab has its own.">
+                            client @((document.ClientId % 100_000).ToString("D5"))
+                        </span>
+                    </footer>
+                </section>
+            </ChildContent>
+        </BcrdtCollaborationScope>
+    }
+
+    <div class="bb-note bb-note-warn">
         <strong>The thing worth trying.</strong> Take one tab offline, type a paragraph into it, type something
         else into another tab, then bring the first one back. Both paragraphs survive, in the same order in every
         tab - the handshake sends each side what the other is missing, in both directions.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The page an application would write</h3>
+    <p class="bb-card-desc">
+        The document comes from the app's own <code>AddBitBcrdtServices</code> registration and is opened by
+        <code>BcrdtCollaborationScope</code>; the editor is <code>BcrdtTextArea</code> and the list of people is
+        <code>BcrdtPresenceView</code>. The server only relays: <code>BcrdtHub</code> from <code>Bit.Bcrdt.Server</code>
+        forwards each message to the other tabs on the document without decoding it, and no copy of the document
+        lives on the server - when the last tab closes, it is gone.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Two relays</h3>
+    <p class="bb-card-desc">
+        The demo server maps both relays <code>Bit.Bcrdt.Server</code> ships: <code>BcrdtHub</code> for the SignalR
+        transport of <code>Bit.Bcrdt.SignalR</code>, and the WebSocket endpoint for the WebSocket transport built
+        into <code>Bit.Bcrdt</code>. Tabs only meet on the same relay, so the relay is part of the link you share.
     </p>
-</section>
+    <pre class="bb-code"><span class="c">// Demo/Server/Program.cs</span>
+builder.Services.AddBitBcrdtHub();   <span class="c">// AddSignalR, with a receive limit sized for sync messages</span>
+<span class="c">// ...</span>
+app.UseWebSockets();
 
-@if (Room is null || !RendererInfo.IsInteractive)
-{
-    <p class="loading">Connecting…</p>
-}
-else
-{
-    <section class="live-bar">
-        <span class="live-label">Share this link:</span>
-        <a class="live-link" href="@ShareLink" target="_blank">@ShareLink</a>
-        <span class="live-label">Relay:</span>
-        <a class="@RelayClass(LiveRelayKind.SignalR)" href="@RelayLink(LiveRelayKind.SignalR)">SignalR hub</a>
-        <a class="@RelayClass(LiveRelayKind.WebSocket)" href="@RelayLink(LiveRelayKind.WebSocket)">WebSocket endpoint</a>
-    </section>
-
-    <BcrdtCollaborationScope DocumentId="@DocumentId" User="_me" OnOpened="Opened" Context="document">
-        <LoadingContent>
-            <p class="loading">Opening the document…</p>
-        </LoadingContent>
-        <ChildContent>
-            <section class="panel @(_online ? "" : "panel-offline")">
-                <header class="panel-head" style="background: @_me.Color">
-                    <span class="panel-name">You are @_me.Name</span>
-                    <span class="panel-client" title="The engine's per-session client identifier. Every tab has its own.">
-                        client @((document.ClientId % 100_000).ToString("D5"))
-                    </span>
-                    <ConnectionBadge Status="document.ConnectionStatus" WantsConnection="_online" />
-                    <button class="panel-toggle" @onclick="() => ToggleAsync(document)">
-                        @(_online ? "Go offline" : "Go online")
-                    </button>
-                </header>
-
-                <div class="panel-presence">
-                    <span class="presence-label">Here now:</span>
-                    <BcrdtPresenceView Presence="document.Presence" Class="presence-list" />
-                </div>
-
-                <div class="panel-body">
-                    <BcrdtTextArea Text="@document.Text(Field)"
-                                   Presence="document.Presence"
-                                   Field="@Field"
-                                   Rows="12"
-                                   Class="editor"
-                                   Placeholder="Type here, then open the link above in another tab." />
-                </div>
-
-                <footer class="panel-foot">
-                    <span class="metric">@document.Text(Field).Count characters</span>
-                    <span class="metric">@(document.Presence.Others.Count == 1 ? "1 other tab" : $"{document.Presence.Others.Count} other tabs") on this document</span>
-                    @if (!_online)
-                    {
-                        <span class="metric metric-warn">
-                            editing offline - changes are held locally until this tab reconnects
-                        </span>
-                    }
-                </footer>
-            </section>
-        </ChildContent>
-    </BcrdtCollaborationScope>
-
-    <section class="prose">
-        <h2>Two relays</h2>
-        <p>
-            The demo server maps both relays <code>Bit.Bcrdt.Server</code> ships:
-            <code>app.MapHub&lt;BcrdtHub&gt;("/hub/bcrdt")</code> for the SignalR transport of
-            <code>Bit.Bcrdt.SignalR</code>, and <code>app.MapBitBcrdtWebSocket("/ws/bcrdt/{documentId}")</code> for
-            the WebSocket transport built into <code>Bit.Bcrdt</code>. Tabs only meet on the same relay, so the relay
-            is part of the link you share.
-        </p>
-    </section>
-}
+app.MapHub&lt;BcrdtHub&gt;(<span class="s">"/hub/bcrdt"</span>);
+app.MapBitBcrdtWebSocket(<span class="s">"/ws/bcrdt/{documentId}"</span>);</pre>
+</div>
 
 @code {
     private const string Field = "body";
@@ -164,7 +187,7 @@ else
         return Navigation.ToAbsoluteUri(path).ToString();
     }
 
-    private string RelayClass(LiveRelayKind kind) => kind == Kind ? "live-relay live-relay-active" : "live-relay";
+    private string RelayClass(LiveRelayKind kind) => kind == Kind ? "live-relay live-relay-active active" : "live-relay";
 
     private static bool IsValidRoom(string room) =>
         room.Length is > 0 and <= 32 && room.All(c => c is (>= 'a' and <= 'z') or (>= '0' and <= '9') or '-');
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/McpServer.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/McpServer.razor
index 0ea6ec1838e..50bf58d87e3 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/McpServer.razor
@@ -3,21 +3,20 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - bit Bcrdt</PageTitle>
+<PageTitle>MCP server · Bcrdt</PageTitle>
 
-<h1>MCP server</h1>
-
-<section class="prose">
-    <p>
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
         This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent adding collaboration
         with Bit.Bcrdt reads the library itself - the compiled API documentation of its four packages, its guide,
         its real CRDT engine and decoders, and these demo pages - instead of guessing at an API it half remembers,
         or at what a merge will decide. Every tool is read-only.
     </p>
-</section>
+</div>
 
-<section class="prose">
-    <h2>Connect a client</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else:
@@ -26,47 +25,49 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre class="code"><code>@ClientConfig</code></pre>
+    <pre class="bb-code">@ClientConfig</pre>
 </section>
 
-<section class="prose">
-    <h2>Tools</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
-    <table class="log-table">
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code>SearchBcrdt</code></td>
-                <td>Everything at once - the guide, every public member of the four packages, the setup guides and the demo sources - each hit with the exact follow-up call.</td>
-            </tr>
-            <tr>
-                <td><code>GetBcrdtSetupGuide</code></td>
-                <td>The complete wiring for one hosting model - web-app, standalone-wasm, server, hybrid, websocket or console - or the index of them.</td>
-            </tr>
-            <tr>
-                <td><code>GetBcrdtGuideSection</code></td>
-                <td>One section of the reference guide, or the index of sections.</td>
-            </tr>
-            <tr>
-                <td><code>GetBcrdtApi</code></td>
-                <td>One public type with its constructors, parameters, properties and methods, their real defaults and their documentation - or the index of types.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBcrdtMerge</code></td>
-                <td>Runs the real engine on concurrent edits by two to four replicas and reports each one's state before the merge, what they converge to, every update's size, and what was decided - one value wins for a map key, both survive in a text.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBcrdtUpdate</code></td>
-                <td>Decodes an update or a protocol message - its kind, the blocks per client, the delete set, the state vector it implies and its sizes - or says why the library rejects it.</td>
-            </tr>
-            <tr>
-                <td><code>GetBcrdtSourceFile</code></td>
-                <td>One demo file verbatim - every page here is a set of real replicas merging for real - or the index of files.</td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bb-table-key"><code>SearchBcrdt</code></td>
+                    <td>Everything at once - the guide, every public member of the four packages, the setup guides and the demo sources - each hit with the exact follow-up call.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBcrdtSetupGuide</code></td>
+                    <td>The complete wiring for one hosting model - web-app, standalone-wasm, server, hybrid, websocket or console - or the index of them.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBcrdtGuideSection</code></td>
+                    <td>One section of the reference guide, or the index of sections.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBcrdtApi</code></td>
+                    <td>One public type with its constructors, parameters, properties and methods, their real defaults and their documentation - or the index of types.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>InspectBcrdtMerge</code></td>
+                    <td>Runs the real engine on concurrent edits by two to four replicas and reports each one's state before the merge, what they converge to, every update's size, and what was decided - one value wins for a map key, both survive in a text.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>InspectBcrdtUpdate</code></td>
+                    <td>Decodes an update or a protocol message - its kind, the blocks per client, the delete set, the state vector it implies and its sizes - or says why the library rejects it.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key"><code>GetBcrdtSourceFile</code></td>
+                    <td>One demo file verbatim - every page here is a set of real replicas merging for real - or the index of files.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 
     <p>
         The guide, the API, the setup guides and the sources are also exposed as <code>bcrdt://</code> resources, and
@@ -75,20 +76,20 @@
     </p>
 </section>
 
-<section class="prose">
-    <h2>The same tools over plain HTTP</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
+    <ul class="bb-detail-list">
         <li><a href="/api/mcp/SearchBcrdt?query=concurrent%20map%20writes" target="_blank" rel="noopener">/api/mcp/SearchBcrdt?query=concurrent map writes</a></li>
         <li><a href="/api/mcp/GetBcrdtSetupGuide?hostingModel=server" target="_blank" rel="noopener">/api/mcp/GetBcrdtSetupGuide?hostingModel=server</a></li>
         <li><a href="/api/mcp/GetBcrdtApi?typeName=BcrdtCollaborativeDocument" target="_blank" rel="noopener">/api/mcp/GetBcrdtApi?typeName=BcrdtCollaborativeDocument</a></li>
-        <li><a href="/api/mcp/InspectBcrdtMerge" target="_blank" rel="noopener">/api/mcp/InspectBcrdtMerge</a></li>
-        <li><a href="/api/mcp/InspectBcrdtUpdate" target="_blank" rel="noopener">/api/mcp/InspectBcrdtUpdate</a></li>
+        <li><a href="/api/mcp/InspectBcrdtMerge" target="_blank" rel="noopener">/api/mcp/InspectBcrdtMerge</a> (runs a sample merge)</li>
+        <li><a href="/api/mcp/InspectBcrdtUpdate" target="_blank" rel="noopener">/api/mcp/InspectBcrdtUpdate</a> (decodes a sample)</li>
         <li><a href="/api/mcp/GetBcrdtSourceFile?path=Demo/Client/Pages/Live.razor" target="_blank" rel="noopener">/api/mcp/GetBcrdtSourceFile?path=Demo/Client/Pages/Live.razor</a></li>
     </ul>
 </section>
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/NotFound.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/NotFound.razor
index b07a521df86..93f0b139d2c 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/NotFound.razor
@@ -1,5 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<h1>Not Found</h1>
-<p>Sorry, the content you are looking for does not exist.</p>
+<PageTitle>Not found · Bcrdt</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Bcrdt/Demo/Client/Pages/UndoRedo.razor b/src/Utilities/Bcrdt/Demo/Client/Pages/UndoRedo.razor
index ba2bce35b7b..e97ac07d5e3 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Pages/UndoRedo.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Pages/UndoRedo.razor
@@ -1,92 +1,117 @@
 @page "/undo"
 @inherits ReplicaPageBase
 
-<h1>Collaborative undo</h1>
+<PageTitle>Collaborative undo · Bcrdt</PageTitle>
 
-<section class="prose">
-    <p>
-        Undo in a single-user editor means "put the document back how it was". In a collaborative
-        document that would be a disaster: restoring an earlier state would throw away everything
-        your collaborators did in the meantime, and they would watch their work vanish because
-        somebody else pressed a key.
+<div class="bb-intro">
+    <h1>Collaborative undo</h1>
+    <p class="bb-subtitle">
+        Undo that reverses your own last action and leaves everyone else's work alone - which is what users expect,
+        and what a naïve "restore the previous state" undo gets badly wrong in a shared document.
     </p>
-    <p>
-        What users actually expect is <em>selective</em> undo - reverse my last action, leave
-        everybody else's alone - and that is what these two replicas implement. Each has its own undo
-        stack tracking only its own edits.
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Two replicas, two undo stacks</h3>
+    <p class="bb-card-desc">
+        Each replica has its own undo stack, tracking only its own edits.
     </p>
-    <p class="callout">
+
+    @if (!Ready)
+    {
+        <p class="loading bb-empty"><span class="bb-spinner" aria-hidden="true"></span> Opening two replicas…</p>
+    }
+    else
+    {
+        <div class="bb-split replicas">
+            @foreach (DemoReplica replica in Replicas)
+            {
+                <ReplicaPanel Replica="replica">
+                    <ChildContent>
+                        <BcrdtTextArea Text="replica.Document.Text(Field)"
+                                       Presence="replica.Document.Presence"
+                                       Field="@Field"
+                                       Rows="8"
+                                       Class="editor"
+                                       Placeholder="Type here, then undo it." />
+
+                        <div class="toolbar bb-toolbar">
+                            <button type="button" class="btn btn-primary"
+                                    @onclick="() => Undo(replica)"
+                                    disabled="@(!CanUndo(replica))">
+                                Undo
+                            </button>
+                            <button type="button" class="btn btn-secondary"
+                                    @onclick="() => Redo(replica)"
+                                    disabled="@(!CanRedo(replica))">
+                                Redo
+                            </button>
+                            <button type="button" class="btn btn-secondary" @onclick="() => Break(replica)">
+                                End the current step
+                            </button>
+                        </div>
+                    </ChildContent>
+
+                    <Footer>
+                        <span class="metric">@Stack(replica).UndoCount undoable step(s)</span>
+                        <span class="metric">@Stack(replica).RedoCount redoable step(s)</span>
+                    </Footer>
+                </ReplicaPanel>
+            }
+        </div>
+    }
+
+    <div class="bb-note bb-note-warn">
         <strong>The thing worth trying.</strong> Type a sentence into A and wait for it to appear in
         B. Then type a different sentence into B. Now press <em>Undo</em> on A. A's sentence
         disappears from <em>both</em> panels - because undo is an ordinary edit that synchronizes
         like any other - while B's sentence is untouched, even though it came later. A's undo stack
         never contained it.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Undo mine, not yours</h3>
+    <p class="bb-card-desc">
+        Undo in a single-user editor means "put the document back how it was". In a collaborative
+        document that would be a disaster: restoring an earlier state would throw away everything
+        your collaborators did in the meantime, and they would watch their work vanish because
+        somebody else pressed a key.
     </p>
-    <p>
+    <p class="bb-card-desc">
+        What users actually expect is <em>selective</em> undo - reverse my last action, leave
+        everybody else's alone - and that is what these two replicas implement.
+    </p>
+    <p class="bb-card-desc">
         Note also that consecutive keystrokes collapse into one undo step, so undo removes a word or
         a phrase rather than a single character. A remote edit arriving between two of your
         keystrokes ends the current step, which is what keeps the boundaries sensible when several
         people are working at once.
     </p>
-</section>
-
-@if (!Ready)
-{
-    <p class="loading">Opening two replicas…</p>
-}
-else
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Why this is not a rewind</h3>
+    <p class="bb-card-desc">
+        An undo here does not restore a previous state. It creates <em>new</em> operations that
+        delete what the action inserted and re-insert what it deleted, and those operations
+        travel to peers exactly like a keystroke. That is why the effect appears on the other
+        replica, why it merges rather than clobbering, and why it can itself be undone.
+    </p>
+    <p class="bb-card-desc">
+        It is also why an undo can survive a disconnection: take a replica offline, undo
+        something, bring it back, and the undo reaches its peer whenever the connection returns.
+    </p>
+    <pre class="bb-code"><span class="c">// One stack per editing surface, scoped to the text it edits.</span>
+<span class="k">var</span> undo = <span class="k">new</span> BcrdtUndoManager(document.Text(<span class="s">"body"</span>), <span class="k">new</span> BcrdtUndoManagerOptions
 {
-    <div class="panel-grid panel-grid-2">
-        @foreach (DemoReplica replica in Replicas)
-        {
-            <ReplicaPanel Replica="replica">
-                <ChildContent>
-                    <BcrdtTextArea Text="replica.Document.Text(Field)"
-                                   Presence="replica.Document.Presence"
-                                   Field="@Field"
-                                   Rows="8"
-                                   Class="editor"
-                                   Placeholder="Type here, then undo it." />
-
-                    <div class="toolbar">
-                        <button class="button"
-                                @onclick="() => Undo(replica)"
-                                disabled="@(!CanUndo(replica))">
-                            Undo
-                        </button>
-                        <button class="button"
-                                @onclick="() => Redo(replica)"
-                                disabled="@(!CanRedo(replica))">
-                            Redo
-                        </button>
-                        <button class="button button-quiet" @onclick="() => Break(replica)">
-                            End the current step
-                        </button>
-                    </div>
-                </ChildContent>
-
-                <Footer>
-                    <span class="metric">@Stack(replica).UndoCount undoable step(s)</span>
-                    <span class="metric">@Stack(replica).RedoCount redoable step(s)</span>
-                </Footer>
-            </ReplicaPanel>
-        }
-    </div>
+    <span class="c">// Adds to the default set, which already tracks untagged (null-origin) edits.</span>
+    TrackedOrigins = { <span class="k">typeof</span>(BcrdtTextArea) },
+});
 
-    <section class="prose">
-        <h2>Why this is not a rewind</h2>
-        <p>
-            An undo here does not restore a previous state. It creates <em>new</em> operations that
-            delete what the action inserted and re-insert what it deleted, and those operations
-            travel to peers exactly like a keystroke. That is why the effect appears on the other
-            replica, why it merges rather than clobbering, and why it can itself be undone.
-        </p>
-        <p>
-            It is also why an undo can survive a disconnection: take a replica offline, undo
-            something, bring it back, and the undo reaches its peer whenever the connection returns.
-        </p>
-    </section>
-}
+undo.Undo();   <span class="c">// removes what I did, not what they did</span>
+undo.Redo();</pre>
+</div>
 
 @code {
     private const string Field = "body";
diff --git a/src/Utilities/Bcrdt/Demo/Client/Routes.razor b/src/Utilities/Bcrdt/Demo/Client/Routes.razor
index 105855d4577..989f92736d1 100644
--- a/src/Utilities/Bcrdt/Demo/Client/Routes.razor
+++ b/src/Utilities/Bcrdt/Demo/Client/Routes.razor
@@ -1,6 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/Bcrdt/Demo/Server/Bit.Bcrdt.Demo.Server.csproj b/src/Utilities/Bcrdt/Demo/Server/Bit.Bcrdt.Demo.Server.csproj
index 0c7a3dd2a20..1f3383d7c66 100644
--- a/src/Utilities/Bcrdt/Demo/Server/Bit.Bcrdt.Demo.Server.csproj
+++ b/src/Utilities/Bcrdt/Demo/Server/Bit.Bcrdt.Demo.Server.csproj
@@ -44,9 +44,10 @@
         <!-- Every demo page - each one is a set of real replicas merging for real - plus the replicas,
              transports and components they share and the client half of the hosting. The MCP page
              describes this server rather than the library, and the not-found page teaches nothing
-             about collaboration. -->
+             about collaboration. Nor does the site chrome: Layout\ and the DocsCatalog.cs that drives it
+             are the header, docs shell, search and footer every Utilities demo shares. -->
         <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
+                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
             <LogicalName>BcrdtSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
         </EmbeddedResource>
 
diff --git a/src/Utilities/Bcrdt/Demo/Server/Components/App.razor b/src/Utilities/Bcrdt/Demo/Server/Components/App.razor
index be9dcfb80f8..1ecf224c4d0 100644
--- a/src/Utilities/Bcrdt/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bcrdt/Demo/Server/Components/App.razor
@@ -4,10 +4,30 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="description" content="bit Bcrdt (Bit.Bcrdt) - real-time collaborative editing for .NET and Blazor, written natively in C#: a CRDT engine for text, lists, maps and sets, a synchronization protocol, presence, offline-first persistence and selective undo, with no JavaScript CRDT library." />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Bcrdt (Bit.Bcrdt) - real-time collaborative editing for .NET and Blazor, written natively in C#: a CRDT engine for text, lists, maps and sets, a synchronization protocol, presence, offline-first persistence and selective undo, with no JavaScript CRDT library." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes - and the live page is made to be shared. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Bcrdt" />
+    <meta property="og:title" content="Bcrdt - real-time collaboration for .NET and Blazor" />
+    <meta property="og:description" content="A CRDT engine, sync, presence, offline-first persistence and selective undo, written in C# - no JavaScript CRDT library, no interop in the engine." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. The library ships no stylesheet: its components render plain markup, and
+       the one script BcrdtTextArea needs is imported on demand. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Bcrdt.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -24,6 +44,7 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bcrdt/Demo/Server/Services/BcrdtSourceCatalog.cs b/src/Utilities/Bcrdt/Demo/Server/Services/BcrdtSourceCatalog.cs
index a8ad42ce249..5d6e84c9634 100644
--- a/src/Utilities/Bcrdt/Demo/Server/Services/BcrdtSourceCatalog.cs
+++ b/src/Utilities/Bcrdt/Demo/Server/Services/BcrdtSourceCatalog.cs
@@ -258,7 +258,6 @@ private static string KindOf(string path)
         if (path.StartsWith("Demo/Client/Pages/", StringComparison.OrdinalIgnoreCase)) return "Page";
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
-            path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -397,8 +396,8 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"///\s*<summary>(?<text>.*?)</summary>", RegexOptions.Singleline)]
     private static partial Regex XmlSummaryRegex();
 
-    // The overview opens with a lede; every other page with the first paragraph of its prose section.
-    [GeneratedRegex(@"<p class=""lede"">(?<text>.*?)</p>|<section class=""prose"">\s*<p>(?<text>.*?)</p>", RegexOptions.Singleline)]
+    // A page opens with its title block: the h1, then the paragraph that says what the page shows.
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex PageIntroRegex();
 
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/app.css b/src/Utilities/Bcrdt/Demo/Server/wwwroot/app.css
index 992414a1d43..7b51a42ea90 100644
--- a/src/Utilities/Bcrdt/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/app.css
@@ -1,593 +1,2820 @@
-/*
-    Deliberately plain and self-contained: no framework, no CDN, no web fonts. The demo's job is to
-    make collaborative behaviour legible, so the styling stays out of the way - a neutral palette,
-    generous reading measure for the explanatory prose, and one strong colour per replica so a panel
-    and its name in a presence list can be matched up by eye.
-*/
-
-:root {
-    --ink: #1b1d21;
-    --ink-soft: #5b6169;
-    --ink-faint: #878d95;
-    --paper: #ffffff;
-    --wash: #f5f6f8;
-    --line: #dfe2e7;
-    --accent: #2f5bd7;
-    --good: #1a7f4b;
-    --busy: #a2650a;
-    --bad: #b3261e;
-    --radius: 8px;
-    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
-}
-
-* { box-sizing: border-box; }
-
-html, body {
-    margin: 0;
-    padding: 0;
-    background: var(--wash);
-    color: var(--ink);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 1.55;
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
 }
 
-.boot {
-    padding: 3rem;
-    color: var(--ink-faint);
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
 }
 
-/* ---------- shell ---------- */
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
 
-.shell {
-    display: grid;
-    grid-template-columns: 250px minmax(0, 1fr);
-    min-height: 100vh;
-    align-items: start;
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
 }
 
-.content {
-    padding: 2rem 2.5rem 5rem;
-    min-width: 0;
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
 }
 
-@media (max-width: 900px) {
-    .shell { grid-template-columns: minmax(0, 1fr); }
-}
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
 
-/* ---------- navigation ---------- */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
 
-.nav {
-    position: sticky;
-    top: 0;
-    align-self: start;
-    height: 100vh;
-    overflow-y: auto;
-    padding: 1.5rem 1.25rem;
-    background: var(--paper);
-    border-right: 1px solid var(--line);
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
 }
 
-/* Single-column layout: the navigation becomes an ordinary block above the content. Left sticky and
-   a full viewport tall, it would fill the whole first screen before any demo appeared. */
-@media (max-width: 900px) {
-    .nav {
-        position: static;
-        height: auto;
-        overflow-y: visible;
-        border-right: none;
-        border-bottom: 1px solid var(--line);
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
     }
 }
 
-.nav-brand { margin-bottom: 1.5rem; }
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
 
-.nav-title {
-    display: block;
-    font-weight: 650;
-    font-size: 1.05rem;
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
 }
 
-.nav-subtitle {
-    display: block;
-    font-size: .8rem;
-    color: var(--ink-faint);
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
 }
 
-.nav-links {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.nav-links li { margin-bottom: .75rem; }
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
 
-.nav-links a {
-    display: block;
-    color: var(--ink);
-    text-decoration: none;
-    font-weight: 500;
-    padding: .3rem .5rem;
-    margin-left: -.5rem;
-    border-radius: 6px;
+img,
+svg {
+    max-width: 100%;
 }
 
-.nav-links a:hover { background: var(--wash); }
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
 
-.nav-links a.active {
-    background: var(--accent);
-    color: #fff;
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
 }
 
-.nav-note {
-    display: block;
-    font-size: .75rem;
-    color: var(--ink-faint);
-    padding-left: 0;
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
 }
 
-.nav-foot {
-    margin-top: 2rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--line);
-    font-size: .75rem;
-    color: var(--ink-faint);
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
 }
 
-/* ---------- prose ---------- */
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
 
+/* Title1 */
 h1 {
-    font-size: 1.75rem;
-    margin: 0 0 1rem;
-    letter-spacing: -.01em;
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
 }
 
+/* Title3 */
 h2 {
-    font-size: 1.2rem;
-    margin: 2.5rem 0 .75rem;
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
 }
 
-h3 { font-size: 1rem; margin: 0 0 .5rem; }
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
 
-.prose { max-width: 68ch; }
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
 
-.prose p { margin: 0 0 .9rem; }
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
 
-.lede { font-size: 1.05rem; color: var(--ink-soft); }
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
 
-.callout {
-    background: #fffaf0;
-    border-left: 3px solid #e0a02a;
-    padding: .85rem 1rem;
-    border-radius: 0 var(--radius) var(--radius) 0;
+p {
+    margin: 0 0 .75rem;
 }
 
-.hint, .empty {
-    color: var(--ink-faint);
-    font-size: .85rem;
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
 }
 
-.loading { color: var(--ink-faint); }
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
 
-.sub {
-    font-size: .8rem;
-    text-transform: uppercase;
-    letter-spacing: .05em;
-    color: var(--ink-faint);
-    margin: 1rem 0 .35rem;
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
 }
 
-code, .mono { font-family: var(--mono); font-size: .85em; }
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
 
-code { color: #a3306e; }
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
 
-/* A block of sample code. Scrolls rather than overflowing the reading column, because code lines
-   do not wrap. */
-.code {
-    background: #1e2128;
-    color: #e6e9ef;
-    font-family: var(--mono);
-    font-size: .8rem;
-    line-height: 1.5;
-    padding: .85rem 1rem;
-    border-radius: var(--radius);
-    overflow-x: auto;
-    margin: 0 0 1rem;
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
 }
 
-.code code { color: inherit; font-size: inherit; }
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
 
-/* ---------- replica panels ---------- */
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
 
-.panel-grid {
-    display: grid;
-    gap: 1.25rem;
-    margin: 1.75rem 0;
-    align-items: start;
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
 }
 
-.panel-grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
-.panel-grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
 
-.panel {
-    background: var(--paper);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    overflow: hidden;
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
     min-width: 0;
 }
 
-/* An offline replica is visibly set apart, because "why is this one different" is the question the
-   offline demos are trying to provoke. */
-.panel-offline { opacity: .92; box-shadow: inset 0 0 0 2px #e9d8b4; }
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
 
-.panel-head {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    flex-wrap: wrap;
-    padding: .55rem .75rem;
-    color: #fff;
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
 }
 
-.panel-name { font-weight: 600; }
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
 
-.panel-client {
-    font-family: var(--mono);
-    font-size: .7rem;
-    opacity: .85;
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
 }
 
-.panel-toggle {
-    margin-left: auto;
-    background: rgba(255, 255, 255, .22);
-    border: 1px solid rgba(255, 255, 255, .5);
-    color: #fff;
-    border-radius: 5px;
-    padding: .2rem .6rem;
-    font-size: .78rem;
-    cursor: pointer;
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
 }
 
-.panel-toggle:hover { background: rgba(255, 255, 255, .34); }
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
 
-.panel-presence {
-    display: flex;
+.btn,
+button.btn {
+    display: inline-flex;
     align-items: center;
-    gap: .5rem;
-    flex-wrap: wrap;
-    padding: .45rem .75rem;
-    background: var(--wash);
-    border-bottom: 1px solid var(--line);
-    font-size: .8rem;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.presence-label { color: var(--ink-faint); }
+.btn:hover {
+    text-decoration: none;
+}
 
-.presence-list { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
 
-.presence-empty { color: var(--ink-faint); font-style: italic; }
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
 
-.panel-body { padding: .85rem; }
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
 
-.panel-foot {
-    display: flex;
-    flex-wrap: wrap;
-    gap: .5rem .9rem;
-    padding: .5rem .75rem;
-    border-top: 1px solid var(--line);
-    background: var(--wash);
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
 }
 
-/* ---------- badges and metrics ---------- */
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
 
-.badge {
-    font-size: .7rem;
-    font-weight: 600;
-    padding: .12rem .5rem;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, .25);
-    border: 1px solid rgba(255, 255, 255, .45);
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
 }
 
-.badge-good { background: rgba(255, 255, 255, .95); color: var(--good); }
-.badge-busy { background: rgba(255, 255, 255, .95); color: var(--busy); }
-.badge-bad { background: rgba(255, 255, 255, .95); color: var(--bad); }
-.badge-offline { background: rgba(0, 0, 0, .22); color: #fff; }
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
 
-.metric { font-size: .75rem; color: var(--ink-soft); }
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
 
-.metric-warn { color: var(--busy); font-weight: 500; }
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
 
-.swatch {
-    display: inline-block;
-    width: .6rem;
-    height: .6rem;
-    border-radius: 50%;
-    margin-right: .4rem;
-    vertical-align: baseline;
-}
-
-/* ---------- controls ---------- */
-
-.button {
-    background: var(--accent);
-    color: #fff;
-    border: none;
-    border-radius: 6px;
-    padding: .4rem .85rem;
-    font-size: .85rem;
-    font-weight: 500;
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
     cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-.button:hover { filter: brightness(1.08); }
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
 
-.button:disabled { background: var(--line); color: var(--ink-faint); cursor: not-allowed; }
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
 
-.button-quiet {
-    background: var(--paper);
-    color: var(--ink);
-    border: 1px solid var(--line);
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.button-quiet:hover { background: var(--wash); filter: none; }
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
 
-.icon-button {
-    background: none;
-    border: none;
-    color: var(--ink-faint);
-    cursor: pointer;
-    font-size: 1rem;
-    padding: .1rem .35rem;
-    border-radius: 4px;
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
 }
 
-.icon-button:hover { background: var(--wash); color: var(--ink); }
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
 
-.icon-danger:hover { color: var(--bad); }
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
 
-.toolbar {
-    display: flex;
-    gap: .5rem;
-    flex-wrap: wrap;
-    margin-top: .75rem;
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
 }
 
-.input, .field-input, .editor {
-    width: 100%;
-    font: inherit;
-    color: inherit;
-    background: var(--paper);
-    border: 1px solid var(--line);
-    border-radius: 6px;
-    padding: .45rem .6rem;
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
 }
 
-.input:focus, .field-input:focus, .editor:focus {
-    outline: 2px solid var(--accent);
-    outline-offset: -1px;
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
 }
 
-.editor {
-    font-family: var(--mono);
-    font-size: .85rem;
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
     line-height: 1.5;
-    resize: vertical;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
 }
 
-.field { display: block; margin-bottom: .9rem; }
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
 
-.field-label { display: block; font-size: .85rem; font-weight: 600; }
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
 
-.field-note {
+/* A tile the whole of which is a link. */
+a.bb-card {
     display: block;
-    font-size: .72rem;
-    color: var(--ink-faint);
-    margin-bottom: .25rem;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-/* ---------- list demo ---------- */
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
 
-.demo-list { list-style: none; margin: 0; padding: 0; }
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
 
-.todo {
-    list-style: none;
-    margin: .75rem 0 0;
-    padding: 0;
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
-/* One row per item: checkbox, title, then the action buttons. The rule targets the rows, not the
-   list - a flex list would lay every item out side by side in a single row. */
-.todo-item {
+.bb-flex {
     display: flex;
-    align-items: center;
-    gap: .5rem;
-    padding: .35rem 0;
-    border-bottom: 1px solid var(--line);
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
 }
 
-.todo-item:last-child { border-bottom: none; }
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
 
-.todo-title { flex: 1; min-width: 0; }
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
 
-.todo-done .todo-title { text-decoration: line-through; color: var(--ink-faint); }
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
 
-.list-add { display: flex; gap: .5rem; margin-top: .75rem; }
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
 
-/* ---------- data read-outs ---------- */
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
 
-.json {
-    background: #1e2128;
-    color: #e6e9ef;
-    font-family: var(--mono);
-    font-size: .75rem;
-    line-height: 1.45;
-    padding: .7rem .85rem;
-    border-radius: var(--radius);
-    overflow-x: auto;
-    max-height: 340px;
-    white-space: pre-wrap;
-    word-break: break-word;
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
     margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
 }
 
-.json-title {
-    border-left: 4px solid var(--line);
-    padding-left: .5rem;
-    margin-bottom: .4rem;
-    font-size: .9rem;
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
 }
 
-.stats {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: .15rem .75rem;
-    margin: .85rem 0 0;
-    font-size: .82rem;
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
 }
 
-.stats dt { color: var(--ink-soft); }
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
 
-.stats dd {
+.bb-link-list {
+    list-style: none;
     margin: 0;
-    font-family: var(--mono);
-    text-align: right;
-    font-weight: 600;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
 }
 
-.log-table {
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
     width: 100%;
-    border-collapse: collapse;
-    font-size: .8rem;
-    background: var(--paper);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    overflow: hidden;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.log-table th, .log-table td {
-    text-align: left;
-    padding: .4rem .6rem;
-    border-bottom: 1px solid var(--line);
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
 }
 
-.log-table th { background: var(--wash); font-weight: 600; }
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
 
-.log-table tr:last-child td { border-bottom: none; }
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
 
-/* ---------- conflict laboratory ---------- */
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
 
-.lab {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1rem;
-    margin: 1.75rem 0;
-    align-items: start;
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
 }
 
-.lab-case {
-    background: var(--paper);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    padding: .9rem 1rem;
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
 }
 
-.lab-case p { margin: 0 0 .6rem; font-size: .87rem; }
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
 
-.lab-expect { color: var(--ink-soft); }
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
 
-.lab-log {
-    font-family: var(--mono);
-    font-size: .78rem;
-    background: var(--paper);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
-    padding: .75rem 1rem .75rem 2.25rem;
-    max-height: 320px;
-    overflow-y: auto;
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
 }
 
-.lab-log li { margin-bottom: .2rem; }
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
 
-.verdict {
-    padding: .7rem .9rem;
-    border-radius: var(--radius);
-    font-size: .87rem;
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
 }
 
-.verdict-ok { background: #eaf7ef; border-left: 3px solid var(--good); }
-.verdict-warn { background: #fdf3e6; border-left: 3px solid var(--busy); }
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
 
-/* ---------- framework error strip ---------- */
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
 
-#blazor-error-ui {
-    background: #fff3cd;
-    bottom: 0;
-    box-shadow: 0 -1px 4px rgba(0, 0, 0, .2);
-    display: none;
-    left: 0;
-    padding: .7rem 1.25rem;
-    position: fixed;
+.bb-table,
+.table {
     width: 100%;
-    z-index: 1000;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
 }
 
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: .75rem;
-    top: .5rem;
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
 }
 
-.blazor-error-boundary {
-    background: var(--bad);
-    color: #fff;
-    padding: 1rem;
-    border-radius: var(--radius);
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
 }
 
-.blazor-error-boundary::after { content: "An error has occurred."; }
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
 
-/* ---------- live page ---------- */
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
 
-.live-bar {
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    gap: .5rem .75rem;
-    margin: 1.5rem 0 1rem;
-    padding: .75rem 1rem;
-    background: var(--paper);
-    border: 1px solid var(--line);
-    border-radius: var(--radius);
 }
 
-.live-label { font-size: .8rem; color: var(--ink-soft); }
-
-.live-link {
-    font-family: var(--mono);
-    font-size: .8rem;
-    color: var(--accent);
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
     overflow-wrap: anywhere;
-    margin-right: auto;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
 }
 
-.live-relay {
-    font-size: .8rem;
-    padding: .2rem .6rem;
-    border: 1px solid var(--line);
-    border-radius: 999px;
-    color: var(--ink);
-    text-decoration: none;
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
 }
 
-.live-relay:hover { background: var(--wash); }
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
 
-.live-relay-active {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
 }
 
-.live-relay-active:hover { background: var(--accent); }
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/demo.css b/src/Utilities/Bcrdt/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..d3be7c909b3
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,407 @@
+/* ============================================================================================
+   Bcrdt demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Bcrdt's own - the replica panels, the editors and forms
+   inside them, and the read-outs of what each replica holds - and it is written against the kit's
+   --bb-* names, so it follows the light/dark theme with no rules of its own for either.
+
+   Every replica carries its presence colour as --replica-color (set inline from the colour its
+   collaborators see next to its name), so a panel, a projection and a row of the update log can be
+   matched up with a name in a presence list by eye.
+   ============================================================================================ */
+
+/* ---------- The replica's colour mark ---------- */
+
+.replica-dot {
+    display: inline-block;
+    flex: none;
+    width: .625rem;
+    height: .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--replica-color, var(--bb-text-soft));
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--replica-color, var(--bb-text-soft)) 25%, transparent);
+}
+
+/* ---------- A replica panel: a live sample (.bb-demo) whose title bar names the replica ---------- */
+
+.replicas {
+    align-items: start;
+    margin-top: 1.5rem;
+}
+
+/* Three replicas side by side want a little less than the kit's 280px floor per pane, so they still
+   sit in one row on a laptop. */
+.replicas-3 {
+    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
+}
+
+.replica {
+    margin-bottom: 0;
+}
+
+/* The presence colour runs along the top of the bar, the way Fluent marks a card with its accent. */
+.replica > .panel-head {
+    flex-wrap: wrap;
+    gap: .375rem .625rem;
+    box-shadow: inset 0 3px 0 var(--replica-color, var(--bb-primary));
+}
+
+.panel-name {
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.panel-client {
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+/* The status light and the button sit at the end of the bar. */
+.panel-head > .badge {
+    margin-inline-start: auto;
+}
+
+.panel-toggle.btn {
+    min-height: 1.75rem;
+    padding: .125rem .625rem;
+    font-size: var(--fl-font-size-100);
+}
+
+/* The kit's badge is brand-tinted by default; a replica that is offline on purpose, or simply not
+   connected, reads as neutral rather than as good news. */
+.bb-badge.badge-idle {
+    background: var(--bb-surface-2);
+    color: var(--bb-text-muted);
+}
+
+/* An offline replica is visibly set apart, because "why is this one different" is the question the
+   offline demos are trying to provoke. */
+.replica.panel-offline {
+    border-color: color-mix(in srgb, var(--bb-warning) 55%, var(--bb-border));
+}
+
+.replica.panel-offline > .panel-head {
+    background: var(--bb-warning-soft);
+}
+
+/* Who else this replica can see: a quiet line under the bar. */
+.panel-presence {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .25rem .5rem;
+    margin: -.5rem 0 1rem;
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-muted);
+}
+
+.presence-label {
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.presence-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: .25rem;
+    color: var(--bb-text);
+}
+
+.presence-empty {
+    color: var(--bb-text-soft);
+    font-style: italic;
+}
+
+.panel-body {
+    min-width: 0;
+}
+
+/* The read-out under a replica: a footer bar mirroring the title bar. The selector outranks the
+   kit's `.bb-demo > :last-child`, which would otherwise take the bar's negative margin away. */
+.bb-demo.replica > .panel-foot {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .25rem 1rem;
+    margin: 1.25rem -1.25rem -1.25rem;
+    padding: .5rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    border-radius: 0 0 calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px);
+}
+
+/* The engine's client id closes the footer, at its far end. */
+.panel-foot > .panel-client {
+    margin-inline-start: auto;
+}
+
+.metric {
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.metric-warn {
+    color: var(--bb-warning-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* The "Opening replicas…" placeholder the prerendered page shows. */
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+/* ---------- Inside a panel: the editor, the form fields, the to-do list ---------- */
+
+.editor {
+    display: block;
+    font-size: var(--fl-font-size-200);
+}
+
+.replica .bb-toolbar {
+    margin: .875rem 0 0;
+}
+
+/* A form field across the panel's width: label, control, then the note on how it merges. */
+.replica .field {
+    display: flex;
+    margin-bottom: 1rem;
+}
+
+.replica .field:last-child {
+    margin-bottom: 0;
+}
+
+.field-input {
+    width: 100%;
+}
+
+.list-add {
+    display: flex;
+    gap: .5rem;
+}
+
+.list-add > input {
+    flex: 1;
+    min-width: 0;
+}
+
+.todo {
+    list-style: none;
+    margin: .75rem 0 0;
+    padding: 0;
+}
+
+/* One row per item: checkbox, title, then the action buttons. The rule targets the rows, not the
+   list - a flex list would lay every item out side by side in a single row. */
+.todo-item {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    padding: .375rem 0;
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.todo-item:last-child {
+    border-bottom: 0;
+}
+
+.todo-item > input[type="checkbox"] {
+    margin-inline-end: .25rem;
+}
+
+/* A title is an input, drawn flat until it is pointed at, so a row reads as a list item rather than
+   as a form. */
+input.todo-title {
+    flex: 1;
+    min-width: 0;
+    border-color: transparent;
+    background: transparent;
+}
+
+input.todo-title:hover {
+    border-color: var(--bb-border-strong);
+}
+
+.todo-done input.todo-title {
+    color: var(--bb-text-soft);
+    text-decoration: line-through;
+}
+
+.todo-item .bb-icon-btn {
+    width: 28px;
+    height: 28px;
+    font-size: var(--fl-font-size-200);
+}
+
+.todo-item .bb-icon-btn:disabled {
+    opacity: .35;
+    cursor: not-allowed;
+}
+
+.todo-item .icon-danger:hover {
+    color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.todo-empty {
+    margin: .75rem 0 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+}
+
+/* ---------- What a replica holds: its JSON projection ---------- */
+
+.projection {
+    min-width: 0;
+}
+
+.projection-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 .5rem;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+/* State, not a sample: it wraps rather than scrolling sideways, and scrolls once it is long. */
+pre.json {
+    max-height: 340px;
+    margin-bottom: 0;
+    overflow: auto;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-size: .75rem;
+    line-height: 1.55;
+}
+
+/* The conflict lab's three read-outs in each panel. */
+h4.sub {
+    margin: 1rem 0 .375rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+.panel-body > h4.sub:first-child {
+    margin-top: 0;
+}
+
+.panel-body > pre.json {
+    max-height: 200px;
+}
+
+/* ---------- The conflict lab ---------- */
+
+.lab {
+    margin: 1.5rem 0 0;
+}
+
+/* A scenario's title is a tile title, not a section of the page: it stays out of the "on this page"
+   outline, so it is drawn here rather than with .bb-card-title. */
+.lab-case > h3 {
+    margin: 0 0 .375rem;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.4;
+    color: var(--bb-text);
+}
+
+.lab-expect {
+    color: var(--bb-text);
+}
+
+.lab-log {
+    margin-top: 0;
+    padding-inline-start: 2.5rem;
+    max-height: 320px;
+}
+
+.lab-log > li + li {
+    margin-top: .125rem;
+}
+
+/* ---------- Internals ---------- */
+
+/* The labels are the long side here and the values short numbers, so the label column takes what is
+   left and wraps, and the value column keeps its number on one line. */
+.stats.bb-params {
+    grid-template-columns: minmax(0, 1fr) max-content;
+    margin: 1rem 0 0;
+    box-shadow: none;
+}
+
+.stats.bb-params dd {
+    justify-content: flex-end;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+.log-table .replica-dot {
+    margin-inline-end: .5rem;
+}
+
+/* ---------- The live page ---------- */
+
+.live-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: .75rem 1.5rem;
+    margin: 1.5rem 0 1rem;
+}
+
+.live-share {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+}
+
+.live-link {
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-200);
+    overflow-wrap: anywhere;
+}
+
+.live-relays {
+    margin: 0;
+}
+
+/* ---------- The landing page's hero: two replicas under the sample's markup ---------- */
+
+.home-hero-live {
+    padding: 1rem;
+    background: var(--bb-bg);
+    border-top: 1px solid var(--bb-border);
+}
+
+.home-hero-replicas {
+    margin: 0;
+    gap: .75rem;
+}
+
+.home-hero-live .loading {
+    min-height: 11.5rem;
+    margin: 0;
+}
+
+.home-hero-hint {
+    margin: .75rem 0 0;
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+    text-align: center;
+}
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/site.js b/src/Utilities/Bcrdt/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bcrdt/Demo/Server/wwwroot/theme.js b/src/Utilities/Bcrdt/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bcrdt/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/DemoPagesTests.cs b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/DemoPagesTests.cs
index 27fa2f5da53..8021a28dc8c 100644
--- a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/DemoPagesTests.cs
+++ b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/DemoPagesTests.cs
@@ -65,7 +65,7 @@ public void The_page_sweep_finds_every_demo()
     {
         // A sanity check on the sweep's own source: if the routes stopped being found, the sweep would pass on nothing.
         var routes = RepoLayout.DemoPages().Select(page => page.Route).ToArray();
-        foreach (var route in new[] { "/", "/text", "/list", "/form", "/conflicts", "/undo", "/internals", "/live", "/live/{Room}", "/not-found" })
+        foreach (var route in new[] { "/", "/getting-started", "/text", "/list", "/form", "/conflicts", "/undo", "/internals", "/live", "/live/{Room}", "/mcp-server", "/not-found" })
             CollectionAssert.Contains(routes, route, $"the sweep no longer finds {route}");
     }
 
@@ -80,11 +80,12 @@ public async Task An_unknown_address_answers_404_with_the_not_found_page()
 
         Assert.AreEqual(404, response?.Status, "an unknown address did not answer 404");
         await WaitForInteractiveAsync(page);
-        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("Not Found");
-        await Assertions.Expect(page.Locator("main")).ToContainTextAsync("the content you are looking for does not exist");
+        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("404");
+        await Assertions.Expect(page.Locator("main")).ToContainTextAsync("There is no page at this address");
 
-        // The layout is there, and with it the way back: the menu still navigates, in the browser.
-        await page.Locator("nav.nav").GetByRole(AriaRole.Link, new() { Name = "Collaborative text", Exact = true }).ClickAsync();
+        // The layout is there, and with it the way back: the site's links still navigate, in the browser.
+        await Assertions.Expect(page.Locator("header.bb-header")).ToBeVisibleAsync();
+        await page.Locator("footer.bb-footer").GetByRole(AriaRole.Link, new() { Name = "Collaborative text", Exact = true }).ClickAsync();
         await page.WaitForURLAsync(BaseUrl + "/text");
         await WaitForReplicasAsync(page, 3);
 
diff --git a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/README.md b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/README.md
index ad9f7e13d62..f97ff80d676 100644
--- a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/README.md
+++ b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.E2E/README.md
@@ -31,7 +31,7 @@ a tab opened its socket to.
 | `UndoTests` | A run of keystrokes is one undo step; Undo on A removes A's sentence from both replicas and leaves B's later sentence alone; Redo puts it back where it was; B's own Undo removes only B's sentence. |
 | `InternalsTests` | "Type 500 characters" reaches the peer and is held in a handful of blocks on both replicas; the update log tells A's local edits from what B received; a character typed into B's editor reaches A; 200 scattered edits grow the block count; both replicas project the same document. |
 | `LiveTests` | Two browser contexts (two people, two WebAssembly instances) on the same `/live/{room}` link meet through the SignalR hub, and with `?relay=websocket` through the WebSocket endpoint - each tab's socket goes to the relay the link names; each tab lists the other in its presence list; text typed in either reaches the other; a tab taken offline leaves the other's presence list, and when it comes back both tabs converge on both paragraphs. |
-| `DemoPagesTests` | Every demo page (the routes are read from the `@page` directives under `Demo/Client/Pages`, and the expected `h1` from each page's source, so a new page is swept without being listed; the live page on both relays) answers 200, turns interactive, shows its heading, opens and connects its replicas, loads `bit-bcrdt.js` when it has an editor, and logs no console error, uncaught exception, failed request or error status, without showing the error banner; an unknown address answers 404 with the not-found page, from which the menu still navigates; `/live` without a room is sent to a fresh room, on the relay asked for. |
+| `DemoPagesTests` | Every demo page (the routes are read from the `@page` directives under `Demo/Client/Pages`, and the expected `h1` from each page's source, so a new page is swept without being listed; the live page on both relays) answers 200, turns interactive, shows its heading, opens and connects its replicas, loads `bit-bcrdt.js` when it has an editor, and logs no console error, uncaught exception, failed request or error status, without showing the error banner; an unknown address answers 404 with the not-found page, from which the site's links still navigate; `/live` without a room is sent to a fresh room, on the relay asked for. |
 
 Every page is prerendered, so its heading and explanations are on screen before anything listens to a click, and
 the replica panels are not there at all (the prerendered page shows an "Opening…" placeholder instead). Each test
diff --git a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpOracleTests.cs b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpOracleTests.cs
index a7396d3af15..00f71088ee2 100644
--- a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpOracleTests.cs
+++ b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpOracleTests.cs
@@ -337,7 +337,9 @@ public void The_guide_sections_cover_every_heading_of_the_readme()
     public void Every_demo_source_file_is_embedded()
     {
         // The pages, the shared collaboration code and the hosting are what the index promises; a new page
-        // that the .csproj's patterns miss would silently be absent from every answer.
+        // that the .csproj's patterns miss would silently be absent from every answer. The site chrome - the
+        // shared Layout/ components and the DocsCatalog.cs they are driven by - is left out on purpose, with
+        // the MCP and not-found pages.
         var client = FindDemoDirectory("Client");
         if (client is null) Assert.Inconclusive("The demo's sources are not next to this build.");
 
@@ -345,7 +347,8 @@ public void Every_demo_source_file_is_embedded()
             .Where(path => path.EndsWith(".razor", StringComparison.Ordinal) || path.EndsWith(".cs", StringComparison.Ordinal))
             .Select(path => $"Demo/Client/{Path.GetRelativePath(client, path).Replace('\\', '/')}")
             .Where(path => path.Contains("/bin/", StringComparison.Ordinal) is false && path.Contains("/obj/", StringComparison.Ordinal) is false)
-            .Where(path => path is not "Demo/Client/Pages/McpServer.razor" and not "Demo/Client/Pages/NotFound.razor")
+            .Where(path => path.StartsWith("Demo/Client/Layout/", StringComparison.Ordinal) is false)
+            .Where(path => path is not "Demo/Client/Pages/McpServer.razor" and not "Demo/Client/Pages/NotFound.razor" and not "Demo/Client/DocsCatalog.cs")
             .ToArray();
 
         var embedded = BcrdtSourceCatalog.SourceFiles.Select(file => file.Path).Where(path => path.StartsWith("Demo/Client/", StringComparison.Ordinal)).ToArray();
@@ -446,12 +449,16 @@ public async Task The_demos_mcp_page_lists_this_server_and_its_links_answer()
     }
 
     [TestMethod]
-    public void The_demos_nav_menu_links_the_mcp_page()
+    public void The_demos_navigation_links_the_mcp_page()
     {
-        var menu = McpSurfaceTests.FindRepositoryFile("Demo", "Client", "Layout", "NavMenu.razor");
-        if (menu is null) Assert.Inconclusive("The demo's NavMenu.razor is not next to this build.");
+        // The header's primary links and the docs nav panel are both built from the demo's catalog.
+        var catalog = McpSurfaceTests.FindRepositoryFile("Demo", "Client", "DocsCatalog.cs");
+        if (catalog is null) Assert.Inconclusive("The demo's DocsCatalog.cs is not next to this build.");
 
-        Assert.Contains("<NavLink href=\"mcp-server\">", File.ReadAllText(menu));
+        var source = File.ReadAllText(catalog);
+
+        Assert.Contains("new(\"/mcp-server\", \"MCP server\")", source, "the header does not link the MCP page");
+        Assert.Contains("typeof(McpServer)", source, "the docs nav panel does not list the MCP page");
     }
 
     private static string? FindDemoDirectory(string name)
diff --git a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpToolTests.cs b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpToolTests.cs
index a2a441f38b0..c7f866aadbb 100644
--- a/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpToolTests.cs
+++ b/src/Utilities/Bcrdt/Tests/Bit.Bcrdt.Tests.Mcp/McpToolTests.cs
@@ -320,6 +320,8 @@ public async Task The_source_index_lists_the_demo_pages_and_hosting_but_not_the_
         Assert.DoesNotContain("McpServer.razor", index);
         Assert.DoesNotContain("NotFound.razor", index);
         Assert.DoesNotContain("Error.razor", index);
+        Assert.DoesNotContain("Demo/Client/Layout/", index);
+        Assert.DoesNotContain("DocsCatalog.cs", index);
     }
 
     [TestMethod]
diff --git a/src/Utilities/Bdnd/Demo/Client/Bit.Bdnd.Demo.Client.csproj b/src/Utilities/Bdnd/Demo/Client/Bit.Bdnd.Demo.Client.csproj
index aaeca1d791e..f2ab73aa5fa 100644
--- a/src/Utilities/Bdnd/Demo/Client/Bit.Bdnd.Demo.Client.csproj
+++ b/src/Utilities/Bdnd/Demo/Client/Bit.Bdnd.Demo.Client.csproj
@@ -60,10 +60,10 @@ foreach (var file in Directory.GetFiles(SourceDir, "*.razor", SearchOption.AllDi
     content = Regex.Replace(content, @"(?m)^[ \t]*@page[ \t]+""[^""]*""[ \t]*\r?\n", "");
     // 2. The <PageTitle> that sets the browser tab title.
     content = Regex.Replace(content, @"(?s)[ \t]*<PageTitle>.*?</PageTitle>[ \t]*\r?\n", "");
-    // 3. The demo-header description block on the hand-written demo pages. Its end is found by
+    // 3. The bb-intro title block on the hand-written demo pages. Its end is found by
     //    balancing <div> tags rather than with a lazy match, which would stop at the first
     //    </div> nested inside the header and leave the rest of it behind.
-    var header = Regex.Match(content, @"[ \t]*<div class=""demo-header"">");
+    var header = Regex.Match(content, @"[ \t]*<div class=""bb-intro"">");
     if (header.Success)
     {
         var depth = 0;
diff --git a/src/Utilities/Bdnd/Demo/Client/DocsCatalog.cs b/src/Utilities/Bdnd/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..b89b0757619
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,229 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bdnd.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bdnd";
+
+    public const string PackageId = "Bit.Bdnd";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bdnd";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bdnd is a declarative drag-and-drop library for Blazor inspired by React DnD: draggables, drop " +
+        "targets, custom drag layers and drag handles on the browser's HTML5 drag-and-drop API, with the drag " +
+        "state in C#. This site is itself a Blazor app built on it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["dustbin", "sortable", "handle", "nesting", "files"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment -
+    /// Pages.Dustbin.SingleTarget is Pages/Dustbin/SingleTarget.razor.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    // The groups are React DnD's own example groups, in its order, so a React DnD user finds each
+    // example where they would look for it on the other side.
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register the service, and put a first draggable and drop target inside a BdndProvider.",
+                "install setup nuget package AddBitBdndServices quick start program.cs provider BdndProvider concepts items types monitor",
+                typeof(Pages.GettingStarted)),
+            new("/tutorial", "Chessboard tutorial",
+                "React DnD's canonical tutorial: a knight that may only be dropped on the squares a knight can move to.",
+                "tutorial chess chessboard knight CanDropPredicate legal moves highlight CanDrop IsOver",
+                typeof(Pages.Tutorial)),
+        ]),
+        new("Dustbin",
+        [
+            new("/dustbin/single", "Single target",
+                "The simplest setup: one drop target that accepts one item type, reacts to the hover and records the drop.",
+                "dustbin single target Accept OnDrop IsOver basic first drop",
+                typeof(Pages.Dustbin.SingleTarget)),
+            new("/dustbin/iframe", "Within an iframe",
+                "The same dustbin running in a document of its own, inside an iframe.",
+                "iframe frame document window embedded",
+                typeof(Pages.Dustbin.Iframe)),
+            new("/dustbin/copy-or-move", "Copy or move",
+                "A source that is removed once a drop took it, next to one that stays - OnEnd and DidDrop, with the matching DropEffect.",
+                "copy move OnEnd DidDrop DropEffect remove palette keep take",
+                typeof(Pages.Dustbin.CopyOrMove)),
+            new("/dustbin/multiple", "Multiple targets",
+                "Dustbins that accept different types: a box lights up only the targets that can take it.",
+                "multiple targets AcceptTypes types CanDrop highlight dim",
+                typeof(Pages.Dustbin.MultipleTargets)),
+            new("/dustbin/stress-test", "Stress test",
+                "Thirty sources and six targets of random types, re-rendering on every change of the drag state.",
+                "stress test performance many sources targets random types shuffle",
+                typeof(Pages.Dustbin.StressTest)),
+        ]),
+        new("Drag around",
+        [
+            new("/drag-around/naive", "Naive",
+                "Boxes moved by the distance the pointer travelled, from Monitor.GetDifferenceFromInitialOffset(), with the browser's own drag image.",
+                "drag around position move offset GetDifferenceFromInitialOffset absolute native preview",
+                typeof(Pages.DragAround.Naive)),
+            new("/drag-around/custom-layer", "Custom drag layer",
+                "UseCustomDragLayer hides the native preview and a BdndDragLayer draws one of its own that follows the pointer.",
+                "custom drag layer preview BdndDragLayer UseCustomDragLayer SourceClientOffset GetSourceClientOffset",
+                typeof(Pages.DragAround.CustomLayer)),
+        ]),
+        new("Nesting",
+        [
+            new("/nesting/drag-sources", "Drag sources",
+                "Draggables inside draggables: grabbing an inner box drags that box, not the ones around it.",
+                "nested drag sources innermost inner outer dragstart",
+                typeof(Pages.Nesting.DragSources)),
+            new("/nesting/drop-targets", "Drop targets",
+                "Drop targets inside drop targets: IsOver for every target under the pointer, IsOverShallow for the innermost one.",
+                "nested drop targets IsOverShallow shallow IsOver innermost hover",
+                typeof(Pages.Nesting.DropTargets)),
+        ]),
+        new("Sortable",
+        [
+            new("/sortable/simple", "Simple",
+                "Cards that are each a draggable and a drop target, reordered from OnHover as the dragged card passes their middle.",
+                "sortable list reorder OnHover cards midpoint GetBoundingClientRectAsync",
+                typeof(Pages.Sortable.Simple)),
+            new("/sortable/cancel-on-drop-outside", "Cancel on drop outside",
+                "The order is kept only when the card is dropped on the list; anywhere else it snaps back.",
+                "cancel drop outside revert snap back OnEnd DidDrop sortable",
+                typeof(Pages.Sortable.CancelOnDropOutside)),
+            new("/sortable/stress-test", "Stress test",
+                "A hundred-card sortable list, hit-testing every hover.",
+                "sortable stress test performance long list hundred",
+                typeof(Pages.Sortable.StressTest)),
+        ]),
+        new("Customize",
+        [
+            new("/customize/handles", "Handles & previews",
+                "UseHandle and BdndDragHandle: a box that drags only from its grip, next to one that drags from anywhere.",
+                "handle grip BdndDragHandle UseHandle drag handle interactive",
+                typeof(Pages.Customize.Handles)),
+            new("/customize/drop-effects", "Drop effects",
+                "DropEffect sets the native effectAllowed, which is the cursor the browser shows over a target.",
+                "drop effect DropEffect effectAllowed copy move link cursor",
+                typeof(Pages.Customize.DropEffects)),
+        ]),
+        new("Other cases",
+        [
+            new("/other/native-files", "Native files",
+                "A drop target that accepts files dragged in from the operating system, with BdndNativeTypes.File and OnNativeDrop.",
+                "native files file drop desktop os BdndNativeTypes OnNativeDrop upload",
+                typeof(Pages.Other.NativeFiles)),
+            new("/other/native-html", "Native HTML",
+                "Selected text, links and HTML dropped from a page, read from the native DataTransfer.",
+                "native html text url link selection BdndNativeTypes DataTransfer",
+                typeof(Pages.Other.NativeHtml)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(Pages.McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Examples/DemoCode.razor b/src/Utilities/Bdnd/Demo/Client/Examples/DemoCode.razor
index 8a06c25106c..dfea42b7ae6 100644
--- a/src/Utilities/Bdnd/Demo/Client/Examples/DemoCode.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Examples/DemoCode.razor
@@ -4,9 +4,9 @@
 @* A collapsible "View code" panel that shows the .razor source of the current demo page.
    The source is resolved from the build-generated DemoSources lookup, keyed by route. *@
 
-<div class="demo-code">
+<div class="bb-source demo-code">
     <button type="button"
-            class="demo-code__toggle"
+            class="btn btn-secondary demo-code__toggle"
             aria-expanded="@_open.ToString().ToLowerInvariant()"
             @onclick="Toggle">
         <span class="demo-code__caret">@(_open ? "▾" : "▸")</span>
@@ -18,11 +18,11 @@
     {
         @if (_source is null)
         {
-            <div class="demo-code__empty">Source for this page is not available.</div>
+            <div class="bb-empty demo-code__empty">Source for this page is not available.</div>
         }
         else
         {
-            <pre class="demo-code__pre"><code class="demo-code__code">@_source</code></pre>
+            <pre class="bb-code demo-code__pre"><code class="demo-code__code">@_source</code></pre>
         }
     }
 </div>
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bdnd/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bdnd/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bdnd/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bdnd/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bdnd/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/Footer.razor b/src/Utilities/Bdnd/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bdnd/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/Header.razor b/src/Utilities/Bdnd/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bdnd/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor
index 8ec9796a16f..44980dda101 100644
--- a/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor
@@ -1,21 +1,30 @@
 @inherits LayoutComponentBase
 
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. *@
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
 <div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
-    <aside class="sidebar">
-        <NavMenu />
-    </aside>
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
 
-    <main class="main">
-        <header class="top-row">
-            <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bdnd" target="_blank" rel="noopener">GitHub</a>
-            <a href="https://react-dnd.github.io/react-dnd" target="_blank" rel="noopener">React DnD (inspiration)</a>
-            <a href="https://learn.microsoft.com/aspnet/core/blazor/" target="_blank" rel="noopener">Blazor Docs</a>
-        </header>
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
 
-        <article class="content">
-            @Body
-        </article>
-    </main>
+    <Footer />
 </div>
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor.css
index cdeea32197f..22745885fe0 100644
--- a/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor.css
+++ b/src/Utilities/Bdnd/Demo/Client/Layout/MainLayout.razor.css
@@ -1,78 +1,25 @@
-.page {
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
 }
 
-.sidebar {
-    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.main {
+main {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
 }
 
-.top-row {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 1.5rem;
-    height: 3.5rem;
-    padding: 0 1.5rem;
-    background: var(--demo-surface);
-    border-bottom: 1px solid var(--demo-border);
-}
-
-    .top-row ::deep a {
-        color: var(--demo-muted);
-        font-weight: 500;
-        font-size: 0.9rem;
-        white-space: nowrap;
-    }
-
-    .top-row ::deep a:hover {
-        color: var(--demo-text);
-        text-decoration: none;
-    }
-
-.content {
-    flex: 1;
-    padding: 1.75rem 2rem;
-    min-width: 0;
-}
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: center;
-    }
-
-    .content {
-        padding: 1.25rem;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 260px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-        flex-shrink: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-    }
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
 }
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/NavMenu.razor b/src/Utilities/Bdnd/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 9dffc4a0549..00000000000
--- a/src/Utilities/Bdnd/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,103 +0,0 @@
-<div class="nav-top">
-    <a class="brand" href="">
-        <span class="brand-mark">@((MarkupString)LogoSvg)</span>
-        <span class="brand-text">bit Bdnd</span>
-    </a>
-    <button class="nav-toggle" title="Toggle navigation" @onclick="ToggleNavMenu">
-        <span></span><span></span><span></span>
-    </button>
-</div>
-
-<nav class="@NavMenuCssClass">
-    <NavLink class="nav-link" href="" Match="NavLinkMatch.All" @onclick="CollapseNavMenu">
-        <span class="nav-icon">●</span> Overview
-    </NavLink>
-
-    <div class="nav-group-title">Tutorial</div>
-    <NavLink class="nav-link" href="tutorial" @onclick="CollapseNavMenu">
-        <span class="nav-icon">♘</span> Chessboard
-    </NavLink>
-
-    <div class="nav-group-title">Dustbin</div>
-    <NavLink class="nav-link" href="dustbin/single" @onclick="CollapseNavMenu">
-        <span class="nav-icon">▢</span> Single Target
-    </NavLink>
-    <NavLink class="nav-link" href="dustbin/iframe" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⧉</span> Within an iframe
-    </NavLink>
-    <NavLink class="nav-link" href="dustbin/copy-or-move" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⎘</span> Copy or Move
-    </NavLink>
-    <NavLink class="nav-link" href="dustbin/multiple" @onclick="CollapseNavMenu">
-        <span class="nav-icon">▦</span> Multiple Targets
-    </NavLink>
-    <NavLink class="nav-link" href="dustbin/stress-test" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⚡</span> Stress Test
-    </NavLink>
-
-    <div class="nav-group-title">Drag Around</div>
-    <NavLink class="nav-link" href="drag-around/naive" @onclick="CollapseNavMenu">
-        <span class="nav-icon">✥</span> Naive
-    </NavLink>
-    <NavLink class="nav-link" href="drag-around/custom-layer" @onclick="CollapseNavMenu">
-        <span class="nav-icon">◫</span> Custom Drag Layer
-    </NavLink>
-
-    <div class="nav-group-title">Nesting</div>
-    <NavLink class="nav-link" href="nesting/drag-sources" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⧈</span> Drag Sources
-    </NavLink>
-    <NavLink class="nav-link" href="nesting/drop-targets" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⧇</span> Drop Targets
-    </NavLink>
-
-    <div class="nav-group-title">Sortable</div>
-    <NavLink class="nav-link" href="sortable/simple" @onclick="CollapseNavMenu">
-        <span class="nav-icon">☰</span> Simple
-    </NavLink>
-    <NavLink class="nav-link" href="sortable/cancel-on-drop-outside" @onclick="CollapseNavMenu">
-        <span class="nav-icon">↺</span> Cancel on Drop Outside
-    </NavLink>
-    <NavLink class="nav-link" href="sortable/stress-test" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⚡</span> Stress Test
-    </NavLink>
-
-    <div class="nav-group-title">Customize</div>
-    <NavLink class="nav-link" href="customize/handles" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⠿</span> Handles &amp; Previews
-    </NavLink>
-    <NavLink class="nav-link" href="customize/drop-effects" @onclick="CollapseNavMenu">
-        <span class="nav-icon">＋</span> Drop Effects
-    </NavLink>
-
-    <div class="nav-group-title">Other Cases</div>
-    <NavLink class="nav-link" href="other/native-files" @onclick="CollapseNavMenu">
-        <span class="nav-icon">🗎</span> Native Files
-    </NavLink>
-    <NavLink class="nav-link" href="other/native-html" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⟨⟩</span> Native HTML
-    </NavLink>
-
-    <div class="nav-group-title">For AI agents</div>
-    <NavLink class="nav-link" href="mcp-server" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⌘</span> MCP Server
-    </NavLink>
-</nav>
-
-@code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "nav-menu collapse" : "nav-menu";
-
-    private const string LogoSvg =
-        "<svg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>" +
-        "<rect x='2' y='2' width='9' height='9' rx='2' fill='#c7d2fe'/>" +
-        "<rect x='13' y='13' width='9' height='9' rx='2' stroke='#a5b4fc' stroke-width='1.5' stroke-dasharray='2 2'/>" +
-        "<path d='M8 13v3a2 2 0 0 0 2 2h1.5' stroke='#e0e7ff' stroke-width='1.5' fill='none'/>" +
-        "<path d='M10.5 16.2l1.5 1.8-1.5 1.8' stroke='#e0e7ff' stroke-width='1.5' fill='none'/>" +
-        "</svg>";
-
-    private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;
-
-    private void CollapseNavMenu() => collapseNavMenu = true;
-}
diff --git a/src/Utilities/Bdnd/Demo/Client/Layout/NavMenu.razor.css b/src/Utilities/Bdnd/Demo/Client/Layout/NavMenu.razor.css
deleted file mode 100644
index ad9d0c356b3..00000000000
--- a/src/Utilities/Bdnd/Demo/Client/Layout/NavMenu.razor.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.nav-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 3.5rem;
-    padding: 0 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    flex-shrink: 0;
-}
-
-.brand {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    color: #fff;
-    font-weight: 600;
-    font-size: 1.05rem;
-}
-
-.brand:hover {
-    text-decoration: none;
-}
-
-.brand-mark {
-    display: inline-flex;
-    align-items: center;
-}
-
-.nav-toggle {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    width: 36px;
-    height: 36px;
-    padding: 0 8px;
-    background: rgba(255, 255, 255, 0.08);
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-    .nav-toggle span {
-        display: block;
-        height: 2px;
-        background: #fff;
-        border-radius: 2px;
-    }
-
-.nav-menu {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 0.75rem;
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-.nav-menu ::deep .nav-link {
-    display: flex;
-    align-items: center;
-    gap: 0.65rem;
-    padding: 0.6rem 0.75rem;
-    color: rgba(255, 255, 255, 0.75);
-    font-size: 0.92rem;
-    font-weight: 500;
-    border-radius: 8px;
-}
-
-.nav-menu ::deep .nav-link:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: #fff;
-    text-decoration: none;
-}
-
-.nav-menu ::deep .nav-link.active {
-    background: rgba(255, 255, 255, 0.16);
-    color: #fff;
-}
-
-.nav-group-title {
-    margin: 0.85rem 0 0.2rem;
-    padding: 0 0.75rem;
-    color: rgba(255, 255, 255, 0.45);
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-}
-
-.nav-icon {
-    display: inline-flex;
-    width: 1.1rem;
-    justify-content: center;
-    font-size: 0.85rem;
-    color: #a5b4fc;
-}
-
-@media (max-width: 640.98px) {
-    .nav-menu.collapse {
-        display: none;
-    }
-}
-
-@media (min-width: 641px) {
-    .nav-toggle {
-        display: none;
-    }
-
-    .nav-menu.collapse {
-        display: flex;
-    }
-}
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Customize/DropEffects.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Customize/DropEffects.razor
index 2e14bdd96e4..624e01c5985 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Customize/DropEffects.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Customize/DropEffects.razor
@@ -1,10 +1,10 @@
 @page "/customize/drop-effects"
 
-<PageTitle>Customize · Drop Effects - bit Bdnd</PageTitle>
+<PageTitle>Customize - Drop Effects · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Customize - Drop Effects</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Customize - Drop Effects</h1>
+    <p class="bb-subtitle">
         A drag source can advertise a drop effect through <code>DropEffect</code>, which sets the
         native <code>dataTransfer.effectAllowed</code>. Drag the two boxes below and watch the
         cursor: the <em>copy</em> box shows a “+” badge, the <em>move</em> box does not.
@@ -13,7 +13,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <div class="row-wrap">
             <BdndDraggable TItem="string" Type="@ItemTypes.Box" Item="@("copy")"
@@ -38,13 +38,13 @@
             </div>
         </BdndDropTarget>
     </BdndProvider>
+</div>
 
-    <p class="text-muted" style="margin-top:1rem;">
-        Tip: the browser only offers the effects a source allows. With <code>DropEffect="copyMove"</code>
-        the user can switch to copying by holding <kbd>Ctrl</kbd> (<kbd>⌥</kbd> on macOS) during the drag;
-        the boxes above allow a single effect each, so modifier keys do not change them.
-    </p>
-</section>
+<div class="bb-note">
+    The browser only offers the effects a source allows. With <code>DropEffect="copyMove"</code>
+    the user can switch to copying by holding <kbd>Ctrl</kbd> (<kbd>⌥</kbd> on macOS) during the drag;
+    the boxes above allow a single effect each, so modifier keys do not change them.
+</div>
 
 @code {
     private string? _last;
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Customize/Handles.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Customize/Handles.razor
index 7f5cc6b3548..fd1dd826c37 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Customize/Handles.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Customize/Handles.razor
@@ -1,10 +1,10 @@
 @page "/customize/handles"
 
-<PageTitle>Customize · Handles &amp; Previews - bit Bdnd</PageTitle>
+<PageTitle>Customize - Handles &amp; Previews · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Customize - Handles &amp; Previews</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Customize - Handles &amp; Previews</h1>
+    <p class="bb-subtitle">
         With <code>UseHandle="true"</code> a draggable can only be picked up by a nested
         <code>&lt;BdndDragHandle&gt;</code>. The rest of the element stays interactive. Compare the two
         boxes below: the first drags from anywhere, the second only from its grip.
@@ -13,7 +13,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <div class="row-wrap">
             <BdndDraggable TItem="string" Type="@ItemTypes.Box" Item="@("whole")" Context="d">
@@ -40,7 +40,7 @@
             </div>
         </BdndDropTarget>
     </BdndProvider>
-</section>
+</div>
 
 @code {
     private string? _last;
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/CustomLayer.razor b/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/CustomLayer.razor
index e08c0ffa912..a1294b013c4 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/CustomLayer.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/CustomLayer.razor
@@ -1,11 +1,11 @@
 @page "/drag-around/custom-layer"
 @using System.Globalization
 
-<PageTitle>Drag Around · Custom Drag Layer - bit Bdnd</PageTitle>
+<PageTitle>Drag Around - Custom Drag Layer · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Drag Around - Custom Drag Layer</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Drag Around - Custom Drag Layer</h1>
+    <p class="bb-subtitle">
         The boxes set <code>UseCustomDragLayer="true"</code> to hide the native preview, and a
         <code>&lt;BdndDragLayer&gt;</code> renders our own preview positioned at
         <code>Monitor.GetSourceClientOffset()</code>. This gives full control over how the
@@ -36,7 +36,7 @@
     <BdndDragLayer TItem="DragBox" Context="layer">
         @if (layer.IsDragging && layer.SourceClientOffset is { } pos && layer.Item is { } item)
         {
-            <div class="drag-layer-preview" style="@($"position:fixed;left:{Px(pos.X)};top:{Px(pos.Y)};z-index:1000;pointer-events:none;margin:0;padding:0.5rem 1rem;background:#4f46e5;color:white;border:1px solid #4f46e5;border-radius:6px;white-space:nowrap;")">
+            <div class="drag-layer-preview" style="@($"position:fixed;left:{Px(pos.X)};top:{Px(pos.Y)};z-index:1000;pointer-events:none;margin:0;")">
                 @item.Title
             </div>
         }
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/Naive.razor b/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/Naive.razor
index 5dbdd64f41c..9806b21bd55 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/Naive.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/DragAround/Naive.razor
@@ -1,11 +1,11 @@
 @page "/drag-around/naive"
 @using System.Globalization
 
-<PageTitle>Drag Around · Naive - bit Bdnd</PageTitle>
+<PageTitle>Drag Around - Naive · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Drag Around - Naive</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Drag Around - Naive</h1>
+    <p class="bb-subtitle">
         The whole container is a <code>BdndDropTarget</code>. Each box remembers its position;
         on drop the new position is computed from
         <code>Monitor.GetDifferenceFromInitialOffset()</code>. This uses the native HTML5
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/CopyOrMove.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/CopyOrMove.razor
index 4b523534d68..fa3a612eb2b 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/CopyOrMove.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/CopyOrMove.razor
@@ -1,10 +1,10 @@
 @page "/dustbin/copy-or-move"
 
-<PageTitle>Dustbin · Copy or Move - bit Bdnd</PageTitle>
+<PageTitle>Dustbin - Copy or Move · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Dustbin - Copy or Move</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Dustbin - Copy or Move</h1>
+    <p class="bb-subtitle">
         A drag source can describe whether it should be copied or moved. Here the
         <em>copy</em> box can be dropped any number of times, while the <em>move</em> box is
         removed from the palette once it has been accepted by the dustbin (using the
@@ -15,7 +15,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <BdndDropTarget TItem="DragBox" Accept="@ItemTypes.Box" Context="t"
                         style="display:contents" OnDrop="HandleDrop">
@@ -43,7 +43,7 @@
             }
         </div>
     </BdndProvider>
-</section>
+</div>
 
 @code {
     public enum DropEffect { Copy, Move }
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/Iframe.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/Iframe.razor
index cd983516192..f71ef476dbd 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/Iframe.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/Iframe.razor
@@ -1,10 +1,10 @@
 @page "/dustbin/iframe"
 
-<PageTitle>Dustbin · Within an iframe - bit Bdnd</PageTitle>
+<PageTitle>Dustbin - Within an iframe · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Dustbin - Within an iframe</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Dustbin - Within an iframe</h1>
+    <p class="bb-subtitle">
         The HTML5 backend works inside an iframe because Bdnd listens to the native drag
         events of whatever document it runs in. Below, a self-contained dustbin demo is hosted
         in its own iframe document - dragging works entirely within it.
@@ -13,26 +13,26 @@
 
 <DemoCode />
 
-@* The iframe is rendered only once this page runs in the browser. A prerendered one is replaced, together with the
-   rest of the prerendered markup, when WebAssembly takes the page over: the page inside it would be loaded twice,
-   its first boot aborted halfway. *@
-@if (RendererInfo.IsInteractive)
-{
-    <iframe src="dustbin/single" title="Dustbin inside an iframe" style="@FrameStyle"></iframe>
-}
-else
-{
-    <div style="@FrameStyle"></div>
-}
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">iframe · dustbin/single</span></div>
 
-<p class="text-muted" style="margin-top:1rem;">
-    Note: a single <code>BdndProvider</code> (and its <code>BdndDragDropManager</code>) lives in one
+    @* The iframe is rendered only once this page runs in the browser. A prerendered one is replaced, together with
+       the rest of the prerendered markup, when WebAssembly takes the page over: the page inside it would be loaded
+       twice, its first boot aborted halfway. data-bdnd-frame tells the framed page to show its sample and none of
+       the site around it (App.razor). *@
+    @if (RendererInfo.IsInteractive)
+    {
+        <iframe src="dustbin/single" title="Dustbin inside an iframe" class="demo-iframe" data-bdnd-frame></iframe>
+    }
+    else
+    {
+        <div class="demo-iframe"></div>
+    }
+</div>
+
+<div class="bb-note">
+    A single <code>BdndProvider</code> (and its <code>BdndDragDropManager</code>) lives in one
     document, so dragging <em>across</em> the iframe boundary into the parent page is not
     supported by the HTML5 backend - the same limitation React DnD has without a
     cross-window backend setup.
-</p>
-
-@code {
-    private const string FrameStyle =
-        "display:block;width:100%;height:520px;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);";
-}
+</div>
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/MultipleTargets.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/MultipleTargets.razor
index b86d3f073f4..3b2b082eda9 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/MultipleTargets.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/MultipleTargets.razor
@@ -1,10 +1,10 @@
 @page "/dustbin/multiple"
 
-<PageTitle>Dustbin · Multiple Targets - bit Bdnd</PageTitle>
+<PageTitle>Dustbin - Multiple Targets · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Dustbin - Multiple Targets</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Dustbin - Multiple Targets</h1>
+    <p class="bb-subtitle">
         Each dustbin <code>Accept</code>s a different set of types, so a box only highlights
         the dustbins that can receive it. Boxes themselves carry a type.
     </p>
@@ -12,7 +12,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <div class="row-wrap">
             @foreach (var bin in _bins)
@@ -48,7 +48,7 @@
             }
         </div>
     </BdndProvider>
-</section>
+</div>
 
 @code {
     public record SourceBox(string Name, string Type);
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/SingleTarget.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/SingleTarget.razor
index 13a2ff729d1..2615f6403b5 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/SingleTarget.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/SingleTarget.razor
@@ -1,10 +1,10 @@
 @page "/dustbin/single"
 
-<PageTitle>Dustbin · Single Target - bit Bdnd</PageTitle>
+<PageTitle>Dustbin - Single Target · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Dustbin - Single Target</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Dustbin - Single Target</h1>
+    <p class="bb-subtitle">
         The simplest setup: a single <code>BdndDropTarget</code> that accepts one item type.
         Drag a box onto the dustbin and it reacts to hover and records the drop.
     </p>
@@ -12,7 +12,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <BdndDropTarget TItem="BoxItem" Accept="@ItemTypes.Box" Context="t"
                         OnDrop="HandleDrop" style="display:contents">
@@ -39,7 +39,7 @@
             }
         </div>
     </BdndProvider>
-</section>
+</div>
 
 @code {
     public record BoxItem(string Name);
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/StressTest.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/StressTest.razor
index 73ce6e70e30..89e7a1c01bc 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/StressTest.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Dustbin/StressTest.razor
@@ -1,10 +1,10 @@
 @page "/dustbin/stress-test"
 
-<PageTitle>Dustbin · Stress Test - bit Bdnd</PageTitle>
+<PageTitle>Dustbin - Stress Test · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Dustbin - Stress Test</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Dustbin - Stress Test</h1>
+    <p class="bb-subtitle">
         Many sources and many targets at once. Each box has a random type; each dustbin accepts
         a random subset. Use this to gauge how the engine behaves with a lot of registered
         handlers re-rendering on every state change.
@@ -13,13 +13,13 @@
 
 <DemoCode />
 
-<div class="example-toolbar">
-    <button class="btn btn-sm btn-primary" @onclick="Shuffle">Shuffle types</button>
-    <button class="btn btn-sm btn-outline-secondary" @onclick="AddMore">Add 10 boxes</button>
-    <span class="text-muted">@_boxes.Count boxes · @_bins.Count dustbins · @_totalDrops drops</span>
-</div>
+<div class="bb-demo">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">@_boxes.Count boxes · @_bins.Count dustbins · @_totalDrops drops</span>
+        <button type="button" class="btn btn-primary" @onclick="Shuffle">Shuffle types</button>
+        <button type="button" class="btn btn-secondary" @onclick="AddMore">Add 10 boxes</button>
+    </div>
 
-<section class="demo-stage">
     <BdndProvider>
         <div class="row-wrap" style="margin-bottom:1.5rem;">
             @foreach (var bin in _bins)
@@ -46,7 +46,7 @@
             }
         </div>
     </BdndProvider>
-</section>
+</div>
 
 @code {
     private static readonly string[] AllTypes =
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bdnd/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..4283bc9c656
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,155 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · Bdnd</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package and one service registration - then a <code>BdndProvider</code> around any interactively
+        rendered region, with draggables and drop targets inside it. You drag <em>data</em> of a <em>type</em>,
+        not a view, and the drag state lives in C#.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        In a Blazor Web App with an interactive client, the package belongs in the <code>.Client</code> project,
+        next to the pages that drag.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.Bdnd</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the service</h3>
+    <p class="bb-card-desc">
+        It registers <code>BdndInterop</code>, the scoped wrapper around the script module that every draggable and
+        drop target injects. The drag-and-drop manager itself is not a service: each <code>BdndProvider</code>
+        creates its own and shares it with the components inside it. In a Blazor Web App, register it in both
+        <code>Program.cs</code> files - the pages are prerendered on the server before they run in the browser.
+    </p>
+    <pre class="bb-code"><span class="c">// Program.cs - in every project that renders the components</span>
+builder.Services.AddBitBdndServices();</pre>
+    <p class="bb-card-desc">And the namespace, in <code>_Imports.razor</code>:</p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.Bdnd</pre>
+    <div class="bb-note">
+        There is no stylesheet to link and no script tag to add: the components import their module,
+        <code>_content/Bit.Bdnd/bit-bdnd.js</code>, themselves the first time they need it.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> A first drag and drop</h3>
+    <p class="bb-card-desc">
+        Wrap the region in a <code>BdndProvider</code> and declare sources and targets inside it. A draggable's
+        <code>Type</code> is what a target matches against its <code>Accept</code> list, and its <code>Item</code>
+        is what the target's <code>OnDrop</code> receives. Each one's child content gets the collected state -
+        <code>IsDragging</code> for a source, <code>IsOver</code> and <code>CanDrop</code> for a target - to
+        render from.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">BdndProvider</span>&gt;
+    @@foreach (<span class="k">var</span> name <span class="k">in</span> _boxes)
+    {
+        &lt;<span class="k">BdndDraggable</span> TItem=<span class="s">"string"</span> Type=<span class="s">"box"</span> Item=<span class="s">"name"</span> Context=<span class="s">"drag"</span>&gt;
+            &lt;<span class="k">div</span> class=<span class="s">"box"</span> style=<span class="s">"opacity: @@(drag.IsDragging ? 0.4 : 1)"</span>&gt;
+                @@name
+            &lt;/<span class="k">div</span>&gt;
+        &lt;/<span class="k">BdndDraggable</span>&gt;
+    }
+
+    &lt;<span class="k">BdndDropTarget</span> TItem=<span class="s">"string"</span> Accept=<span class="s">"box"</span> OnDrop=<span class="s">"HandleDrop"</span> Context=<span class="s">"drop"</span>&gt;
+        &lt;<span class="k">div</span> class=<span class="s">"dustbin"</span>
+             style=<span class="s">"background: @@(drop.IsOver ? "#15803d" : "#1f2430")"</span>&gt;
+            @@(drop.IsOver ? <span class="s">"Release to drop"</span> : _label)
+        &lt;/<span class="k">div</span>&gt;
+    &lt;/<span class="k">BdndDropTarget</span>&gt;
+&lt;/<span class="k">BdndProvider</span>&gt;
+
+<span class="k">@@code</span> {
+    <span class="k">private readonly string</span>[] _boxes = [<span class="s">"Glass"</span>, <span class="s">"Banana"</span>, <span class="s">"Paper"</span>];
+    <span class="k">private string</span> _label = <span class="s">"Drag a box here"</span>;
+
+    <span class="k">private void</span> HandleDrop(BdndDropEventArgs&lt;<span class="k">string</span>&gt; e)
+        =&gt; _label = <span class="s">$"Dropped: {e.Item}"</span>;
+}</pre>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <BdndProvider>
+            <div class="row-wrap">
+                @foreach (var name in _boxes)
+                {
+                    <BdndDraggable TItem="string" Type="@ItemTypes.Box" Item="name" Context="drag">
+                        <div class="box" style="opacity:@(drag.IsDragging ? "0.4" : "1")">@name</div>
+                    </BdndDraggable>
+                }
+            </div>
+
+            <BdndDropTarget TItem="string" Accept="@ItemTypes.Box" OnDrop="HandleDrop" Context="drop" style="display:contents">
+                <div class="dustbin" style="margin-top:1.5rem;background:@(drop.IsOver ? "#15803d" : "#1f2430")">
+                    @(drop.IsOver ? "Release to drop" : _label)
+                </div>
+            </BdndDropTarget>
+        </BdndProvider>
+    </div>
+
+    <div class="bb-note">
+        Three things make this work: the components sit inside one <code>BdndProvider</code>; the draggable's
+        <code>Type</code> is one of the types the target lists in <code>Accept</code>; and the page is interactive,
+        because a statically rendered page never wires up drag events.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Core concepts</h3>
+    <p class="bb-card-desc">
+        Bdnd brings React DnD's data-driven model to Blazor as components rather than hooks.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Concept</th><th>In Bdnd</th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bb-table-key">Items and types</td>
+                    <td>You drag an item - any C# object - of a type, a string. A target accepts the types it lists in <code>Accept</code> or <code>AcceptTypes</code>; the item's .NET type does not take part.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Components</td>
+                    <td><code>BdndProvider</code>, <code>BdndDraggable</code>, <code>BdndDropTarget</code>, <code>BdndDragLayer</code> and <code>BdndDragHandle</code> - React DnD's provider, <code>useDrag</code>, <code>useDrop</code>, <code>useDragLayer</code> and a drag handle.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Collected state</td>
+                    <td>What a component's child content renders from: <code>IsDragging</code>, <code>IsOver</code>, <code>IsOverShallow</code>, <code>CanDrop</code>, the item and the offsets.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Monitor</td>
+                    <td><code>IBdndMonitor</code>, a read-only view of the live drag state, on every collected state and callback argument as <code>Monitor</code>.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Backend</td>
+                    <td>The browser's native HTML5 drag events, so files, text and links dragged in from outside the browser drop too.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where to go next</h3>
+    <div class="bb-try">
+        <a href="tutorial" class="btn btn-outline">Allow only legal moves →</a>
+        <a href="sortable/simple" class="btn btn-outline">Reorder a list →</a>
+        <a href="drag-around/custom-layer" class="btn btn-outline">Draw your own preview →</a>
+        <a href="customize/handles" class="btn btn-outline">Drag by a handle →</a>
+        <a href="other/native-files" class="btn btn-outline">Accept dropped files →</a>
+    </div>
+</div>
+
+@code {
+    private readonly string[] _boxes = ["Glass", "Banana", "Paper"];
+    private string _label = "Drag a box here";
+
+    private void HandleDrop(BdndDropEventArgs<string> e) => _label = $"Dropped: {e.Item}";
+}
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Home.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Home.razor
index 5ad0d66dc0b..936676a7770 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Home.razor
@@ -1,57 +1,353 @@
 @page "/"
+@layout MainLayout
 
-<PageTitle>bit Bdnd - drag and drop for Blazor</PageTitle>
+<PageTitle>Bdnd - declarative drag and drop for Blazor</PageTitle>
 
-<div class="demo-header">
-    <h3>bit Bdnd</h3>
-    <p class="text-muted">
-        A declarative drag-and-drop library for Blazor inspired by
-        <a href="https://react-dnd.github.io/react-dnd" target="_blank" rel="noopener">React DnD</a>.
-        It brings the same data-driven model - items, types, monitors and an HTML5 drag-and-drop
-        backend - to Blazor as composable components. Try it: drag a box onto the dustbin.
-    </p>
-</div>
+@* The landing page: hero → proof strip → feature grid → code walkthrough → the React DnD mapping →
+   persona tiles → FAQ → final call to action. Everything else on the site is a documentation page
+   under DocsLayout. The hero's sample is live rather than a picture of one - a drag-and-drop library
+   is best introduced by being dragged. *@
+
+<div class="bb-landing">
 
-<DemoCode />
+    @* ============================== Hero ============================== *@
 
-<section class="demo-stage">
-    <BdndProvider>
-        <div class="row-wrap">
-            @foreach (var name in _boxes)
-            {
-                <BdndDraggable TItem="string" Type="@ItemTypes.Box" Item="name" Context="drag">
-                    <div class="box" style="opacity:@(drag.IsDragging ? "0.4" : "1")">@name</div>
-                </BdndDraggable>
-            }
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Drag and drop for Blazor,<br /><span class="bb-hero-accent">the React DnD way.</span></h1>
+            <p class="bb-hero-sub">
+                Declare what can be dragged and where it can go - <code>BdndDraggable</code>,
+                <code>BdndDropTarget</code>, <code>BdndDragLayer</code>, <code>BdndDragHandle</code> - and render
+                from the state they hand you. Typed items matched by type, custom drag previews, handles, nesting
+                and native file drops, on the browser's own HTML5 drag and drop, with the drag state in C#.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bdnd</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="tutorial" class="btn btn-secondary bb-btn-lg">Live demos</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
         </div>
 
-        <BdndDropTarget TItem="string" Accept="@ItemTypes.Box" OnDrop="HandleDrop" Context="drop" style="display:contents">
-            <div class="dustbin" style="margin-top:1.5rem;background:@(drop.IsOver ? "#15803d" : "#1f2430")">
-                @(drop.IsOver ? "Release to drop" : _label)
+        @* The sample, framed as a window: the markup on top, and what it renders underneath - live, so
+           the first thing a visitor can do here is drag something. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Board.razor</span>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BdndDraggable</span> TItem=<span class="s">"Card"</span> Type=<span class="s">"card"</span> Item=<span class="s">"card"</span>&gt;
+    …
+&lt;/<span class="k">BdndDraggable</span>&gt;
+
+&lt;<span class="k">BdndDropTarget</span> TItem=<span class="s">"Card"</span> Accept=<span class="s">"card"</span> OnDrop=<span class="s">"Archive"</span>&gt;
+    …
+&lt;/<span class="k">BdndDropTarget</span>&gt;
+
+<span class="k">private void</span> Archive(BdndDropEventArgs&lt;Card&gt; e)
+    =&gt; _cards.Remove(e.Item!);</pre>
+                <BdndProvider>
+                    <div class="home-hero-live">
+                        <div class="home-hero-cards">
+                            @foreach (var card in _cards)
+                            {
+                                <BdndDraggable TItem="Card" Type="@ItemTypes.Card" Item="card" Context="drag" @key="card">
+                                    <div class="box" style="opacity:@(drag.IsDragging ? "0.4" : "1")">@card.Title</div>
+                                </BdndDraggable>
+                            }
+                            @if (_cards.Count == 0)
+                            {
+                                <p class="home-hero-done">
+                                    All archived.
+                                    <button type="button" class="btn btn-secondary" @onclick="Reset">Put them back</button>
+                                </p>
+                            }
+                        </div>
+
+                        <BdndDropTarget TItem="Card" Accept="@ItemTypes.Card" OnDrop="Archive" Context="drop" style="display:contents">
+                            <div class="home-hero-bin @(drop.IsOver ? "is-over" : drop.CanDrop ? "is-ready" : null)">
+                                @(drop.IsOver ? "Release to archive" : _archived == 0 ? "Drop a card to archive it" : $"{_archived} archived")
+                            </div>
+                        </BdndDropTarget>
+                    </div>
+                </BdndProvider>
             </div>
-        </BdndDropTarget>
-    </BdndProvider>
-</section>
-
-<section class="demo-notes">
-    <h4>Core concepts</h4>
-    <ul>
-        <li><strong>Items &amp; types</strong> - you drag <em>data</em> (an item object) of a certain <em>type</em> (a string), not a view.</li>
-        <li><strong>Monitor</strong> (<code>IBdndMonitor</code>) - exposes live drag state: <code>IsDragging</code>, <code>IsOver</code>, <code>CanDrop</code>, offsets, the item, and more.</li>
-        <li><strong>Components</strong> - <code>&lt;BdndProvider&gt;</code>, <code>&lt;BdndDraggable&gt;</code>, <code>&lt;BdndDropTarget&gt;</code>, <code>&lt;BdndDragLayer&gt;</code> and <code>&lt;BdndDragHandle&gt;</code> map to React DnD's provider and hooks.</li>
-        <li><strong>Backend</strong> - built on the browser's native HTML5 drag events, so native OS drags of files, text and links work too.</li>
-    </ul>
-
-    <h4>Quick start</h4>
-    <p>Register the service in <code>Program.cs</code>:</p>
-    <pre><code>builder.Services.AddBitBdndServices();</code></pre>
-    <p>Then wrap a region in a <code>BdndProvider</code> and declare sources and targets - "View code" above shows this very page.</p>
-    <p>Pick an example from the sidebar to see more.</p>
-</section>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>React DnD's model</strong><span>items, types, monitors and drop results</span></div>
+        <div><strong>Drag state in C#</strong><span>the browser layer only does what C# cannot</span></div>
+        <div><strong>Native OS drags</strong><span>files, text, links and HTML</span></div>
+        <div><strong>Every hosting model</strong><span>WebAssembly, Server, Web App and Hybrid</span></div>
+    </section>
+
+    @* ============================== Feature grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>Everything React DnD does - as Blazor components</h2>
+        <p class="bb-section-sub">
+            Where React DnD has hooks, Bdnd has components: a draggable, a drop target, a drag layer and a drag
+            handle, each handing its child content the state to render from. The demo ports React DnD's own
+            examples, so every one of them can be opened side by side.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Sources and targets</h3>
+                <p class="bb-card-desc">
+                    <code>BdndDraggable</code> is <code>useDrag</code> and <code>BdndDropTarget</code> is
+                    <code>useDrop</code>: <code>Type</code> and <code>Item</code> on one, <code>Accept</code> and
+                    <code>OnDrop</code> on the other, and <code>IsDragging</code>, <code>IsOver</code> and
+                    <code>CanDrop</code> to render from.
+                </p>
+                <a href="dustbin/single" class="btn btn-outline">Single target →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Typed items, gated drops</h3>
+                <p class="bb-card-desc">
+                    Any C# object is an item, matched by its type string. <code>CanDropPredicate</code> narrows a
+                    target further from the item itself - a chessboard square takes only a legal knight move.
+                </p>
+                <a href="tutorial" class="btn btn-outline">Chessboard tutorial →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Custom previews and handles</h3>
+                <p class="bb-card-desc">
+                    <code>UseCustomDragLayer</code> hides the browser's ghost and a <code>BdndDragLayer</code> draws
+                    your own from the live offsets; <code>UseHandle</code> starts a drag only from a
+                    <code>BdndDragHandle</code>.
+                </p>
+                <a href="drag-around/custom-layer" class="btn btn-outline">Custom drag layer →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Sortable lists</h3>
+                <p class="bb-card-desc">
+                    Cards that are each a draggable and a drop target, reordered from <code>OnHover</code> as the
+                    dragged card passes their middle - React DnD's algorithm, without the flicker.
+                </p>
+                <a href="sortable/simple" class="btn btn-outline">Sortable →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Nesting</h3>
+                <p class="bb-card-desc">
+                    Nested sources drag the innermost one; nested targets report <code>IsOver</code> for every
+                    target under the pointer and <code>IsOverShallow</code> for the innermost, and drops reach them
+                    innermost first.
+                </p>
+                <a href="nesting/drop-targets" class="btn btn-outline">Nested drop targets →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Native drags</h3>
+                <p class="bb-card-desc">
+                    Accept files from the desktop, and text, links and HTML from any page, with
+                    <code>BdndNativeTypes</code> - read in <code>OnNativeDrop</code> while the browser still lets
+                    them be read.
+                </p>
+                <a href="other/native-files" class="btn btn-outline">Native files →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Wrap a region in a provider</h3>
+                    <p>
+                        One service registration, then a <code>BdndProvider</code> around whatever drags and drops.
+                        Each provider creates the manager its components share - there is nothing to configure.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code">builder.Services.AddBitBdndServices();   <span class="c">// Program.cs</span>
+
+&lt;<span class="k">BdndProvider</span>&gt;
+    …draggables and drop targets…
+&lt;/<span class="k">BdndProvider</span>&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Declare a source and a target</h3>
+                    <p>
+                        A draggable carries an item of a type; a target accepts the types it lists. Both hand their
+                        content the collected state, so the hover and the dragging look are one expression each.
+                    </p>
+                    <a href="dustbin/multiple">Multiple targets →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BdndDraggable</span> TItem=<span class="s">"Box"</span> Type=<span class="s">"box"</span> Item=<span class="s">"box"</span> Context=<span class="s">"drag"</span>&gt;
+    &lt;<span class="k">div</span> style=<span class="s">"opacity: @@(drag.IsDragging ? 0.4 : 1)"</span>&gt;@@box.Name&lt;/<span class="k">div</span>&gt;
+&lt;/<span class="k">BdndDraggable</span>&gt;
+
+&lt;<span class="k">BdndDropTarget</span> TItem=<span class="s">"Box"</span> AcceptTypes=<span class="s">"@@(["box", "crate"])"</span>
+                OnDrop=<span class="s">"Store"</span> Context=<span class="s">"drop"</span>&gt;
+    &lt;<span class="k">div</span> class=<span class="s">"bin @@(drop.CanDrop ? "ready" : "")"</span>&gt;Drop here&lt;/<span class="k">div</span>&gt;
+&lt;/<span class="k">BdndDropTarget</span>&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Read the outcome</h3>
+                    <p>
+                        A target can publish a result from <code>OnDrop</code>; the source's <code>OnEnd</code>
+                        receives it with <code>DidDrop</code>, which tells a drop from a cancel - and runs even if
+                        the drop re-rendered the source away.
+                    </p>
+                    <a href="dustbin/copy-or-move">Copy or move →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BdndDraggable</span> TItem=<span class="s">"Box"</span> Type=<span class="s">"box"</span> Item=<span class="s">"box"</span> OnEnd=<span class="s">"Ended"</span>&gt;…&lt;/<span class="k">BdndDraggable</span>&gt;
+
+<span class="k">private void</span> Ended(BdndDragEndContext&lt;Box&gt; e)
+{
+    <span class="k">if</span> (e.DidDrop) _palette.Remove(e.Item!);   <span class="c">// e.DropResult: what the target set</span>
+}</pre>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Coming from React DnD?</h2>
+        <p class="bb-section-sub">
+            The same concepts under the names a Blazor component gives them. There are no connector refs to
+            attach - a component's host element is the source or the target - and native drops have a callback of
+            their own.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="React DnD compared with Bit.Bdnd">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>React DnD</th><th>Bit.Bdnd</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>The context</td><td><code>&lt;DndProvider backend={HTML5Backend}&gt;</code></td><td><code>&lt;BdndProvider&gt;</code>, the HTML5 backend built in</td></tr>
+                    <tr><td>A drag source</td><td><code>useDrag({ type, item })</code></td><td><code>&lt;BdndDraggable Type Item&gt;</code></td></tr>
+                    <tr><td>A drop target</td><td><code>useDrop({ accept, drop })</code></td><td><code>&lt;BdndDropTarget Accept OnDrop&gt;</code></td></tr>
+                    <tr><td>Only the innermost target</td><td><code>isOver({ shallow: true })</code></td><td><code>IsOverShallow</code></td></tr>
+                    <tr><td>Your own preview</td><td><code>getEmptyImage()</code> and <code>useDragLayer</code></td><td><code>UseCustomDragLayer</code> and <code>&lt;BdndDragLayer&gt;</code></td></tr>
+                    <tr><td>Files from the desktop</td><td><code>NativeTypes.FILE</code> in <code>drop</code></td><td><code>BdndNativeTypes.File</code> in <code>OnNativeDrop</code></td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bdnd?</h3>
+                <p class="bb-card-desc">Install, register one service, wrap a region in a provider - a first drop in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Coming from React DnD?</h3>
+                <p class="bb-card-desc">Its examples are ported one for one - start with the chessboard tutorial you already know.</p>
+                <a href="tutorial" class="btn btn-outline">Open the tutorial →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this React DnD running through JavaScript interop?</summary>
+                <p>
+                    No. The drag state - the item, its type, the source, the offsets, every target's hover and the
+                    drop result - lives in a C# manager shared by the components of a <code>BdndProvider</code>. A
+                    small script module does only what C# cannot: configure the native drag while
+                    <code>dragstart</code> is being dispatched, follow the pointer, track hover and read native drops.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    Any interactive one, on .NET 8, 9 and 10: WebAssembly is the best fit, since every
+                    <code>dragover</code> is handled without a network round trip; Server, Auto and Hybrid work the
+                    same, a round trip later. Prerendered markup shows the idle state and starts working once the
+                    page is interactive.
+                </p>
+            </details>
+            <details>
+                <summary>Does it work on touch screens?</summary>
+                <p>
+                    Like React DnD's HTML5 backend, Bdnd has no touch backend: it needs a pointer that raises HTML5
+                    drag events - a mouse, a pen or a trackpad.
+                </p>
+            </details>
+            <details>
+                <summary>Can I read the contents of a dropped file?</summary>
+                <p>
+                    During a drop the browser exposes only a file's name, size and MIME type, and that is what
+                    <code>OnNativeDrop</code> receives. To read the contents, use an <code>InputFile</code> - an
+                    invisible one layered over the drop zone, for instance - or your own interop.
+                </p>
+            </details>
+            <details>
+                <summary>Is there a stylesheet to include?</summary>
+                <p>
+                    No. Bdnd draws nothing of its own - what is dragged and where it lands look the way your markup
+                    says - and its script module is imported by the components the first time they need it.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Pick it up, put it down</h2>
+        <p class="bb-section-sub">One package, one service, one provider - and any part of a page drags and drops.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bdnd</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="tutorial" class="btn btn-secondary bb-btn-lg">Browse the demos</a>
+        </div>
+    </section>
+</div>
 
 @code {
-    private readonly string[] _boxes = ["Glass", "Banana", "Paper"];
-    private string _label = "Drag a box here";
+    private sealed record Card(string Title);
+
+    private static readonly Card[] Board = [new("Write the docs"), new("Review the PR"), new("Ship the release")];
+
+    private readonly List<Card> _cards = [.. Board];
+    private int _archived;
+
+    private void Archive(BdndDropEventArgs<Card> e)
+    {
+        if (e.Item is not null && _cards.Remove(e.Item)) _archived++;
+    }
 
-    private void HandleDrop(BdndDropEventArgs<string> e) => _label = $"Dropped: {e.Item}";
+    private void Reset()
+    {
+        _cards.Clear();
+        _cards.AddRange(Board);
+        _archived = 0;
+    }
 }
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/McpServer.razor b/src/Utilities/Bdnd/Demo/Client/Pages/McpServer.razor
index 4898682562c..e6816eb93bf 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/McpServer.razor
@@ -3,11 +3,11 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - bit Bdnd</PageTitle>
+<PageTitle>MCP server · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>MCP server</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
         This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing drag-and-drop
         code with Bit.Bdnd reads the library itself - its compiled API documentation, its guide, the components and
         these demo pages - instead of guessing at an API it half remembers, or borrowing one from React DnD. Every
@@ -15,8 +15,8 @@
     </p>
 </div>
 
-<section class="mcp-panel">
-    <h4>Connect a client</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
@@ -24,43 +24,28 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre class="mcp-output"><code>@ClientConfig</code></pre>
+    <pre class="bb-code">@ClientConfig</pre>
 </section>
 
-<section class="mcp-panel">
-    <h4>Tools</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
-    <table class="mcp-table">
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code>SearchBdnd</code></td>
-                <td>Everything at once - the guide, every public member, the setup guides and the demo's pages - each hit with the exact follow-up call.</td>
-            </tr>
-            <tr>
-                <td><code>GetBdndSetupGuide</code></td>
-                <td>The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid - the service registration and the provider included.</td>
-            </tr>
-            <tr>
-                <td><code>GetBdndGuideSection</code></td>
-                <td>One section of the reference guide, or the index of sections.</td>
-            </tr>
-            <tr>
-                <td><code>GetBdndApi</code></td>
-                <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBdndDrop</code></td>
-                <td>Runs a drag through the real components - a draggable and a tree of drop targets - and reports which targets can drop, which are hovered (deep and shallow), the order <code>OnDrop</code> runs in and what <code>OnEnd</code> receives - or a sample scenario, to see the format.</td>
-            </tr>
-            <tr>
-                <td><code>GetBdndSourceFile</code></td>
-                <td>One demo or library file verbatim - every page here is a working example - or the index of files.</td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var tool in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        <td>@((MarkupString)tool.Description)</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
 
     <p>
         The guide, the API, a sample scenario and the sources are also exposed as <code>bdnd://</code>
@@ -69,19 +54,19 @@
     </p>
 </section>
 
-<section class="mcp-panel">
-    <h4>The same tools over plain HTTP</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
-        <li><a href="/api/mcp/SearchBdnd?query=sortable%20list" target="_blank" rel="noopener">/api/mcp/SearchBdnd?query=sortable list</a></li>
-        <li><a href="/api/mcp/GetBdndApi?typeName=BdndDraggable" target="_blank" rel="noopener">/api/mcp/GetBdndApi?typeName=BdndDraggable</a></li>
-        <li><a href="/api/mcp/InspectBdndDrop" target="_blank" rel="noopener">/api/mcp/InspectBdndDrop</a></li>
-        <li><a href="/api/mcp/GetBdndSourceFile?path=Demo/Client/Pages/Sortable/SortableCard.razor" target="_blank" rel="noopener">/api/mcp/GetBdndSourceFile?path=Demo/Client/Pages/Sortable/SortableCard.razor</a></li>
+    <ul class="bb-detail-list">
+        @foreach (var (href, text) in HttpExamples)
+        {
+            <li><a href="@href" target="_blank" rel="noopener">@text</a></li>
+        }
     </ul>
 </section>
 
@@ -97,4 +82,30 @@
           }
         }
         """;
+
+    // The server's tools, in the order an agent usually needs them. The one place to change when a tool is
+    // added, renamed or retired; the description is markup.
+    private static readonly (string Name, string Description)[] Tools =
+    [
+        ("SearchBdnd",
+            "Everything at once - the guide, every public member, the setup guides and the demo's pages - each hit with the exact follow-up call."),
+        ("GetBdndSetupGuide",
+            "The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid - the service registration and the provider included."),
+        ("GetBdndGuideSection",
+            "One section of the reference guide, or the index of sections."),
+        ("GetBdndApi",
+            "One public type with every parameter, property and method, its real default and its documentation - or the index of types."),
+        ("InspectBdndDrop",
+            "Runs a drag through the real components - a draggable and a tree of drop targets - and reports which targets can drop, which are hovered (deep and shallow), the order <code>OnDrop</code> runs in and what <code>OnEnd</code> receives - or a sample scenario, to see the format."),
+        ("GetBdndSourceFile",
+            "One demo or library file verbatim - every page here is a working example - or the index of files."),
+    ];
+
+    private static readonly (string Href, string Text)[] HttpExamples =
+    [
+        ("/api/mcp/SearchBdnd?query=sortable%20list", "/api/mcp/SearchBdnd?query=sortable list"),
+        ("/api/mcp/GetBdndApi?typeName=BdndDraggable", "/api/mcp/GetBdndApi?typeName=BdndDraggable"),
+        ("/api/mcp/InspectBdndDrop", "/api/mcp/InspectBdndDrop (runs the sample scenario)"),
+        ("/api/mcp/GetBdndSourceFile?path=Demo/Client/Pages/Sortable/SortableCard.razor", "/api/mcp/GetBdndSourceFile?path=Demo/Client/Pages/Sortable/SortableCard.razor"),
+    ];
 }
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DragSources.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DragSources.razor
index e65b61141e8..dd63505ef20 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DragSources.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DragSources.razor
@@ -1,10 +1,10 @@
 @page "/nesting/drag-sources"
 
-<PageTitle>Nesting · Drag Sources - bit Bdnd</PageTitle>
+<PageTitle>Nesting - Drag Sources · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Nesting - Drag Sources</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Nesting - Drag Sources</h1>
+    <p class="bb-subtitle">
         Drag sources can be nested. Grabbing an inner box drags <em>that</em> box, not its parent,
         because the inner <code>BdndDraggable</code> stops the <code>dragstart</code> from bubbling.
         Drop any of them on the bin to see which item was actually dragged.
@@ -13,7 +13,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <BdndDraggable TItem="string" Type="@ItemTypes.Box" Item="@("OUTER")" Context="o">
             <div class="nest-box" style="@($"background:#1565c0;opacity:{(o.IsDragging ? "0.4" : "1")};padding:2rem;")">
@@ -38,7 +38,7 @@
             </div>
         </BdndDropTarget>
     </BdndProvider>
-</section>
+</div>
 
 @code {
     private string? _last;
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DropTargets.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DropTargets.razor
index b0baf206536..6cfaea531e5 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DropTargets.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Nesting/DropTargets.razor
@@ -1,10 +1,10 @@
 @page "/nesting/drop-targets"
 
-<PageTitle>Nesting · Drop Targets - bit Bdnd</PageTitle>
+<PageTitle>Nesting - Drop Targets · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Nesting - Drop Targets</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Nesting - Drop Targets</h1>
+    <p class="bb-subtitle">
         Drop targets can be nested. <code>IsOver</code> is true for every target under the
         pointer, while <code>IsOverShallow</code> (React DnD's <code>isOver({ shallow: true })</code>)
         is true only for the innermost one. Drag the box over the nested squares to see the
@@ -14,7 +14,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <BdndDraggable TItem="string" Type="@ItemTypes.Box" Item="@("payload")" Context="d">
             <div class="box" style="margin-bottom:1.5rem;opacity:@(d.IsDragging ? "0.4" : "1")">
@@ -25,13 +25,13 @@
         @RenderNest(0)
     </BdndProvider>
 
-    <p style="margin-top:1rem;">
+    <p class="demo-caption">
         <span style="display:inline-block;width:14px;height:14px;background:#ffeb3b;border:1px solid #999;"></span>
         = shallow hover (innermost) &nbsp;
         <span style="display:inline-block;width:14px;height:14px;background:rgba(255,235,59,0.25);border:1px solid #999;"></span>
         = also over (ancestor)
     </p>
-</section>
+</div>
 
 @code {
     private const int Depth = 3;
@@ -69,6 +69,9 @@
         if (t.IsOverShallow) bg = "#ffeb3b";
         else if (t.IsOver) bg = "rgba(255,235,59,0.25)";
         var margin = level == 0 ? "" : "margin-top:0.75rem;";
-        return $"background:{bg};{margin}color:#222;";
+        // dark ink on the yellow highlight and the light levels, white on the dark ones; a level that is only
+        // "also over" is see-through, so it takes the ink of the page it lets show through
+        var ink = t.IsOverShallow ? "#222" : t.IsOver ? "inherit" : shade < 128 ? "#fff" : "#222";
+        return $"background:{bg};{margin}color:{ink};";
     }
 }
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/NotFound.razor b/src/Utilities/Bdnd/Demo/Client/Pages/NotFound.razor
index 091b6b8bc5e..35515ad47fa 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/NotFound.razor
@@ -1,5 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
+<PageTitle>Not found · Bdnd</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeFiles.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeFiles.razor
index b90106af05a..3fa4b4de903 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeFiles.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeFiles.razor
@@ -1,10 +1,10 @@
 @page "/other/native-files"
 
-<PageTitle>Other · Native Files - bit Bdnd</PageTitle>
+<PageTitle>Other - Native Files · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Other - Native Files</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Other - Native Files</h1>
+    <p class="bb-subtitle">
         A drop target can accept OS-level drags by listing a <code>BdndNativeTypes</code> value. Here
         the target accepts <code>BdndNativeTypes.File</code>; drag files from your file explorer onto
         it and the <code>OnNativeDrop</code> callback receives the file list.
@@ -13,7 +13,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <BdndDropTarget TItem="object" Accept="@BdndNativeTypes.File" Context="t"
                         style="display:contents" OnNativeDrop="HandleNativeDrop">
@@ -26,27 +26,29 @@
 
     @if (_files.Count > 0)
     {
-        <h4 style="margin-top:1.5rem;">Dropped files (@_files.Count)</h4>
-        <table class="demo-table" style="max-width:34rem;">
-            <thead><tr><th>Name</th><th>Type</th><th>Size</th></tr></thead>
-            <tbody>
-                @foreach (var f in _files)
-                {
-                    <tr>
-                        <td>@f.Name</td>
-                        <td>@(string.IsNullOrEmpty(f.Type) ? "-" : f.Type)</td>
-                        <td>@FormatSize(f.Size)</td>
-                    </tr>
-                }
-            </tbody>
-        </table>
+        <h4 class="demo-result-title">Dropped files (@_files.Count)</h4>
+        <div class="bb-scroll" style="max-width:34rem;">
+            <table class="bb-table demo-table">
+                <thead><tr><th>Name</th><th>Type</th><th>Size</th></tr></thead>
+                <tbody>
+                    @foreach (var f in _files)
+                    {
+                        <tr>
+                            <td>@f.Name</td>
+                            <td>@(string.IsNullOrEmpty(f.Type) ? "-" : f.Type)</td>
+                            <td>@FormatSize(f.Size)</td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
     }
+</div>
 
-    <p class="text-muted" style="margin-top:1rem;">
-        Only file metadata (name, size, MIME type) is exposed by the browser during a drop;
-        reading contents would use an additional file API.
-    </p>
-</section>
+<div class="bb-note">
+    Only file metadata (name, size, MIME type) is exposed by the browser during a drop;
+    reading contents would use an additional file API.
+</div>
 
 @code {
     private readonly List<BdndNativeFile> _files = [];
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeHtml.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeHtml.razor
index cc0a4dd18e1..980d935aa25 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeHtml.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Other/NativeHtml.razor
@@ -1,10 +1,10 @@
 @page "/other/native-html"
 
-<PageTitle>Other · Native HTML - bit Bdnd</PageTitle>
+<PageTitle>Other - Native HTML, Text &amp; URLs · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Other - Native HTML, Text &amp; URLs</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Other - Native HTML, Text &amp; URLs</h1>
+    <p class="bb-subtitle">
         The target below accepts <code>BdndNativeTypes.Html</code>, <code>BdndNativeTypes.Text</code> and
         <code>BdndNativeTypes.Url</code>. Select some text on another page (or in the box on the right)
         and drag it here, or drag a link / image - the dropped HTML, plain text and any URLs
@@ -14,7 +14,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <div class="row-wrap" style="align-items:flex-start;">
             <BdndDropTarget TItem="object" Context="t" style="display:contents"
@@ -25,7 +25,7 @@
                 </div>
             </BdndDropTarget>
 
-            <div style="border:1px dashed #aaa;padding:1rem;max-width:18rem;">
+            <div class="native-source">
                 <p>Try selecting and dragging <b>this rich text</b> with a
                     <a href="https://react-dnd.github.io/react-dnd" target="_blank" rel="noopener">link inside</a>.</p>
             </div>
@@ -34,7 +34,7 @@
 
     @if (_last is not null)
     {
-        <div class="native-drop-result" style="margin-top:1.5rem;max-width:42rem;">
+        <div class="native-drop-result">
             <h4>Last native drop - <code>@_last.ItemType</code></h4>
             @if (string.IsNullOrEmpty(_last.Text) is false)
             {
@@ -48,12 +48,12 @@
             {
                 <div>
                     <b>HTML (raw):</b>
-                    <pre style="white-space:pre-wrap;background:#f1f2f4;padding:0.5rem;border-radius:6px;">@_last.Html</pre>
+                    <pre class="bb-code native-drop-html">@_last.Html</pre>
                 </div>
             }
         </div>
     }
-</section>
+</div>
 
 @code {
     private readonly string[] _accepted =
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/CancelOnDropOutside.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/CancelOnDropOutside.razor
index 6138bdda4c8..32aa3b81747 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/CancelOnDropOutside.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/CancelOnDropOutside.razor
@@ -1,10 +1,10 @@
 @page "/sortable/cancel-on-drop-outside"
 
-<PageTitle>Sortable · Cancel on Drop Outside - bit Bdnd</PageTitle>
+<PageTitle>Sortable - Cancel on Drop Outside · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Sortable - Cancel on Drop Outside</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Sortable - Cancel on Drop Outside</h1>
+    <p class="bb-subtitle">
         Like the simple sortable, but the order is only committed if you drop <em>on the list</em>.
         Drop a card anywhere else and it snaps back to where it started. This uses
         <code>OnEnd</code> with its <code>DidDrop</code> to detect a drop outside. The list
@@ -14,7 +14,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <BdndDropTarget TItem="SortableCard.DragItem" Accept="@ItemTypes.Card" style="max-width:24rem;">
             @foreach (var (card, index) in _cards.Select((c, i) => (c, i)))
@@ -25,8 +25,8 @@
         </BdndDropTarget>
     </BdndProvider>
 
-    <p class="text-muted sortable-order" style="margin-top:1rem;">Order: @string.Join(", ", _cards.Select(c => c.Text))</p>
-</section>
+    <p class="demo-caption sortable-order">Order: @string.Join(", ", _cards.Select(c => c.Text))</p>
+</div>
 
 @code {
     private readonly List<SortableCard.CardModel> _cards =
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/Simple.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/Simple.razor
index 60b3c5c67ca..aeb3dc0fd3c 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/Simple.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/Simple.razor
@@ -1,10 +1,10 @@
 @page "/sortable/simple"
 
-<PageTitle>Sortable · Simple - bit Bdnd</PageTitle>
+<PageTitle>Sortable - Simple · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Sortable - Simple</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Sortable - Simple</h1>
+    <p class="bb-subtitle">
         Each card is <em>both</em> a <code>BdndDraggable</code> and a <code>BdndDropTarget</code>. While
         dragging, the <code>OnHover</code> handler compares the pointer against each card's
         midpoint and reorders the list live. Reordering happens during hover, not on drop.
@@ -13,7 +13,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         @* the list accepts cards too, so the gaps between cards are not "no-drop" zones *@
         <BdndDropTarget TItem="SortableCard.DragItem" Accept="@ItemTypes.Card" style="max-width:24rem;">
@@ -24,8 +24,8 @@
         </BdndDropTarget>
     </BdndProvider>
 
-    <p class="text-muted sortable-order" style="margin-top:1rem;">Order: @string.Join(", ", _cards.Select(c => c.Text))</p>
-</section>
+    <p class="demo-caption sortable-order">Order: @string.Join(", ", _cards.Select(c => c.Text))</p>
+</div>
 
 @code {
     private readonly List<SortableCard.CardModel> _cards =
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/StressTest.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/StressTest.razor
index 756fd0e593a..1c8aa2b8711 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/StressTest.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Sortable/StressTest.razor
@@ -1,10 +1,10 @@
 @page "/sortable/stress-test"
 
-<PageTitle>Sortable · Stress Test - bit Bdnd</PageTitle>
+<PageTitle>Sortable - Stress Test · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Sortable - Stress Test</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Sortable - Stress Test</h1>
+    <p class="bb-subtitle">
         A long sortable list (@_cards.Count items). Reordering still runs the per-item midpoint
         hit-test on every hover. Handy for spotting performance regressions.
     </p>
@@ -12,18 +12,18 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         @* the list accepts cards too, so the gaps between cards are not "no-drop" zones *@
         <BdndDropTarget TItem="SortableCard.DragItem" Accept="@ItemTypes.Card"
-                        style="max-width:24rem;max-height:480px;overflow-y:auto;border:1px solid var(--demo-border);border-radius:8px;padding:0.5rem;">
+                        class="sortable-scroll" style="max-width:24rem;">
             @foreach (var (card, index) in _cards.Select((c, i) => (c, i)))
             {
                 <SortableCard Card="card" Index="index" OnMove="Move" @key="card.Id" />
             }
         </BdndDropTarget>
     </BdndProvider>
-</section>
+</div>
 
 @code {
     private readonly List<SortableCard.CardModel> _cards =
diff --git a/src/Utilities/Bdnd/Demo/Client/Pages/Tutorial.razor b/src/Utilities/Bdnd/Demo/Client/Pages/Tutorial.razor
index c3f1cf78b2a..54e72fd32cb 100644
--- a/src/Utilities/Bdnd/Demo/Client/Pages/Tutorial.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Pages/Tutorial.razor
@@ -1,10 +1,10 @@
 @page "/tutorial"
 
-<PageTitle>Chessboard Tutorial - bit Bdnd</PageTitle>
+<PageTitle>Chessboard Tutorial · Bdnd</PageTitle>
 
-<div class="demo-header">
-    <h3>Chessboard Tutorial</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Chessboard Tutorial</h1>
+    <p class="bb-subtitle">
         The canonical React DnD tutorial. The knight (♘) is a <code>BdndDraggable</code>; every
         square is a <code>BdndDropTarget</code> whose <code>CanDropPredicate</code> only allows legal
         knight moves. Legal targets are highlighted while dragging.
@@ -13,7 +13,7 @@
 
 <DemoCode />
 
-<section class="demo-stage">
+<div class="bb-demo">
     <BdndProvider>
         <div class="chessboard">
             @for (int row = 0; row < 8; row++)
@@ -57,10 +57,10 @@
         </div>
     </BdndProvider>
 
-    <p class="text-muted" style="margin-top:1rem;">
+    <p class="demo-caption">
         Knight at column @_knightCol, row @_knightRow. Drag it to a highlighted square.
     </p>
-</section>
+</div>
 
 @code {
     private int _knightCol = 1;
diff --git a/src/Utilities/Bdnd/Demo/Client/Routes.razor b/src/Utilities/Bdnd/Demo/Client/Routes.razor
index 4b567cd117d..989f92736d1 100644
--- a/src/Utilities/Bdnd/Demo/Client/Routes.razor
+++ b/src/Utilities/Bdnd/Demo/Client/Routes.razor
@@ -1,6 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h3" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/Bdnd/Demo/Server/Components/App.razor b/src/Utilities/Bdnd/Demo/Server/Components/App.razor
index d5dcab6a925..2a65bf32923 100644
--- a/src/Utilities/Bdnd/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bdnd/Demo/Server/Components/App.razor
@@ -4,15 +4,35 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="bit Bdnd (Bit.Bdnd) - a declarative drag-and-drop library for Blazor inspired by React DnD, with typed items, drop targets, custom drag layers, drag handles, sortable lists and native file drops." />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Bdnd (Bit.Bdnd) - a declarative drag-and-drop library for Blazor inspired by React DnD, with typed items, drop targets, custom drag layers, drag handles, sortable lists and native file drops." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Bdnd" />
+    <meta property="og:title" content="Bdnd - declarative drag and drop for Blazor" />
+    <meta property="og:description" content="React DnD's model in Blazor: draggables, drop targets, custom drag layers, drag handles, nesting and native file drops - with the drag state in C#." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. Bit.Bdnd ships no stylesheet: its script module is imported by the
+       components on demand. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
-    @* Bit.Bdnd ships no stylesheet: its script module is imported by the components on demand. *@
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
     <link rel="stylesheet" href="@Assets["Bit.Bdnd.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
+    @* The "Within an iframe" page frames the Single Target page in an iframe marked data-bdnd-frame.
+       In that frame a page shows its sample and none of the site around it (demo.css), the way React
+       DnD's own iframe example frames just the dustbin. Decided before first paint, or the chrome
+       flashes in the frame; a frame of another origin has no frameElement and gets the whole site. *@
+    <script>try { if (window.frameElement && window.frameElement.hasAttribute('data-bdnd-frame')) document.documentElement.classList.add('bdnd-framed'); } catch (_) { }</script>
     <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -29,6 +49,7 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bdnd/Demo/Server/Services/BdndSourceCatalog.cs b/src/Utilities/Bdnd/Demo/Server/Services/BdndSourceCatalog.cs
index f58318df697..6751e3c7a75 100644
--- a/src/Utilities/Bdnd/Demo/Server/Services/BdndSourceCatalog.cs
+++ b/src/Utilities/Bdnd/Demo/Server/Services/BdndSourceCatalog.cs
@@ -271,6 +271,7 @@ private static BdndSourceFileDto[] BuildSourceFileList()
     /// What a file is for: a page is one of the demo's working examples, the hosting files are the
     /// wiring every app needs once, a library file is shipped by the package itself, and the rest -
     /// the sortable card several pages render, the item types, the code viewer - is what the pages share.
+    /// The site's chrome - the layouts and the catalog they are driven from - is hosting, not an example.
     /// </summary>
     private static string KindOf(string path, string content)
     {
@@ -279,6 +280,7 @@ private static string KindOf(string path, string content)
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
+            path.Equals("Demo/Client/DocsCatalog.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -477,10 +479,10 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"<(?<name>Bdnd[A-Z][A-Za-z]*)\b")]
     private static partial Regex BdndComponentRegex();
 
-    [GeneratedRegex(@"<div class=""demo-header"">\s*<h3>.*?</h3>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex DemoHeaderRegex();
 
-    [GeneratedRegex(@"<div class=""demo-header"">\s*<h3>(?<text>.*?)</h3>", RegexOptions.Singleline)]
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>(?<text>.*?)</h1>", RegexOptions.Singleline)]
     private static partial Regex DemoTitleRegex();
 
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/app.css b/src/Utilities/Bdnd/Demo/Server/wwwroot/app.css
index 7cdebdccda2..7b51a42ea90 100644
--- a/src/Utilities/Bdnd/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/app.css
@@ -1,515 +1,2820 @@
-/* The demo site's own palette, prefixed --demo- so it can never collide with a token a library
-   on the page defines. */
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
 :root {
-    --demo-bg: #f7f8fa;
-    --demo-surface: #ffffff;
-    --demo-border: #e3e6ea;
-    --demo-text: #1f2430;
-    --demo-muted: #6b7280;
-    --demo-primary: #6366f1;
-    --demo-primary-hover: #4f46e5;
-    --demo-primary-contrast: #ffffff;
-    --demo-radius: 10px;
-    --demo-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
-}
-
-* {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
 }
 
-html, body {
+html,
+body {
     margin: 0;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    color: var(--demo-text);
-    background: var(--demo-bg);
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
 }
 
-h1, h2, h3, h4 {
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    line-height: 1.25;
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
 }
 
-/* Page headings take focus on navigation (FocusOnNavigate in App.razor) so a screen reader
-   starts reading at the new page; that focus is not something to draw a ring around. */
-h3:focus {
-    outline: none;
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
 }
 
 a {
-    color: var(--demo-primary);
+    color: var(--bb-primary);
     text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
 a:hover {
+    color: var(--bb-primary-hover);
     text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
 }
 
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
 kbd {
     display: inline-block;
-    padding: 1px 6px;
-    font-size: 0.78em;
-    font-family: inherit;
-    color: var(--demo-text);
-    background: #f1f2f4;
-    border: 1px solid var(--demo-border);
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
     border-bottom-width: 2px;
-    border-radius: 5px;
+    border-radius: var(--bb-radius);
 }
 
-code {
-    color: #c02d76;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
 }
 
-.text-muted {
-    color: var(--demo-muted);
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
 }
 
-/* Buttons */
-.btn {
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 6px;
-    font: inherit;
-    font-weight: 500;
-    line-height: 1;
-    padding: 8px 14px;
-    border: 1px solid var(--demo-border);
-    border-radius: 8px;
-    background: var(--demo-surface);
-    color: var(--demo-text);
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
     cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
 .btn:hover {
-    background: #f1f2f4;
+    text-decoration: none;
 }
 
-.btn:active {
-    transform: translateY(1px);
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
 }
 
-.btn:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
 }
 
-.btn-sm {
-    padding: 6px 10px;
-    font-size: 0.85rem;
-    border-radius: 7px;
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
 }
 
-.btn-primary {
-    background: var(--demo-primary);
-    border-color: var(--demo-primary);
-    color: var(--demo-primary-contrast);
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
 }
 
-.btn-primary:hover {
-    background: var(--demo-primary-hover);
-    border-color: var(--demo-primary-hover);
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-/* A quieter secondary action: no fill, muted text until hovered. */
-.btn-outline-secondary {
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
     background: transparent;
-    color: var(--demo-muted);
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
 }
 
-.btn-outline-secondary:hover {
-    background: #f1f2f4;
-    color: var(--demo-text);
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
 }
 
-.btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
 }
 
-.btn:disabled:active {
-    transform: none;
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-/* Blazor framework UI */
-#blazor-error-ui {
-    color-scheme: light only;
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
 
-.blazor-error-boundary {
-    background: #b32121;
-    padding: 1rem;
-    color: white;
-    border-radius: var(--demo-radius);
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
 }
 
-    .blazor-error-boundary::after {
-        content: "An error has occurred.";
-    }
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
 
-.loading-progress {
-    position: absolute;
-    display: block;
-    width: 8rem;
-    height: 8rem;
-    inset: 20vh 0 auto 0;
-    margin: 0 auto 0 auto;
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
 }
 
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-    }
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
 
-        .loading-progress circle:last-child {
-            stroke: var(--demo-primary);
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
 
-.loading-progress-text {
-    position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
 }
 
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
 
-/* Demo page helpers */
-.demo-header {
-    margin-bottom: 1.1rem;
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
 }
 
-    .demo-header h3 {
-        margin: 0 0 0.4rem;
-        font-size: 1.4rem;
-    }
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
 
-    .demo-header p {
-        margin: 0;
-        max-width: 70ch;
-        line-height: 1.55;
-    }
+/* ============================================================================================
+   8. Cards and sections
 
-/* Example pages: toolbar above the demo */
-.example-toolbar {
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.65rem 1rem;
     align-items: center;
-    margin-bottom: 0.8rem;
-    padding: 0.6rem 0.8rem;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
-    font-size: 0.88rem;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
 }
 
-.example-toolbar label {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
 }
 
-.example-toolbar select,
-.example-toolbar input[type="text"],
-.example-toolbar input:not([type]) {
-    padding: 4px 6px;
-    border: 1px solid var(--demo-border);
-    border-radius: 6px;
-    font: inherit;
+.bb-card-desc:last-child {
+    margin-bottom: 0;
 }
 
-/* "View code" toggle + source panel */
-.demo-code {
-    margin-top: 1rem;
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.demo-code__toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    font: inherit;
-    font-weight: 500;
-    font-size: 0.88rem;
-    padding: 6px 12px;
-    border: 1px solid var(--demo-border);
-    border-radius: 8px;
-    background: var(--demo-surface);
-    color: var(--demo-text);
-    cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
 }
 
-.demo-code__toggle:hover {
-    background: #f1f2f4;
-    border-color: var(--demo-primary);
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.demo-code__toggle:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
 }
 
-.demo-code__caret {
-    font-size: 0.8em;
-    color: var(--demo-muted);
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
-.demo-code__glyph {
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    color: var(--demo-primary);
-    font-weight: 600;
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.demo-code__pre {
-    margin: 0.7rem 0 0;
-    padding: 1rem 1.1rem;
-    max-height: 520px;
-    overflow: auto;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: #1e2430;
-    box-shadow: var(--demo-shadow);
+.bb-flex > .bb-card {
+    margin-bottom: 0;
 }
 
-.demo-code__code {
-    display: block;
-    color: #e6e9ef;
-    background: none;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.82rem;
-    line-height: 1.55;
-    white-space: pre;
-    tab-size: 4;
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
 }
 
-.demo-code__empty {
-    margin-top: 0.7rem;
-    font-size: 0.88rem;
-    color: var(--demo-muted);
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
 }
 
-/* The panel a demo runs in */
-.demo-stage {
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
     padding: 1.25rem;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
-    box-shadow: var(--demo-shadow);
+    margin-bottom: 0;
 }
 
-.demo-notes {
-    max-width: 75ch;
-    margin-top: 1.5rem;
-    line-height: 1.6;
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
 }
 
-    .demo-notes h4 {
-        margin: 1.25rem 0 0.4rem;
-    }
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
 
-    .demo-notes pre {
-        padding: 0.8rem 1rem;
-        overflow-x: auto;
-        border-radius: 8px;
-        background: #f1f2f4;
-    }
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
 
-.row-wrap {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
 }
 
-/* A generic draggable box */
-.box {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border: 1px dashed #9ca3af;
-    border-radius: 6px;
-    background: var(--demo-surface);
-    cursor: move;
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
-/* Dustbin */
-.dustbin {
+.bb-link-list li {
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: 9rem;
-    height: 9rem;
-    padding: 1rem;
-    border-radius: 8px;
-    color: #fff;
-    font-size: 1rem;
-    line-height: normal;
-    text-align: center;
 }
 
-/* Chessboard */
-.chessboard {
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
     display: flex;
-    flex-wrap: wrap;
-    width: 320px;
-    height: 320px;
-    border: 2px solid #333;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
 }
 
-.chess-square {
-    position: relative;
-    width: 12.5%;
-    height: 12.5%;
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
 }
 
-.chess-overlay {
-    position: absolute;
-    inset: 0;
-    opacity: 0.5;
-    pointer-events: none;
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
 }
 
-.knight {
-    font-size: 2.2rem;
-    line-height: 40px;
-    cursor: grab;
-    user-select: none;
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
 }
 
-/* Absolutely positioned boxes (drag around) */
-.drag-around-container {
-    position: relative;
-    width: 100%;
-    height: 420px;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
-    box-shadow: var(--demo-shadow);
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
 }
 
-.drag-around-box {
-    position: absolute;
-    padding: 0.5rem 1rem;
-    border: 1px dashed #9ca3af;
-    border-radius: 6px;
-    background: var(--demo-surface);
-    cursor: move;
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
 }
 
-/* Sortable */
-.sortable-card {
-    margin-bottom: 0.5rem;
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--demo-border);
-    border-radius: 6px;
-    background: var(--demo-surface);
-    cursor: move;
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
 }
 
-/* Nesting */
-.nest-box {
-    padding: 1rem;
-    border-radius: 6px;
-    color: #fff;
-    text-align: center;
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
 }
 
-/* Drag handle */
-.handle {
-    margin-right: 0.6rem;
-    color: #888;
-    font-weight: bold;
-    cursor: move;
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
 }
 
-.demo-table {
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
     width: 100%;
-    border-collapse: collapse;
-    font-size: 0.9rem;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
 }
 
-    .demo-table th,
-    .demo-table td {
-        padding: 0.45rem 0.6rem;
-        border-bottom: 1px solid var(--demo-border);
-        text-align: left;
-    }
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
 
-/* The MCP server page */
-.mcp-panel {
-    max-width: 960px;
-    margin-bottom: 1.1rem;
-    padding: 1rem 1.2rem;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
-    box-shadow: var(--demo-shadow);
-    line-height: 1.55;
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
 }
 
-    .mcp-panel h4 {
-        margin: 0 0 0.6rem;
-        font-size: 1.05rem;
-    }
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
 
-    .mcp-panel p {
-        margin: 0.4rem 0;
-    }
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
 
-.mcp-output {
-    margin: 0.6rem 0 0;
-    padding: 0.8rem 1rem;
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
     overflow-x: auto;
-    border-radius: 8px;
-    background: #f1f2f4;
-    font-size: 0.85rem;
+    margin-bottom: 1.25rem;
 }
 
-    .mcp-output code {
-        color: var(--demo-text);
-    }
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
 
-.mcp-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.9rem;
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
 }
 
-    .mcp-table th,
-    .mcp-table td {
-        padding: 0.45rem 0.6rem;
-        border-bottom: 1px solid var(--demo-border);
-        text-align: left;
-        vertical-align: top;
-    }
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
 
-    .mcp-table td:first-child {
-        white-space: nowrap;
-    }
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/demo.css b/src/Utilities/Bdnd/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..58d83354cfa
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,393 @@
+/* ============================================================================================
+   Bdnd demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Bdnd's own - the boxes, dustbins, boards and cards the
+   examples drag around - and it is written against the kit's --bb-* names, so it follows the
+   light/dark theme with no rules of its own for either.
+
+   The colors an example sets inline (a dustbin's dark fill, its hover green, the chessboard, the
+   nested targets' shades) are the example's own, ported from React DnD's: each is a state the
+   example shows, they read on either theme, and the end-to-end suite asserts them.
+   ============================================================================================ */
+
+/* A row of sources or targets, wrapping under itself once the column is too narrow. */
+.row-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+/* The line under a sample that says what it did: the knight's square, the list's order. */
+.demo-caption {
+    margin: 1rem 0 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+    overflow-wrap: anywhere;
+}
+
+.demo-result-title {
+    margin: 1.5rem 0 .75rem;
+}
+
+/* A draggable box: React DnD's dashed box, drawn as a Fluent card. */
+.box {
+    display: inline-block;
+    max-width: 100%;
+    padding: .5rem 1rem;
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: move;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.box:hover {
+    border-color: var(--bb-primary);
+}
+
+.box small {
+    color: var(--bb-text-soft);
+}
+
+/* A dustbin. The example paints its fill inline (dark at rest, green while a box hovers); the
+   hairline keeps a dark bin's edge visible on the dark theme's surface, and the outline an
+   accepting bin shows while a box is in the air is drawn inside its edge, so it reads on both. */
+.dustbin {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 9rem;
+    max-width: 100%;
+    height: 9rem;
+    padding: 1rem;
+    border: 1px solid color-mix(in srgb, var(--bb-text) 16%, transparent);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    outline-offset: -7px;
+    color: #FFFFFF;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-medium);
+    line-height: 1.4;
+    text-align: center;
+    overflow-wrap: anywhere;
+}
+
+/* ---------- Chessboard (the tutorial) ---------- */
+
+.chessboard {
+    display: flex;
+    flex-wrap: wrap;
+    width: 320px;
+    max-width: 100%;
+    aspect-ratio: 1;
+    border: 2px solid #333333;
+    border-radius: var(--bb-radius-sm);
+    overflow: hidden;
+}
+
+.chess-square {
+    position: relative;
+    width: 12.5%;
+    height: 12.5%;
+}
+
+.chess-overlay {
+    position: absolute;
+    inset: 0;
+    opacity: .5;
+    pointer-events: none;
+}
+
+/* A chess piece is drawn on the board, not on the page: it keeps its dark ink in the dark theme,
+   where the page's text color would put a white knight on a cream square. */
+.knight {
+    color: #1A1A1A;
+    font-size: 2.2rem;
+    line-height: 40px;
+    cursor: grab;
+    user-select: none;
+}
+
+/* ---------- Drag around ---------- */
+
+/* The board the boxes are positioned on: a recessed area, like the kit's .bb-stage. */
+.drag-around-container {
+    position: relative;
+    width: 100%;
+    height: 420px;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.drag-around-box {
+    position: absolute;
+    padding: .5rem 1rem;
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    cursor: move;
+}
+
+/* The custom drag layer's preview. Its position is the example's (inline, from the layer's
+   offsets); its look is the brand's, raised, so it reads as the thing in the hand. */
+.drag-layer-preview {
+    padding: .5rem 1rem;
+    background: var(--bb-primary);
+    border: 1px solid var(--bb-primary);
+    border-radius: var(--bb-radius);
+    box-shadow: var(--bb-shadow-raised);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    white-space: nowrap;
+}
+
+/* ---------- Sortable ---------- */
+
+/* A card: the kit's card at rest, raised a step on hover. The margin (rather than a flex gap) is
+   the gap between two cards, which the list - a drop target of its own - still takes a drop in. */
+.sortable-card {
+    margin-bottom: .5rem;
+    padding: .625rem 1rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: move;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.sortable-card:hover {
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+    box-shadow: var(--fl-shadow-4);
+}
+
+/* The hundred-card list scrolls in a tray of its own. */
+.sortable-scroll {
+    max-height: 480px;
+    overflow-y: auto;
+    padding: .5rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+/* ---------- Nesting ---------- */
+
+.nest-box {
+    padding: 1rem;
+    border-radius: var(--bb-radius-lg);
+    color: #FFFFFF;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    text-align: center;
+}
+
+/* ---------- Handles ---------- */
+
+/* The grip of the Handles page: the only part of its box a drag starts from. */
+.handle {
+    margin-inline-end: .625rem;
+    color: var(--bb-text-soft);
+    font-size: 1.0625rem;
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1;
+    user-select: none;
+}
+
+.handle:hover {
+    color: var(--bb-primary);
+}
+
+/* ---------- Native drags ---------- */
+
+/* The rich text a reader drags onto the target. */
+.native-source {
+    max-width: 18rem;
+    padding: 1rem;
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+}
+
+.native-source > :last-child {
+    margin-bottom: 0;
+}
+
+.native-drop-result {
+    max-width: 42rem;
+    margin-top: 1.5rem;
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+    overflow-wrap: anywhere;
+}
+
+/* The dropped markup, raw. It wraps: a page's HTML is one long line more often than not. */
+.native-drop-html {
+    max-height: 18rem;
+    margin: .5rem 0 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+/* ---------- Within an iframe ---------- */
+
+.demo-iframe {
+    display: block;
+    width: 100%;
+    height: 264px;
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+}
+
+/* The page inside that iframe (App.razor marks it bdnd-framed): its sample and nothing else. The
+   site's chrome is the parent page's, and drawn twice it would be a site inside a site. */
+html.bdnd-framed,
+html.bdnd-framed body,
+html.bdnd-framed .bb-site-content {
+    background: var(--bb-surface);
+}
+
+html.bdnd-framed .page {
+    min-height: 0;
+}
+
+html.bdnd-framed .bb-skip-link,
+html.bdnd-framed .bb-header,
+html.bdnd-framed .bb-footer,
+html.bdnd-framed .bb-docs-sidebar,
+html.bdnd-framed .bb-docs-scrim,
+html.bdnd-framed .bb-docs-topbar,
+html.bdnd-framed .bb-docs-foot,
+html.bdnd-framed .bb-pager,
+html.bdnd-framed .bb-rail,
+html.bdnd-framed .bb-intro,
+html.bdnd-framed .bb-source {
+    display: none;
+}
+
+html.bdnd-framed .bb-docs {
+    display: block;
+}
+
+html.bdnd-framed main {
+    padding: 1.25rem;
+}
+
+/* The parent's frame is the sample's frame; the sample itself need not draw another. */
+html.bdnd-framed .bb-demo {
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: 0;
+    box-shadow: none;
+}
+
+/* ---------- The "View code" toggle: the kit's secondary button, with the caret and the code glyph in it. ---------- */
+
+.demo-code__caret {
+    font-size: .8em;
+    color: var(--bb-text-soft);
+}
+
+.demo-code__glyph {
+    font-family: var(--bb-mono);
+    color: var(--bb-primary);
+}
+
+/* ---------- The landing page's hero: the live sample under its markup, inside the window frame. ---------- */
+
+.home-hero-live {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 1rem;
+    align-items: start;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.home-hero-cards {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    min-width: 0;
+}
+
+.home-hero-cards .box {
+    display: block;
+}
+
+/* The bin: a recessed tray at rest, the brand's tint while a card is in the air (CanDrop), the
+   success tint while one is over it (IsOver). */
+.home-hero-bin {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 10rem;
+    min-height: 8.5rem;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    text-align: center;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.home-hero-bin.is-ready {
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+    color: var(--bb-primary);
+}
+
+.home-hero-bin.is-over {
+    background: var(--bb-success-soft);
+    border-style: solid;
+    border-color: var(--bb-success);
+    color: var(--bb-success-text);
+}
+
+.home-hero-done {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    margin: 0;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+}
+
+@media (max-width: 600px) {
+    .home-hero-live {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .home-hero-bin {
+        width: 100%;
+        min-height: 6rem;
+    }
+}
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/site.js b/src/Utilities/Bdnd/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bdnd/Demo/Server/wwwroot/theme.js b/src/Utilities/Bdnd/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bdnd/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DemoPagesTests.cs b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DemoPagesTests.cs
index 215c5028696..0590bfb9aef 100644
--- a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DemoPagesTests.cs
+++ b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DemoPagesTests.cs
@@ -50,7 +50,9 @@ public async Task Every_demo_page_loads_interactively_and_runs_every_button_with
         }
 
         // Every other enabled button of the page must run without throwing: a dead or broken control is a demo bug.
-        var buttons = page.Locator(".content button:enabled:visible:not(.demo-code__toggle)");
+        // The page is the docs column (or the landing page), not the site chrome around it; the copy buttons the
+        // site script hangs on its code blocks are that chrome too.
+        var buttons = page.Locator(":is(.bb-docs-content, .bb-landing) button:enabled:visible:not(.demo-code__toggle, .bb-copy-btn)");
         int count = await buttons.CountAsync();
         for (int i = 0; i < count; i++)
         {
@@ -88,11 +90,11 @@ public async Task View_code_shows_the_source_of_the_page_and_hides_it_again()
     [TestMethod]
     public async Task Navigating_through_the_sidebar_leaves_a_page_that_still_drags()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/getting-started");
 
         // Client-side navigation through every page: each one's draggables and drop targets are torn down (their
         // browser registrations disposed) and the next page's set up, all in the same WebAssembly instance.
-        var links = page.Locator(".sidebar a.nav-link");
+        var links = page.Locator(".bb-docs-sidebar .bb-docs-section a");
         int count = await links.CountAsync();
         Assert.IsGreaterThan(15, count, $"the sidebar offers only {count} pages");
         for (int i = 1; i < count; i++)
@@ -104,14 +106,15 @@ public async Task Navigating_through_the_sidebar_leaves_a_page_that_still_drags(
             await WaitForQuietAsync(page);
         }
 
-        await links.Nth(0).ClickAsync();
-        await page.WaitForURLAsync(BaseUrl + "/");
+        // Back on the first dustbin, torn down and set up again on the way, a box still drops into it. (The first
+        // page, Getting started, has its sample below the fold, where the mouse cannot reach it.)
+        await links.Filter(new LocatorFilterOptions { HasText = "Single target" }).ClickAsync();
+        await page.WaitForURLAsync(BaseUrl + "/dustbin/single");
 
-        // Back on the overview, a box still drops into the dustbin.
         var bin = page.Locator(".dustbin");
         await DragAsync(page, page.Locator(".box", new() { HasText = "Banana" }), bin,
             () => Expect(bin).ToHaveTextAsync("Release to drop"));
-        await Expect(bin).ToHaveTextAsync("Dropped: Banana");
+        await Expect(bin).ToHaveTextAsync("Last dropped: Banana (total 1)");
         Assert.IsFalse(await page.Locator("#blazor-error-ui").IsVisibleAsync(), "the unhandled-error banner is showing");
     }
 }
diff --git a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DustbinTests.cs b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DustbinTests.cs
index 7ca9777deeb..4a6111c149b 100644
--- a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DustbinTests.cs
+++ b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/DustbinTests.cs
@@ -160,7 +160,7 @@ public async Task A_bin_that_does_not_accept_the_type_refuses_the_drop_with_the_
         var anythingBox = await BoxAsync(Bin(page, "Anything"));
         var empty = new Point(anythingBox.Right + 150, anythingBox.Centre.Y);
         await MoveAsync(page, empty);
-        var overPage = await DragOverAtAsync(page, page.Locator(".demo-stage"), empty);
+        var overPage = await DragOverAtAsync(page, page.Locator(".bb-demo"), empty);
         Assert.IsFalse(overPage.Prevented, $"a dragover over no drop target was accepted: {overPage}");
 
         await DragToAsync(page, piecesBox.Centre, async () =>
diff --git a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/Infrastructure/BdndTest.cs b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/Infrastructure/BdndTest.cs
index 4383238d546..a4647c65e33 100644
--- a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/Infrastructure/BdndTest.cs
+++ b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.E2E/Infrastructure/BdndTest.cs
@@ -126,8 +126,8 @@ public async Task CloseContextsAsync()
     /// <summary>
     /// A fresh page in a browser context of its own, closed when the test ends, whose console errors, unhandled
     /// exceptions and failed requests fail the test (see <see cref="CloseContextsAsync"/>). The suite is hermetic:
-    /// a request that leaves the demo's origin (the demo's web font, today) is answered with an empty response
-    /// here, so a runner without internet access neither waits out a connection timeout nor logs a load error.
+    /// a request that leaves the demo's origin is answered with an empty response here, so a runner without
+    /// internet access neither waits out a connection timeout nor logs a load error.
     /// </summary>
     protected async Task<IPage> NewPageAsync()
     {
diff --git a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.Mcp/McpOracleTests.cs b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.Mcp/McpOracleTests.cs
index 00f82fb7227..f81d0b915ce 100644
--- a/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.Mcp/McpOracleTests.cs
+++ b/src/Utilities/Bdnd/Tests/Bit.Bdnd.Tests.Mcp/McpOracleTests.cs
@@ -274,11 +274,12 @@ public void Every_demo_page_and_library_component_is_embedded()
     {
         var pages = BdndSourceCatalog.SourceFiles.Where(file => file.Kind == "Page").ToArray();
 
-        // The demo's navigation names every page; each of them has to be readable here, title and route included.
-        var nav = BdndSourceCatalog.GetSourceFile("Demo/Client/Layout/NavMenu.razor")!;
-        var linked = NavLinkRegex().Matches(nav).Select(match => $"/{match.Groups["href"].Value}").Where(route => route != "/mcp-server").ToArray();
+        // The demo's docs catalog - the source of its navigation - names every page; each of them has to be readable
+        // here, title and route included.
+        var catalog = BdndSourceCatalog.GetSourceFile("Demo/Client/DocsCatalog.cs")!;
+        var linked = CatalogPageRegex().Matches(catalog).Select(match => match.Groups["href"].Value).Where(route => route != "/mcp-server").ToArray();
 
-        Assert.IsNotEmpty(linked);
+        Assert.IsGreaterThan(15, linked.Length, $"the catalog names only {linked.Length} pages");
         foreach (var route in linked) Assert.IsTrue(pages.Any(page => page.Route == route && page.Title is not null), $"The navigation links {route}, and no embedded page with a title declares it.");
 
         foreach (var component in new[] { "BdndDraggable.cs", "BdndDropTarget.cs", "BdndProvider.razor", "BdndDragLayer.razor", "BdndDragHandle.razor" })
@@ -349,6 +350,8 @@ public async Task The_drop_lab_runs_over_plain_http_too()
     [GeneratedRegex(@"^#{2,4} (?<text>.+)$")]
     private static partial Regex HeadingRegex();
 
-    [GeneratedRegex(@"<NavLink[^>]*\bhref=""(?<href>[^""]+)""")]
-    private static partial Regex NavLinkRegex();
+    // A page's entry opens with its address and its title: new("/dustbin/single", "Single target", "...", ...). The
+    // header's links (new("/", "Home")) end after the label.
+    [GeneratedRegex(@"\bnew\(""(?<href>/[^""]*)"",\s*""[^""]*"",")]
+    private static partial Regex CatalogPageRegex();
 }
diff --git a/src/Utilities/Belemetry/Demo/Client/DocsCatalog.cs b/src/Utilities/Belemetry/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..45c4a3b4323
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,241 @@
+using Bit.Belemetry.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Belemetry.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Belemetry";
+
+    public const string PackageId = "Bit.Belemetry";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Belemetry";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Belemetry is one lightweight telemetry SDK for every Blazor app: page views, web vitals, errors and " +
+        "fetch spans from the browser, ILogger, Activity and Meter from .NET - OpenTelemetry-native without the " +
+        "OpenTelemetry packages, under per-feature consent. This site measures itself with it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["consent", "otlp", "web vitals", "ilogger", "azure"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/web-app", "Docs", MatchesDocs: true),
+        new("/live", "Live telemetry"),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file below the project folder (<c>Demo/Client/Pages/ConsentPage.razor</c>) - the path
+    /// the MCP server hands it out under, too. Razor gives a component the namespace of its folder, so the path
+    /// below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourcePathOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+
+    /// <summary>The page's source file on GitHub.</summary>
+    public static string SourceUrlOf(Type page) => $"{RepositoryUrl}/blob/develop/{ProjectPath}/{SourcePathOf(page)}";
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// <para>
+/// It is also where the demo's MCP server gets the title, description, keywords and source file it reports
+/// for a demo page from <c>SearchBelemetry</c>, so the site's search and an AI agent looking for a worked
+/// example read the same words.
+/// </para>
+/// </summary>
+public static class DocsCatalog
+{
+    /// <summary>
+    /// The landing page. It is not a document - it has no place in the reading order, the nav panel or the
+    /// pager - but it is still a page the MCP server's search can point at.
+    /// </summary>
+    public static readonly DocsPageInfo Landing =
+        new("/", "Home",
+            "The landing page: what Belemetry is, the OpenTelemetry-native pitch without the OpenTelemetry packages, and the twelve consent features.",
+            "home landing overview introduction start opentelemetry otel features",
+            typeof(Home));
+
+    public static readonly DocsSection[] Sections =
+    [
+        new("Getting started",
+        [
+            new("/web-app", "Blazor Web App",
+                "Setting Belemetry up in a Blazor Web App: both projects, BelemetryScript in the head, BelemetryInitializer in Routes, for the Server, WebAssembly and Auto render modes and static SSR.",
+                "setup install getting started web app blazor server webassembly auto ssr static render mode belemetryscript belemetryinitializer app.razor routes.razor",
+                typeof(WebAppPage)),
+            new("/wasm", "Standalone WebAssembly",
+                "Setting Belemetry up in a standalone Blazor WebAssembly app: one Program.cs, BelemetryInitializer, and the optional script tag in index.html.",
+                "setup install standalone webassembly wasm index.html script tag program.cs cors",
+                typeof(StandaloneWasmPage)),
+            new("/hybrid", "Blazor Hybrid",
+                "Setting Belemetry up in MAUI, WPF and WinForms: relay transport, file persistence, and flushing on suspend.",
+                "setup install hybrid maui wpf winforms blazorwebview relay onsleep flush mobile desktop",
+                typeof(HybridPage)),
+            new("/live", "Live telemetry",
+                "Your own spans, logs, events and metrics, read back from the demo server's in-process OTLP receiver as you use the site.",
+                "live viewer telemetry feed spans logs events metrics session receiver otlp json realtime",
+                typeof(LiveTelemetryPage)),
+        ]),
+        new("What it collects",
+        [
+            new("/consent", "Consent and GDPR",
+                "Per-feature consent: groups, opt-in by default, Global Privacy Control, the remembered choice, purge on revoke and the pending buffer - with a live consent panel.",
+                "consent gdpr privacy opt-in banner features groups diagnostics analytics monitoring gpc global privacy control revoke purge pending persist ibelemetryconsent",
+                typeof(ConsentPage)),
+            new("/browser", "Browser instrumentation",
+                "Page views, interactions, web vitals, document load, resources, long tasks, fetch/XHR with traceparent, errors and console - each with a live trigger.",
+                "browser javascript page view click interaction web vitals lcp inp cls fcp ttfb document load resource long task fetch xhr traceparent error exception console trackevent trackpageview trackexception data-bit-belemetry-name data-bit-belemetry-ignore",
+                typeof(BrowserPage)),
+            new("/dotnet", ".NET instrumentation",
+                "ILogger logs, ActivitySource traces and Meter metrics collected by the BCL listeners - levels, sources, sampling, temporality, buckets and the cardinality limit.",
+                "dotnet ilogger logging logs activity activitysource traces tracing sampling meter metrics counter histogram temporality cardinality buckets logging:belemetry entity framework efcore hangfire",
+                typeof(DotnetPage)),
+        ]),
+        new("Exporters",
+        [
+            new("/otlp", "OTLP",
+                "The OTLP exporter: protobuf, JSON or gRPC, headers, per-signal endpoints, BrowserEndpoint, and the Aspire dashboard, OpenTelemetry Collector (with CORS), Grafana, Jaeger and Honeycomb.",
+                "otlp exporter opentelemetry protocol protobuf json grpc headers endpoint browserendpoint aspire dashboard collector cors grafana tempo loki jaeger honeycomb datadog",
+                typeof(OtlpPage)),
+            new("/azure-monitor", "Azure Monitor",
+                "The native Application Insights exporter: connection string, Entra ID token provider, MaskIp and Live Metrics.",
+                "azure monitor application insights appinsights connection string entra id token maskip live metrics quickpulse track",
+                typeof(AzureMonitorPage)),
+            new("/exporters", "Console, in-memory and custom",
+                "The console exporter for development, BelemetryInMemoryExporter for tests and in-app viewers, and writing your own IBelemetryExporter.",
+                "console in-memory memory custom exporter ibelemetryexporter belemetrybatch tests viewer",
+                typeof(ExportersPage)),
+        ]),
+        new("Shaping the data",
+        [
+            new("/privacy", "Privacy",
+                "Data minimization on both sides: query-parameter redaction, pattern scrubbing, stripped fragments, blocked attributes and the user agent.",
+                "privacy redaction redact scrub scrubbing pii email jwt card ip query string fragment blockedattributes useragent collectuseragent",
+                typeof(PrivacyPage)),
+            new("/processors", "Processors",
+                "IBelemetryProcessor: enrich, rewrite or drop spans, logs and metrics on the .NET side - including the records relayed from the browser.",
+                "processor processors ibelemetryprocessor enrich filter drop tenant onspan onlog onmetric tail sampling",
+                typeof(ProcessorsPage)),
+            new("/persistence", "Offline persistence",
+                "Failed exports kept on the device - localStorage in the browser, files in Hybrid and on servers - and retried when the network is back.",
+                "offline persistence retry localstorage files queue maxbytes maxage retryinterval network",
+                typeof(PersistencePage)),
+        ]),
+        new("Hosting",
+        [
+            new("/server-pipeline", "Server pipeline",
+                "Server.CollectDotnetTelemetry: the server's own logs, request spans and metrics, governed by operator features rather than one user's consent.",
+                "server pipeline collectdotnettelemetry asp.net core aspnetcore request spans kestrel operator features resource detection",
+                typeof(ServerPipelinePage)),
+            new("/transport", "Transport",
+                "How browser records leave the page: Direct (fetch to the endpoints, CORS) or Relay (through .NET over JS interop, no credentials in the page).",
+                "transport direct relay cors credentials interop circuit hybrid",
+                typeof(TransportPage)),
+        ]),
+        new("Reference",
+        [
+            new("/semantic-conventions", "Semantic conventions",
+                "The attributes and events Belemetry emits - resource, page views, interactions, web vitals, fetch, errors, ILogger - and the feature bits and storage keys.",
+                "semantic conventions attributes events resource session.id url.full web_vital exception feature bits storage keys reference",
+                typeof(SemanticConventionsPage)),
+            new("/azure-mapping", "Azure mapping",
+                "How every record maps onto Application Insights: envelope types, tags, properties and retries.",
+                "azure mapping application insights envelope requests dependencies exceptions pageviews custommetrics customevents traces tags ai.operation.id",
+                typeof(AzureMappingPage)),
+            new("/configuration", "Configuration",
+                "Every option of BelemetryOptions and its sub-options, with types, defaults and documentation reflected from the shipped assembly.",
+                "configuration options reference belemetryoptions defaults settings appsettings environment variables all options api",
+                typeof(ConfigurationPage)),
+            new("/mcp-server", "MCP server",
+                "The demo's Model Context Protocol server: the tools, prompts and resources that let an AI agent set up and review Belemetry correctly.",
+                "mcp model context protocol ai agent llm tools prompts resources claude cursor copilot server integration generator review",
+                typeof(McpServerPage)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Belemetry/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Belemetry/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Belemetry/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Belemetry/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Belemetry/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/Footer.razor b/src/Utilities/Belemetry/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Belemetry/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/Header.razor b/src/Utilities/Belemetry/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/Header.razor.css b/src/Utilities/Belemetry/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Belemetry/Demo/Client/Layout/MainLayout.razor
index bad611011b4..44980dda101 100644
--- a/src/Utilities/Belemetry/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/MainLayout.razor
@@ -1,169 +1,30 @@
 @inherits LayoutComponentBase
-@implements IAsyncDisposable
-@inject NavigationManager Nav
-@inject IJSRuntime JS
 
-@* The docs shell: the skip link, the sticky header, the command palette, the nav panel, the
-   reading column with its breadcrumb and its pager, the "on this page" rail, and the footer.
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-   The home page is deliberately outside all of that. It is a landing page rather than a document:
-   no nav panel, no rail, no reading column - it lays out its own full-bleed sections. Only the
-   header, the palette and the footer are shared.
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-   The styles live in wwwroot/css/app.css and are written against the Fluent 2 tokens in
-   wwwroot/css/theme.css; nothing here is built from a component library, because the demo carries
-   no dependency other than Bit.Belemetry itself. *@
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-<a class="skip-link" href="#main-content">Skip to main content</a>
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-<div class="app-shell">
-    <AppHeader IsHomePage="_isHomePage" IsHydrating="@_isHydrating"
-               IsNavOpen="_isNavOpen" OnToggleNav="ToggleNav"
-               OnOpenSearch="OpenPalette" ShortcutHint="@_shortcutHint" />
+    <Header />
 
-    <div class="layout-row">
-        @if (_isHomePage)
-        {
-            <div class="site-content home">
-                <main id="main-content">
-                    @Body
-                </main>
-
-                <AppFooter />
-            </div>
-        }
-        else
-        {
-            @* Only rendered at the widths where the panel is a drawer - CSS hides it above them -
-               and only while it is open, so it never covers a page that has nothing to close. *@
-            @if (_isNavOpen)
-            {
-                <button type="button" class="nav-panel-overlay" aria-label="Close navigation" @onclick="CloseNav"></button>
-            }
-
-            <AppNavPanel IsOpen="_isNavOpen" Disabled="@_isHydrating" />
-
-            <div class="site-content">
-                <div class="page-row">
-                    <main id="main-content" class="page-container">
-                        <DocBreadcrumb Current="_current" />
-
-                        @Body
-
-                        <DocPager Href="@_href" />
-                    </main>
-
-                    <SideRail />
-                </div>
-
-                <AppFooter />
-            </div>
-        }
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
     </div>
-</div>
-
-<CommandPalette IsOpen="_isPaletteOpen" OnClose="ClosePalette" />
-
-@* The site's own consent banner. Nothing leaves the browser until it is answered - the demo is
-   configured opt-in (Consent.Default = None), exactly like a production app should be - so the
-   GDPR flow is the first thing every reader meets. See Shared/ConsentBanner.razor. *@
-<ConsentBanner />
-
-@code {
-    private bool _isNavOpen;
-    private bool _isHomePage;
-    private bool _isPaletteOpen;
-    private bool _shortcutsRegistered;
-    private string _href = "";
-    private string _shortcutHint = "Ctrl K";
-    private NavItem? _current;
-    private DotNetObjectReference<MainLayout>? _selfRef;
-
-    // The page is prerendered on the server and is inert until the WebAssembly runtime takes over.
-    // The header says so while that is true, and the interactive chrome stays disabled so a click
-    // that cannot do anything does not look broken.
-    private bool _isHydrating => RendererInfo.IsInteractive is false;
-
-    protected override void OnInitialized()
-    {
-        UpdateRoute();
-        Nav.LocationChanged += OnLocationChanged;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender is false || _isHydrating) return;
 
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-
-            // The same physical key is Ctrl on Windows and Linux and Cmd on a Mac, so the keycap
-            // in the header is filled in from the browser rather than guessed. Registering the
-            // listener returns it, which keeps the two from ever describing different keys.
-            _shortcutHint = await JS.InvokeAsync<string>("blRegisterShortcuts", _selfRef);
-            _shortcutsRegistered = true;
-            StateHasChanged();
-        }
-        catch
-        {
-            // The shortcut is an accelerator for something the header already offers as a button.
-            // Without the script the button still opens the palette and the keycap keeps the
-            // conservative default, which is right for every platform except one.
-        }
-    }
-
-    private void ToggleNav() => _isNavOpen = !_isNavOpen;
-
-    private void CloseNav() => _isNavOpen = false;
-
-    private void OpenPalette() => _isPaletteOpen = true;
-
-    private void ClosePalette() => _isPaletteOpen = false;
-
-    /// <summary>Raised by the global key listener in js/demo.js for the shortcut that opens search.</summary>
-    [JSInvokable]
-    public void OnSearchShortcut()
-    {
-        if (_isPaletteOpen) return;
-
-        _isPaletteOpen = true;
-        StateHasChanged();
-    }
-
-    // Following a link inside the drawer closes it: on the widths where the drawer exists it
-    // covers the page the reader just asked for.
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        _isNavOpen = false;
-        UpdateRoute();
-        StateHasChanged();
-    }
-
-    private void UpdateRoute()
-    {
-        _href = Nav.ToBaseRelativePath(Nav.Uri).TrimStart('/').Split('?', '#')[0];
-        _isHomePage = _href.Length == 0;
-        _current = NavItem.ByHref(_href);
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        Nav.LocationChanged -= OnLocationChanged;
-
-        if (_shortcutsRegistered)
-        {
-            try
-            {
-                await JS.InvokeVoidAsync("blUnregisterShortcuts");
-            }
-            catch
-            {
-                // Disposal races the page going away; the listener it would remove dies with the
-                // document either way.
-            }
-        }
-
-        _selfRef?.Dispose();
-    }
-}
+    <Footer />
+</div>
diff --git a/src/Utilities/Belemetry/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Belemetry/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/AzureMappingPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/AzureMappingPage.razor
index bb7dd68478b..c94a24245c2 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/AzureMappingPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/AzureMappingPage.razor
@@ -1,18 +1,19 @@
 @page "/azure-mapping"
 
-<PageTitle>Azure mapping - bit Belemetry</PageTitle>
+<PageTitle>Azure mapping · Belemetry</PageTitle>
 
-<h1>Azure mapping</h1>
-
-<p class="page-intro">
-    The Azure Monitor exporter does not go through a collector: it turns each OpenTelemetry-shaped record into an
-    Application Insights envelope and posts it to the ingestion endpoint itself. This page is the mapping, record
-    by record - the same in the .NET encoder and in the browser script, so a page view from the browser and a
-    request span from the server land in the tables and on the Application Map node you expect.
-</p>
+<div class="bb-intro">
+    <h1>Azure mapping</h1>
+    <p class="bb-subtitle">
+        The Azure Monitor exporter does not go through a collector: it turns each OpenTelemetry-shaped record into an
+        Application Insights envelope and posts it to the ingestion endpoint itself. This page is the mapping, record
+        by record - the same in the .NET encoder and in the browser script, so a page view from the browser and a
+        request span from the server land in the tables and on the Application Map node you expect.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Endpoint</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Endpoint</h3>
     <p>
         Envelopes are posted to <code>{IngestionEndpoint}/v2.1/track</code>, with the ingestion endpoint read from the
         connection string - <code>https://dc.services.visualstudio.com</code> when the connection string has none. The
@@ -23,8 +24,8 @@
     <CodeSnippet Code="@ExporterCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Envelope</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Envelope</h3>
     <p>
         Every record becomes one envelope (a metric becomes one per point). <code>name</code> is
         <code>Microsoft.ApplicationInsights.&lt;Type&gt;</code>, <code>baseType</code> is <code>&lt;Type&gt;Data</code>,
@@ -33,10 +34,10 @@
     <CodeSnippet Code="@EnvelopeCode" Language="JSON" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Tags</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Tags</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Tag</th><th scope="col">Value</th></tr>
             </thead>
@@ -64,10 +65,10 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Record types</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Record types</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Source record</th><th scope="col">Envelope type</th><th scope="col">Table</th><th scope="col">Fields</th></tr>
             </thead>
@@ -144,10 +145,10 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Severity levels</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Severity levels</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">OTLP severity number</th><th scope="col"><code>severityLevel</code></th></tr>
             </thead>
@@ -162,8 +163,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Properties</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Properties</h3>
     <p>
         Every attribute not consumed by a field becomes a custom property, stringified - so a structured log value, a
         <code>TrackEvent</code> attribute or a processor's enrichment is queryable as
@@ -173,8 +174,8 @@
     <CodeSnippet Code="@KustoCode" Language="Shell" />
 </div>
 
-<div class="demo-section">
-    <h2>Retries</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Retries</h3>
     <p>
         Status codes <code>408</code>, <code>429</code>, <code>439</code> (daily quota), <code>500</code>, <code>502</code>,
         <code>503</code> and <code>504</code> are retried with backoff, honouring <code>Retry-After</code>, and kept for
@@ -189,8 +190,8 @@
     <CodeSnippet Code="@PartialCode" Language="JSON" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> API</h3>
     <ApiTable TypeName="BelemetryAzureMonitorExporterOptions" />
 </div>
 
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/AzureMonitorPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/AzureMonitorPage.razor
index 0c850a1b9fa..3b15d6c7f8c 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/AzureMonitorPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/AzureMonitorPage.razor
@@ -1,19 +1,20 @@
 @page "/azure-monitor"
 
-<PageTitle>Azure Monitor - bit Belemetry</PageTitle>
-
-<h1>Azure Monitor</h1>
-
-<p class="page-intro">
-    The Azure Monitor exporter posts straight to the Application Insights ingestion endpoint
-    (<code>/v2.1/track</code>), with no collector in between. Page views, requests, dependencies, exceptions, custom
-    events and metrics land in their usual tables - <code>pageViews</code>, <code>requests</code>,
-    <code>dependencies</code>, <code>exceptions</code>, <code>customEvents</code>, <code>customMetrics</code> - so the
-    portal's Application Map, Failures, Performance and Usage blades work as they do with Microsoft's own SDKs.
-</p>
+<PageTitle>Azure Monitor · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Azure Monitor</h1>
+    <p class="bb-subtitle">
+        The Azure Monitor exporter posts straight to the Application Insights ingestion endpoint
+        (<code>/v2.1/track</code>), with no collector in between. Page views, requests, dependencies, exceptions, custom
+        events and metrics land in their usual tables - <code>pageViews</code>, <code>requests</code>,
+        <code>dependencies</code>, <code>exceptions</code>, <code>customEvents</code>, <code>customMetrics</code> - so the
+        portal's Application Map, Failures, Performance and Usage blades work as they do with Microsoft's own SDKs.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Connection string</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Connection string</h3>
     <p>
         The exporter needs the resource's connection string: the instrumentation key and the regional
         <code>IngestionEndpoint</code> (records go to <code>{IngestionEndpoint}/v2.1/track</code>; without one, to
@@ -32,8 +33,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Microsoft Entra ID</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Microsoft Entra ID</h3>
     <p>
         A resource with local authentication disabled only accepts telemetry with an Entra ID token.
         <code>AccessTokenProvider</code> supplies one, sent as <code>Authorization: Bearer</code>, for the scope
@@ -50,8 +51,8 @@
     <CodeSnippet Code="@EntraCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>MaskIp</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> MaskIp</h3>
     <p>
         Application Insights derives each record's city and country from the client IP address it was sent from.
         With <code>MaskIp</code> (on by default) Belemetry sends <code>ai.location.ip = 0.0.0.0</code>, so no
@@ -61,8 +62,8 @@
     <CodeSnippet Code="@MaskIpCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Live Metrics</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Live Metrics</h3>
     <p>
         With <code>EnableLiveMetrics</code> the .NET side streams requests, dependencies, exceptions, CPU and memory to
         the portal's Live Metrics blade once per second while someone is watching it - following the Application
@@ -73,8 +74,8 @@
     <CodeSnippet Code="@LiveMetricsCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Compression, timeout and signals</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Compression, timeout and signals</h3>
     <p>
         <code>Compression = BelemetryCompression.Gzip</code> compresses the envelope array (<code>Content-Encoding:
         gzip</code>), in the browser too. <code>Timeout</code> bounds one request (30 s). <code>Signals</code> restricts
@@ -94,8 +95,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> API</h3>
     <ApiTable TypeName="BelemetryAzureMonitorExporterOptions" />
 </div>
 
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/BrowserPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/BrowserPage.razor
index e4018c35977..2073c44ac24 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/BrowserPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/BrowserPage.razor
@@ -3,27 +3,28 @@
 @inject IJSRuntime JS
 @inject IBelemetry Belemetry
 
-<PageTitle>Browser instrumentation - bit Belemetry</PageTitle>
-
-<h1>Browser instrumentation</h1>
-
-<p class="page-intro">
-    The browser half of Belemetry is one dependency-free ES module, <code>bit-belemetry.js</code>. It starts from
-    the configuration <code>&lt;BelemetryScript /&gt;</code> writes into the page, before Blazor boots, so it sees
-    the initial load, the web vitals and the earliest errors - on interactive and static SSR pages alike. Every
-    section below has a live trigger and, under it, the records it produced, read back from this site's own OTLP
-    receiver.
-</p>
+<PageTitle>Browser instrumentation · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Browser instrumentation</h1>
+    <p class="bb-subtitle">
+        The browser half of Belemetry is one dependency-free ES module, <code>bit-belemetry.js</code>. It starts from
+        the configuration <code>&lt;BelemetryScript /&gt;</code> writes into the page, before Blazor boots, so it sees
+        the initial load, the web vitals and the earliest errors - on interactive and static SSR pages alike. Every
+        section below has a live trigger and, under it, the records it produced, read back from this site's own OTLP
+        receiver.
+    </p>
+</div>
 
-<div class="callout">
+<div class="bb-note">
     Nothing is recorded until you grant it. Each instrumentation belongs to one consent feature (named in its
     section); if a feed below says nothing is granted, accept the banner or pick features on the
     <a href="/consent">consent page</a>. Records of a feature you have not decided on yet are held in memory and
     sent once you grant it.
 </div>
 
-<div class="demo-section">
-    <h2>Page views</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Page views</h3>
     <p>
         Feature <code>PageViews</code>. The script records the initial load and every client-side navigation -
         <code>history.pushState</code>, <code>replaceState</code>, <code>popstate</code> and Blazor's enhanced
@@ -41,23 +42,22 @@
         In this demo the .NET side runs in WebAssembly, so that record goes through the .NET pipeline and shows up
         with the source <code>wasm</code>.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <a class="btn-bl-subtle" href="/dotnet">Go to the .NET page (then come back)</a>
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackVirtualPageView">
-                    TrackPageView("Checkout - payment step")
-                </button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsPageView"
-                               EmptyText="No page views yet - navigate away and back, or press the button." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">PageViews</span></span></div>
+        <div class="bb-toolbar">
+            <a class="btn btn-secondary" href="/dotnet">Go to the .NET page (then come back)</a>
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackVirtualPageView">
+                TrackPageView("Checkout - payment step")
+            </button>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsPageView"
+                           EmptyText="No page views yet - navigate away and back, or press the button." />
     </div>
     <CodeSnippet Code="@PageViewCode" Language="Razor" />
 </div>
 
-<div class="demo-section">
-    <h2>Interactions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Interactions</h3>
     <p>
         Feature <code>Interactions</code>. A capture-phase listener records every <code>click</code> (or the events in
         <code>InteractionEvents</code>) on a link, a button, a submit input or any element carrying
@@ -67,29 +67,28 @@
         The element's text is recorded only with <code>CaptureInteractionText</code>, because text can be personal
         data, and input values are never read. Anything under <code>data-bit-belemetry-ignore</code> is skipped.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <span class="demo-label">Recorded</span>
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" data-bit-belemetry-name="demo.checkout.pay">Pay (data-bit-belemetry-name)</button>
-                <button type="button" class="btn-bl-subtle" aria-label="Add to wishlist">Wishlist (aria-label)</button>
-            </div>
-            <span class="demo-label">Not recorded</span>
-            <div class="demo-actions" data-bit-belemetry-ignore>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="() => _ignoredClicks++">
-                    Inside data-bit-belemetry-ignore (@_ignoredClicks)
-                </button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsInteraction"
-                               EmptyText="No interactions yet - press the buttons above. Every other button on this page is recorded too." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Interactions</span></span></div>
+        <p class="bb-overline demo-sublabel">Recorded</p>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" data-bit-belemetry-name="demo.checkout.pay">Pay (data-bit-belemetry-name)</button>
+            <button type="button" class="btn btn-secondary" aria-label="Add to wishlist">Wishlist (aria-label)</button>
+        </div>
+        <p class="bb-overline demo-sublabel">Not recorded</p>
+        <div class="bb-toolbar" data-bit-belemetry-ignore>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="() => _ignoredClicks++">
+                Inside data-bit-belemetry-ignore (@_ignoredClicks)
+            </button>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsInteraction"
+                           EmptyText="No interactions yet - press the buttons above. Every other button on this page is recorded too." />
     </div>
     <CodeSnippet Code="@InteractionCode" Language="Razor" />
     <CodeSnippet Code="@InteractionOptionsCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Web vitals</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Web vitals</h3>
     <p>
         Feature <code>Performance</code>. The five Core Web Vitals and their companions are measured from the
         Performance Timeline and recorded as <code>browser.web_vital</code> events with <code>web_vital.name</code>,
@@ -97,8 +96,8 @@
         (<code>good</code>, <code>needs-improvement</code> or <code>poor</code>, on the official thresholds) and
         <code>web_vital.id</code>:
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead><tr><th scope="col">Vital</th><th scope="col">Measures</th><th scope="col">Reported</th></tr></thead>
             <tbody>
                 <tr><td><code>TTFB</code></td><td>Time to first byte of the document</td><td>At start, once the response has begun</td></tr>
@@ -115,23 +114,22 @@
         (the spec's <code>hadRecentInput</code>), so the spacer this button inserts is excluded; the shift when it is
         removed 1.5 s later is the one CLS records.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ShiftLayout">Cause a layout shift</button>
-            </div>
-            <div id="bl-shift-target">
-                <p>This paragraph moves down while a spacer is inserted above it, then jumps back.</p>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsWebVital"
-                               EmptyText="No web vitals yet - TTFB and FCP arrive first; switch tabs and come back for CLS and INP." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Performance - web vitals</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ShiftLayout">Cause a layout shift</button>
+        </div>
+        <div id="bl-shift-target">
+            <p>This paragraph moves down while a spacer is inserted above it, then jumps back.</p>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsWebVital"
+                           EmptyText="No web vitals yet - TTFB and FCP arrive first; switch tabs and come back for CLS and INP." />
     </div>
     <CodeSnippet Code="@WebVitalsCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Document load, resources and long tasks</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Document load, resources and long tasks</h3>
     <p>
         Also feature <code>Performance</code>. <code>DocumentLoad</code> (on by default) records the initial load as
         an internal <code>documentLoad</code> span with the navigation-timing milestones as events
@@ -141,20 +139,19 @@
         a lot of records, so turn it on deliberately. <code>LongTasks</code> (off by default, on in this demo) records
         every main-thread task over 50 ms as a <code>longtask</code> span.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="BlockMainThread">Block the main thread for 200 ms</button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsPerformanceSpan"
-                               EmptyText="No documentLoad or longtask spans yet - press the button, or reload the page." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Performance - spans</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="BlockMainThread">Block the main thread for 200 ms</button>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsPerformanceSpan"
+                           EmptyText="No documentLoad or longtask spans yet - press the button, or reload the page." />
     </div>
     <CodeSnippet Code="@PerformanceCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>fetch and XHR with trace context</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> fetch and XHR with trace context</h3>
     <p>
         Feature <code>Dependencies</code>. Every <code>fetch</code> and <code>XMLHttpRequest</code> becomes a client
         span named after its method, with <code>http.request.method</code>, <code>url.full</code>,
@@ -169,38 +166,37 @@
         the exporters' own endpoints) are never recorded, and neither is a request that already carries a
         <code>traceparent</code> - in WebAssembly that is .NET's <code>HttpClient</code>, which traces itself.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => CallAsync("fetch", "/api/demo/echo"))">fetch /api/demo/echo</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => CallAsync("xhr", "/api/demo/echo"))">XHR /api/demo/echo</button>
-                <button type="button" class="btn-bl btn-bl-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => CallAsync("fetch", "/api/demo/fail"))">fetch /api/demo/fail (500)</button>
-            </div>
-            @if (_call is not null)
-            {
-                <dl class="kv">
-                    <dt>Request</dt>
-                    <dd><code>@_call.Label</code></dd>
-                    <dt>Status</dt>
-                    <dd>@_call.Status in @_call.Ms ms</dd>
-                    <dt>traceparent the server saw</dt>
-                    <dd><code>@(_call.Traceparent ?? "(none)")</code></dd>
-                    @if (_call.TraceId is not null)
-                    {
-                        <dt>Trace id</dt>
-                        <dd><code>@_call.TraceId</code> - the same id as the browser span below</dd>
-                    }
-                </dl>
-            }
-            <TelemetryFeedView Compact="true" Match="@IsDependency"
-                               EmptyText="No dependency spans yet - press one of the buttons above." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Dependencies</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => CallAsync("fetch", "/api/demo/echo"))">fetch /api/demo/echo</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => CallAsync("xhr", "/api/demo/echo"))">XHR /api/demo/echo</button>
+            <button type="button" class="btn demo-btn-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => CallAsync("fetch", "/api/demo/fail"))">fetch /api/demo/fail (500)</button>
         </div>
+        @if (_call is not null)
+        {
+            <dl class="bb-params">
+                <dt>Request</dt>
+                <dd><code>@_call.Label</code></dd>
+                <dt>Status</dt>
+                <dd>@_call.Status in @_call.Ms ms</dd>
+                <dt>traceparent the server saw</dt>
+                <dd><code>@(_call.Traceparent ?? "(none)")</code></dd>
+                @if (_call.TraceId is not null)
+                {
+                    <dt>Trace id</dt>
+                    <dd><code>@_call.TraceId</code> - the same id as the browser span below</dd>
+                }
+            </dl>
+        }
+        <TelemetryFeedView Compact="true" Match="@IsDependency"
+                           EmptyText="No dependency spans yet - press one of the buttons above." />
     </div>
     <CodeSnippet Code="@DependenciesCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Errors</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Errors</h3>
     <p>
         Feature <code>Errors</code>. Uncaught errors (<code>window.onerror</code>) and unhandled promise rejections
         become log records with severity ERROR, the event name <code>exception</code>, and
@@ -209,67 +205,64 @@
         the default list has the harmless <code>ResizeObserver loop</code> warning every browser raises. Handled .NET
         exceptions go through <code>IBelemetry.TrackException</code>.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl btn-bl-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ThrowError">Throw a TypeError</button>
-                <button type="button" class="btn-bl btn-bl-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="RejectPromise">Reject a promise</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ThrowIgnored">Throw "ResizeObserver loop ..." (ignored)</button>
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackHandledException">IBelemetry.TrackException</button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsError"
-                               EmptyText="No errors yet - press one of the buttons above." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Errors</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn demo-btn-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ThrowError">Throw a TypeError</button>
+            <button type="button" class="btn demo-btn-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="RejectPromise">Reject a promise</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ThrowIgnored">Throw "ResizeObserver loop ..." (ignored)</button>
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackHandledException">IBelemetry.TrackException</button>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsError"
+                           EmptyText="No errors yet - press one of the buttons above." />
     </div>
     <CodeSnippet Code="@ErrorsCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Console capture</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Console capture</h3>
     <p>
         With <code>CaptureConsole</code> (off by default, on in this demo) the script wraps the console methods named
         in <code>ConsoleLevels</code> (<code>error</code> and <code>warn</code> by default) and records each call as a
         log record. <code>console.error</code> belongs to the <code>Errors</code> feature, the other levels to
         <code>Logs</code>. The original method always runs first, so the developer tools look the same as before.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => ConsoleAsync("warn"))">console.warn</button>
-                <button type="button" class="btn-bl btn-bl-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => ConsoleAsync("error"))">console.error</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => ConsoleAsync("info"))">console.info (not in ConsoleLevels)</button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsConsole"
-                               EmptyText="No console records yet - press one of the buttons above." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Console capture</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => ConsoleAsync("warn"))">console.warn</button>
+            <button type="button" class="btn demo-btn-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => ConsoleAsync("error"))">console.error</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => ConsoleAsync("info"))">console.info (not in ConsoleLevels)</button>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsConsole"
+                           EmptyText="No console records yet - press one of the buttons above." />
     </div>
     <CodeSnippet Code="@ConsoleCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Custom events</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Custom events</h3>
     <p>
         Feature <code>Events</code>. A custom event is a log record whose event name is the name you give it, with
         your attributes. From C# call <code>IBelemetry.TrackEvent</code>; from JavaScript call
         <code>BitBelemetry.trackEvent</code> on the global the module sets. Both carry <code>session.id</code> (and the
         user ids with <code>UserTracking</code>), so a backend can join them with everything else the session did.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackCSharpEvent">IBelemetry.TrackEvent (C#)</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackJsEvent">BitBelemetry.trackEvent (JS)</button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsCustomEvent"
-                               EmptyText="No custom events yet - press one of the buttons above." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Events</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackCSharpEvent">IBelemetry.TrackEvent (C#)</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackJsEvent">BitBelemetry.trackEvent (JS)</button>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsCustomEvent"
+                           EmptyText="No custom events yet - press one of the buttons above." />
     </div>
     <CodeSnippet Code="@EventsCode" Language="Razor" />
     <CodeSnippet Code="@EventsJsCode" Language="JavaScript" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> API</h3>
     <p>Every option of the script lives on <code>options.Browser</code>:</p>
     <ApiTable TypeName="BelemetryBrowserOptions" />
     <p>Manual telemetry from C#:</p>
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/ConfigurationPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/ConfigurationPage.razor
index 1bfc6267571..dc6e3649e76 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/ConfigurationPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/ConfigurationPage.razor
@@ -1,18 +1,19 @@
 @page "/configuration"
 
-<PageTitle>Configuration - bit Belemetry</PageTitle>
-
-<h1>Configuration</h1>
-
-<p class="page-intro">
-    Everything Belemetry does is set on one <code>BelemetryOptions</code>, passed to
-    <code>AddBitBelemetryServices</code>. The tables on this page are reflected from the shipped assembly - names,
-    types, the defaults a fresh options object really has, and the XML documentation you see in IntelliSense - so
-    they cannot describe an option that does not exist.
-</p>
+<PageTitle>Configuration · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Configuration</h1>
+    <p class="bb-subtitle">
+        Everything Belemetry does is set on one <code>BelemetryOptions</code>, passed to
+        <code>AddBitBelemetryServices</code>. The tables on this page are reflected from the shipped assembly - names,
+        types, the defaults a fresh options object really has, and the XML documentation you see in IntelliSense - so
+        they cannot describe an option that does not exist.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>One registration</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> One registration</h3>
     <p>
         <code>AddBitBelemetryServices</code> follows the Options pattern and is idempotent: call it in every project
         that hosts Blazor, and every configure callback passed across calls runs, in order, on the same
@@ -23,8 +24,8 @@
     <CodeSnippet Code="@FullCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>From appsettings</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> From appsettings</h3>
     <p>
         Every option can come from configuration instead. Bind the section the way a trimmed or AOT app binds any
         options: the configuration binder's source generator (<code>EnableConfigurationBindingGenerator</code> in the
@@ -42,8 +43,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Per-category log levels</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Per-category log levels</h3>
     <p>
         <code>Logs.MinimumLevel</code> is the floor: nothing below it is collected, whatever a category says.
         Above it, per-category levels use the standard logging configuration, under the <code>Belemetry</code>
@@ -52,15 +53,15 @@
     <CodeSnippet Code="@LoggingCode" Language="JSON" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Environment variables</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Environment variables</h3>
     <p>
         Outside the browser, with <code>options.UseEnvironmentVariables</code> (on by default), the standard
         variables fill in what the code leaves unset - this is how the .NET Aspire AppHost and most container
         platforms wire telemetry in. Explicit options always win.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Variable</th><th scope="col">Effect</th></tr>
             </thead>
@@ -77,7 +78,7 @@
             </tbody>
         </table>
     </div>
-    <div class="callout">
+    <div class="bb-note">
         <p>
             The browser has no environment. In a Blazor Web App the browser script gets its configuration from the
             <em>server's</em> options through <code>&lt;BelemetryScript /&gt;</code>, so variables set on the server reach
@@ -86,115 +87,115 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> <span>Belemetry<wbr>Options</span></h3>
     <ApiTable TypeName="BelemetryOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryConsentOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> <span>Belemetry<wbr>Consent<wbr>Options</span></h3>
     <p><code>options.Consent</code> - see <a href="/consent">Consent and GDPR</a>.</p>
     <ApiTable TypeName="BelemetryConsentOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryPrivacyOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> <span>Belemetry<wbr>Privacy<wbr>Options</span></h3>
     <p><code>options.Privacy</code> - see <a href="/privacy">Privacy</a>.</p>
     <ApiTable TypeName="BelemetryPrivacyOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryBrowserOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> <span>Belemetry<wbr>Browser<wbr>Options</span></h3>
     <p><code>options.Browser</code> - see <a href="/browser">Browser instrumentation</a> and <a href="/transport">Transport</a>.</p>
     <ApiTable TypeName="BelemetryBrowserOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryLoggingOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> <span>Belemetry<wbr>Logging<wbr>Options</span></h3>
     <p><code>options.Logs</code> - see <a href="/dotnet">.NET instrumentation</a>.</p>
     <ApiTable TypeName="BelemetryLoggingOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryTracingOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> <span>Belemetry<wbr>Tracing<wbr>Options</span></h3>
     <p><code>options.Traces</code>.</p>
     <ApiTable TypeName="BelemetryTracingOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryMetricsOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> <span>Belemetry<wbr>Metrics<wbr>Options</span></h3>
     <p><code>options.Metrics</code>.</p>
     <ApiTable TypeName="BelemetryMetricsOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryBatchOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> <span>Belemetry<wbr>Batch<wbr>Options</span></h3>
     <p><code>options.Batch</code> - the .NET pipeline. The browser script batches with <code>options.Browser.FlushInterval</code>, <code>MaxBatchSize</code> and <code>MaxQueueSize</code>.</p>
     <ApiTable TypeName="BelemetryBatchOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryPersistenceOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> <span>Belemetry<wbr>Persistence<wbr>Options</span></h3>
     <p><code>options.Persistence</code> - see <a href="/persistence">Offline persistence</a>.</p>
     <ApiTable TypeName="BelemetryPersistenceOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryServerOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> <span>Belemetry<wbr>Server<wbr>Options</span></h3>
     <p><code>options.Server</code> - see <a href="/server-pipeline">Server pipeline</a>.</p>
     <ApiTable TypeName="BelemetryServerOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryOtlpExporterOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> <span>Belemetry<wbr>Otlp<wbr>Exporter<wbr>Options</span></h3>
     <p>Configured by <code>options.AddOtlpExporter(...)</code> - see <a href="/otlp">OTLP</a>.</p>
     <ApiTable TypeName="BelemetryOtlpExporterOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryAzureMonitorExporterOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> <span>Belemetry<wbr>Azure<wbr>Monitor<wbr>Exporter<wbr>Options</span></h3>
     <p>Configured by <code>options.AddAzureMonitorExporter(...)</code> - see <a href="/azure-monitor">Azure Monitor</a>.</p>
     <ApiTable TypeName="BelemetryAzureMonitorExporterOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryConsoleExporterOptions</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> <span>Belemetry<wbr>Console<wbr>Exporter<wbr>Options</span></h3>
     <p>Configured by <code>options.AddConsoleExporter(...)</code> - see <a href="/exporters">Console, in-memory and custom</a>.</p>
     <ApiTable TypeName="BelemetryConsoleExporterOptions" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryFeatures</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> <span>Belemetry<wbr>Features</span></h3>
     <ApiTable TypeName="BelemetryFeatures" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryHostKind</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> <span>Belemetry<wbr>Host<wbr>Kind</span></h3>
     <ApiTable TypeName="BelemetryHostKind" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryBrowserTransport</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> <span>Belemetry<wbr>Browser<wbr>Transport</span></h3>
     <ApiTable TypeName="BelemetryBrowserTransport" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryOtlpProtocol</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> <span>Belemetry<wbr>Otlp<wbr>Protocol</span></h3>
     <ApiTable TypeName="BelemetryOtlpProtocol" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryCompression</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> <span>Belemetry<wbr>Compression</span></h3>
     <ApiTable TypeName="BelemetryCompression" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetrySignals</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> <span>Belemetry<wbr>Signals</span></h3>
     <ApiTable TypeName="BelemetrySignals" />
 </div>
 
-<div class="demo-section">
-    <h2>BelemetryMetricTemporality</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> <span>Belemetry<wbr>Metric<wbr>Temporality</span></h3>
     <ApiTable TypeName="BelemetryMetricTemporality" />
 </div>
 
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/ConsentPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/ConsentPage.razor
index 2ffa939ceca..52503b5d579 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/ConsentPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/ConsentPage.razor
@@ -4,19 +4,20 @@
 @inject IBelemetryConsent Consent
 @inject IJSRuntime JS
 
-<PageTitle>Consent and GDPR - bit Belemetry</PageTitle>
-
-<h1>Consent and GDPR</h1>
-
-<p class="page-intro">
-    Every record Belemetry produces belongs to exactly one of twelve <strong>features</strong>, and a feature
-    is collected only while it is both enabled by configuration and granted by the user. Nothing is sent
-    before the user decides, each feature can be granted and revoked on its own at runtime, and revoking one
-    purges what it queued and what it stored on the device.
-</p>
+<PageTitle>Consent and GDPR · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Consent and GDPR</h1>
+    <p class="bb-subtitle">
+        Every record Belemetry produces belongs to exactly one of twelve <strong>features</strong>, and a feature
+        is collected only while it is both enabled by configuration and granted by the user. Nothing is sent
+        before the user decides, each feature can be granted and revoked on its own at runtime, and revoking one
+        purges what it queued and what it stored on the device.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Your consent, live</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Your consent, live</h3>
     <p>
         This panel is wired straight to <code>IBelemetryConsent</code> - the same service the site's banner
         uses. Tick a feature to grant it, untick it to revoke it, or set a whole group at once. The decision is
@@ -24,73 +25,72 @@
         through.
     </p>
 
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <span class="demo-label">Per feature</span>
-            <div class="consent-grid">
-                @foreach (var feature in _features)
-                {
-                    var available = (Consent.Available & feature.Flag) == feature.Flag;
-                    <label class="consent-feature">
-                        <input type="checkbox"
-                               checked="@Consent.IsGranted(feature.Flag)"
-                               disabled="@(_ready is false || available is false)"
-                               @onchange="e => ToggleAsync(feature.Flag, e.Value is true)" />
-                        <span>
-                            <strong>@feature.Flag</strong>
-                            <small>@feature.Description</small>
-                        </span>
-                    </label>
-                }
-            </div>
-
-            <span class="demo-label">Groups</span>
-            <div class="demo-actions">
-                <button type="button" class="btn-bl-subtle" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.Diagnostics)">Diagnostics</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.Analytics)">Analytics</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.Monitoring)">Monitoring</button>
-                <button type="button" class="btn-bl" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.All)">All</button>
-                <button type="button" class="btn-bl btn-bl-danger" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.None)">None</button>
-            </div>
-
-            @if (_error is not null)
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">per-feature consent</span></span></div>
+        <p class="bb-overline demo-sublabel">Per feature</p>
+        <div class="demo-consent-grid">
+            @foreach (var feature in _features)
             {
-                <p class="demo-label" role="status">@_error</p>
+                var available = (Consent.Available & feature.Flag) == feature.Flag;
+                <label class="demo-consent-feature">
+                    <input type="checkbox"
+                           checked="@Consent.IsGranted(feature.Flag)"
+                           disabled="@(_ready is false || available is false)"
+                           @onchange="e => ToggleAsync(feature.Flag, e.Value is true)" />
+                    <span>
+                        <strong>@feature.Flag</strong>
+                        <small>@feature.Description</small>
+                    </span>
+                </label>
             }
         </div>
+
+        <p class="bb-overline demo-sublabel">Groups</p>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.Diagnostics)">Diagnostics</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.Analytics)">Analytics</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.Monitoring)">Monitoring</button>
+            <button type="button" class="btn btn-primary" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.All)">All</button>
+            <button type="button" class="btn demo-btn-danger" disabled="@(_ready is false)" @onclick="() => SetAsync(BelemetryFeatures.None)">None</button>
+        </div>
+
+        @if (_error is not null)
+        {
+            <p class="demo-status" role="status">@_error</p>
+        }
     </div>
 
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <span class="demo-label">.NET - IBelemetryConsent</span>
-            <dl class="kv">
+    <div class="bb-split">
+        <div class="bb-demo">
+            <div class="bb-demo-bar"><span class="bb-demo-label">.NET<span class="demo-sample-title">IBelemetryConsent</span></span></div>
+            <dl class="bb-params">
                 <dt>Available</dt>
                 <dd><code>@Describe(Consent.Available)</code></dd>
                 <dt>Granted</dt>
                 <dd><code>@Describe(Consent.Granted)</code></dd>
                 <dt>IsDecided</dt>
-                <dd><span class="state-pill @(Consent.IsDecided ? "on" : null)">@(Consent.IsDecided ? "decided" : "not decided")</span></dd>
+                <dd><span class="bb-badge @(Consent.IsDecided ? "bb-badge-success" : "demo-badge-off")">@(Consent.IsDecided ? "decided" : "not decided")</span></dd>
             </dl>
 
-            <span class="demo-label">Effective (configured and granted)</span>
-            <div class="badge-list">
+            <p class="bb-overline demo-sublabel">Effective (configured and granted)</p>
+            <div class="demo-badges">
                 @foreach (var feature in _features)
                 {
                     var effective = (Consent.Available & Consent.Granted & feature.Flag) == feature.Flag;
-                    <span class="state-pill @(effective ? "on" : null)">@feature.Flag</span>
+                    <span class="bb-badge @(effective ? "bb-badge-success" : "demo-badge-off")">@feature.Flag</span>
                 }
             </div>
         </div>
 
-        <div class="demo-card stack">
-            <span class="demo-label">Browser - BitBelemetry.getContext()</span>
+        <div class="bb-demo">
+            <div class="bb-demo-bar"><span class="bb-demo-label">Browser<span class="demo-sample-title">BitBelemetry.getContext()</span></span></div>
             @if (_browser is { } context)
             {
-                <dl class="kv">
+                <dl class="bb-params">
                     <dt>consent</dt>
                     <dd><code>@Describe(context.Consent)</code></dd>
                     <dt>decided</dt>
-                    <dd><span class="state-pill @(context.Decided ? "on" : null)">@(context.Decided ? "decided" : "not decided")</span></dd>
+                    <dd><span class="bb-badge @(context.Decided ? "bb-badge-success" : "demo-badge-off")">@(context.Decided ? "decided" : "not decided")</span></dd>
                     <dt>sessionId</dt>
                     <dd><code>@(context.SessionId ?? "-")</code></dd>
                     <dt>pseudoId</dt>
@@ -98,7 +98,7 @@
                     <dt>userId</dt>
                     <dd><code>@(context.UserId ?? "-")</code></dd>
                 </dl>
-                <p class="demo-label">
+                <p class="demo-status">
                     @(context.Consent == (int)Consent.Granted && context.Decided == Consent.IsDecided
                         ? "Both sides agree."
                         : "The two sides differ - the browser applies Global Privacy Control, or a change is still on its way.")
@@ -106,23 +106,23 @@
             }
             else
             {
-                <p class="demo-label">@(RendererInfo.IsInteractive ? "Waiting for the browser script..." : "Shown once the page is interactive.")</p>
+                <p class="demo-status">@(RendererInfo.IsInteractive ? "Waiting for the browser script..." : "Shown once the page is interactive.")</p>
             }
-            <div class="demo-actions">
-                <button type="button" class="btn-bl-subtle" disabled="@(_ready is false)" @onclick="ReadBrowserAsync">Read again</button>
+            <div class="bb-toolbar">
+                <button type="button" class="btn btn-secondary" disabled="@(_ready is false)" @onclick="ReadBrowserAsync">Read again</button>
             </div>
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Features</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Features</h3>
     <p>
         The bit values are a wire contract shared by C# and the browser script: they cross the interop
         boundary as plain integers and are persisted in the browser, so they never change.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Feature</th><th scope="col">Bit</th><th scope="col">Covers</th></tr>
             </thead>
@@ -140,14 +140,14 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Groups</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Groups</h3>
     <p>
         Banners rarely ask about twelve things. The groups are the usual three questions, as flags you can pass
         to <code>SetAsync</code> or combine with others:
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Group</th><th scope="col">Features</th><th scope="col">Answers</th></tr>
             </thead>
@@ -166,9 +166,9 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>How consent behaves</h2>
-    <ul>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> How consent behaves</h3>
+    <ul class="bb-detail-list">
         <li>
             <strong>Effective = configured AND granted.</strong> <code>BelemetryOptions.Features</code> (all by
             default) is what the app collects at all; <code>IBelemetryConsent.Available</code> reports it.
@@ -215,8 +215,8 @@
     <CodeSnippet Code="@OptionsCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>A banner of your own</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> A banner of your own</h3>
     <p>
         A banner needs three things from <code>IBelemetryConsent</code>: whether to show itself
         (<code>IsDecided</code>), a way to record the answer (<code>SetAsync</code>), and
@@ -229,8 +229,8 @@
     <CodeSnippet Code="@JsCode" Language="JavaScript" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> API</h3>
     <ApiTable TypeName="IBelemetryConsent" />
     <ApiTable TypeName="BelemetryFeatures" />
     <ApiTable TypeName="BelemetryConsentOptions" />
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/DotnetPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/DotnetPage.razor
index fdbd814b0a3..3adb0ae7728 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/DotnetPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/DotnetPage.razor
@@ -4,18 +4,19 @@
 @inject ILogger<DotnetPage> Logger
 @inject HttpClient Http
 
-<PageTitle>.NET instrumentation - bit Belemetry</PageTitle>
-
-<h1>.NET instrumentation</h1>
-
-<p class="page-intro">
-    On the .NET side Belemetry listens with the same BCL primitives the OpenTelemetry SDK is built on - an
-    <code>ILoggerProvider</code>, an <code>ActivityListener</code> and a <code>MeterListener</code> - so your
-    <code>ILogger</code> calls, <code>ActivitySource</code> spans and <code>Meter</code> instruments are collected
-    without referencing Belemetry anywhere in the code that produces them.
-</p>
+<PageTitle>.NET instrumentation · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>.NET instrumentation</h1>
+    <p class="bb-subtitle">
+        On the .NET side Belemetry listens with the same BCL primitives the OpenTelemetry SDK is built on - an
+        <code>ILoggerProvider</code>, an <code>ActivityListener</code> and a <code>MeterListener</code> - so your
+        <code>ILogger</code> calls, <code>ActivitySource</code> spans and <code>Meter</code> instruments are collected
+        without referencing Belemetry anywhere in the code that produces them.
+    </p>
+</div>
 
-<div class="callout">
+<div class="bb-note">
     In this demo the .NET side runs in <strong>WebAssembly</strong>: these buttons produce records in your browser's
     .NET runtime, which exports them as OTLP/JSON to this site's own receiver (their source in the feed is
     <code>wasm</code>). Logs below Error need the <code>Logs</code> feature, spans <code>Traces</code>, metrics
@@ -24,8 +25,8 @@
     (60 s by default).
 </div>
 
-<div class="demo-section">
-    <h2>Logs</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Logs</h3>
     <p>
         Every <code>ILogger</code> entry at or above <code>Logs.MinimumLevel</code> (Information by default) becomes a
         log record: the formatted message as the body, the category as the instrumentation scope, the structured
@@ -42,24 +43,23 @@
         <code>ExcludedCategories</code> drops category prefixes outright (Belemetry's own diagnostics category,
         <code>Bit.Belemetry</code>, is always excluded, so its diagnostics never feed back into its pipeline).
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                @foreach (var level in _levels)
-                {
-                    <button type="button" class="@(level >= LogLevel.Error ? "btn-bl btn-bl-danger" : level >= LogLevel.Information ? "btn-bl" : "btn-bl-subtle")"
-                            disabled="@(RendererInfo.IsInteractive is false)" @onclick="() => Log(level)">
-                        @level
-                    </button>
-                }
-            </div>
-            <div class="demo-actions">
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="LogWithScope">Log inside a scope</button>
-                <button type="button" class="btn-bl btn-bl-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="LogException">LogError with an exception</button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsWasmLog"
-                               EmptyText="No .NET logs yet - press one of the level buttons above." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">ILogger</span></span></div>
+        <div class="bb-toolbar">
+            @foreach (var level in _levels)
+            {
+                <button type="button" class="@(level >= LogLevel.Error ? "btn demo-btn-danger" : level >= LogLevel.Information ? "btn btn-primary" : "btn btn-secondary")"
+                        disabled="@(RendererInfo.IsInteractive is false)" @onclick="() => Log(level)">
+                    @level
+                </button>
+            }
         </div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="LogWithScope">Log inside a scope</button>
+            <button type="button" class="btn demo-btn-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="LogException">LogError with an exception</button>
+        </div>
+        <TelemetryFeedView Compact="true" Match="@IsWasmLog"
+                           EmptyText="No .NET logs yet - press one of the level buttons above." />
     </div>
     <CodeSnippet Code="@LoggingCode" Language="C#" />
     <p>
@@ -69,8 +69,8 @@
     <CodeSnippet Code="@LoggingConfigCode" Language="JSON" />
 </div>
 
-<div class="demo-section">
-    <h2>Traces</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Traces</h3>
     <p>
         The activities of every source named in <code>Traces.Sources</code> are recorded as spans - by default
         <code>System.Net.Http</code>, <code>Microsoft.AspNetCore.Components*</code> and <code>Bit.Belemetry.*</code>,
@@ -95,27 +95,26 @@
         scattered spans.
     </p>
     <CodeSnippet Code="@TailSamplingCode" Language="C#" />
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false || _running)" @onclick="RunCheckout">
-                    @(_running ? "Running..." : "Run a checkout trace")
-                </button>
-            </div>
-            <p class="demo-label">
-                A root <code>demo.checkout</code> span, a <code>demo.validate-cart</code> child, an
-                <code>HttpClient</code> call to <code>/api/demo/echo</code> (a <code>System.Net.Http</code> client
-                span), and a <code>demo.charge-card</code> child that fails with an exception event.
-            </p>
-            <TelemetryFeedView Compact="true" Match="@IsWasmSpan"
-                               EmptyText="No .NET spans yet - press the button above." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">ActivitySource</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false || _running)" @onclick="RunCheckout">
+                @(_running ? "Running..." : "Run a checkout trace")
+            </button>
         </div>
+        <p class="demo-status">
+            A root <code>demo.checkout</code> span, a <code>demo.validate-cart</code> child, an
+            <code>HttpClient</code> call to <code>/api/demo/echo</code> (a <code>System.Net.Http</code> client
+            span), and a <code>demo.charge-card</code> child that fails with an exception event.
+        </p>
+        <TelemetryFeedView Compact="true" Match="@IsWasmSpan"
+                           EmptyText="No .NET spans yet - press the button above." />
     </div>
     <CodeSnippet Code="@TracingCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Metrics</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Metrics</h3>
     <p>
         The instruments of every meter named in <code>Metrics.Meters</code> are aggregated in process - by default
         <code>System.Net.Http</code>, <code>Microsoft.AspNetCore.Components*</code> and <code>System.Runtime</code>,
@@ -137,29 +136,28 @@
         off again. This demo references the library as a project, so its client imports the package's build props
         itself; without them, the buttons below would produce nothing.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Press("primary"))">Press (counter)</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Press("secondary"))">Press another button</button>
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="RecordWork">Do some work (histogram)</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Cart(+1))">Add to cart</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Cart(-1))">Remove from cart</button>
-            </div>
-            <dl class="kv">
-                <dt>demo.button.presses</dt><dd>@_presses</dd>
-                <dt>demo.work.duration (last)</dt><dd>@(_lastWork is null ? "-" : $"{_lastWork:0} ms")</dd>
-                <dt>demo.cart.items</dt><dd>@_cart</dd>
-            </dl>
-            <TelemetryFeedView Compact="true" Match="@IsWasmMetric"
-                               EmptyText="No metrics yet - they are exported every 10 s in this demo." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Meter</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Press("primary"))">Press (counter)</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Press("secondary"))">Press another button</button>
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="RecordWork">Do some work (histogram)</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Cart(+1))">Add to cart</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => Cart(-1))">Remove from cart</button>
         </div>
+        <dl class="bb-params">
+            <dt>demo.button.presses</dt><dd>@_presses</dd>
+            <dt>demo.work.duration (last)</dt><dd>@(_lastWork is null ? "-" : $"{_lastWork:0} ms")</dd>
+            <dt>demo.cart.items</dt><dd>@_cart</dd>
+        </dl>
+        <TelemetryFeedView Compact="true" Match="@IsWasmMetric"
+                           EmptyText="No metrics yet - they are exported every 10 s in this demo." />
     </div>
     <CodeSnippet Code="@MetricsCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Entity Framework Core and Hangfire</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Entity Framework Core and Hangfire</h3>
     <p>
         Neither EF Core nor Hangfire starts activities of its own, and the OpenTelemetry instrumentations for them
         only run inside the OpenTelemetry SDK. Belemetry ships the two bridges as packages of their own -
@@ -186,8 +184,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> API</h3>
     <p><code>options.Logs</code>:</p>
     <ApiTable TypeName="BelemetryLoggingOptions" />
     <p><code>options.Traces</code>:</p>
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/ErrorPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/ErrorPage.razor
index 9ab4682b14b..0dda1a9e2a4 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/ErrorPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/ErrorPage.razor
@@ -1,30 +1,20 @@
 @page "/Error"
+@layout MainLayout
 
 @* Target of app.UseExceptionHandler("/Error") in the host's Program.cs. It lives in the client
    project on purpose: Routes.razor binds the router to this assembly only, so a page placed in
    the host project would never be matched and the re-executed request would end in a 404. *@
 
-<PageTitle>Error - bit Belemetry</PageTitle>
-
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">500</span>
-
-    <h1>Something went wrong</h1>
+<PageTitle>Error · Belemetry</PageTitle>
 
+<div class="bb-error">
+    <h1>500</h1>
     <p role="alert">
-        An error occurred while processing your request. Reloading usually clears it; if it does
-        not, the repository is the place to tell us about it.
+        An error occurred while processing your request. Reloading usually clears it; if it does not, the
+        repository is the place to tell us about it.
     </p>
-
-    <div class="hero-actions">
-        <a class="btn-primary" href="/">
-            Back to home
-            <Icon Path="@Icons.ArrowRight" />
-        </a>
-        <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-           href="https://github.com/bitfoundation/bitplatform/issues">
-            <span class="github-mark" aria-hidden="true"></span>
-            Report an issue
-        </a>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="https://github.com/bitfoundation/bitplatform/issues" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">Report an issue ↗</a>
     </div>
 </div>
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/ExportersPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/ExportersPage.razor
index 47a520a4e18..6d58247e18e 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/ExportersPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/ExportersPage.razor
@@ -1,17 +1,18 @@
 @page "/exporters"
 
-<PageTitle>Console, in-memory and custom exporters - bit Belemetry</PageTitle>
-
-<h1>Console, in-memory and custom exporters</h1>
-
-<p class="page-intro">
-    Besides OTLP and Azure Monitor, Belemetry ships a console exporter for development and an in-memory exporter for
-    tests and in-app viewers, and takes any <code>IBelemetryExporter</code> of your own. All of them can be combined
-    with the others: every exporter receives every batch.
-</p>
+<PageTitle>Console, in-memory and custom exporters · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Console, in-memory and custom exporters</h1>
+    <p class="bb-subtitle">
+        Besides OTLP and Azure Monitor, Belemetry ships a console exporter for development and an in-memory exporter for
+        tests and in-app viewers, and takes any <code>IBelemetryExporter</code> of your own. All of them can be combined
+        with the others: every exporter receives every batch.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Console</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Console</h3>
     <p>
         <code>AddConsoleExporter</code> prints one line per span, log record and metric point - the kind, the name, the
         duration or severity, the ids and the attributes. The .NET side writes to the process's standard output, which
@@ -23,8 +24,8 @@
     <CodeSnippet Code="@ConsoleOutput" Language="Text" />
 </div>
 
-<div class="demo-section">
-    <h2>In-memory</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> In-memory</h3>
     <p>
         <code>BelemetryInMemoryExporter</code> keeps what it is handed in three queues - <code>Spans</code>,
         <code>Logs</code> and <code>Metrics</code>, oldest first, each capped at the <code>capacity</code> passed to
@@ -43,8 +44,8 @@
     <CodeSnippet Code="@ViewerCode" Language="Razor" />
 </div>
 
-<div class="demo-section">
-    <h2>Your own exporter</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Your own exporter</h3>
     <p>
         Implement <code>IBelemetryExporter</code> - a <code>Name</code> for diagnostics and
         <code>ExportAsync</code> - and add an instance with <code>options.AddExporter</code>. A
@@ -52,7 +53,7 @@
         <code>Logs</code> and <code>Metrics</code>, already shaped like their OTLP messages (see the model types
         <code>BelemetrySpan</code>, <code>BelemetryLogRecord</code> and <code>BelemetryMetric</code>).
     </p>
-    <ul>
+    <ul class="bb-detail-list">
         <li>
             Calls are serialized: the pipeline never calls <code>ExportAsync</code> on one exporter concurrently, so
             no locking is needed inside it.
@@ -81,8 +82,8 @@
     <CodeSnippet Code="@CustomSetupCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> API</h3>
     <ApiTable TypeName="IBelemetryExporter" />
     <ApiTable TypeName="BelemetryInMemoryExporter" />
     <ApiTable TypeName="BelemetryConsoleExporterOptions" />
@@ -163,7 +164,7 @@
         @implements IDisposable
         @inject BelemetryInMemoryExporter Memory
 
-        <ul>
+        <ul class="bb-detail-list">
             @foreach (var log in Memory.Logs.Reverse().Take(20))
             {
                 <li>@log.SeverityText @(log.EventName ?? log.Body)</li>
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/Home.razor b/src/Utilities/Belemetry/Demo/Client/Pages/Home.razor
index 8e4dd1829f7..59bcdfdf069 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/Home.razor
@@ -1,300 +1,317 @@
 @page "/"
-@inject IJSRuntime JS
-
-@* The landing page. It is not a documentation page and does not get the docs shell around it -
-   no nav panel, no "on this page" rail, no reading column (see Layout/MainLayout.razor). Instead
-   it lays out its own full-bleed sections, alternating surfaces, and prints its own index into the
-   docs - which is the job the nav panel would otherwise be doing here.
+@layout MainLayout
+@inject IBelemetry Belemetry
+
+<PageTitle>Belemetry - telemetry for every Blazor app</PageTitle>
+
+@* The landing page: hero -> proof strip -> the twelve consent features -> code walkthrough -> comparison
+   with the OpenTelemetry SDKs -> persona tiles -> FAQ -> final call to action. Everything else on the
+   site is a documentation page under DocsLayout.
+
+   The page has one argument to make: that a single small package covers both halves of a Blazor app in
+   OpenTelemetry's own terms, under the user's consent. The strongest form of that argument is the site
+   itself, which is instrumented with Belemetry - so the hero's sample is live: the reader's own records,
+   read back from this site's OTLP receiver as they arrive. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0 · ships with an MCP server
+            </span>
+            <h1>Telemetry for Blazor,<br /><span class="bb-hero-accent">both sides of the app.</span></h1>
+            <p class="bb-hero-sub">
+                One lightweight SDK for WebAssembly, Server, Auto, static SSR and Hybrid. It records the browser -
+                page views, clicks, web vitals, errors, fetch and XHR - and .NET - <code>ILogger</code>,
+                <code>Activity</code> and <code>Meter</code> - in OpenTelemetry's data model, without the
+                OpenTelemetry packages, and only what the user consented to.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Belemetry</pre>
+            <div class="bb-hero-actions">
+                <a href="web-app" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="live" class="btn btn-secondary bb-btn-lg">Live telemetry</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
 
-   The page has one argument to make: that a single small package covers both halves of a Blazor
-   app in OpenTelemetry's own terms, under the user's consent. The strongest form of that argument
-   is the site itself, which is instrumented with Belemetry and shows each reader their own records
-   on the Live telemetry page - so that is where the second call to action goes.
+        @* The sample, framed as a window: one line of C#, and under it what this site recorded of the
+           reader's own visit - live, read back from its in-process OTLP receiver. Before the reader
+           answers the consent banner the feed says nothing is sent, which is the other half of the point. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Checkout.razor · <strong>your records, live</strong></span>
+                </div>
+                <pre class="bb-code"><span class="k">@@inject</span> IBelemetry Belemetry
 
-   Its styles live under "Landing page" in wwwroot/css/app.css. *@
+&lt;<span class="k">button</span> @@onclick=<span class="s">"TrackEvent"</span>&gt;Track an event&lt;/<span class="k">button</span>&gt;
 
-<PageTitle>bit Belemetry - telemetry for every Blazor app</PageTitle>
+<span class="k">@@code</span> {
+    <span class="k">void</span> TrackEvent() =&gt; Belemetry.TrackEvent(<span class="s">"demo.home.click"</span>);
+}
+<span class="c">@@* Page views, clicks, web vitals and errors take no code *@@</span></pre>
+                <div class="demo-home-live">
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-primary" data-bit-belemetry-name="home.track-event"
+                                disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackEvent">
+                            Track an event
+                        </button>
+                        <a class="btn btn-secondary" href="consent">Choose what is sent</a>
+                    </div>
+                    @* Events and errors only - page views, clicks, web vitals, custom events: the records a
+                       reader can cause and recognize. The long tasks of the WebAssembly runtime starting
+                       up are on the Live telemetry page with everything else. *@
+                    <TelemetryFeedView Compact="true" Max="5" Match="@(r => r.Kind is "Event" or "Error")"
+                                       EmptyText="Nothing yet - press the button, or click around the site." />
+                </div>
+            </div>
+        </div>
+    </section>
 
-<div class="homepage">
+    @* ============================== Proof strip ============================== *@
 
-    @* ── Hero ──────────────────────────────────────────────────────────────── *@
-    <section class="homepage-section hero-section">
-        <div class="homepage-section-content">
-            <div class="hero-copy">
-                <a class="hero-eyebrow" href="/mcp-server">
-                    <Icon Path="@Icons.Sparkle" />
-                    Ships with an MCP server for AI agents
-                </a>
+    <section class="bb-proof">
+        <div><strong>Both halves</strong><span>the browser script and the .NET pipeline, one registration</span></div>
+        <div><strong>No OpenTelemetry packages</strong><span>the OTel data model and OTLP, written by hand</span></div>
+        <div><strong>Every Blazor host</strong><span>WebAssembly, Server, Auto, static SSR and Hybrid</span></div>
+        <div><strong>Twelve consent features</strong><span>granted and revoked one by one, at runtime</span></div>
+    </section>
 
-                <h1>Telemetry for Blazor, <span class="accent">both sides of the app</span></h1>
+    @* ============================== Capabilities ============================== *@
 
-                <p class="hero-lead">
-                    One lightweight SDK for WebAssembly, Server, Auto, static SSR and Hybrid. It records
-                    the browser - page views, clicks, web vitals, errors, fetch and XHR - and .NET -
-                    <code>ILogger</code>, <code>Activity</code> and <code>Meter</code> - in OpenTelemetry's
-                    data model, without the OpenTelemetry packages, and only what the user consented to.
-                </p>
+    @* The grid is the twelve consent features, in bit order, because that is how Belemetry itself
+       divides what it collects: every record belongs to exactly one of them. *@
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>Twelve features, each under its own consent</h2>
+        <p class="bb-section-sub">
+            A record is collected only when its feature is enabled by configuration and granted by the user.
+            Nothing is sent before the user decides, revoking a feature purges what it queued, and every tile
+            below opens the page that shows it working.
+        </p>
+        <div class="bb-grid">
+            @foreach (var feature in _capabilities)
+            {
+                <a class="bb-card" href="@feature.Href" @key="feature.Title">
+                    <h3 class="bb-card-title"><span class="bb-dot bb-dot-@feature.Dot"></span> @feature.Title</h3>
+                    <p class="bb-card-desc">@feature.Description</p>
+                </a>
+            }
+        </div>
+    </section>
 
-                <div class="hero-actions">
-                    <a class="btn-primary" href="/web-app">
-                        Get started
-                        <Icon Path="@Icons.ArrowRight" />
-                    </a>
-                    <a class="btn-secondary" href="/live">
-                        <Icon Path="@Icons.Live" />
-                        Live telemetry
-                    </a>
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>One registration, two components</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Register it with an exporter</h3>
+                    <p>
+                        In every project that hosts Blazor. The call is idempotent and follows the Options pattern,
+                        and the same options configure the browser script too.
+                    </p>
+                    <a href="web-app">Blazor Web App →</a>
                 </div>
+                <pre class="bb-code">builder.Services.<span class="k">AddBitBelemetryServices</span>(options =&gt;
+{
+    options.ServiceName = <span class="s">"MyApp"</span>;
+    options.AddOtlpExporter(<span class="s">"http://localhost:4318"</span>);   <span class="c">// Aspire, OTel Collector, ...</span>
 
-                <div class="install-line">
-                    <code><span class="prompt" aria-hidden="true">&gt;&nbsp;</span>@_install</code>
-                    <button type="button" class="install-copy" @onclick="CopyInstallAsync"
-                            aria-label="@(_installCopied ? "Install command copied to the clipboard" : "Copy the install command")">
-                        <Icon Path="@(_installCopied ? Icons.Check : Icons.Copy)" />
-                        @(_installCopied ? "Copied" : "Copy")
-                    </button>
+    options.Consent.Default = BelemetryFeatures.None;  <span class="c">// opt-in: the default</span>
+});</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Start the script in the head</h3>
+                    <p>
+                        <code>&lt;BelemetryScript /&gt;</code> starts before Blazor does, so it sees the initial page
+                        load, the web vitals and the earliest errors - on static SSR pages as well.
+                    </p>
+                    <a href="browser">Browser instrumentation →</a>
                 </div>
+                <pre class="bb-code"><span class="c">@@* App.razor *@@</span>
+&lt;<span class="k">head</span>&gt;
+    ...
+    &lt;<span class="k">BelemetryScript</span> /&gt;
+&lt;/<span class="k">head</span>&gt;</pre>
             </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Connect .NET, and ask</h3>
+                    <p>
+                        <code>&lt;BelemetryInitializer /&gt;</code> joins the script to .NET once the app is
+                        interactive. Then ask the user: until <code>IBelemetryConsent</code> hears an answer,
+                        nothing leaves the device.
+                    </p>
+                    <a href="consent">Consent and GDPR →</a>
+                </div>
+                <pre class="bb-code"><span class="c">@@* Routes.razor *@@</span>
+&lt;<span class="k">Router</span> AppAssembly=<span class="s">"typeof(Program).Assembly"</span>&gt;...&lt;/<span class="k">Router</span>&gt;
+&lt;<span class="k">BelemetryInitializer</span> /&gt;
 
-            @* The four things a reader most often comes to check: that both halves are covered, and
-               that the data lands where they already look. Each tile opens the page that shows it. *@
-            <div class="hero-stage">
-                @foreach (var tile in _tiles)
-                {
-                    <a class="hero-tile" href="@($"/{tile.Href}")">
-                        <span class="hero-tile-icon">
-                            <Icon Path="@tile.Icon" />
-                        </span>
-                        <span class="hero-tile-title">@tile.Title</span>
-                        <span class="hero-tile-desc">@tile.Description</span>
-                    </a>
-                }
+<span class="c">// The banner's "Accept all"</span>
+<span class="k">await</span> Consent.SetAsync(BelemetryFeatures.All);</pre>
             </div>
         </div>
     </section>
 
-    @* ── Quick start ───────────────────────────────────────────────────────── *@
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Quick start</span>
-            <h2>One registration, two components</h2>
-            <p class="section-lead">
-                Register Belemetry with an exporter, put the script in the document head, and connect
-                .NET once the app is interactive. From then on page views, errors, web vitals, fetch
-                spans and your <code>ILogger</code> output are collected - as soon as the user says yes.
-            </p>
-
-            <div class="quick-start-body">
-                <CodeSnippet Code="@_quickStartProgram" Language="C#" Expanded="true" />
-                <CodeSnippet Code="@_quickStartApp" Language="Razor" Expanded="true" />
-            </div>
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not the OpenTelemetry SDKs?</h2>
+        <p class="bb-section-sub">
+            A Blazor app has two runtimes to instrument, and a user who has to agree first. With the
+            OpenTelemetry SDKs that is two SDKs and a consent layer of your own; Belemetry is one package built
+            on the same BCL listeners, with both halves and the consent built in.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="The OpenTelemetry SDKs compared with Belemetry">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>OpenTelemetry SDKs</th><th>Belemetry</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Packages</td><td>The SDK, an exporter and instrumentation packages - plus a JavaScript SDK for the browser</td><td>One package; the browser script ships inside it</td></tr>
+                    <tr><td>Browser and .NET</td><td>Two SDKs, configured separately</td><td>One registration; <code>&lt;BelemetryScript /&gt;</code> hands the browser the server's options</td></tr>
+                    <tr><td>Consent</td><td>Not part of the SDK - gating the exporters is yours to build</td><td>Twelve features, opt-in by default, purge on revoke, Global Privacy Control</td></tr>
+                    <tr><td>Azure Monitor</td><td>The Azure Monitor exporter, and the Application Insights JS SDK in the page</td><td>Native <code>/v2.1/track</code> from both sides, with Live Metrics</td></tr>
+                    <tr><td>Trimming and AOT</td><td>Depends on the packages you add</td><td>Trimmable and AOT-compatible: no reflection-based serialization</td></tr>
+                </tbody>
+            </table>
         </div>
     </section>
 
-    @* ── Why ───────────────────────────────────────────────────────────────── *@
-    <section class="homepage-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Why Belemetry</span>
-            <h2>OpenTelemetry's model, none of its packages</h2>
-            <p class="section-lead">
-                Belemetry is built on the BCL's own <code>ActivityListener</code>, <code>MeterListener</code>
-                and <code>ILoggerProvider</code> - the primitives the OpenTelemetry SDK itself sits on - with
-                hand-written OTLP and Application Insights encoders and one dependency-free script. No
-                reflection-based serialization, so it trims and compiles ahead of time; no threads, so it
-                runs in single-threaded browser WebAssembly as it does on a server.
-            </p>
-
-            <div class="stat-row">
-                @foreach (var stat in _stats)
-                {
-                    <div class="stat">
-                        <span class="stat-value">@stat.Value</span>
-                        <span class="stat-label">@stat.Label</span>
-                    </div>
-                }
-            </div>
-
-            <p class="section-note">Exports to:</p>
-            <div class="badge-list">
-                @foreach (var target in _targets)
-                {
-                    <span class="badge">@target</span>
-                }
-            </div>
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Belemetry?</h3>
+                <p class="bb-card-desc">Install, register, two components - a Blazor Web App reporting to the Aspire dashboard in five minutes.</p>
+                <a href="web-app" class="btn btn-primary">Set it up →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to watch it work?</h3>
+                <p class="bb-card-desc">This site exports to itself. Answer the banner, click around, and read your own records as they arrive.</p>
+                <a href="live" class="btn btn-outline">Live telemetry →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> to generate a configuration and review the one it wrote.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
         </div>
     </section>
 
-    @* ── Feature bits ──────────────────────────────────────────────────────── *@
-    @* The grid is the twelve consent features, in bit order, because that is how Belemetry itself
-       divides what it collects: every record belongs to exactly one of them, and each can be granted
-       and revoked on its own. *@
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Capabilities</span>
-            <h2>Twelve features, each under its own consent</h2>
-            <p class="section-lead">
-                A record is collected only when its feature is enabled by configuration and granted by
-                the user. Nothing is sent before the user decides, revoking a feature purges what it
-                queued, and every card below opens the page that shows it working.
-            </p>
-
-            <div class="feature-grid">
-                @foreach (var feature in _capabilities)
-                {
-                    <a class="feature-card" href="@($"/{feature.Href}")">
-                        <span class="feature-card-icon">
-                            <Icon Path="@feature.Icon" />
-                        </span>
-                        <h3>@feature.Title</h3>
-                        <p>@feature.Description</p>
-                    </a>
-                }
-            </div>
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Does it use the OpenTelemetry packages?</summary>
+                <p>
+                    No. It follows the OpenTelemetry data model and semantic conventions and speaks OTLP, but it is
+                    built on the BCL's own <code>ActivityListener</code>, <code>MeterListener</code> and
+                    <code>ILoggerProvider</code>, with hand-written OTLP and Application Insights encoders and one
+                    dependency-free script.
+                </p>
+            </details>
+            <details>
+                <summary>Is anything sent before the user agrees?</summary>
+                <p>
+                    Not by default: <code>Consent.Default</code> is <code>None</code>. Records of features nobody has
+                    decided on yet are held in memory (up to <code>Consent.PendingLimit</code>, 500), then sent or
+                    dropped by the decision. Revoking a feature purges what it queued and what it stored on the device.
+                </p>
+            </details>
+            <details>
+                <summary>Which Blazor hosts does it work in?</summary>
+                <p>
+                    WebAssembly, Server, Auto, static SSR and Hybrid (MAUI, WPF, WinForms), on .NET 8, 9 and 10. In a
+                    Hybrid app the browser script relays its records to .NET, which exports them and keeps them in
+                    files while the device is offline.
+                </p>
+            </details>
+            <details>
+                <summary>Can I keep an API key out of the browser?</summary>
+                <p>
+                    Yes: set <code>IncludeInBrowser = false</code> on the exporter that carries it and give the browser a
+                    credential-free route, or use the Relay transport on Blazor Server and Hybrid. In WebAssembly the
+                    .NET pipeline runs in the browser too, so its configuration is public.
+                </p>
+            </details>
+            <details>
+                <summary>Where does this site send what I do here?</summary>
+                <p>
+                    To its own server, only after you answer the banner. An in-process OTLP receiver keeps the last few
+                    hundred records per session in memory - never on disk - and hands them back only to the browser
+                    session that produced them, on the Live telemetry page.
+                </p>
+            </details>
         </div>
     </section>
 
-    @* ── Every demo ────────────────────────────────────────────────────────── *@
-    @* The landing page has no nav panel, so the full index of the docs lives here instead: a
-       reader who arrives at the root should be able to reach any page without first having to
-       find their way into them. It is grouped exactly as the panel groups it, from the same
-       list. *@
-    <section class="homepage-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Documentation</span>
-            <h2>Explore every page</h2>
-            <p class="section-lead">
-                @NavItem.Docs.Length pages, in the order they are meant to be read. Press
-                <span class="kbd">Ctrl K</span> anywhere on the site to jump straight to one.
-            </p>
+    @* ============================== Final CTA ============================== *@
 
-            <div class="demo-index">
-                @foreach (var group in NavItem.Groups)
-                {
-                    <div class="demo-index-group">
-                        <h3>
-                            <Icon Path="@group.Icon" />
-                            @group.Category
-                        </h3>
-                        @foreach (var item in group.Items)
-                        {
-                            <a class="demo-index-link" href="@item.Url">@item.Title</a>
-                        }
-                    </div>
-                }
-            </div>
-        </div>
-    </section>
-
-    @* ── Closing call to action ────────────────────────────────────────────── *@
-    <section class="homepage-section alt-section cta-section">
-        <div class="homepage-section-content">
-            <h2>Start measuring</h2>
-            <p class="section-lead">
-                bit Belemetry is part of bit platform, free and open source. Set it up in a few lines,
-                or watch it measure this site first - your own records, and only yours, on the Live
-                telemetry page.
-            </p>
-            <div class="hero-actions">
-                <a class="btn-primary" href="/web-app">
-                    Get started
-                    <Icon Path="@Icons.ArrowRight" />
-                </a>
-                <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-                   href="https://github.com/bitfoundation/bitplatform">
-                    <span class="github-mark" aria-hidden="true"></span>
-                    View on GitHub
-                </a>
-            </div>
+    <section class="bb-final-cta">
+        <h2>Start measuring</h2>
+        <p class="bb-section-sub">One package, one registration, two components - and only what your users said yes to.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Belemetry</pre>
+        <div class="bb-hero-actions">
+            <a href="web-app" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="live" class="btn btn-secondary bb-btn-lg">Watch your own telemetry</a>
         </div>
     </section>
 </div>
 
 @code {
-    /// <summary>A hero or feature tile: a headline capability, its one-line pitch and where it is shown.</summary>
-    private sealed record Tile(string Title, string Description, string Href, string Icon);
-
-    /// <summary>One of the numbers under the pitch, which is the part of it that can be checked.</summary>
-    private sealed record Stat(string Value, string Label);
-
-    private const string _install = "dotnet add package Bit.Belemetry";
+    /// <summary>A capability tile: one consent feature, its one-line pitch, and the page that shows it.</summary>
+    private sealed record Capability(string Title, string Description, string Href, string Dot);
 
-    private bool _installCopied;
+    private int _events;
 
-    private readonly Stat[] _stats =
+    private static readonly Capability[] _capabilities =
     [
-        new(".NET 8+", "Targets .NET 8, 9 and 10"),
-        new("0", "OpenTelemetry or third-party packages"),
-        new("5", "Blazor hosts: Server, WebAssembly, Auto, static SSR, Hybrid"),
-        new("12", "Consent features, granted and revoked one by one"),
+        new("Errors", "JS errors and unhandled rejections, .NET logs at Error or with an exception, and TrackException - with the stack trace, scrubbed.", "browser", "danger"),
+        new("Page views", "History and enhanced navigation as browser.page_view events with the URL redacted - plus TrackPageView for dialogs and wizard steps.", "browser", "primary"),
+        new("Interactions", "Clicks as browser.user_interaction events, named with data-bit-belemetry-name and kept out with data-bit-belemetry-ignore. Input values are never read.", "browser", "primary"),
+        new("Performance", "LCP, INP, CLS, FCP and TTFB, the document-load span with navigation timing, resource timing and long tasks.", "browser", "success"),
+        new("Dependencies", "fetch and XHR client spans that add a W3C traceparent to your own origin, so the server's span joins the browser's trace.", "browser", "success"),
+        new("Sessions", "A session id that survives reloads in sessionStorage, rotated after inactivity. Without consent it lives in memory only.", "consent", "warning"),
+        new("User tracking", "A pseudonymous enduser.pseudo.id and the authenticated user.id from SetUserAsync - both cleared the moment it is revoked.", "consent", "warning"),
+        new("Logs", "ILogger entries below Error with their structured values, scopes and trace context, and browser console capture.", "dotnet", "primary"),
+        new("Traces", "Activity spans from the sources you list, with parent-based sampling compatible with OpenTelemetry's TraceIdRatioBased.", "dotnet", "primary"),
+        new("Metrics", "Counters, histograms, up-down counters and gauges from your Meters, aggregated with a cardinality limit per instrument.", "dotnet", "success"),
+        new("Persistence", "Exports that fail offline are kept - in localStorage, or in files on Hybrid and servers - and retried when the network is back.", "persistence", "warning"),
+        new("Events", "Custom events from TrackEvent in C# or BitBelemetry.trackEvent in JavaScript, with attributes of your own.", "browser", "success"),
     ];
 
-    private readonly string[] _targets =
-    [
-        "OTLP/HTTP protobuf", "OTLP/HTTP JSON", "OpenTelemetry Collector", ".NET Aspire dashboard",
-        "Grafana", "Jaeger", "Honeycomb", "Azure Monitor", "Application Insights Live Metrics",
-        "Console", "In-memory", "Your own IBelemetryExporter",
-    ];
-
-    private readonly Tile[] _tiles =
-    [
-        new("Browser", "Page views, clicks, web vitals, errors and fetch.", "browser", Icons.Browser),
-        new(".NET", "ILogger, Activity and Meter, without the OTel SDK.", "dotnet", Icons.Code),
-        new("OTLP", "Protobuf or JSON, to any OpenTelemetry backend.", "otlp", Icons.Send),
-        new("Consent", "Twelve features, each opt-in and revocable.", "consent", Icons.Shield),
-    ];
-
-    private readonly Tile[] _capabilities =
-    [
-        new("Errors", "JS errors and unhandled rejections, .NET logs at Error or with an exception, and TrackException - with the stack trace, scrubbed.", "browser", Icons.Alert),
-        new("Page views", "History and enhanced navigation, recorded as browser.page_view events with the URL redacted - plus TrackPageView for dialogs and wizard steps.", "browser", Icons.Browser),
-        new("Interactions", "Clicks as browser.user_interaction events, named with data-bit-belemetry-name and kept out with data-bit-belemetry-ignore. Input values are never read.", "browser", Icons.Pointer),
-        new("Performance", "LCP, INP, CLS, FCP and TTFB, the document-load span with navigation timing, resource timing and long tasks.", "browser", Icons.Pulse),
-        new("Dependencies", "fetch and XHR client spans that add a W3C traceparent to your own origin, so the server's span joins the browser's trace.", "browser", Icons.Link),
-        new("Sessions", "A session id that survives reloads in sessionStorage, rotated after inactivity. Without consent it lives in memory only.", "consent", Icons.Live),
-        new("User tracking", "A pseudonymous enduser.pseudo.id and the authenticated user.id from SetUserAsync - both cleared the moment it is revoked.", "consent", Icons.Shield),
-        new("Logs", "ILogger entries below Error with their structured values, scopes and trace context, and browser console capture.", "dotnet", Icons.Text),
-        new("Traces", "Activity spans from the sources you list, parent-based sampling compatible with OpenTelemetry's TraceIdRatioBased.", "dotnet", Icons.Trace),
-        new("Metrics", "Counters, histograms, up-down counters and gauges from your Meters, aggregated with a cardinality limit per instrument.", "dotnet", Icons.Chart),
-        new("Persistence", "Exports that fail offline are kept - in localStorage, or in files on Hybrid and servers - and retried when the network is back.", "persistence", Icons.Database),
-        new("Events", "Custom events from TrackEvent in C# or BitBelemetry.trackEvent in JavaScript, with attributes of your own.", "browser", Icons.Sparkle),
-    ];
-
-    private async Task CopyInstallAsync()
+    private void TrackEvent()
     {
+        _events++;
+
         try
         {
-            _installCopied = await JS.InvokeAsync<bool>("blCopyToClipboard", _install);
+            Belemetry.TrackEvent("demo.home.click", new Dictionary<string, object?> { ["demo.count"] = _events });
         }
         catch
         {
-            // The command is printed next to the button, so a clipboard the browser refuses to
-            // hand over costs the reader a selection rather than the information.
-            _installCopied = false;
+            // Telemetry never takes the page down.
         }
     }
-
-    private const string _quickStartProgram = """
-        // Program.cs - in every project that hosts Blazor (server and client of a Blazor Web App)
-        using Bit.Belemetry;
-
-        builder.Services.AddBitBelemetryServices(options =>
-        {
-            options.ServiceName = "MyApp";
-            options.AddOtlpExporter("http://localhost:4318");   // Aspire dashboard, OTel Collector, ...
-
-            options.Consent.Default = BelemetryFeatures.None;  // opt-in: the default, written out
-        });
-        """;
-
-    private const string _quickStartApp = """
-        @* App.razor - starts in the browser before Blazor does, and on static SSR pages *@
-        <head>
-            ...
-            <BelemetryScript />
-        </head>
-
-        @* Routes.razor - connects .NET once the app is interactive *@
-        <Router AppAssembly="typeof(Program).Assembly">...</Router>
-        <BelemetryInitializer />
-        """;
 }
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/HybridPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/HybridPage.razor
index 7070eb5b8c4..f927f74d968 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/HybridPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/HybridPage.razor
@@ -1,18 +1,19 @@
 @page "/hybrid"
 
-<PageTitle>Blazor Hybrid - bit Belemetry</PageTitle>
-
-<h1>Blazor Hybrid</h1>
-
-<p class="page-intro">
-    In MAUI, WPF and WinForms the components run in the app process and render into a WebView. Belemetry
-    instruments both: the script in the WebView records page views, clicks, web vitals and errors, and
-    <strong>relays</strong> them over JS interop to the .NET pipeline, which exports them together with the
-    app's logs, traces and metrics - and keeps them in files while the device is offline.
-</p>
+<PageTitle>Blazor Hybrid · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Blazor Hybrid</h1>
+    <p class="bb-subtitle">
+        In MAUI, WPF and WinForms the components run in the app process and render into a WebView. Belemetry
+        instruments both: the script in the WebView records page views, clicks, web vitals and errors, and
+        <strong>relays</strong> them over JS interop to the .NET pipeline, which exports them together with the
+        app's logs, traces and metrics - and keeps them in files while the device is offline.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>MAUI</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> MAUI</h3>
     <p>
         Register Belemetry next to the BlazorWebView. The host kind is detected - no ASP.NET Core hosting
         and no browser underneath means Hybrid - and with it come the Hybrid defaults: the Relay transport
@@ -27,8 +28,8 @@
     <CodeSnippet Code="@RoutesCode" Language="Razor" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Flush before the app is suspended</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Flush before the app is suspended</h3>
     <p>
         A mobile OS may suspend a backgrounded app and end it later without another callback, so export what
         is queued as soon as the app goes to the background. <code>IBelemetry</code> is scoped (one per
@@ -37,8 +38,8 @@
     <CodeSnippet Code="@OnSleepCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>WPF and WinForms</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> WPF and WinForms</h3>
     <p>
         The same registration, on the service collection the BlazorWebView is given. A desktop app is not
         suspended, but it does exit: flush on the way out, bounded so a missing network cannot hold the
@@ -49,14 +50,14 @@
     <CodeSnippet Code="@WinFormsCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Relay: no CORS, no credentials in the WebView</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Relay: no CORS, no credentials in the WebView</h3>
     <p>
         <code>options.Browser.Transport</code> defaults to <code>Auto</code>, which is <code>Relay</code> in
         Hybrid. The script never calls an exporter itself; it hands its records to .NET, where they go through
         the same consent, privacy rules and processors as the app's own records. That means:
     </p>
-    <ul>
+    <ul class="bb-detail-list">
         <li>No CORS configuration on the collector - the app process is not a web page.</li>
         <li>Exporter headers and connection strings stay in the app process, never in the WebView.</li>
         <li>An <code>IBelemetryProcessor</code> sees the browser's records too.</li>
@@ -66,16 +67,16 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Offline, in files</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Offline, in files</h3>
     <p>
         With the <code>Persistence</code> feature granted, exports that fail with a network error or a
         retryable status are written to files and retried every <code>RetryInterval</code>, for up to
         <code>MaxAge</code>. The consent decision is remembered in a file too, so it survives restarts even
         when the app never shows a page that could keep it in <code>localStorage</code>.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Option</th><th scope="col">Default</th></tr>
             </thead>
@@ -89,8 +90,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Endpoints from a device</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Endpoints from a device</h3>
     <p>
         The app process exports, so the endpoint has to be reachable from the device. The Android emulator
         reaches the development machine's <code>localhost</code> at <code>10.0.2.2</code>. Outside the browser,
@@ -102,8 +103,8 @@
     <CodeSnippet Code="@EmulatorCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> API</h3>
     <ApiTable TypeName="BelemetryBrowserTransport" />
     <ApiTable TypeName="BelemetryPersistenceOptions" />
     <ApiTable TypeName="IBelemetry" />
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/LiveTelemetryPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/LiveTelemetryPage.razor
index f2354193568..abd809429dc 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/LiveTelemetryPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/LiveTelemetryPage.razor
@@ -4,19 +4,20 @@
 @inject ILogger<LiveTelemetryPage> Logger
 @inject IJSRuntime JS
 
-<PageTitle>Live telemetry - bit Belemetry</PageTitle>
-
-<h1>Live telemetry</h1>
-
-<p class="page-intro">
-    This site is instrumented with Belemetry and exports to itself. Everything you do here - page views,
-    clicks, web vitals, errors, fetch spans, the WebAssembly app's logs, traces and metrics - is sent to the
-    demo server as OTLP/JSON, decoded, and handed back to you below. Only you see your records, and nothing
-    is sent until you have answered the consent banner.
-</p>
+<PageTitle>Live telemetry · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Live telemetry</h1>
+    <p class="bb-subtitle">
+        This site is instrumented with Belemetry and exports to itself. Everything you do here - page views,
+        clicks, web vitals, errors, fetch spans, the WebAssembly app's logs, traces and metrics - is sent to the
+        demo server as OTLP/JSON, decoded, and handed back to you below. Only you see your records, and nothing
+        is sent until you have answered the consent banner.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Your records</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Your records</h3>
     <p>
         Make something happen, and watch it arrive within a couple of seconds. Each row opens to show its
         attributes, trace and span ids, and the resource it came with. The source column says who recorded
@@ -24,33 +25,36 @@
         tab) or <strong>server</strong> (the demo server's own pipeline).
     </p>
 
-    <div class="demo-actions">
-        <button type="button" class="btn-bl" data-bit-belemetry-name="live.track-event" @onclick="TrackEvent" disabled="@(RendererInfo.IsInteractive is false)">
-            Track an event
-        </button>
-        <button type="button" class="btn-bl-subtle" data-bit-belemetry-name="live.write-log" @onclick="WriteLog" disabled="@(RendererInfo.IsInteractive is false)">
-            Log with ILogger
-        </button>
-        <button type="button" class="btn-bl-subtle" data-bit-belemetry-name="live.throw-error" @onclick="ThrowErrorAsync" disabled="@(RendererInfo.IsInteractive is false)">
-            Throw a JS error
-        </button>
-        <button type="button" class="btn-bl-subtle" data-bit-belemetry-name="live.fetch-echo" @onclick="FetchEchoAsync" disabled="@(RendererInfo.IsInteractive is false)">
-            Fetch /api/demo/echo
-        </button>
-    </div>
-
-    @if (_status is not null)
-    {
-        <p class="demo-label" role="status">@_status</p>
-    }
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">your session</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" data-bit-belemetry-name="live.track-event" @onclick="TrackEvent" disabled="@(RendererInfo.IsInteractive is false)">
+                Track an event
+            </button>
+            <button type="button" class="btn btn-secondary" data-bit-belemetry-name="live.write-log" @onclick="WriteLog" disabled="@(RendererInfo.IsInteractive is false)">
+                Log with ILogger
+            </button>
+            <button type="button" class="btn btn-secondary" data-bit-belemetry-name="live.throw-error" @onclick="ThrowErrorAsync" disabled="@(RendererInfo.IsInteractive is false)">
+                Throw a JS error
+            </button>
+            <button type="button" class="btn btn-secondary" data-bit-belemetry-name="live.fetch-echo" @onclick="FetchEchoAsync" disabled="@(RendererInfo.IsInteractive is false)">
+                Fetch /api/demo/echo
+            </button>
+        </div>
+
+        @if (_status is not null)
+        {
+            <p class="demo-status" role="status">@_status</p>
+        }
 
-    <TelemetryFeedView />
+        <TelemetryFeedView />
+    </div>
 </div>
 
-<div class="demo-section">
-    <h2>What each button records</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What each button records</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Button</th><th scope="col">Call</th><th scope="col">What arrives</th><th scope="col">Feature</th></tr>
             </thead>
@@ -84,9 +88,9 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>How this works</h2>
-    <ol>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> How this works</h3>
+    <ol class="bb-detail-list">
         <li>
             <strong>Export.</strong> The browser script and the WebAssembly app's .NET pipeline both export
             OTLP/HTTP with the JSON encoding to this site's own server - <code>/otlp/v1/traces</code>,
@@ -116,7 +120,7 @@
             child. <em>Include server telemetry</em> shows the rest of the shared bucket too.
         </li>
     </ol>
-    <div class="callout">
+    <div class="bb-note">
         <p>
             Nothing showing up? The feed says so when nothing is granted. Answer the banner, or choose per
             feature on the <a href="/consent">consent page</a>. Before you decide, records are held in memory
@@ -125,8 +129,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>The demo's configuration</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The demo's configuration</h3>
     <p>
         This is the real setup of this site, copied from its source. Both projects call
         <code>AddBitBelemetryServices(DemoTelemetry.ConfigureShared)</code>, and each adds its own exporter on top;
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/McpServerPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/McpServerPage.razor
index 983a3722bdc..6e61c9ce4c4 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/McpServerPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/McpServerPage.razor
@@ -10,39 +10,40 @@
    The tool, prompt and resource tables are fetched rather than written out, for the same reason:
    they come from GetMcpCatalog, which reflects over the attributes that declare them. *@
 
-<PageTitle>MCP Server - bit Belemetry</PageTitle>
-
-<h1>MCP Server</h1>
-
-<p class="page-intro">
-    This site ships a <strong>Model Context Protocol</strong> server, so an AI agent can set up Belemetry from what
-    the library <em>actually</em> is rather than from what it remembers. Its tools answer from this build's own
-    text - the README, the XML documentation compiled into the assembly, the source of every page you have been
-    reading - and two of them go further: one writes a configuration for your host, and one reviews a
-    configuration for the mistakes that compile cleanly and then send nothing, or send too much.
-</p>
+<PageTitle>MCP server · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
+        This site ships a <strong>Model Context Protocol</strong> server, so an AI agent can set up Belemetry from what
+        the library <em>actually</em> is rather than from what it remembers. Its tools answer from this build's own
+        text - the README, the XML documentation compiled into the assembly, the source of every page you have been
+        reading - and two of them go further: one writes a configuration for your host, and one reviews a
+        configuration for the mistakes that compile cleanly and then send nothing, or send too much.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Why a telemetry SDK needs one</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Why a telemetry SDK needs one</h3>
     <p>
         Telemetry fails quietly. There is no exception when the collector rejects the page's origin, and no warning
         when an API key ships to every visitor. The mistakes an agent is most likely to make are exactly the ones
         nobody notices until the dashboard is empty - or until a privacy review:
     </p>
-    <div class="demo-row">
+    <div class="bb-grid">
         @foreach (var problem in _problems)
         {
-            <div class="demo-card stack">
-                <span class="demo-label">@problem.Symptom</span>
-                <p>@problem.Cause</p>
-                <code>@problem.Tool</code>
+            <div class="bb-card">
+                <p class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> @problem.Symptom</p>
+                <p class="bb-card-desc">@problem.Cause</p>
+                <p class="bb-card-desc">Answered by <code>@problem.Tool</code></p>
             </div>
         }
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Connect your agent</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect your agent</h3>
     <p>
         The server speaks MCP over Streamable HTTP at <code>@PublicUrl</code>. When you run this demo yourself it is at
         <code>@LocalUrl</code>. The same tools are also plain <code>GET</code> endpoints under
@@ -51,12 +52,12 @@
 
     @* A tablist is one stop in the tab order: tab moves past the group, and the arrow keys move between
        the tabs inside it. Only the selected tab is tabbable, and each names the panel it controls. *@
-    <div class="demo-actions" role="tablist" aria-label="MCP client">
+    <div class="bb-tabs" role="tablist" aria-label="MCP client">
         @foreach (var client in _clients)
         {
             var isSelected = _client == client.Name;
 
-            <button type="button" role="tab" class="@(isSelected ? "btn-bl" : "btn-bl-subtle")"
+            <button type="button" role="tab" class="@(isSelected ? "active" : null)"
                     id="@TabId(client.Name)"
                     aria-selected="@(isSelected ? "true" : "false")"
                     aria-controls="@PanelId(client.Name)"
@@ -79,35 +80,36 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Search everything</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Search everything</h3>
     <p>
         An agent rarely knows which corpus holds the answer. <code>SearchBelemetry</code> covers the guide, every
         public type and member, the semantic conventions and the demo pages at once - and every hit names the
         follow-up call that returns it in full.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <label class="demo-label" for="mcp-search">Query</label>
-            <input id="mcp-search" type="search" value="@_query" @onchange="OnQueryChanged"
-                   disabled="@(_searching || RendererInfo.IsInteractive is false)" style="width: 100%"
-                   placeholder="keep the api key out of the browser" />
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" @onclick="RunSearchAsync" disabled="@(_searching || RendererInfo.IsInteractive is false)">
-                    @(_searching ? "Searching..." : "Search")
-                </button>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">SearchBelemetry</span></span></div>
+        <div class="bb-fields">
+            <div class="bb-field demo-field-grow">
+                <label for="mcp-search">Query</label>
+                <input id="mcp-search" type="search" value="@_query" @onchange="OnQueryChanged"
+                       disabled="@(_searching || RendererInfo.IsInteractive is false)"
+                       placeholder="keep the api key out of the browser" />
             </div>
+            <button type="button" class="btn btn-primary" @onclick="RunSearchAsync" disabled="@(_searching || RendererInfo.IsInteractive is false)">
+                @(_searching ? "Searching..." : "Search")
+            </button>
         </div>
     </div>
 
     @if (_searchError is not null)
     {
-        <div class="callout warn"><p>@_searchError</p></div>
+        <div class="bb-note bb-note-warn"><p>@_searchError</p></div>
     }
     else if (_hits is { Length: > 0 })
     {
-        <div class="doc-table-wrap">
-            <table class="doc-table">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th scope="col">Kind</th><th scope="col">Hit</th><th scope="col">Follow up with</th></tr>
                 </thead>
@@ -115,7 +117,7 @@
                     @foreach (var hit in _hits)
                     {
                         <tr>
-                            <td>@hit.Kind</td>
+                            <td class="bb-table-key">@hit.Kind</td>
                             <td>
                                 <strong>@hit.Title</strong>
                                 @if (string.IsNullOrWhiteSpace(hit.Summary) is false)
@@ -140,68 +142,72 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Generate a configuration</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Generate a configuration</h3>
     <p>
         <code>GenerateBelemetryConfiguration</code> writes every file a host needs - the registrations, where
         <code>&lt;BelemetryScript /&gt;</code> and <code>&lt;BelemetryInitializer /&gt;</code> go, a consent banner when the
         app needs one - from the same rules the reviewer below checks against. Pick a host, the exporters and the
         consent model.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <label class="demo-label" for="mcp-host">Host</label>
-            <select id="mcp-host" value="@_host" @onchange="OnHostChanged" disabled="@(_generating || RendererInfo.IsInteractive is false)">
-                @foreach (var host in _hosts)
-                {
-                    <option value="@host.Value">@host.Label</option>
-                }
-            </select>
-
-            <span class="demo-label">Exporters</span>
-            <div class="consent-grid">
-                @foreach (var exporter in _exporterChoices)
-                {
-                    <label class="consent-feature">
-                        <input type="checkbox" checked="@_exporters.Contains(exporter.Value)"
-                               disabled="@(_generating || RendererInfo.IsInteractive is false)"
-                               @onchange="@(e => OnExporterChanged(exporter.Value, e))" />
-                        <span><strong>@exporter.Label</strong><small>@exporter.Description</small></span>
-                    </label>
-                }
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">GenerateBelemetryConfiguration</span></span></div>
+        <div class="bb-fields">
+            <div class="bb-field">
+                <label for="mcp-host">Host</label>
+                <select id="mcp-host" value="@_host" @onchange="OnHostChanged" disabled="@(_generating || RendererInfo.IsInteractive is false)">
+                    @foreach (var host in _hosts)
+                    {
+                        <option value="@host.Value">@host.Label</option>
+                    }
+                </select>
+            </div>
+            <div class="bb-field">
+                <label for="mcp-consent">Consent</label>
+                <select id="mcp-consent" value="@_consent" @onchange="OnConsentChanged" disabled="@(_generating || RendererInfo.IsInteractive is false)">
+                    <option value="opt-in">opt-in - nothing is sent before the user agrees (the default)</option>
+                    <option value="opt-out">opt-out - everything until the user says no</option>
+                    <option value="none">none - no consent UI, the operator decides</option>
+                </select>
             </div>
+        </div>
 
-            <label class="demo-label" for="mcp-consent">Consent</label>
-            <select id="mcp-consent" value="@_consent" @onchange="OnConsentChanged" disabled="@(_generating || RendererInfo.IsInteractive is false)">
-                <option value="opt-in">opt-in - nothing is sent before the user agrees (the default)</option>
-                <option value="opt-out">opt-out - everything until the user says no</option>
-                <option value="none">none - no consent UI, the operator decides</option>
-            </select>
+        <p class="bb-overline demo-sublabel">Exporters</p>
+        <div class="demo-consent-grid">
+            @foreach (var exporter in _exporterChoices)
+            {
+                <label class="demo-consent-feature">
+                    <input type="checkbox" checked="@_exporters.Contains(exporter.Value)"
+                           disabled="@(_generating || RendererInfo.IsInteractive is false)"
+                           @onchange="@(e => OnExporterChanged(exporter.Value, e))" />
+                    <span><strong>@exporter.Label</strong><small>@exporter.Description</small></span>
+                </label>
+            }
+        </div>
 
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" @onclick="RunGenerateAsync" disabled="@(_generating || RendererInfo.IsInteractive is false)">
-                    @(_generating ? "Generating..." : "Generate")
-                </button>
-            </div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="RunGenerateAsync" disabled="@(_generating || RendererInfo.IsInteractive is false)">
+                @(_generating ? "Generating..." : "Generate")
+            </button>
         </div>
     </div>
 
     @if (_generateError is not null)
     {
-        <div class="callout warn"><p>@_generateError</p></div>
+        <div class="bb-note bb-note-warn"><p>@_generateError</p></div>
     }
     else if (_generated is not null)
     {
         @foreach (var file in _generated.Files ?? [])
         {
-            <h3><code>@file.Path</code></h3>
+            <p class="bb-source-file">@file.Path</p>
             <CodeSnippet @key="@($"{_generation}:{file.Path}")" Code="@(file.Content ?? "")" Language="@SnippetLanguage(file.Language)" Expanded="true" />
         }
 
         @if (_generated.Notes is { Length: > 0 })
         {
-            <div class="callout">
-                <ul>
+            <div class="bb-note">
+                <ul class="bb-detail-list">
                     @foreach (var note in _generated.Notes)
                     {
                         <li>@note</li>
@@ -212,25 +218,28 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Review a configuration</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Review a configuration</h3>
     <p>
         <code>ReviewBelemetryConfiguration</code> is the pass that closes the loop after an agent writes code. It looks
         for the mistakes that compile: a consent default that sends everything before anyone agreed, an OTLP
         endpoint that already ends in <code>/v1/traces</code> (Belemetry appends the signal path itself), a vendor API
         key in an exporter the browser script will use. The sample below makes all three on purpose.
     </p>
-    <textarea class="code-block" rows="16" spellcheck="false" aria-label="Configuration to review" style="width: 100%"
-              value="@_review" @onchange="OnReviewChanged" disabled="@(_reviewing || RendererInfo.IsInteractive is false)"></textarea>
-    <div class="demo-actions">
-        <button type="button" class="btn-bl" @onclick="RunReviewAsync" disabled="@(_reviewing || RendererInfo.IsInteractive is false)">
-            @(_reviewing ? "Reviewing..." : "Review it")
-        </button>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">ReviewBelemetryConfiguration</span></span></div>
+        <textarea class="demo-code-input" rows="16" spellcheck="false" aria-label="Configuration to review"
+                  value="@_review" @onchange="OnReviewChanged" disabled="@(_reviewing || RendererInfo.IsInteractive is false)"></textarea>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="RunReviewAsync" disabled="@(_reviewing || RendererInfo.IsInteractive is false)">
+                @(_reviewing ? "Reviewing..." : "Review it")
+            </button>
+        </div>
     </div>
 
     @if (_reviewError is not null)
     {
-        <div class="callout warn"><p>@_reviewError</p></div>
+        <div class="bb-note bb-note-warn"><p>@_reviewError</p></div>
     }
     else if (_findings is not null)
     {
@@ -241,8 +250,8 @@
 
         @if (_findings.Findings is { Length: > 0 })
         {
-            <div class="doc-table-wrap">
-                <table class="doc-table">
+            <div class="bb-scroll">
+                <table class="bb-table">
                     <thead>
                         <tr><th scope="col">Severity</th><th scope="col">Rule</th><th scope="col">Line</th><th scope="col">Finding</th><th scope="col">Fix</th></tr>
                     </thead>
@@ -250,7 +259,7 @@
                         @foreach (var finding in _findings.Findings)
                         {
                             <tr>
-                                <td><strong>@finding.Severity</strong></td>
+                                <td class="bb-table-key"><strong>@finding.Severity</strong></td>
                                 <td><code>@finding.Rule</code></td>
                                 <td>@(finding.Line?.ToString() ?? "-")</td>
                                 <td>@finding.Message</td>
@@ -268,38 +277,42 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Look up a convention</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Look up a convention</h3>
     <p>
         <code>LookupBelemetryConventions</code> answers "what is this attribute called" and "where does this record land
         in Application Insights" from the same tables as the <a href="/semantic-conventions">Semantic conventions</a>
         and <a href="/azure-mapping">Azure mapping</a> pages - an attribute, an event name, a feature, a storage key or an
         Azure table.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <label class="demo-label" for="mcp-conventions">Attribute, event, feature or table</label>
-            <input id="mcp-conventions" type="search" value="@_lookup" @onchange="OnLookupChanged" style="width: 100%"
-                   disabled="@(_looking || RendererInfo.IsInteractive is false)" placeholder="web_vital.rating" />
-            <div class="demo-actions">
-                @foreach (var example in _lookupExamples)
-                {
-                    <button type="button" class="btn-bl-subtle" disabled="@(_looking || RendererInfo.IsInteractive is false)"
-                            @onclick="@(() => RunLookupAsync(example))">
-                        @example
-                    </button>
-                }
-                <button type="button" class="btn-bl" disabled="@(_looking || RendererInfo.IsInteractive is false)"
-                        @onclick="@(() => RunLookupAsync(_lookup))">
-                    @(_looking ? "Looking up..." : "Look up")
-                </button>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">LookupBelemetryConventions</span></span></div>
+        <div class="bb-fields">
+            <div class="bb-field demo-field-grow">
+                <label for="mcp-conventions">Attribute, event, feature or table</label>
+                <input id="mcp-conventions" type="search" value="@_lookup" @onchange="OnLookupChanged"
+                       disabled="@(_looking || RendererInfo.IsInteractive is false)" placeholder="web_vital.rating" />
             </div>
+            <button type="button" class="btn btn-primary" disabled="@(_looking || RendererInfo.IsInteractive is false)"
+                    @onclick="@(() => RunLookupAsync(_lookup))">
+                @(_looking ? "Looking up..." : "Look up")
+            </button>
+        </div>
+        <div class="bb-toolbar">
+            <span class="bb-soft demo-toolbar-label">Try</span>
+            @foreach (var example in _lookupExamples)
+            {
+                <button type="button" class="btn btn-secondary" disabled="@(_looking || RendererInfo.IsInteractive is false)"
+                        @onclick="@(() => RunLookupAsync(example))">
+                    @example
+                </button>
+            }
         </div>
     </div>
 
     @if (_lookupError is not null)
     {
-        <div class="callout warn"><p>@_lookupError</p></div>
+        <div class="bb-note bb-note-warn"><p>@_lookupError</p></div>
     }
     else if (_conventions is not null)
     {
@@ -307,11 +320,11 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Tools</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
     @if (_catalogError is not null)
     {
-        <div class="callout warn"><p>@_catalogError</p></div>
+        <div class="bb-note bb-note-warn"><p>@_catalogError</p></div>
     }
     else if (_catalog is null)
     {
@@ -323,8 +336,8 @@
             @(_catalog.Tools?.Length ?? 0) of them, listed straight from the attributes that declare them - so this table
             cannot fall out of step with the server. Each is also <code>GET /api/mcp/{Name}?parameter=...</code>.
         </p>
-        <div class="doc-table-wrap">
-            <table class="doc-table">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th scope="col">Tool</th><th scope="col">Parameters</th><th scope="col">What it answers</th></tr>
                 </thead>
@@ -332,7 +345,7 @@
                     @foreach (var tool in _catalog.Tools ?? [])
                     {
                         <tr>
-                            <td><code>@tool.Name</code></td>
+                            <td class="bb-table-key"><code>@tool.Name</code></td>
                             <td>
                                 @if (tool.Parameters is null or { Length: 0 })
                                 {
@@ -358,8 +371,8 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Prompts</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Prompts</h3>
     <p>
         Prompts are the workflows: which tools to call, in which order, for a whole task. They exist because an agent
         holding seven tools rarely fails for lack of knowledge - it fails by skipping the review that would have caught
@@ -367,15 +380,15 @@
     </p>
     @if (_catalog?.Prompts is { Length: > 0 } prompts)
     {
-        <div class="doc-table-wrap">
-            <table class="doc-table">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th scope="col">Prompt</th><th scope="col">What it does</th></tr>
                 </thead>
                 <tbody>
                     @foreach (var prompt in prompts)
                     {
-                        <tr><td><code>@prompt.Name</code></td><td>@prompt.Description</td></tr>
+                        <tr><td class="bb-table-key"><code>@prompt.Name</code></td><td>@prompt.Description</td></tr>
                     }
                 </tbody>
             </table>
@@ -383,8 +396,8 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Resources</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Resources</h3>
     <p>
         The same knowledge as URIs, for clients that attach documentation to a conversation up front or let a person
         browse and pin it. <code>belemetry://source/{path}</code> is a template: any path
@@ -392,8 +405,8 @@
     </p>
     @if (_catalog?.Resources is { Length: > 0 } resources)
     {
-        <div class="doc-table-wrap">
-            <table class="doc-table">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th scope="col">URI</th><th scope="col">Name</th><th scope="col">What it holds</th></tr>
                 </thead>
@@ -408,13 +421,13 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>How it stays true</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> How it stays true</h3>
     <p>
         Documentation that is written down separately drifts, and an agent cannot tell a stale answer from a fresh
         one. So nothing the server says is written down twice:
     </p>
-    <ul>
+    <ul class="bb-detail-list">
         <li>
             <strong>The API reference is reflected</strong> out of the shipped Bit.Belemetry assembly and paired with the
             XML documentation compiled into it - the same catalog behind the API tables on every page of this site. A new
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/NotFound.razor b/src/Utilities/Belemetry/Demo/Client/Pages/NotFound.razor
new file mode 100644
index 00000000000..5e1c3ad33a6
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/NotFound.razor
@@ -0,0 +1,18 @@
+@page "/not-found"
+@layout MainLayout
+
+@* Target of app.UseStatusCodePagesWithReExecute("/not-found") in the host's Program.cs (a deep
+   link to an unknown URL matches no endpoint, so the server re-executes it here), and also the
+   router's NotFoundPage for routes missed during client-side navigation. *@
+
+<PageTitle>Not found · Belemetry</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="web-app" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/NotFoundPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/NotFoundPage.razor
deleted file mode 100644
index 86f49b815ce..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Pages/NotFoundPage.razor
+++ /dev/null
@@ -1,9 +0,0 @@
-@page "/not-found"
-
-@* Target of app.UseStatusCodePagesWithReExecute("/not-found") in the host's Program.cs (a deep
-   link to an unknown URL matches no endpoint, so the server re-executes it here), and also the
-   router's NotFoundPage for routes missed during client-side navigation. *@
-
-<PageTitle>Not found - bit Belemetry</PageTitle>
-
-<NotFoundContent />
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/OtlpPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/OtlpPage.razor
index ad07efeaa11..c480ddb63d8 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/OtlpPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/OtlpPage.razor
@@ -1,33 +1,34 @@
 @page "/otlp"
 
-<PageTitle>OTLP - bit Belemetry</PageTitle>
-
-<h1>OTLP</h1>
-
-<p class="page-intro">
-    OTLP is OpenTelemetry's own wire protocol, and the one exporter that reaches almost every backend: the
-    OpenTelemetry Collector, the .NET Aspire dashboard, Grafana, Jaeger, Honeycomb, Datadog, New Relic, Elastic and
-    more. Belemetry writes it by hand - HTTP with protobuf or JSON, and gRPC, without the OpenTelemetry packages -
-    from both the .NET pipeline and the browser script, with one configuration.
-</p>
+<PageTitle>OTLP · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>OTLP</h1>
+    <p class="bb-subtitle">
+        OTLP is OpenTelemetry's own wire protocol, and the one exporter that reaches almost every backend: the
+        OpenTelemetry Collector, the .NET Aspire dashboard, Grafana, Jaeger, Honeycomb, Datadog, New Relic, Elastic and
+        more. Belemetry writes it by hand - HTTP with protobuf or JSON, and gRPC, without the OpenTelemetry packages -
+        from both the .NET pipeline and the browser script, with one configuration.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Adding the exporter</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Adding the exporter</h3>
     <p>
         <code>AddOtlpExporter</code> takes the base endpoint, or a callback for everything else, or both. Any number of
         exporters can be added; each record goes to all of them. The browser script exports with the same settings
         unless <code>IncludeInBrowser</code> is off.
     </p>
     <CodeSnippet Code="@BasicCode" Language="C#" Expanded="true" />
-    <div class="callout">
+    <div class="bb-note">
         This site exports to itself: the WebAssembly app and the browser script post OTLP/JSON to an in-process
         receiver at <code>/otlp</code>, which is what the <a href="/live">Live telemetry</a> page and the feeds on
         every page read from. JSON was chosen so every payload is readable in the browser's network tab.
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Protobuf, JSON or gRPC</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Protobuf, JSON or gRPC</h3>
     <p>
         <code>Protocol</code> picks the encoding. <code>HttpProtobuf</code> (the default,
         <code>application/x-protobuf</code>) is the most widely supported and the smallest on the wire.
@@ -48,8 +49,8 @@
     <CodeSnippet Code="@ProtocolCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Endpoints</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Endpoints</h3>
     <p>
         <code>Endpoint</code> is the base URL; <code>/v1/traces</code>, <code>/v1/logs</code> and
         <code>/v1/metrics</code> are appended to it, exactly as <code>OTEL_EXPORTER_OTLP_ENDPOINT</code> works.
@@ -67,8 +68,8 @@
     <CodeSnippet Code="@EndpointsCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Headers, compression and timeout</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Headers, compression and timeout</h3>
     <p>
         <code>Headers</code> are added to every request - typically the vendor's API key.
         <code>Compression = BelemetryCompression.Gzip</code> sends <code>Content-Encoding: gzip</code> (in the browser
@@ -80,7 +81,7 @@
         everything - one backend for errors, another for the full picture, from one pipeline. Events (page views,
         interactions, web vitals, custom events, exceptions), spans and metrics are not logs to a log level and always pass.
     </p>
-    <div class="callout warn">
+    <div class="bb-note bb-note-warn">
         Headers the browser script uses are visible to anyone who opens the page. Never put a credential in an
         exporter the browser exports to: set <code>IncludeInBrowser = false</code> on it and give the browser a
         credential-free route (a collector in front of the vendor), or use the
@@ -91,8 +92,8 @@
     <CodeSnippet Code="@HeadersCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Environment variables</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Environment variables</h3>
     <p>
         Outside the browser, with <code>options.UseEnvironmentVariables</code> (on by default), the standard OTLP
         variables are read - which is how the Aspire AppHost and most container platforms wire telemetry into an app
@@ -102,8 +103,8 @@
         <code>http/protobuf</code>, <code>http/json</code> or <code>grpc</code> sets <code>Protocol</code>; any other
         value is reported at startup and ignored.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead><tr><th scope="col">Variable</th><th scope="col">Effect</th></tr></thead>
             <tbody>
                 <tr><td><code>OTEL_SERVICE_NAME</code></td><td><code>service.name</code>, when <code>ServiceName</code> is not set</td></tr>
@@ -120,8 +121,8 @@
     <CodeSnippet Code="@EnvCode" Language="Shell" />
 </div>
 
-<div class="demo-section">
-    <h2>.NET Aspire dashboard</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> .NET Aspire dashboard</h3>
     <p>
         The dashboard is an OTLP receiver with a UI - the quickest way to see traces, logs and metrics locally. Use its
         OTLP/HTTP endpoint with protobuf. The browser posts to it from your app's origin, so allow that origin with
@@ -141,8 +142,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>OpenTelemetry Collector</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> OpenTelemetry Collector</h3>
     <p>
         The Collector is the usual production setup: the app sends to a collector you control, and the collector holds
         the vendor credentials, batches, samples and fans out. The browser posts to it cross-origin, so the http
@@ -152,8 +153,8 @@
     <CodeSnippet Code="@CollectorYaml" Language="YAML" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Grafana</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Grafana</h3>
     <p>
         Grafana Alloy is a Collector distribution: its <code>otelcol.receiver.otlp</code> component takes the same
         http endpoint and <code>cors</code> block, then forwards to Tempo, Loki and Mimir. Grafana Cloud also exposes an
@@ -164,8 +165,8 @@
     <CodeSnippet Code="@GrafanaCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Jaeger</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Jaeger</h3>
     <p>
         Jaeger receives OTLP natively on port 4318 - traces only, so restrict the exporter to
         <code>BelemetrySignals.Traces</code> or its logs and metrics requests are rejected. For the browser, allow the
@@ -175,8 +176,8 @@
     <CodeSnippet Code="@JaegerCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Honeycomb</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Honeycomb</h3>
     <p>
         Honeycomb accepts OTLP/HTTP at <code>https://api.honeycomb.io</code> (<code>https://api.eu1.honeycomb.io</code>
         in the EU) with the API key in the <code>x-honeycomb-team</code> header; metrics also need
@@ -186,8 +187,8 @@
     <CodeSnippet Code="@HoneycombCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> API</h3>
     <ApiTable TypeName="BelemetryOtlpExporterOptions" />
     <ApiTable TypeName="BelemetryOtlpProtocol" />
 </div>
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/PersistencePage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/PersistencePage.razor
index 7c1d45f6d14..31d0a4fa6e7 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/PersistencePage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/PersistencePage.razor
@@ -4,33 +4,34 @@
 @inject IJSRuntime JS
 @inject IBelemetryConsent Consent
 
-<PageTitle>Offline persistence - bit Belemetry</PageTitle>
-
-<h1>Offline persistence</h1>
-
-<p class="page-intro">
-    A train goes into a tunnel, a laptop lid closes mid-export, a collector restarts. Without persistence
-    the telemetry of exactly those moments - often the interesting ones - is lost. With it, an export
-    request that fails with a network error or a retryable status is kept on the device and sent again
-    later: in <code>localStorage</code> in the browser, and in files in Blazor Hybrid and on servers.
-</p>
+<PageTitle>Offline persistence · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Offline persistence</h1>
+    <p class="bb-subtitle">
+        A train goes into a tunnel, a laptop lid closes mid-export, a collector restarts. Without persistence
+        the telemetry of exactly those moments - often the interesting ones - is lost. With it, an export
+        request that fails with a network error or a retryable status is kept on the device and sent again
+        later: in <code>localStorage</code> in the browser, and in files in Blazor Hybrid and on servers.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>What is kept, and when</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What is kept, and when</h3>
     <p>
         Persistence works on whole export requests, already serialized, rather than on records: what is
         stored is exactly the body that could not be delivered, so it is sent again unchanged. A request is
         kept when it fails with a network error, or with one of the statuses a receiver uses to say
         "later":
     </p>
-    <div class="badge-list">
-        <span class="badge">408 Request Timeout</span>
-        <span class="badge">429 Too Many Requests</span>
-        <span class="badge">439 (Azure daily quota)</span>
-        <span class="badge">500</span>
-        <span class="badge">502</span>
-        <span class="badge">503</span>
-        <span class="badge">504</span>
+    <div class="demo-badges">
+        <span class="bb-badge">408 Request Timeout</span>
+        <span class="bb-badge">429 Too Many Requests</span>
+        <span class="bb-badge">439 (Azure daily quota)</span>
+        <span class="bb-badge">500</span>
+        <span class="bb-badge">502</span>
+        <span class="bb-badge">503</span>
+        <span class="bb-badge">504</span>
     </div>
     <p>
         Before a request is stored it is first retried in place a few times, with backoff that honours
@@ -39,7 +40,7 @@
         <code>206</code> partial success retries only the items the response lists as retryable.
     </p>
     <p>Persistence needs two things at once:</p>
-    <ul>
+    <ul class="bb-detail-list">
         <li><code>options.Persistence.Enabled</code> - on by default - which is the operator's switch.</li>
         <li>
             The user's consent for the <code>Persistence</code> feature. Keeping data on someone's device is a
@@ -50,10 +51,10 @@
     <CodeSnippet Code="@OptionsCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Where it is kept</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where it is kept</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Host</th><th scope="col">Store</th><th scope="col">Size cap</th><th scope="col">Retried</th></tr>
             </thead>
@@ -92,8 +93,8 @@
     <CodeSnippet Code="@QueueShapeCode" Language="JSON" />
 </div>
 
-<div class="demo-section">
-    <h2>Look at the queue</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Look at the queue</h3>
     <p>
         This panel reads <code>localStorage['bit-belemetry-queue']</code> directly. On a healthy connection it
         is empty - nothing failed, so nothing was kept. To fill it, open your browser's developer tools, set the
@@ -101,51 +102,50 @@
         queue again. Then go back online: the script hears the <code>online</code> event, resends, and the
         queue empties.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <dl class="kv">
-                <dt>Persistence consent</dt>
-                <dd><span class="state-pill @(_persistenceGranted is true ? "on" : null)">@(_persistenceGranted switch { true => "granted", false => "not granted", null => "unknown" })</span></dd>
-                <dt>bit-belemetry-queue</dt>
-                <dd>
-                    @if (_queueRead is false)
-                    {
-                        <span>not read yet</span>
-                    }
-                    else if (_queueEntries is null)
-                    {
-                        <span class="state-pill">empty</span>
-                    }
-                    else
-                    {
-                        <span class="state-pill on">@_queueEntries request(s), @FormatBytes(_queueBytes)</span>
-                    }
-                </dd>
-                @if (_queueExporters.Length > 0)
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">bit-belemetry-queue</span></span></div>
+        <dl class="bb-params">
+            <dt>Persistence consent</dt>
+            <dd><span class="bb-badge @(_persistenceGranted is true ? "bb-badge-success" : "demo-badge-off")">@(_persistenceGranted switch { true => "granted", false => "not granted", null => "unknown" })</span></dd>
+            <dt>bit-belemetry-queue</dt>
+            <dd>
+                @if (_queueRead is false)
                 {
-                    <dt>Waiting for</dt>
-                    <dd>@string.Join(", ", _queueExporters)</dd>
+                    <span>not read yet</span>
                 }
-            </dl>
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ReadQueueAsync">Read the queue</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackEventAsync">Track an event</button>
-                @if (_persistenceGranted is true)
+                else if (_queueEntries is null)
                 {
-                    <button type="button" class="btn-bl btn-bl-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="RevokeAsync">Revoke Persistence</button>
+                    <span class="bb-badge demo-badge-off">empty</span>
                 }
                 else
                 {
-                    <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="GrantAsync">Grant Persistence</button>
+                    <span class="bb-badge bb-badge-success">@_queueEntries request(s), @FormatBytes(_queueBytes)</span>
                 }
-            </div>
-            @if (_message is not null)
+            </dd>
+            @if (_queueExporters.Length > 0)
+            {
+                <dt>Waiting for</dt>
+                <dd>@string.Join(", ", _queueExporters)</dd>
+            }
+        </dl>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ReadQueueAsync">Read the queue</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="TrackEventAsync">Track an event</button>
+            @if (_persistenceGranted is true)
+            {
+                <button type="button" class="btn demo-btn-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="RevokeAsync">Revoke Persistence</button>
+            }
+            else
             {
-                <p class="demo-label">@_message</p>
+                <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="GrantAsync">Grant Persistence</button>
             }
         </div>
+        @if (_message is not null)
+        {
+            <p class="demo-status">@_message</p>
+        }
     </div>
-    <div class="callout">
+    <div class="bb-note">
         <p>
             <strong>Track an event</strong> needs the <code>Events</code> feature granted, and the queue only
             fills with <code>Persistence</code> granted. Revoking <code>Persistence</code> clears the queue at once:
@@ -155,8 +155,8 @@
     <CodeSnippet Code="@ReadQueueCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Revoking clears it</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Revoking clears it</h3>
     <p>
         Withdrawing consent has to reach data already stored, not only data still to come. Revoking
         <code>Persistence</code> - from the banner, from <code>IBelemetryConsent.RevokeAsync</code> or from
@@ -167,8 +167,8 @@
     <CodeSnippet Code="@RevokeCode" Language="Razor" />
 </div>
 
-<div class="demo-section">
-    <h2>Hybrid apps</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Hybrid apps</h3>
     <p>
         In MAUI, WPF and WinForms the browser script relays its records to .NET, and the .NET pipeline exports
         everything - so the file store is the one that matters. A phone is suspended long before it loses its
@@ -178,8 +178,8 @@
     <CodeSnippet Code="@HybridCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> API</h3>
     <ApiTable TypeName="BelemetryPersistenceOptions" />
 </div>
 
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/PrivacyPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/PrivacyPage.razor
index dd2271e1896..cd73e9bce4e 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/PrivacyPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/PrivacyPage.razor
@@ -1,60 +1,60 @@
 @page "/privacy"
 @inject IJSRuntime JS
 
-<PageTitle>Privacy - bit Belemetry</PageTitle>
-
-<h1>Privacy</h1>
-
-<p class="page-intro">
-    Consent decides <em>whether</em> a record is collected; the privacy rules decide <em>what is in it</em>. They run
-    before a record is queued - in the browser script and in the .NET pipeline alike - so secrets in URLs, e-mail
-    addresses in error messages and card numbers in logs are gone before anything leaves the device or the process.
-    The defaults are on; most apps only ever add to them.
-</p>
+<PageTitle>Privacy · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Privacy</h1>
+    <p class="bb-subtitle">
+        Consent decides <em>whether</em> a record is collected; the privacy rules decide <em>what is in it</em>. They run
+        before a record is queued - in the browser script and in the .NET pipeline alike - so secrets in URLs, e-mail
+        addresses in error messages and card numbers in logs are gone before anything leaves the device or the process.
+        The defaults are on; most apps only ever add to them.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>See it happen</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> See it happen</h3>
     <p>
         Each button below makes a real request, or throws a real error, carrying something that must not be recorded.
         Open a record in the feed to see what was actually exported: the server received the original URL, the
         telemetry did not.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => FetchAsync(SecretsUrl))">Secrets in the query</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => FetchAsync(PatternsUrl))">An e-mail and an IP in the query</button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => FetchAsync(FragmentUrl))">A token in the fragment</button>
-                <button type="button" class="btn-bl btn-bl-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ThrowAsync">An error mentioning a card</button>
-            </div>
-            <div class="doc-table-wrap">
-                <table class="doc-table">
-                    <thead><tr><th scope="col">The page used</th><th scope="col">The telemetry carries</th></tr></thead>
-                    <tbody>
-                        <tr><td><code>@SecretsUrl</code></td><td><code>.../api/demo/echo?token=REDACTED&amp;email=REDACTED&amp;q=ok</code></td></tr>
-                        <tr><td><code>@PatternsUrl</code></td><td><code>.../api/demo/echo?q=[email]&amp;from=[ip]</code></td></tr>
-                        <tr><td><code>@FragmentUrl</code></td><td><code>.../api/demo/echo</code></td></tr>
-                        <tr><td><code>@ErrorMessage</code></td><td><code>Payment failed for [email] with card [card]</code></td></tr>
-                    </tbody>
-                </table>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsPrivacyRecord"
-                               EmptyText="Nothing yet - press a button, then open the record and read its url.full or exception.message." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">the privacy rules</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => FetchAsync(SecretsUrl))">Secrets in the query</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => FetchAsync(PatternsUrl))">An e-mail and an IP in the query</button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => FetchAsync(FragmentUrl))">A token in the fragment</button>
+            <button type="button" class="btn demo-btn-danger" disabled="@(RendererInfo.IsInteractive is false)" @onclick="ThrowAsync">An error mentioning a card</button>
+        </div>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th scope="col">The page used</th><th scope="col">The telemetry carries</th></tr></thead>
+                <tbody>
+                    <tr><td><code>@SecretsUrl</code></td><td><code>.../api/demo/echo?token=REDACTED&amp;email=REDACTED&amp;q=ok</code></td></tr>
+                    <tr><td><code>@PatternsUrl</code></td><td><code>.../api/demo/echo?q=[email]&amp;from=[ip]</code></td></tr>
+                    <tr><td><code>@FragmentUrl</code></td><td><code>.../api/demo/echo</code></td></tr>
+                    <tr><td><code>@ErrorMessage</code></td><td><code>Payment failed for [email] with card [card]</code></td></tr>
+                </tbody>
+            </table>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsPrivacyRecord"
+                           EmptyText="Nothing yet - press a button, then open the record and read its url.full or exception.message." />
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Query parameters</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Query parameters</h3>
     <p>
         The values of the parameters in <code>RedactQueryParameters</code> are replaced with <code>REDACTED</code> in
         every URL attribute (<code>url.full</code>, <code>page.referrer</code>, ...), matched case-insensitively and
         after URL decoding. The parameter stays, so a dashboard can still tell the requests apart. The default list:
     </p>
-    <div class="badge-list">
+    <div class="demo-badges">
         @foreach (var name in _defaultRedacted)
         {
-            <span class="badge">@name</span>
+            <span class="bb-badge">@name</span>
         }
     </div>
     <p>
@@ -65,16 +65,16 @@
     <CodeSnippet Code="@QueryCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Pattern scrubbing</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Pattern scrubbing</h3>
     <p>
         With <code>ScrubPatterns</code> (on) these patterns are replaced wherever free text can carry them - log
         bodies, exception messages and stack traces, span status messages and URLs. In the browser every string
         attribute is scrubbed (the session and user ids excepted); on the .NET side, the URL attributes,
         <code>exception.message</code>, <code>exception.stacktrace</code>, <code>url.query</code> and the log body.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead><tr><th scope="col">Pattern</th><th scope="col">Becomes</th><th scope="col">Notes</th></tr></thead>
             <tbody>
                 <tr><td>E-mail addresses</td><td><code>[email]</code></td><td><code>name&#64;domain.tld</code></td></tr>
@@ -91,8 +91,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Blocked attributes and the user agent</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Blocked attributes and the user agent</h3>
     <p>
         <code>BlockedAttributes</code> removes attributes by exact key from every record and span event, on both
         sides: the browser script gets the list in its configuration, and the .NET pipeline applies it to its own
@@ -108,8 +108,8 @@
     <CodeSnippet Code="@AttributesCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> API</h3>
     <ApiTable TypeName="BelemetryPrivacyOptions" />
 </div>
 
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/ProcessorsPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/ProcessorsPage.razor
index 84b88cd8a83..5218c603072 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/ProcessorsPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/ProcessorsPage.razor
@@ -1,18 +1,19 @@
 @page "/processors"
 @inject HttpClient Http
 
-<PageTitle>Processors - bit Belemetry</PageTitle>
-
-<h1>Processors</h1>
-
-<p class="page-intro">
-    A processor sees every record the .NET pipeline handles before it is queued, and can change it or drop it: add a
-    tenant id to every span, rename a noisy log, drop health checks and static files, strip an attribute only your
-    app knows is sensitive. It is one small interface with three optional methods.
-</p>
+<PageTitle>Processors · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Processors</h1>
+    <p class="bb-subtitle">
+        A processor sees every record the .NET pipeline handles before it is queued, and can change it or drop it: add a
+        tenant id to every span, rename a noisy log, drop health checks and static files, strip an attribute only your
+        app knows is sensitive. It is one small interface with three optional methods.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>IBelemetryProcessor</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> IBelemetryProcessor</h3>
     <p>
         <code>OnSpan</code>, <code>OnLog</code> and <code>OnMetric</code> each receive the record - a
         <code>BelemetrySpan</code>, <code>BelemetryLogRecord</code> or <code>BelemetryMetric</code>, every member of
@@ -21,17 +22,17 @@
         <code>options.AddProcessor</code>; they run in the order they were added, after the built-in privacy rules.
     </p>
     <CodeSnippet Code="@ReadmeCode" Language="C#" Expanded="true" />
-    <div class="callout warn">
+    <div class="bb-note bb-note-warn">
         Processors run synchronously, on the thread that produced the record - inside the code that logged, or
         stopped the activity. They must be fast and must not block, await or call out over the network. A processor
         that throws is skipped for that record; the record itself is kept.
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Which records they see</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Which records they see</h3>
     <p>Processors run on every record of the .NET pipeline:</p>
-    <ul>
+    <ul class="bb-detail-list">
         <li><code>ILogger</code> entries, <code>Activity</code> spans and <code>Meter</code> metrics.</li>
         <li><code>IBelemetry</code> calls on WebAssembly and Hybrid, where they go through the .NET pipeline.</li>
         <li>
@@ -47,8 +48,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>A real one: DemoNoiseFilter</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> A real one: DemoNoiseFilter</h3>
     <p>
         This site runs the processor below on both of its pipelines, the WebAssembly one and the server's. The live
         feeds poll <code>/api/telemetry</code> every two seconds with <code>HttpClient</code>, and the .NET side
@@ -56,25 +57,24 @@
         record a request span for every static file and every piece of the WebAssembly payload. The browser script
         does not need it: the same URLs are in its <code>IgnoreUrls</code>.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => GetAsync(EchoUrl, keep: true))">
-                    HttpClient GET /api/demo/echo (kept: @_kept)
-                </button>
-                <button type="button" class="btn-bl-subtle" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => GetAsync(FeedUrl, keep: false))">
-                    HttpClient GET /api/telemetry (dropped: @_dropped)
-                </button>
-            </div>
-            <TelemetryFeedView Compact="true" Match="@IsWasmHttpSpan"
-                               EmptyText="No .NET HTTP spans yet - press the first button; the second never shows up here." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">DemoNoiseFilter</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => GetAsync(EchoUrl, keep: true))">
+                HttpClient GET /api/demo/echo (kept: @_kept)
+            </button>
+            <button type="button" class="btn btn-secondary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="@(() => GetAsync(FeedUrl, keep: false))">
+                HttpClient GET /api/telemetry (dropped: @_dropped)
+            </button>
         </div>
+        <TelemetryFeedView Compact="true" Match="@IsWasmHttpSpan"
+                           EmptyText="No .NET HTTP spans yet - press the first button; the second never shows up here." />
     </div>
     <CodeSnippet Code="@NoiseFilterCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Enrich, rewrite, drop</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Enrich, rewrite, drop</h3>
     <p>
         Enriching is setting attributes. Rewriting is assigning members: a span's <code>Name</code>, a log's
         <code>Body</code> or <code>Severity</code>, a metric's points. Dropping is returning <code>false</code>. The
@@ -83,8 +83,8 @@
     <CodeSnippet Code="@ExamplesCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> API</h3>
     <ApiTable TypeName="IBelemetryProcessor" />
 </div>
 
@@ -138,14 +138,17 @@
             private static readonly string[] _noise =
             [
                 .. DemoTelemetry.SelfUrls,          // "/otlp/", "/api/telemetry"
-                "/_framework/", "/_content/", "/_blazor", "/css/", "/js/", "/images/", "/favicon", "/icon-",
-                "/.well-known/", "/_vs/", "/browserLink",
+                "/_framework/", "/_content/", "/_blazor", "/images/", "/.well-known/", "/_vs/", "/browserLink",
             ];
 
+            // The site's stylesheets, scripts and icons, served at the root under fingerprinted names.
+            private static readonly string[] _staticFiles = [".css", ".js", ".map", ".svg", ".png", ".ico", ".woff2"];
+
             public bool OnSpan(BelemetrySpan span)
             {
                 var url = span.Attributes.GetString(BelemetrySemanticConventions.UrlFull)
-                       ?? span.Attributes.GetString(BelemetrySemanticConventions.UrlPath);
+                       ?? span.Attributes.GetString(BelemetrySemanticConventions.UrlPath)
+                       ?? span.Attributes.GetString(BelemetrySemanticConventions.HttpRoute);
 
                 if (url is null) return true;
 
@@ -154,6 +157,15 @@
                     if (url.Contains(noise, StringComparison.OrdinalIgnoreCase)) return false;
                 }
 
+                var path = url.AsSpan();
+                var end = path.IndexOfAny('?', '#');
+                if (end >= 0) path = path[..end];
+
+                foreach (var extension in _staticFiles)
+                {
+                    if (path.EndsWith(extension, StringComparison.OrdinalIgnoreCase)) return false;
+                }
+
                 return true;
             }
         }
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/SemanticConventionsPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/SemanticConventionsPage.razor
index 2bbdd6aba01..cef1d4b2cb9 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/SemanticConventionsPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/SemanticConventionsPage.razor
@@ -1,26 +1,27 @@
 @page "/semantic-conventions"
 
-<PageTitle>Semantic conventions - bit Belemetry</PageTitle>
+<PageTitle>Semantic conventions · Belemetry</PageTitle>
 
-<h1>Semantic conventions</h1>
-
-<p class="page-intro">
-    Belemetry follows the OpenTelemetry data model and its semantic conventions, so a page view, a fetch or an
-    exception arrives with the attribute names every OTLP backend already knows how to query. This page is the
-    reference: what each record looks like, the resource that describes where it came from, the feature bit it
-    belongs to, and what the script keeps in browser storage.
-</p>
+<div class="bb-intro">
+    <h1>Semantic conventions</h1>
+    <p class="bb-subtitle">
+        Belemetry follows the OpenTelemetry data model and its semantic conventions, so a page view, a fetch or an
+        exception arrives with the attribute names every OTLP backend already knows how to query. This page is the
+        reference: what each record looks like, the resource that describes where it came from, the feature bit it
+        belongs to, and what the script keeps in browser storage.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Feature bits</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Feature bits</h3>
     <p>
         Every record belongs to exactly one feature, and is only collected while that feature is both switched on
         by configuration (<code>options.Features</code>) and granted by the user. The numbers are the same in C#
         (<code>BelemetryFeatures</code>) and in the script (<code>Features</code>), and they are what
         <code>BitBelemetry.setConsent</code> takes.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Name</th><th scope="col">Bit</th><th scope="col">Covers</th></tr>
             </thead>
@@ -40,8 +41,8 @@
             </tbody>
         </table>
     </div>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Group</th><th scope="col">Value</th><th scope="col">Members</th></tr>
             </thead>
@@ -56,16 +57,16 @@
     <ApiTable TypeName="BelemetryFeatures" />
 </div>
 
-<div class="demo-section">
-    <h2>Browser records</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Browser records</h3>
     <p>
         Events are log records with an <code>eventName</code>, the way the OpenTelemetry Events API models them.
         Spans use the OTLP span kinds (1 internal, 2 server, 3 client) and status codes (0 unset, 1 ok, 2 error),
         and log severities use the OTLP <code>SeverityNumber</code>. Times are milliseconds since the Unix epoch,
         from <code>performance.timeOrigin + performance.now()</code>.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Record</th><th scope="col">Shape</th><th scope="col">Scope</th><th scope="col">Feature</th></tr>
             </thead>
@@ -147,10 +148,10 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>.NET records</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> .NET records</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Record</th><th scope="col">Shape</th></tr>
             </thead>
@@ -186,14 +187,14 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Resource attributes</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Resource attributes</h3>
     <p>
         The resource describes the producer rather than the event, and travels once per batch. The first eight are
         common to both sides; the rest say which side the record came from.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Attribute</th><th scope="col">Value</th><th scope="col">Side</th></tr>
             </thead>
@@ -223,11 +224,11 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Browser storage keys</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Browser storage keys</h3>
     <p>Belemetry sets no cookies. These are the only keys it writes, and each one is gated by the feature it serves.</p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Key</th><th scope="col">Storage</th><th scope="col">Gated by</th><th scope="col">Content</th></tr>
             </thead>
@@ -246,8 +247,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Browser configuration</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Browser configuration</h3>
     <p>
         <code>&lt;BelemetryScript /&gt;</code> writes this object into
         <code>&lt;script type="application/json" id="bit-belemetry-config"&gt;</code>, built from the server's
@@ -256,14 +257,14 @@
         <code>BitBelemetry.start</code> yourself - every field is optional.
     </p>
     <CodeSnippet Code="@ConfigCode" Language="JSON" Expanded="true" />
-    <ul>
+    <ul class="bb-detail-list">
         <li><code>propagateTraceContextTo</code> entries are <code>"same-origin"</code>, <code>"*"</code>, or a regex source matched against the absolute URL.</li>
         <li><code>ignoreUrls</code> and <code>ignoreMessages</code> are regex sources.</li>
     </ul>
 </div>
 
-<div class="demo-section">
-    <h2>The constants</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The constants</h3>
     <p>
         <code>BelemetrySemanticConventions</code> holds every attribute and event name above as a
         <code>const string</code>, for processors and custom exporters that read or write them - so a typo is a
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/ServerPipelinePage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/ServerPipelinePage.razor
index 70fd8c4058b..b33958e547b 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/ServerPipelinePage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/ServerPipelinePage.razor
@@ -2,19 +2,20 @@
 @using System.Text.Json
 @inject IJSRuntime JS
 
-<PageTitle>Server pipeline - bit Belemetry</PageTitle>
-
-<h1>Server pipeline</h1>
-
-<p class="page-intro">
-    On an ASP.NET Core host Belemetry's .NET pipeline is <strong>off by default</strong>: the server
-    serves the browser script and nothing more, because such hosts usually have an OpenTelemetry setup of
-    their own. <code>Server.CollectDotnetTelemetry</code> turns it on, and the server's logs, request spans
-    and metrics go to the same exporters as everything else - joined to the browser by trace context.
-</p>
+<PageTitle>Server pipeline · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Server pipeline</h1>
+    <p class="bb-subtitle">
+        On an ASP.NET Core host Belemetry's .NET pipeline is <strong>off by default</strong>: the server
+        serves the browser script and nothing more, because such hosts usually have an OpenTelemetry setup of
+        their own. <code>Server.CollectDotnetTelemetry</code> turns it on, and the server's logs, request spans
+        and metrics go to the same exporters as everything else - joined to the browser by trace context.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Turning it on</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Turning it on</h3>
     <p>
         One switch, in the server project's registration. It applies to every ASP.NET Core host Belemetry
         detects: Blazor Server, static SSR, and the server half of the Auto and WebAssembly render modes.
@@ -31,16 +32,16 @@
     <CodeSnippet Code="@SetupCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Operator features, not consent</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Operator features, not consent</h3>
     <p>
         Everything else in Belemetry is governed by one user's consent. The server pipeline cannot be: it is
         process-wide, and serves every user at once - there is no single "user" whose choice a request span for
         a shared endpoint, a Kestrel metric or a startup log belongs to. So it is governed by
         <code>Server.Features</code>, a decision the operator makes, in the same way a server's access logs are.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Collected by</th><th scope="col">Governed by</th></tr>
             </thead>
@@ -59,10 +60,10 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>What it records</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What it records</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Signal</th><th scope="col">What</th><th scope="col">From</th></tr>
             </thead>
@@ -92,8 +93,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>One trace from click to server</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> One trace from click to server</h3>
     <p>
         When the browser script records a <code>fetch</code> or XHR, it adds a W3C <code>traceparent</code>
         header for targets matched by <code>Browser.PropagateTraceContextTo</code> (same-origin by default).
@@ -106,36 +107,35 @@
         plain <code>fetch</code>, the endpoint answers with the <code>traceparent</code> it received and the trace
         id of its own request span, and the feed below shows the server's records that joined your trace.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false || _busy)" @onclick="CallEchoAsync">
-                    @(_busy ? "Calling..." : "Call /api/demo/echo")
-                </button>
-            </div>
-            @if (_result is not null)
-            {
-                <dl class="kv">
-                    <dt>Status</dt>
-                    <dd>@_result.Status (@_result.Ms ms)</dd>
-                    <dt>traceparent sent</dt>
-                    <dd><code>@(_traceparent ?? "(none - is Dependencies granted?)")</code></dd>
-                    <dt>Browser trace id</dt>
-                    <dd><code>@(BrowserTraceId ?? "-")</code></dd>
-                    <dt>Server trace id</dt>
-                    <dd><code>@(_serverTraceId ?? "-")</code></dd>
-                    <dt>Joined</dt>
-                    <dd>
-                        <span class="state-pill @(Joined ? "on" : null)">@(Joined ? "same trace" : "not joined")</span>
-                    </dd>
-                </dl>
-            }
-            <TelemetryFeedView Compact="true"
-                               Match="@(r => r.Source == "server" || r.Correlated)"
-                               EmptyText="Nothing yet - call the endpoint. The server's request span and its log arrive once your fetch span has been exported." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">traceparent</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false || _busy)" @onclick="CallEchoAsync">
+                @(_busy ? "Calling..." : "Call /api/demo/echo")
+            </button>
         </div>
+        @if (_result is not null)
+        {
+            <dl class="bb-params">
+                <dt>Status</dt>
+                <dd>@_result.Status (@_result.Ms ms)</dd>
+                <dt>traceparent sent</dt>
+                <dd><code>@(_traceparent ?? "(none - is Dependencies granted?)")</code></dd>
+                <dt>Browser trace id</dt>
+                <dd><code>@(BrowserTraceId ?? "-")</code></dd>
+                <dt>Server trace id</dt>
+                <dd><code>@(_serverTraceId ?? "-")</code></dd>
+                <dt>Joined</dt>
+                <dd>
+                    <span class="bb-badge @(Joined ? "bb-badge-success" : "demo-badge-off")">@(Joined ? "same trace" : "not joined")</span>
+                </dd>
+            </dl>
+        }
+        <TelemetryFeedView Compact="true"
+                           Match="@(r => r.Source == "server" || r.Correlated)"
+                           EmptyText="Nothing yet - call the endpoint. The server's request span and its log arrive once your fetch span has been exported." />
     </div>
-    <div class="callout">
+    <div class="bb-note">
         <p>
             The <code>traceparent</code> is only added while <code>Dependencies</code> is granted - without it the
             script does not instrument <code>fetch</code> at all. The server records the request either way: it is
@@ -145,8 +145,8 @@
     <CodeSnippet Code="@PropagationCode" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Where it runs</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where it runs</h3>
     <p>
         A server describes where it runs, the way the OpenTelemetry resource detectors do, from environment
         variables and <code>/proc</code> alone - no metadata-service call, nothing at request time:
@@ -160,8 +160,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Living next to OpenTelemetry</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Living next to OpenTelemetry</h3>
     <p>
         If the server already exports with the OpenTelemetry SDK, leave <code>CollectDotnetTelemetry</code> off:
         Belemetry keeps serving the browser script, the browser still sends <code>traceparent</code>, and your
@@ -170,8 +170,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> API</h3>
     <ApiTable TypeName="BelemetryServerOptions" />
 </div>
 
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/StandaloneWasmPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/StandaloneWasmPage.razor
index 4afab37a7ae..8e874760976 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/StandaloneWasmPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/StandaloneWasmPage.razor
@@ -1,18 +1,19 @@
 @page "/wasm"
 
-<PageTitle>Standalone WebAssembly - bit Belemetry</PageTitle>
-
-<h1>Standalone WebAssembly</h1>
-
-<p class="page-intro">
-    A standalone Blazor WebAssembly app has no server that renders its head, so there is no
-    <code>&lt;BelemetryScript /&gt;</code>: one registration in <code>Program.cs</code> and
-    <code>&lt;BelemetryInitializer /&gt;</code> in the root component are the whole setup. Both halves -
-    the browser script and the .NET pipeline - run in the reader's browser.
-</p>
+<PageTitle>Standalone WebAssembly · Belemetry</PageTitle>
+
+<div class="bb-intro">
+    <h1>Standalone WebAssembly</h1>
+    <p class="bb-subtitle">
+        A standalone Blazor WebAssembly app has no server that renders its head, so there is no
+        <code>&lt;BelemetryScript /&gt;</code>: one registration in <code>Program.cs</code> and
+        <code>&lt;BelemetryInitializer /&gt;</code> in the root component are the whole setup. Both halves -
+        the browser script and the .NET pipeline - run in the reader's browser.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Register in Program.cs</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Register in Program.cs</h3>
     <p>
         The host kind is detected: no ASP.NET Core hosting in the container and a browser underneath means
         WebAssembly, so the .NET pipeline runs here and exports with the browser's own <code>fetch</code>.
@@ -22,8 +23,8 @@
     <CodeSnippet Code="@ProgramCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>The initializer in App.razor</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The initializer in App.razor</h3>
     <p>
         <code>&lt;BelemetryInitializer /&gt;</code> imports the script, starts it with the configuration from
         <code>Program.cs</code>, and connects it to .NET: consent and the session are shared, and the
@@ -32,8 +33,8 @@
     <CodeSnippet Code="@AppRazorCode" Language="Razor" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>The optional script tag</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The optional script tag</h3>
     <p>
         Adding the module to <code>index.html</code> makes the browser download it in parallel with the
         .NET runtime instead of after it, and puts <code>window.BitBelemetry</code> on the page before Blazor
@@ -41,7 +42,7 @@
         configuration.
     </p>
     <CodeSnippet Code="@IndexHtmlCode" Language="HTML" Expanded="true" />
-    <div class="callout">
+    <div class="bb-note">
         <p>
             Starting late costs less than it sounds: web vitals, the document-load span, resource timing and
             long tasks are read from the browser's buffered performance entries, so the script sees them
@@ -50,15 +51,15 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Endpoints and CORS</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Endpoints and CORS</h3>
     <p>
         Everything is exported from the page's origin to the collector's, so the receiver has to allow the
         app's origin. For the OpenTelemetry Collector that is <code>cors.allowed_origins</code> on the OTLP
         HTTP receiver; for the .NET Aspire dashboard, <code>DASHBOARD__OTLP__CORS__ALLOWEDORIGINS</code>.
     </p>
     <CodeSnippet Code="@CollectorCode" Language="YAML" />
-    <div class="callout warn">
+    <div class="bb-note bb-note-warn">
         <p>
             A WebAssembly app's configuration is downloaded by every visitor, so exporter headers - API keys
             included - are public. For a vendor that needs a key, put a collector in between that adds it.
@@ -66,10 +67,10 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>What runs where</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What runs where</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <tbody>
                 <tr><td>Browser instrumentation</td><td>The script: page views, clicks, web vitals, errors, fetch and XHR spans</td></tr>
                 <tr><td>.NET logs, traces, metrics</td><td>In the browser, exported every <code>Batch.FlushInterval</code> and <code>Metrics.ExportInterval</code>. Metrics rely on <code>System.Diagnostics.Metrics</code>, which the WebAssembly SDK turns off by default and the package turns back on (<code>MetricsSupport</code>)</td></tr>
@@ -87,8 +88,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> API</h3>
     <ApiTable TypeName="BelemetryInitializer" />
     <ApiTable TypeName="BelemetryOtlpExporterOptions" />
 </div>
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/TransportPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/TransportPage.razor
index b29933e9a80..6928320fda6 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/TransportPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/TransportPage.razor
@@ -1,22 +1,23 @@
 @page "/transport"
 @inject IJSRuntime JS
 
-<PageTitle>Transport - bit Belemetry</PageTitle>
+<PageTitle>Transport · Belemetry</PageTitle>
 
-<h1>Transport</h1>
-
-<p class="page-intro">
-    The browser script records page views, clicks, web vitals, errors and fetches - and then has to get them
-    somewhere. <code>options.Browser.Transport</code> decides how: <strong>Direct</strong>, where the page posts
-    to your endpoints itself, or <strong>Relay</strong>, where it hands its records to .NET over JS interop and
-    the .NET pipeline exports them. The choice is about where the network call happens - and therefore about
-    CORS and about who can see your exporter credentials.
-</p>
+<div class="bb-intro">
+    <h1>Transport</h1>
+    <p class="bb-subtitle">
+        The browser script records page views, clicks, web vitals, errors and fetches - and then has to get them
+        somewhere. <code>options.Browser.Transport</code> decides how: <strong>Direct</strong>, where the page posts
+        to your endpoints itself, or <strong>Relay</strong>, where it hands its records to .NET over JS interop and
+        the .NET pipeline exports them. The choice is about where the network call happens - and therefore about
+        CORS and about who can see your exporter credentials.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Auto, Direct and Relay</h2>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Auto, Direct and Relay</h3>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Value</th><th scope="col">What happens</th></tr>
             </thead>
@@ -52,8 +53,8 @@
     <CodeSnippet Code="@SetupCode" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Direct: CORS and public endpoints</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Direct: CORS and public endpoints</h3>
     <p>
         With Direct, the request to your collector comes from the page's origin, so the receiver must allow
         that origin - a browser blocks a cross-origin <code>POST</code> with a <code>Content-Type</code> of
@@ -69,7 +70,7 @@
         to the origin it was served from, behind any proxy.
     </p>
     <CodeSnippet Code="@BrowserEndpointCode" Language="C#" />
-    <div class="callout warn">
+    <div class="bb-note bb-note-warn">
         <p>
             <strong>Everything the script exports with is in the page.</strong> The browser configuration is
             written into the HTML by <code>&lt;BelemetryScript /&gt;</code>, so an exporter's <code>Headers</code> -
@@ -81,8 +82,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Relay: no credentials in the page</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Relay: no credentials in the page</h3>
     <p>
         With Relay, the page never talks to a collector. Each batch goes to the
         <code>Belemetry.Relay</code> callback of <code>&lt;BelemetryInitializer /&gt;</code>, and from there into
@@ -90,8 +91,8 @@
         custom exporters (an in-memory viewer, your own <code>IBelemetryExporter</code>) receive them. The user's
         consent was already applied in the page, so a relayed record is not filtered a second time.
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Host</th><th scope="col">Where the relayed records are exported from</th></tr>
             </thead>
@@ -115,7 +116,7 @@
             </tbody>
         </table>
     </div>
-    <div class="callout">
+    <div class="bb-note">
         <p>
             Relay depends on an interactive component. Until <code>&lt;BelemetryInitializer /&gt;</code> attaches,
             the script keeps its records queued in memory; a static SSR page that never becomes interactive has
@@ -124,8 +125,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>This site</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> This site</h3>
     <p>
         The demo runs as a Blazor Web App with the WebAssembly render mode and leaves <code>Transport</code> on
         <code>Auto</code>, which resolves to <strong>Direct</strong>: the script posts OTLP/JSON to
@@ -133,24 +134,23 @@
         an event and watch it arrive - it went from the page to the server's receiver with a plain
         <code>fetch</code>.
     </p>
-    <div class="demo-row">
-        <div class="demo-card stack">
-            <div class="demo-actions">
-                <button type="button" class="btn-bl" disabled="@(RendererInfo.IsInteractive is false)" @onclick="SendAsync">Send an event</button>
-            </div>
-            @if (_message is not null)
-            {
-                <p class="demo-label">@_message</p>
-            }
-            <TelemetryFeedView Compact="true"
-                               Match="@(r => r.Source == "browser" && r.Name == "demo.transport")"
-                               EmptyText="Nothing yet - send an event (it needs the Events feature granted)." />
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live<span class="demo-sample-title">Direct</span></span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" disabled="@(RendererInfo.IsInteractive is false)" @onclick="SendAsync">Send an event</button>
         </div>
+        @if (_message is not null)
+        {
+            <p class="demo-status">@_message</p>
+        }
+        <TelemetryFeedView Compact="true"
+                           Match="@(r => r.Source == "browser" && r.Name == "demo.transport")"
+                           EmptyText="Nothing yet - send an event (it needs the Events feature granted)." />
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> API</h3>
     <ApiTable TypeName="BelemetryBrowserTransport" />
 </div>
 
diff --git a/src/Utilities/Belemetry/Demo/Client/Pages/WebAppPage.razor b/src/Utilities/Belemetry/Demo/Client/Pages/WebAppPage.razor
index 5b7b6b76df0..0366685c456 100644
--- a/src/Utilities/Belemetry/Demo/Client/Pages/WebAppPage.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Pages/WebAppPage.razor
@@ -1,19 +1,20 @@
 @page "/web-app"
 
-<PageTitle>Blazor Web App - bit Belemetry</PageTitle>
+<PageTitle>Blazor Web App · Belemetry</PageTitle>
 
-<h1>Blazor Web App</h1>
-
-<p class="page-intro">
-    A Blazor Web App has two projects and up to four ways of rendering a page - Server, WebAssembly,
-    Auto and static SSR. Belemetry is set up the same way for all of them: one registration in each
-    project, <code>&lt;BelemetryScript /&gt;</code> in the document head, and
-    <code>&lt;BelemetryInitializer /&gt;</code> in <code>Routes.razor</code>. What differs between the
-    render modes is where the .NET half runs, and that is decided for you.
-</p>
+<div class="bb-intro">
+    <h1>Blazor Web App</h1>
+    <p class="bb-subtitle">
+        A Blazor Web App has two projects and up to four ways of rendering a page - Server, WebAssembly,
+        Auto and static SSR. Belemetry is set up the same way for all of them: one registration in each
+        project, <code>&lt;BelemetryScript /&gt;</code> in the document head, and
+        <code>&lt;BelemetryInitializer /&gt;</code> in <code>Routes.razor</code>. What differs between the
+        render modes is where the .NET half runs, and that is decided for you.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Install</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
     <p>
         One package, referenced by the project that renders <code>App.razor</code> (the server) and by
         the client project when there is one. It brings the browser script with it as a static web
@@ -22,8 +23,8 @@
     <CodeSnippet Code="@InstallCode" Language="Shell" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Register in both projects</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register in both projects</h3>
     <p>
         Call <code>AddBitBelemetryServices</code> in the server's <code>Program.cs</code> and in the
         client's. Every component is instantiated twice - once on the server for the prerender pass and
@@ -38,8 +39,8 @@
     <CodeSnippet Code="@ClientProgramCode" Language="C#" Expanded="true" />
 
     <p>Each container has its own job:</p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Container</th><th scope="col">What Belemetry does there</th></tr>
             </thead>
@@ -70,8 +71,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>The script in App.razor</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The script in App.razor</h3>
     <p>
         <code>&lt;BelemetryScript /&gt;</code> renders the configuration as an inline JSON element and the
         module after it. Because it is static markup in the head, the script starts before Blazor boots -
@@ -79,7 +80,7 @@
         it also covers static SSR pages that never become interactive.
     </p>
     <CodeSnippet Code="@AppRazorCode" Language="Razor" Expanded="true" />
-    <div class="callout">
+    <div class="bb-note">
         <p>
             With <code>MapStaticAssets</code> and fingerprinted assets, pass the fingerprinted path:
             <code>&lt;BelemetryScript Src="@@Assets["_content/Bit.Belemetry/bit-belemetry.js"]" /&gt;</code>.
@@ -88,8 +89,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>The initializer in Routes.razor</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The initializer in Routes.razor</h3>
     <p>
         <code>&lt;BelemetryInitializer /&gt;</code> connects the script to .NET once the app is interactive:
         consent and the session flow both ways, browser records can be relayed to .NET, and the WebAssembly
@@ -99,14 +100,14 @@
     <CodeSnippet Code="@RoutesCode" Language="Razor" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Per render mode</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Per render mode</h3>
     <p>
         The setup above does not change between render modes. What changes is where .NET telemetry is
         collected and how <code>IBelemetry</code> calls travel:
     </p>
-    <div class="doc-table-wrap">
-        <table class="doc-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr>
                     <th scope="col">Render mode</th>
@@ -153,8 +154,8 @@
     <CodeSnippet Code="@StaticSsrConsentCode" Language="HTML" />
 </div>
 
-<div class="demo-section">
-    <h2>The server pipeline</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The server pipeline</h3>
     <p>
         On an ASP.NET Core host Belemetry's .NET pipeline is off by default - such hosts usually have an
         OpenTelemetry setup of their own - and the server registration only renders and serves the script.
@@ -172,8 +173,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>What this site does</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What this site does</h3>
     <p>
         This documentation site is a Blazor Web App in the InteractiveWebAssembly render mode, prerendered,
         and it is set up exactly as above: <code>AddBitBelemetryServices</code> in both projects through a
@@ -182,7 +183,7 @@
         and the server pipeline turned on. It exports OTLP/JSON to itself, and an in-process receiver
         hands each reader their own records back.
     </p>
-    <div class="callout">
+    <div class="bb-note">
         <p>
             Answer the consent banner, then open <a href="/live">Live telemetry</a>: the page views, clicks,
             web vitals and .NET logs you produce on this site arrive there within a couple of seconds, with
@@ -191,8 +192,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> API</h3>
     <ApiTable TypeName="BelemetryScript" />
     <ApiTable TypeName="BelemetryInitializer" />
     <ApiTable TypeName="BelemetryServerOptions" />
diff --git a/src/Utilities/Belemetry/Demo/Client/Routes.razor b/src/Utilities/Belemetry/Demo/Client/Routes.razor
index 4c813cacce5..5ec4acd045c 100644
--- a/src/Utilities/Belemetry/Demo/Client/Routes.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Routes.razor
@@ -1,7 +1,10 @@
-<Router AppAssembly="typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFoundPage)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the landing
+   page and the not-found page opt out with @layout MainLayout. After a navigation the page's own H1
+   takes focus, so a screen reader starts reading at the new page. *@
+<Router AppAssembly="typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h1, h2" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
 
@@ -9,3 +12,7 @@
    the app is interactive: consent and the session flow both ways, and the WebAssembly pipeline gets
    its unload flush. Placed once, here, so every page has it; it renders nothing. *@
 <BelemetryInitializer />
+
+@* The site's consent banner, on every page (see Shared/ConsentBanner.razor). The demo is opt-in
+   (Consent.Default = None), so nothing leaves the browser until it is answered. *@
+<ConsentBanner />
diff --git a/src/Utilities/Belemetry/Demo/Client/Services/DemoNoiseFilter.cs b/src/Utilities/Belemetry/Demo/Client/Services/DemoNoiseFilter.cs
index 1ebcea3d536..8e0f6dddff3 100644
--- a/src/Utilities/Belemetry/Demo/Client/Services/DemoNoiseFilter.cs
+++ b/src/Utilities/Belemetry/Demo/Client/Services/DemoNoiseFilter.cs
@@ -13,10 +13,13 @@ public sealed class DemoNoiseFilter : IBelemetryProcessor
     private static readonly string[] _noise =
     [
         .. DemoTelemetry.SelfUrls,
-        "/_framework/", "/_content/", "/_blazor", "/css/", "/js/", "/images/", "/favicon", "/icon-",
-        "/.well-known/", "/_vs/", "/browserLink",
+        "/_framework/", "/_content/", "/_blazor", "/images/", "/.well-known/", "/_vs/", "/browserLink",
     ];
 
+    // The site's stylesheets, scripts and icons sit at the root (app.css, site.js, favicon.ico, ...), and
+    // MapStaticAssets serves them under fingerprinted names, so they are told apart by their extension.
+    private static readonly string[] _staticFiles = [".css", ".js", ".map", ".svg", ".png", ".ico", ".woff2"];
+
     /// <inheritdoc />
     public bool OnSpan(BelemetrySpan span)
     {
@@ -32,6 +35,15 @@ public bool OnSpan(BelemetrySpan span)
             if (url.Contains(noise, StringComparison.OrdinalIgnoreCase)) return false;
         }
 
+        var path = url.AsSpan();
+        var end = path.IndexOfAny('?', '#');
+        if (end >= 0) path = path[..end];
+
+        foreach (var extension in _staticFiles)
+        {
+            if (path.EndsWith(extension, StringComparison.OrdinalIgnoreCase)) return false;
+        }
+
         return true;
     }
 }
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/ApiTable.razor b/src/Utilities/Belemetry/Demo/Client/Shared/ApiTable.razor
index 31140584437..6ae9dd2e59f 100644
--- a/src/Utilities/Belemetry/Demo/Client/Shared/ApiTable.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Shared/ApiTable.razor
@@ -14,37 +14,33 @@
    the persisted component state, so the table is in the served HTML and is not fetched a second time
    when the WebAssembly runtime takes over. *@
 
-<div class="api-table-wrap">
+<div class="demo-api">
     @if (_info is null)
     {
-        <p class="api-loading" role="status">
+        <p class="bb-soft demo-api-loading" role="status">
             @(_failed ? $"The reference of {TypeName} could not be loaded." : $"Loading the reference of {TypeName}...")
         </p>
     }
     else
     {
-        <p class="api-title">
+        <p class="demo-api-head">
             <code>@_info.Name</code>
-            <span class="api-kind">@_info.Kind</span>
+            <span class="bb-badge">@_info.Kind</span>
         </p>
 
         @if (string.IsNullOrWhiteSpace(_info.Summary) is false)
         {
-            <p class="api-summary">@_info.Summary</p>
+            <p class="demo-api-summary">@_info.Summary</p>
         }
 
         @if (_rows.Length > 0)
         {
-            <div class="doc-table-wrap">
-                <table class="doc-table api-table">
+            <div class="bb-scroll">
+                <table class="bb-table demo-api-table">
                     <thead>
                         <tr>
                             <th scope="col">@(_isEnum ? "Value" : "Name")</th>
-                            <th scope="col">@(_isEnum ? "Number" : "Type")</th>
-                            @if (_isEnum is false)
-                            {
-                                <th scope="col">Default</th>
-                            }
+                            <th scope="col">@(_isEnum ? "Number" : "Type and default")</th>
                             <th scope="col">Description</th>
                         </tr>
                     </thead>
@@ -60,13 +56,15 @@
                                     }
                                     else
                                     {
+                                        @* One column for both, so the description keeps the width: the docs column is
+                                           narrow enough that four would leave it a few words a line. *@
                                         <code>@member.Type</code>
+                                        @if (member.Default is not null)
+                                        {
+                                            <span class="demo-api-default">= <code>@member.Default</code></span>
+                                        }
                                     }
                                 </td>
-                                @if (_isEnum is false)
-                                {
-                                    <td>@if (member.Default is not null) { <code>@member.Default</code> }</td>
-                                }
                                 <td>@member.Summary</td>
                             </tr>
                         }
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/AppFooter.razor b/src/Utilities/Belemetry/Demo/Client/Shared/AppFooter.razor
deleted file mode 100644
index e4a0c0b1a0a..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/AppFooter.razor
+++ /dev/null
@@ -1,78 +0,0 @@
-@inject IJSRuntime JS
-
-@* The bit platform footer: who makes this, where to go next, and how to reach the team. *@
-
-<footer class="footer">
-    <section>
-        <div>
-            <div class="bit-logo" role="img" aria-label="bit platform"></div>
-            <p class="blurb">
-                Belemetry is part of bit platform &mdash; a platform that simplifies the development
-                process for freelancers and software companies through its clean project templates
-                and easy-to-use one-click build and deployment feature.
-            </p>
-        </div>
-
-        <div class="link-columns">
-            <div class="link-column">
-                <h6>Learn</h6>
-                <a href="/web-app">Get started</a>
-                <a href="/live">Live telemetry</a>
-                <a href="/consent">Consent and GDPR</a>
-                <a href="/browser">Browser instrumentation</a>
-            </div>
-
-            <div class="link-column">
-                <h6>Build</h6>
-                <a href="/otlp">OTLP</a>
-                <a href="/azure-monitor">Azure Monitor</a>
-                <a href="/configuration">Configuration</a>
-                <a href="/mcp-server">MCP server</a>
-            </div>
-
-            <div class="link-column">
-                <h6>Project</h6>
-                <a href="https://github.com/bitfoundation" target="_blank" rel="noopener noreferrer">GitHub org</a>
-                <a href="https://github.com/bitfoundation/bitplatform" target="_blank" rel="noopener noreferrer">Repository</a>
-                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
-                <button type="button" class="go-to-top" @onclick="GoToTop">
-                    <Icon Path="@Icons.ArrowUp" />
-                    Back to top
-                </button>
-            </div>
-        </div>
-    </section>
-
-    <section>
-        <div class="address-info">
-            <a class="address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
-            <div class="country">Netherlands</div>
-            <a class="tel" href="tel:+31684207362">+31 6 84207362</a>
-        </div>
-
-        <div>
-            <div class="social-link-group">
-                <a class="social-link twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
-                <a class="social-link github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
-                <a class="social-link youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
-                <a class="social-link linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
-            </div>
-            <div class="copy-right-txt">Copyright &copy; 2026 bit platform &middot; All rights reserved</div>
-        </div>
-    </section>
-</footer>
-
-@code {
-    private async Task GoToTop()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("blScrollToTop");
-        }
-        catch
-        {
-            // Scrolling back up is a convenience the page already offers through the scrollbar;
-            // if the script is unavailable there is nothing worth telling the reader about.
-        }
-    }
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/AppHeader.razor b/src/Utilities/Belemetry/Demo/Client/Shared/AppHeader.razor
deleted file mode 100644
index 6c0ec839c7b..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/AppHeader.razor
+++ /dev/null
@@ -1,127 +0,0 @@
-@inject IJSRuntime JS
-
-@* The site header: the mark, the library's name and the two top-level destinations at one end;
-   the search, the repository and the theme switch at the other.
-
-   It is the one piece of chrome the landing page and the docs share, and it adapts to which of
-   the two it is sitting on: the menu button only exists on a docs page, because the landing page
-   has no nav panel to open. *@
-
-<header class="app-header">
-    <div class="app-header-inner">
-        <div class="header-start">
-            @* Only exists on a docs page, and only at the widths where the nav panel is a drawer;
-               CSS hides it above them. *@
-            @if (IsHomePage is false)
-            {
-                <button type="button" class="icon-btn menu-btn" @onclick="OnToggleNav"
-                        aria-label="Toggle navigation" aria-controls="nav-panel"
-                        aria-expanded="@(IsNavOpen ? "true" : "false")"
-                        disabled="@IsHydrating">
-                    <Icon Path="@Icons.Menu" />
-                </button>
-            }
-
-            <a class="header-brand" href="/" aria-label="bit Belemetry home">
-                <span class="logo" aria-hidden="true"></span>
-                <span class="wordmark">Belemetry</span>
-            </a>
-
-            <span class="header-version">@Version</span>
-
-            <nav class="header-links" aria-label="Sections">
-                <a class="link@(IsHomePage ? " active" : "")" href="/"
-                   aria-current="@(IsHomePage ? "page" : null)">Home</a>
-                <a class="link@(IsHomePage ? "" : " active")" href="/web-app"
-                   aria-current="@(IsHomePage ? null : "page")">Docs</a>
-            </nav>
-        </div>
-
-        <div class="header-end">
-            @* The page is prerendered on the server, so it is visible - and inert - until the
-               WebAssembly runtime takes over. Say so instead of letting clicks silently do
-               nothing - the telemetry buttons only work once it is interactive. *@
-            @if (IsHydrating)
-            {
-                <span class="hydrating" title="Prerendered HTML - the WebAssembly runtime is still loading.">
-                    <i></i><span>loading</span>
-                </span>
-            }
-
-            @* Below the width where it has room for its label it collapses to the icon, which is
-               why the accessible name is on the button rather than only in the text inside it. *@
-            <button type="button" class="header-search" @onclick="OnOpenSearch"
-                    aria-label="Search the docs" aria-keyshortcuts="Control+K Meta+K"
-                    disabled="@IsHydrating">
-                <Icon Path="@Icons.Search" />
-                <span class="search-label">Search docs</span>
-                <span class="kbd" aria-hidden="true">@ShortcutHint</span>
-            </button>
-
-            <a class="icon-btn" target="_blank" rel="noopener noreferrer"
-               aria-label="bit Belemetry on GitHub (opens in a new tab)"
-               href="https://github.com/bitfoundation/bitplatform">
-                <span class="github-mark" aria-hidden="true"></span>
-            </a>
-
-            @* Exact complements: CSS shows the sun in the dark theme and the moon in the light
-               one, so exactly one of the pair is ever visible - including on the prerendered
-               document, which carries no data-theme attribute yet. *@
-            <button type="button" class="icon-btn dark-theme" @onclick="ToggleTheme"
-                    title="Switch to the light theme" aria-label="Switch to the light theme">
-                <Icon Path="@Icons.Sun" />
-            </button>
-            <button type="button" class="icon-btn light-theme" @onclick="ToggleTheme"
-                    title="Switch to the dark theme" aria-label="Switch to the dark theme">
-                <Icon Path="@Icons.Moon" />
-            </button>
-        </div>
-    </div>
-</header>
-
-@code {
-    /// <summary>The release the docs describe, shown next to the name.</summary>
-    private const string Version = "net8+";
-
-    /// <summary>True while the prerendered markup is on screen and the WebAssembly runtime is still loading.</summary>
-    [Parameter] public bool IsHydrating { get; set; }
-
-    /// <summary>Whether the nav drawer is currently open, for the menu button's aria-expanded.</summary>
-    [Parameter] public bool IsNavOpen { get; set; }
-
-    /// <summary>Raised by the menu button at the widths where the nav panel is a drawer.</summary>
-    [Parameter] public EventCallback OnToggleNav { get; set; }
-
-    /// <summary>Raised by the search button. The layout owns the palette, so it owns opening it.</summary>
-    [Parameter] public EventCallback OnOpenSearch { get; set; }
-
-    /// <summary>
-    /// The shortcut printed on the search button's keycap. The layout resolves it once from the
-    /// browser rather than guessing: the same physical key is Ctrl on Windows and Linux and Cmd on
-    /// a Mac, and a keycap showing the wrong one is worse than no keycap at all.
-    /// </summary>
-    [Parameter] public string ShortcutHint { get; set; } = "Ctrl K";
-
-    /// <summary>
-    /// True on the landing page. The layout owns this - it is the same flag that decides whether
-    /// the page gets the docs shell at all - so the two can never disagree about which of the
-    /// site's two faces is on screen.
-    /// </summary>
-    [Parameter] public bool IsHomePage { get; set; }
-
-    // The attribute the stylesheets key off is owned by the theme script, which also persists the
-    // choice; the component only asks it to flip. Nothing here has to know the resulting theme -
-    // the two buttons are shown and hidden by CSS.
-    private async Task ToggleTheme()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("blToggleTheme");
-        }
-        catch
-        {
-            // The theme is a preference, not a feature: if the script is missing there is nothing
-            // to report to the reader, and the page keeps working in whichever theme is applied.
-        }
-    }
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/AppNavPanel.razor b/src/Utilities/Belemetry/Demo/Client/Shared/AppNavPanel.razor
deleted file mode 100644
index ea92f3f0aa5..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/AppNavPanel.razor
+++ /dev/null
@@ -1,81 +0,0 @@
-@* The docs navigation. A sticky column beside the content on wide screens and a drawer over it on
-   narrow ones - the switch is entirely in CSS, so the same markup and the same state serve both.
-
-   The index is grouped rather than flat. Twenty entries in one run is a list to be read from the
-   top, and a reader almost always arrives wanting one of them for a reason: to set it up, to send
-   the data somewhere, to decide what is collected. The groups say which is
-   which, and they come from NavItem itself, so a page is filed once. *@
-
-<nav id="nav-panel" class="nav-panel @(IsOpen ? "open" : null)" aria-label="Documentation">
-    <div class="nav-panel-search">
-        <Icon Path="@Icons.Search" />
-        <input type="search" placeholder="Filter pages" aria-label="Filter pages"
-               value="@_filter" @oninput="OnFilterInput" disabled="@Disabled" />
-    </div>
-
-    @foreach (var group in _visibleGroups)
-    {
-        <div class="nav-group">
-            @* The icon is the group's, not the page's: a row of icons per page would be that many things
-               to look past, but a handful of marks down the left of the panel give the eye somewhere to
-               land when it is looking for the right part of the docs rather than the right page. *@
-            <p class="nav-group-title" id="@GroupId(group.Category)">
-                <Icon Path="@group.Icon" />
-                @group.Category
-            </p>
-
-            <ul class="nav-panel-list" aria-labelledby="@GroupId(group.Category)">
-                @foreach (var item in group.Items)
-                {
-                    <li>
-                        @* Match.All throughout: every href is a distinct leaf route with nothing
-                           nested under it, and prefix matching would light up a parent the moment
-                           a nested route existed. *@
-                        <NavLink href="@item.Href" Match="NavLinkMatch.All">
-                            @item.Title
-                        </NavLink>
-                    </li>
-                }
-            </ul>
-        </div>
-    }
-
-    @if (_visibleGroups.Length == 0)
-    {
-        <span class="nav-panel-empty" role="status">No page matches &ldquo;@_filter&rdquo;.</span>
-    }
-</nav>
-
-@code {
-    /// <summary>Whether the drawer is open. Ignored above the breakpoint, where the panel is always in place.</summary>
-    [Parameter] public bool IsOpen { get; set; }
-
-    /// <summary>Disables the filter box while the prerendered markup is still waiting for the runtime.</summary>
-    [Parameter] public bool Disabled { get; set; }
-
-    private string _filter = "";
-    private (string Category, string Icon, NavItem[] Items)[] _visibleGroups = NavItem.Groups;
-
-    private static string GroupId(string category)
-        => $"nav-group-{category.ToLowerInvariant().Replace(' ', '-')}";
-
-    private void OnFilterInput(ChangeEventArgs e)
-    {
-        _filter = e.Value?.ToString() ?? "";
-
-        if (_filter.Trim() is not { Length: > 0 } term)
-        {
-            _visibleGroups = NavItem.Groups;
-            return;
-        }
-
-        // A group whose every page has been filtered out is dropped rather than left as a heading
-        // over nothing - which would read as "these exist but are hidden" instead of "no match".
-        _visibleGroups =
-        [
-            .. NavItem.Groups
-                .Select(group => (group.Category, group.Icon, Items: group.Items.Where(i => i.Matches(term)).ToArray()))
-                .Where(group => group.Items.Length > 0)
-        ];
-    }
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/CodeSnippet.razor b/src/Utilities/Belemetry/Demo/Client/Shared/CodeSnippet.razor
index 370ebd87196..9e8cae03e95 100644
--- a/src/Utilities/Belemetry/Demo/Client/Shared/CodeSnippet.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Shared/CodeSnippet.razor
@@ -1,46 +1,42 @@
-@inject IJSRuntime JS
+@* A code sample: SyntaxHighlighter's tokens inside the site kit's pre.bb-code, which is what gives it the
+   site's code surface - and the copy button site.js adds to every pre.bb-code, so the snippet can be taken
+   whether or not it was opened. The token colours are in demo.css.
 
-@* The full, copy/paste-runnable source of a sample, behind a toggle.
+   A setup snippet is the content of its page and is shown as it is (Expanded). Every other one is a
+   complete, copy/paste-runnable version of the sample above it, so it waits behind the kit's quiet
+   "show the source" disclosure rather than doubling the length of the page. *@
 
-   One frame around the toolbar and the code rather than a button floating above a slab: the bar
-   is the code box's own header, so opening a snippet grows a panel instead of adding a second
-   thing to the page. The copy button is there whether or not the code is showing - a reader who
-   wants the snippet in their editor should not first have to read it here. *@
-
-<div class="code-snippet @(_show ? "open" : null)">
-    <div class="code-snippet-bar">
-        <button type="button" class="code-toggle" @onclick="Toggle"
+@if (Expanded)
+{
+    <pre class="bb-code"><code>@_html</code></pre>
+}
+else
+{
+    <div class="bb-source demo-snippet">
+        <button type="button" class="btn btn-secondary" @onclick="() => _show = !_show"
                 aria-expanded="@(_show ? "true" : "false")" aria-controls="@_bodyId">
-            <span class="code-toggle-icon">
-                <Icon Path="@Icons.ChevronRight" />
-            </span>
+            <span class="demo-snippet-caret" aria-hidden="true">@(_show ? "▾" : "▸")</span>
             @(_show ? "Hide code" : "Show code")
+            <span class="demo-snippet-lang">@Language</span>
         </button>
 
-        <span class="code-lang">@Language</span>
-
-        <button type="button" class="code-copy @(_copied ? "copied" : null)" @onclick="CopyAsync"
-                aria-label="@(_copied ? "Code copied to the clipboard" : "Copy the code to the clipboard")">
-            <Icon Path="@(_copied ? Icons.Check : Icons.Copy)" />
-            @(_copied ? "Copied" : "Copy")
-        </button>
+        @if (_show)
+        {
+            <pre class="bb-code" id="@_bodyId"><code>@_html</code></pre>
+        }
     </div>
-
-    @if (_show)
-    {
-        <pre class="code-block" id="@_bodyId"><code>@((MarkupString)SyntaxHighlighter.Highlight(Code.Trim('\n'), Language))</code></pre>
-    }
-</div>
+}
 
 @code {
     /// <summary>The full, copy/paste-runnable source snippet to display for the sample.</summary>
     [Parameter, EditorRequired] public string Code { get; set; } = "";
 
-    /// <summary>The label printed on the bar, which also picks the highlighter: "Razor" and "C#" are
-    /// tokenised, anything else (JSON, YAML, Shell, HTML) is shown as plain text.</summary>
+    /// <summary>The language, which also picks the highlighter: "Razor" and "C#" are tokenised, anything else
+    /// (JSON, YAML, Shell, HTML) is shown as plain text. Collapsed snippets print it on their toggle.</summary>
     [Parameter] public string Language { get; set; } = "Razor";
 
-    /// <summary>Whether the code starts open. Setup snippets are the content of their page, not an extra.</summary>
+    /// <summary>Whether the code is shown as it is rather than behind a toggle. Setup snippets are the content of
+    /// their page, not an extra.</summary>
     [Parameter] public bool Expanded { get; set; }
 
     // The toggle points at the block it opens, so a screen reader following aria-controls lands on
@@ -49,27 +45,16 @@
     private readonly string _bodyId = $"code-{Guid.NewGuid():N}";
 
     private bool _show;
-    private bool _copied;
-
-    protected override void OnInitialized() => _show = Expanded;
+    private string? _rendered;
+    private MarkupString _html;
 
-    private void Toggle()
+    protected override void OnParametersSet()
     {
-        _show = !_show;
-        _copied = false;
-    }
+        // Highlighting is a full lexer pass; a snippet whose source did not change keeps the markup it has.
+        var key = Language + "\u0000" + Code;
+        if (key == _rendered) return;
 
-    private async Task CopyAsync()
-    {
-        try
-        {
-            _copied = await JS.InvokeAsync<bool>("blCopyToClipboard", Code.Trim('\n'));
-        }
-        catch
-        {
-            // A clipboard the browser refuses to hand over is not something the reader can act on,
-            // and the code is on the page either way; the button simply does not confirm.
-            _copied = false;
-        }
+        _rendered = key;
+        _html = (MarkupString)SyntaxHighlighter.Highlight(Code.ReplaceLineEndings("\n").Trim('\n'), Language);
     }
 }
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/CommandPalette.razor b/src/Utilities/Belemetry/Demo/Client/Shared/CommandPalette.razor
deleted file mode 100644
index 1a19c0a6abd..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/CommandPalette.razor
+++ /dev/null
@@ -1,200 +0,0 @@
-@inject IJSRuntime JS
-@inject NavigationManager Nav
-@implements IAsyncDisposable
-
-@* Every page of the docs, one keystroke away.
-
-   It searches the same NavItem list the nav panel renders, so a page is findable here for having
-   a nav entry rather than for being added to a second index that could fall behind it - and it
-   searches each entry's keywords as well as its title, because a reader looking for "stagger" or
-   "elastic" is naming the feature, not the page it happens to live on.
-
-   The keyboard is handled in js/demo.js rather than here. A Blazor @onkeydown handler cannot
-   decide per-event whether to preventDefault, so arrow keys either scroll the palette's own list
-   twice or the typed characters never reach the input; the listener there suppresses exactly the
-   four keys this dialog owns and leaves every other key alone. *@
-
-@if (IsOpen)
-{
-    <div class="palette-backdrop" @onclick="CloseAsync"></div>
-
-    <div class="palette" role="dialog" aria-modal="true" aria-label="Search the documentation">
-        <div class="palette-field">
-            <Icon Path="@Icons.Search" />
-            <input id="palette-input" type="text" autocomplete="off" spellcheck="false"
-                   role="combobox" aria-expanded="true" aria-controls="palette-results"
-                   aria-activedescendant="@(_matches.Length > 0 ? ItemId(_active) : null)"
-                   aria-label="Search the documentation"
-                   placeholder="Search pages, features, keywords..."
-                   value="@_term" @oninput="OnInput" />
-            <button type="button" class="icon-btn" @onclick="CloseAsync" aria-label="Close search">
-                <Icon Path="@Icons.Close" />
-            </button>
-        </div>
-
-        @if (_matches.Length == 0)
-        {
-            <p class="palette-empty" role="status">No page matches &ldquo;@_term&rdquo;.</p>
-        }
-        else
-        {
-            <ul class="palette-results" id="palette-results" role="listbox" aria-label="Results">
-                @{
-                    var index = 0;
-                    string? group = null;
-                }
-                @foreach (var item in _matches)
-                {
-                    @* The results stay grouped while nothing has been typed, so an empty palette
-                       reads as the table of contents it is. Once there is a term, the ranking is
-                       what matters and the group headings would only break it up. *@
-                    if (_term.Length == 0 && item.Category != group)
-                    {
-                        group = item.Category;
-                        <li class="palette-group" role="presentation">
-                            <Icon Path="@item.Icon" />
-                            @group
-                        </li>
-                    }
-
-                    var i = index++;
-                    <li class="palette-item @(i == _active ? "active" : null)"
-                        id="@ItemId(i)" role="option" aria-selected="@(i == _active)">
-                        <a href="@item.Url" tabindex="-1" @onclick="() => GoAsync(item)" @onclick:preventDefault>
-                            <span class="palette-title">@item.Title</span>
-                            <span class="palette-desc">@item.Description</span>
-                        </a>
-                    </li>
-                }
-            </ul>
-        }
-
-        <div class="palette-footer">
-            <span><span class="kbd">&uarr;</span><span class="kbd">&darr;</span> to move</span>
-            <span><span class="kbd">Enter</span> to open</span>
-            <span><span class="kbd">Esc</span> to close</span>
-        </div>
-    </div>
-}
-
-@code {
-    /// <summary>Whether the dialog is on screen. The layout owns it, because the header opens it.</summary>
-    [Parameter] public bool IsOpen { get; set; }
-
-    /// <summary>Raised when the palette closes itself - by Escape, by the backdrop or by a result.</summary>
-    [Parameter] public EventCallback OnClose { get; set; }
-
-    private string _term = "";
-    private int _active;
-    private bool _wasOpen;
-    private NavItem[] _matches = NavItem.Docs;
-    private DotNetObjectReference<CommandPalette>? _selfRef;
-
-    private static string ItemId(int index) => $"palette-item-{index}";
-
-    protected override async Task OnParametersSetAsync()
-    {
-        if (IsOpen == _wasOpen) return;
-
-        _wasOpen = IsOpen;
-
-        if (IsOpen)
-        {
-            // A palette that reopens holding the last search would show the reader results for a
-            // question they have already answered.
-            _term = "";
-            _active = 0;
-            _matches = NavItem.Docs;
-        }
-
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-            await JS.InvokeVoidAsync("blSetPaletteOpen", IsOpen, _selfRef);
-        }
-        catch
-        {
-            // Prerendering has no JS runtime, and the palette cannot be open there anyway: it is
-            // only ever opened from a click or a key, both of which need the runtime to have
-            // booted. Without the call the dialog still works from the pointer alone.
-        }
-    }
-
-    private void OnInput(ChangeEventArgs e)
-    {
-        _term = e.Value?.ToString()?.Trim() ?? "";
-        _matches = _term.Length == 0
-            ? NavItem.Docs
-            : [.. NavItem.Docs.Where(item => item.Matches(_term))];
-
-        // The selection always lands on the first result of the new set: keeping the old index
-        // would leave it pointing at whatever now happens to be in that position.
-        _active = 0;
-    }
-
-    /// <summary>
-    /// One of the four keys the dialog owns, forwarded by the listener in js/demo.js. Anything
-    /// else never reaches here and goes to the input, which is where typing belongs.
-    /// </summary>
-    [JSInvokable]
-    public async Task OnPaletteKey(string key)
-    {
-        switch (key)
-        {
-            case "down" when _matches.Length > 0:
-                _active = (_active + 1) % _matches.Length;
-                break;
-
-            case "up" when _matches.Length > 0:
-                _active = (_active - 1 + _matches.Length) % _matches.Length;
-                break;
-
-            case "enter" when _matches.Length > 0:
-                await GoAsync(_matches[_active]);
-                return;
-
-            case "close":
-                await CloseAsync();
-                return;
-
-            default:
-                return;
-        }
-
-        StateHasChanged();
-
-        try
-        {
-            // The selection can move past either end of the visible list, and a selection nobody
-            // can see is the same as no selection at all.
-            await JS.InvokeVoidAsync("blScrollPaletteActive");
-        }
-        catch
-        {
-            // Only the scroll is lost; the selection itself is still marked in the markup.
-        }
-    }
-
-    private async Task GoAsync(NavItem item)
-    {
-        await CloseAsync();
-        Nav.NavigateTo(item.Url);
-    }
-
-    private Task CloseAsync() => OnClose.InvokeAsync();
-
-    public async ValueTask DisposeAsync()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("blSetPaletteOpen", false, null);
-        }
-        catch
-        {
-            // Disposal races the page going away, and never has a JS runtime while prerendering;
-            // the listener it would remove dies with the document either way.
-        }
-
-        _selfRef?.Dispose();
-    }
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/ConsentBanner.razor b/src/Utilities/Belemetry/Demo/Client/Shared/ConsentBanner.razor
index 34e688bc5df..83c4cb79dda 100644
--- a/src/Utilities/Belemetry/Demo/Client/Shared/ConsentBanner.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Shared/ConsentBanner.razor
@@ -12,8 +12,8 @@
 
 @if (_ready && Consent.IsDecided is false)
 {
-    <section class="consent-banner" aria-label="Telemetry consent" data-bit-belemetry-name="consent.banner">
-        <div class="consent-banner-text">
+    <section class="demo-consent-banner" aria-label="Telemetry consent" data-bit-belemetry-name="consent.banner">
+        <div class="demo-consent-banner-text">
             <strong>This site measures itself - for you to watch.</strong>
             <p>
                 bit Belemetry is demonstrating itself. With your consent, the page views, clicks, web
@@ -22,10 +22,10 @@
                 <a href="/live">Live telemetry</a> page. Choose per feature on the <a href="/consent">consent page</a>.
             </p>
         </div>
-        <div class="consent-banner-actions">
-            <button type="button" class="btn-bl" @onclick="() => SetAsync(BelemetryFeatures.All)">Accept all</button>
-            <button type="button" class="btn-bl-subtle" @onclick="() => SetAsync(BelemetryFeatures.Diagnostics)">Diagnostics only</button>
-            <button type="button" class="btn-bl-subtle" @onclick="() => SetAsync(BelemetryFeatures.None)">Reject</button>
+        <div class="demo-consent-banner-actions">
+            <button type="button" class="btn btn-primary" @onclick="() => SetAsync(BelemetryFeatures.All)">Accept all</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => SetAsync(BelemetryFeatures.Diagnostics)">Diagnostics only</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => SetAsync(BelemetryFeatures.None)">Reject</button>
         </div>
     </section>
 }
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/DocBreadcrumb.razor b/src/Utilities/Belemetry/Demo/Client/Shared/DocBreadcrumb.razor
deleted file mode 100644
index 5f7a0125e69..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/DocBreadcrumb.razor
+++ /dev/null
@@ -1,22 +0,0 @@
-@* Where in the docs the current page sits.
-
-   It earns its line only because the index is grouped: what it adds is the name of the group,
-   which is the one thing the page's own title cannot tell the reader. The group is not itself a
-   destination - there is no page listing one - so it is printed rather than linked, and only the
-   first crumb is somewhere to go. *@
-
-@if (Current is not null)
-{
-    <nav class="doc-breadcrumb" aria-label="Breadcrumb">
-        <a href="/web-app">Docs</a>
-        <Icon Path="@Icons.ChevronRight" />
-        <span>@Current.Category</span>
-        <Icon Path="@Icons.ChevronRight" />
-        <span class="current" aria-current="page">@Current.Title</span>
-    </nav>
-}
-
-@code {
-    /// <summary>The page being shown, or null on a route that is not a demo page.</summary>
-    [Parameter] public NavItem? Current { get; set; }
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/DocPager.razor b/src/Utilities/Belemetry/Demo/Client/Shared/DocPager.razor
deleted file mode 100644
index fdca0f67857..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/DocPager.razor
+++ /dev/null
@@ -1,47 +0,0 @@
-@* The pages either side of this one, at the foot of it.
-
-   The docs are written to be read in order - each page assumes the shape taught by the one before
-   it - so the end of a page should say what the next one is rather than sending the reader back
-   to the panel to work it out. Both entries come from NavItem, which is also what orders the
-   panel, so the two can never disagree about what "next" means. *@
-
-@if (_previous is not null || _next is not null)
-{
-    <nav class="doc-pager" aria-label="Page navigation">
-        @if (_previous is not null)
-        {
-            <a class="previous" href="@_previous.Url" rel="prev">
-                <span class="pager-dir">
-                    <Icon Path="@Icons.ArrowLeft" />
-                    Previous
-                </span>
-                <span class="pager-title">@_previous.Title</span>
-            </a>
-        }
-
-        @if (_next is not null)
-        {
-            @* The class, not the source order, puts this in the second column: a page with no
-               previous entry still has to leave the first column empty rather than sliding its
-               "next" into it, or the two ends of the sequence would point the same way. *@
-            <a class="next" href="@_next.Url" rel="next">
-                <span class="pager-dir">
-                    Next
-                    <Icon Path="@Icons.ArrowRight" />
-                </span>
-                <span class="pager-title">@_next.Title</span>
-            </a>
-        }
-    </nav>
-}
-
-@code {
-    /// <summary>The route being shown, relative to the app base and without its leading slash.</summary>
-    [Parameter] public string Href { get; set; } = "";
-
-    private NavItem? _previous;
-    private NavItem? _next;
-
-    protected override void OnParametersSet()
-        => (_previous, _next) = NavItem.Neighbours(Href);
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/Icon.razor b/src/Utilities/Belemetry/Demo/Client/Shared/Icon.razor
deleted file mode 100644
index c3087cf72d0..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/Icon.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@* One icon from the set in Icons.cs.
-
-   Always aria-hidden: an icon in this site is either next to its own label or inside a control
-   that carries an aria-label of its own, so announcing it a second time would only repeat the
-   button. focusable="false" is for the browsers that still put an <svg> in the tab order. *@
-
-<svg class="icon @Class" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-    @((MarkupString)Path)
-</svg>
-
-@code {
-    /// <summary>The icon's geometry: one of the constants on <see cref="Icons"/>.</summary>
-    [Parameter, EditorRequired] public string Path { get; set; } = "";
-
-    /// <summary>An extra class for the caller to size or position this instance with.</summary>
-    [Parameter] public string? Class { get; set; }
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/Icons.cs b/src/Utilities/Belemetry/Demo/Client/Shared/Icons.cs
deleted file mode 100644
index bdc3e3bded4..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/Icons.cs
+++ /dev/null
@@ -1,125 +0,0 @@
-namespace Bit.Belemetry.Demo.Client.Shared;
-
-/// <summary>
-/// The site's icon set: the inner markup of a 24×24 icon, without the <c>&lt;svg&gt;</c> element
-/// around it. <see cref="Icon"/> supplies that, along with the class the stylesheet paints them
-/// through.
-/// <para>
-/// They are drawn as strokes rather than filled outlines, at the weight Fluent's regular icons are
-/// drawn at, and they carry no colour of their own: <c>svg.icon</c> in app.css strokes them with
-/// <c>currentColor</c>, so an icon is the colour of whatever it sits inside and follows that thing
-/// through every theme, hover and disabled state without being re-authored.
-/// </para>
-/// <para>
-/// They live in C# rather than in a sprite or an icon font because the site is prerendered: markup
-/// that is part of the document costs no request, cannot arrive after the first paint, and cannot
-/// go missing behind a failed download - and an icon that fails to load in a header is a button
-/// with nothing in it.
-/// </para>
-/// </summary>
-public static class Icons
-{
-    // ── Chrome ───────────────────────────────────────────────────────────────
-
-    public const string Search = """<circle cx="11" cy="11" r="7" /><path d="m16.2 16.2 4.3 4.3" />""";
-
-    public const string Menu = """<path d="M3.5 6.5h17M3.5 12h17M3.5 17.5h17" />""";
-
-    public const string Close = """<path d="m6 6 12 12M18 6 6 18" />""";
-
-    public const string Sun = """<circle cx="12" cy="12" r="4.25" /><path d="M12 2.75v2M12 19.25v2M2.75 12h2M19.25 12h2M5.4 5.4l1.4 1.4M17.2 17.2l1.4 1.4M18.6 5.4l-1.4 1.4M6.8 17.2l-1.4 1.4" />""";
-
-    public const string Moon = """<path d="M20.4 14.3A8.6 8.6 0 0 1 9.7 3.6 8.6 8.6 0 1 0 20.4 14.3Z" />""";
-
-    public const string ChevronRight = """<path d="m9.5 5.5 6.5 6.5-6.5 6.5" />""";
-
-    public const string ArrowRight = """<path d="M3.75 12h16.5m-6.25-6.25L20.25 12l-6.25 6.25" />""";
-
-    public const string ArrowLeft = """<path d="M20.25 12H3.75m6.25-6.25L3.75 12l6.25 6.25" />""";
-
-    public const string ArrowUp = """<path d="M12 20.25V3.75M5.75 10 12 3.75 18.25 10" />""";
-
-    public const string Copy = """<rect x="9" y="9" width="11.25" height="11.25" rx="2.25" /><path d="M5.25 15H4.5a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5v.75" />""";
-
-    public const string Check = """<path d="m4.75 12.5 4.75 4.75L19.25 6.5" />""";
-
-    public const string Link = """<path d="M10 14a4.25 4.25 0 0 0 6 0l2.75-2.75a4.25 4.25 0 0 0-6-6L11.5 6.5" /><path d="M14 10a4.25 4.25 0 0 0-6 0L5.25 12.75a4.25 4.25 0 0 0 6 6L12.5 17.5" />""";
-
-    public const string Play = """<path d="M7.75 4.75 19 12 7.75 19.25Z" />""";
-
-    // ── Capabilities ─────────────────────────────────────────────────────────
-
-    /// <summary>Springs, and physics in general: a trace that overshoots and settles.</summary>
-    public const string Pulse = """<path d="M2.75 12.5h3.5l2.25-6 3.75 12 2.75-9 1.75 3h4.5" />""";
-
-    /// <summary>Keyframes: values pinned along a timeline.</summary>
-    public const string Keyframe = """<path d="M3 12h2.5M11 12h2M18.5 12H21" /><path d="M8.25 9.25 11 12l-2.75 2.75L5.5 12Z" /><path d="M15.75 9.25 18.5 12l-2.75 2.75L13 12Z" />""";
-
-    /// <summary>Gestures: a pointer over the thing it is acting on.</summary>
-    public const string Pointer = """<path d="m6.5 4.25 12 6.25-5.25 1.5-1.5 5.25Z" /><path d="m13.5 13.5 4.75 4.75" />""";
-
-    /// <summary>Drag: free movement on both axes.</summary>
-    public const string Drag = """<path d="M12 3.25v17.5M3.25 12h17.5" /><path d="m9.5 5.75 2.5-2.5 2.5 2.5M9.5 18.25l2.5 2.5 2.5-2.5M5.75 9.5l-2.5 2.5 2.5 2.5M18.25 9.5l2.5 2.5-2.5 2.5" />""";
-
-    /// <summary>Variants: named states layered over one subtree.</summary>
-    public const string Layers = """<path d="m12 3.25 8.75 4.5L12 12.25 3.25 7.75Z" /><path d="m3.25 12.5 8.75 4.5 8.75-4.5" /><path d="m3.25 16.75 8.75 4 8.75-4" />""";
-
-    /// <summary>AnimatePresence: something appearing and leaving.</summary>
-    public const string Presence = """<path d="M2.75 12S6.5 5.75 12 5.75 21.25 12 21.25 12 17.5 18.25 12 18.25 2.75 12 2.75 12Z" /><circle cx="12" cy="12" r="2.75" />""";
-
-    /// <summary>Split text: type, broken into pieces.</summary>
-    public const string Text = """<path d="M4.5 7V4.75h15V7M12 4.75V19.25M9.25 19.25h5.5" />""";
-
-    /// <summary>Layout: a frame whose parts have been rearranged.</summary>
-    public const string Layout = """<rect x="3.25" y="3.25" width="17.5" height="17.5" rx="2.25" /><path d="M3.25 9.5h17.5M9.5 20.75V9.5" />""";
-
-    /// <summary>Scroll: a viewport being moved through.</summary>
-    public const string Scroll = """<rect x="7.5" y="3.25" width="9" height="17.5" rx="4.5" /><path d="M12 7.25v3" />""";
-
-    /// <summary>The programmatic API: controls driven from code.</summary>
-    public const string Controls = """<path d="M3.5 7.5h9M16.5 7.5h4M3.5 16.5h3.5M11 16.5h9.5" /><circle cx="14.5" cy="7.5" r="2.25" /><circle cx="9" cy="16.5" r="2.25" />""";
-
-    /// <summary>Motion path: an element sent along a curve.</summary>
-    public const string Path = """<path d="M5 18.5c0-9 14-3 14-12" /><circle cx="5" cy="18.5" r="2.25" /><circle cx="19" cy="6.5" r="2.25" />""";
-
-    /// <summary>Accessibility.</summary>
-    public const string Accessibility = """<circle cx="12" cy="4.75" r="1.75" /><path d="M4.75 8.75h14.5M12 8.75v5.5m0 0-3 6.25m3-6.25 3 6.25" />""";
-
-    /// <summary>Documentation.</summary>
-    public const string Book = """<path d="M4 5.75A2.5 2.5 0 0 1 6.5 3.25h13.25V18H6.5A2.5 2.5 0 0 0 4 20.5Z" /><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18h13.25v2.75H6.5A2.5 2.5 0 0 1 4 20.5Z" />""";
-
-    /// <summary>Anything new, and anything generated.</summary>
-    public const string Sparkle = """<path d="m11 3.5 1.9 5.6 5.6 1.9-5.6 1.9-1.9 5.6-1.9-5.6-5.6-1.9 5.6-1.9Z" /><path d="M18 15.5v4M20 17.5h-4" />""";
-
-    // ── Belemetry ────────────────────────────────────────────────────────────
-
-    /// <summary>Exporters: a record leaving for somewhere else.</summary>
-    public const string Send = """<path d="M3.5 11.25 20.5 3.5l-6.75 17-3-6.75Z" /><path d="m10.75 13.75 4-4" />""";
-
-    /// <summary>Consent and privacy: a shield.</summary>
-    public const string Shield = """<path d="M12 3 4.75 5.75v5.5c0 4.6 3.1 8.2 7.25 9.75 4.15-1.55 7.25-5.15 7.25-9.75v-5.5Z" /><path d="m8.75 12 2.25 2.25 4.25-4.5" />""";
-
-    /// <summary>The browser: a window.</summary>
-    public const string Browser = """<rect x="3" y="4.5" width="18" height="15" rx="2.25" /><path d="M3 9h18M6.25 6.75h.01M8.75 6.75h.01" />""";
-
-    /// <summary>.NET code.</summary>
-    public const string Code = """<path d="m8.5 7.5-4.75 4.5 4.75 4.5M15.5 7.5l4.75 4.5-4.75 4.5M13.5 5l-3 14" />""";
-
-    /// <summary>A server rack.</summary>
-    public const string Server = """<rect x="4" y="4" width="16" height="6.5" rx="1.5" /><rect x="4" y="13.5" width="16" height="6.5" rx="1.5" /><path d="M7.5 7.25h.01M7.5 16.75h.01" />""";
-
-    /// <summary>Metrics: bars.</summary>
-    public const string Chart = """<path d="M4 20h16M7 16.5V11M12 16.5V6.5M17 16.5v-3.5" />""";
-
-    /// <summary>Errors: a warning triangle.</summary>
-    public const string Alert = """<path d="M12 4 2.75 19.5h18.5Z" /><path d="M12 10v4.5M12 17h.01" />""";
-
-    /// <summary>Offline persistence: a database cylinder.</summary>
-    public const string Database = """<ellipse cx="12" cy="6" rx="7.25" ry="2.75" /><path d="M4.75 6v12c0 1.5 3.25 2.75 7.25 2.75s7.25-1.25 7.25-2.75V6M4.75 12c0 1.5 3.25 2.75 7.25 2.75s7.25-1.25 7.25-2.75" />""";
-
-    /// <summary>A trace: spans nested in time.</summary>
-    public const string Trace = """<path d="M3.5 6h11M6.5 10.5h9M9.5 15h10M6.5 19.5h5" />""";
-
-    /// <summary>The live feed: a radio wave.</summary>
-    public const string Live = """<circle cx="12" cy="12" r="2" /><path d="M8.1 15.9a5.5 5.5 0 0 1 0-7.8M15.9 8.1a5.5 5.5 0 0 1 0 7.8M5.3 18.7a9.5 9.5 0 0 1 0-13.4M18.7 5.3a9.5 9.5 0 0 1 0 13.4" />""";
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/NavItem.cs b/src/Utilities/Belemetry/Demo/Client/Shared/NavItem.cs
deleted file mode 100644
index 2423f54ba62..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/NavItem.cs
+++ /dev/null
@@ -1,192 +0,0 @@
-namespace Bit.Belemetry.Demo.Client.Shared;
-
-/// <summary>
-/// One entry of the docs navigation. The list itself is <see cref="All"/>, and it is the site's
-/// single index: the nav panel groups it, the command palette searches it, the landing page prints
-/// it, the breadcrumb reads a page's category out of it and the pager walks it in order. A page
-/// therefore appears everywhere by having an entry here, and the five of them can never disagree
-/// about what the site contains.
-/// <para>
-/// It is also where the demo's MCP server gets the description, keywords and route it reports for
-/// a demo page in <c>GetBelemetrySourceFile</c>, which is why each entry carries them alongside the
-/// file it is implemented in. A page therefore describes itself once, and the site's search, the
-/// nav panel and an AI agent looking for a worked example all read the same words.
-/// </para>
-/// </summary>
-/// <param name="Title">The label shown in the nav panel.</param>
-/// <param name="Href">The route, relative to the app base. Empty for the landing page.</param>
-/// <param name="Category">The group this page is filed under; see <see cref="Groups"/>.</param>
-/// <param name="Description">What the page demonstrates, in one sentence.</param>
-/// <param name="Keywords">Space-separated terms the page covers, for search and the MCP index.</param>
-/// <param name="Source">The page's file name under Client/Pages, for GetBelemetrySourceFile.</param>
-public sealed record NavItem(
-    string Title,
-    string Href,
-    string Category,
-    string Description,
-    string Keywords,
-    string Source)
-{
-    /// <summary>The path the MCP server hands this page's source out under.</summary>
-    public string SourcePath => $"Demo/Client/Pages/{Source}";
-
-    /// <summary>The route as a link target, which for the landing page is the app root.</summary>
-    public string Url => Href.Length == 0 ? "/" : $"/{Href}";
-
-    /// <summary>The icon the palette and the landing page show beside this page's group.</summary>
-    public string Icon => CategoryIcon(Category);
-
-    // The group names, written out once so a typo in an entry below cannot silently invent a
-    // new group, and in the order the docs are meant to be read.
-    private const string GettingStarted = "Getting started";
-    private const string Collect = "What it collects";
-    private const string Exporters = "Exporters";
-    private const string Shape = "Shaping the data";
-    private const string Hosting = "Hosting";
-    private const string Reference = "Reference";
-
-    /// <summary>Every demo page, in the order they are meant to be read.</summary>
-    public static readonly NavItem[] All =
-    [
-        new("Home", "", GettingStarted,
-            "The landing page: what Belemetry is, the OpenTelemetry-native pitch without the OpenTelemetry packages, and the feature grid.",
-            "home landing overview introduction start opentelemetry otel features",
-            "Home.razor"),
-        new("Blazor Web App", "web-app", GettingStarted,
-            "Setting Belemetry up in a Blazor Web App: both projects, BelemetryScript in the head, BelemetryInitializer in Routes, for the Server, WebAssembly and Auto render modes and static SSR.",
-            "setup install getting started web app blazor server webassembly auto ssr static render mode belemetryscript belemetryinitializer app.razor routes.razor",
-            "WebAppPage.razor"),
-        new("Standalone WebAssembly", "wasm", GettingStarted,
-            "Setting Belemetry up in a standalone Blazor WebAssembly app: one Program.cs, BelemetryInitializer, and the optional script tag in index.html.",
-            "setup install standalone webassembly wasm index.html script tag program.cs",
-            "StandaloneWasmPage.razor"),
-        new("Blazor Hybrid", "hybrid", GettingStarted,
-            "Setting Belemetry up in MAUI, WPF and WinForms: relay transport, file persistence, and flushing on suspend.",
-            "setup install hybrid maui wpf winforms blazorwebview relay onsleep flush mobile desktop",
-            "HybridPage.razor"),
-        new("Live telemetry", "live", GettingStarted,
-            "Your own spans, logs, events and metrics, read back from the demo server's in-process OTLP receiver as you use the site.",
-            "live viewer telemetry feed spans logs events metrics session receiver otlp json realtime",
-            "LiveTelemetryPage.razor"),
-        new("Consent and GDPR", "consent", Collect,
-            "Per-feature consent: groups, opt-in by default, Global Privacy Control, the remembered choice, purge on revoke and the pending buffer - with a live consent panel.",
-            "consent gdpr privacy opt-in banner features groups diagnostics analytics monitoring gpc global privacy control revoke purge pending persist ibelemetryconsent",
-            "ConsentPage.razor"),
-        new("Browser instrumentation", "browser", Collect,
-            "Page views, interactions, web vitals, document load, resources, long tasks, fetch/XHR with traceparent, errors and console - each with a live trigger.",
-            "browser javascript page view click interaction web vitals lcp inp cls fcp ttfb document load resource long task fetch xhr traceparent error exception console trackevent trackpageview trackexception data-bit-belemetry-name data-bit-belemetry-ignore",
-            "BrowserPage.razor"),
-        new(".NET instrumentation", "dotnet", Collect,
-            "ILogger logs, ActivitySource traces and Meter metrics collected by the BCL listeners - levels, sources, sampling, temporality, buckets and the cardinality limit.",
-            "dotnet ilogger logging logs activity activitysource traces tracing sampling meter metrics counter histogram temporality cardinality buckets logging:belemetry",
-            "DotnetPage.razor"),
-        new("OTLP", "otlp", Exporters,
-            "The OTLP/HTTP exporter: protobuf or JSON, headers, per-signal endpoints, BrowserEndpoint, and the Aspire dashboard, OpenTelemetry Collector (with CORS), Grafana, Jaeger and Honeycomb.",
-            "otlp exporter opentelemetry protocol protobuf json headers endpoint browserendpoint aspire dashboard collector cors grafana tempo loki jaeger honeycomb datadog",
-            "OtlpPage.razor"),
-        new("Azure Monitor", "azure-monitor", Exporters,
-            "The native Application Insights exporter: connection string, Entra ID token provider, MaskIp and Live Metrics.",
-            "azure monitor application insights appinsights connection string entra id token maskip live metrics quickpulse track",
-            "AzureMonitorPage.razor"),
-        new("Console, in-memory and custom", "exporters", Exporters,
-            "The console exporter for development, BelemetryInMemoryExporter for tests and in-app viewers, and writing your own IBelemetryExporter.",
-            "console in-memory memory custom exporter ibelemetryexporter belemetrybatch tests viewer",
-            "ExportersPage.razor"),
-        new("Privacy", "privacy", Shape,
-            "Data minimization on both sides: query-parameter redaction, pattern scrubbing, stripped fragments, blocked attributes and the user agent.",
-            "privacy redaction redact scrub scrubbing pii email jwt card ip query string fragment blockedattributes useragent collectuseragent",
-            "PrivacyPage.razor"),
-        new("Processors", "processors", Shape,
-            "IBelemetryProcessor: enrich, rewrite or drop spans, logs and metrics on the .NET side - including the records relayed from the browser.",
-            "processor processors ibelemetryprocessor enrich filter drop tenant onspan onlog onmetric",
-            "ProcessorsPage.razor"),
-        new("Offline persistence", "persistence", Shape,
-            "Failed exports kept on the device - localStorage in the browser, files in Hybrid and on servers - and retried when the network is back.",
-            "offline persistence retry localstorage files queue maxbytes maxage retryinterval network",
-            "PersistencePage.razor"),
-        new("Server pipeline", "server-pipeline", Hosting,
-            "Server.CollectDotnetTelemetry: the server's own logs, request spans and metrics, governed by operator features rather than one user's consent.",
-            "server pipeline collectdotnettelemetry asp.net core aspnetcore request spans kestrel operator features",
-            "ServerPipelinePage.razor"),
-        new("Transport", "transport", Hosting,
-            "How browser records leave the page: Direct (fetch to the endpoints, CORS) or Relay (through .NET over JS interop, no credentials in the page).",
-            "transport direct relay cors credentials interop circuit hybrid",
-            "TransportPage.razor"),
-        new("Semantic conventions", "semantic-conventions", Reference,
-            "The attributes and events Belemetry emits - resource, page views, interactions, web vitals, fetch, errors, ILogger - and the feature bits and storage keys.",
-            "semantic conventions attributes events resource session.id url.full web_vital exception feature bits storage keys reference",
-            "SemanticConventionsPage.razor"),
-        new("Azure mapping", "azure-mapping", Reference,
-            "How every record maps onto Application Insights: envelope types, tags, properties and retries.",
-            "azure mapping application insights envelope requests dependencies exceptions pageviews custommetrics customevents traces tags ai.operation.id",
-            "AzureMappingPage.razor"),
-        new("Configuration", "configuration", Reference,
-            "Every option of BelemetryOptions and its sub-options, with types, defaults and documentation reflected from the shipped assembly.",
-            "configuration options reference belemetryoptions defaults settings all options api",
-            "ConfigurationPage.razor"),
-        new("MCP Server", "mcp-server", Reference,
-            "The demo's Model Context Protocol server: the tools, prompts and resources that let an AI agent set up and review Belemetry correctly.",
-            "mcp model context protocol ai agent llm tools prompts resources claude cursor copilot server integration generator review",
-            "McpServerPage.razor"),
-    ];
-
-    /// <summary>
-    /// The pages a reader navigates between: everything in <see cref="All"/> except the landing
-    /// page, which is not a document and is reached from the header instead.
-    /// </summary>
-    public static readonly NavItem[] Docs = [.. All.Where(item => item.Href.Length > 0)];
-
-    /// <summary>
-    /// <see cref="Docs"/> in groups, in reading order. Both the order of the groups and the order
-    /// within them come from the order of <see cref="All"/>, so re-filing a page is a one-line
-    /// edit above and nothing here has to be kept in step with it.
-    /// </summary>
-    public static readonly (string Category, string Icon, NavItem[] Items)[] Groups =
-    [
-        .. Docs.GroupBy(item => item.Category)
-               .Select(group => (group.Key, CategoryIcon(group.Key), group.ToArray()))
-    ];
-
-    /// <summary>The entry for a route, or null when the route is not a demo page.</summary>
-    public static NavItem? ByHref(string href)
-        => Array.Find(All, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase));
-
-    /// <summary>
-    /// The pages either side of <paramref name="href"/> in reading order, for the pager at the
-    /// foot of every page. Both are null for a route that is not a demo page - the error and
-    /// not-found pages, which are not part of the sequence and have nowhere to go next.
-    /// </summary>
-    public static (NavItem? Previous, NavItem? Next) Neighbours(string href)
-    {
-        var index = Array.FindIndex(Docs, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase));
-        if (index < 0) return (null, null);
-
-        return (index > 0 ? Docs[index - 1] : null,
-                index < Docs.Length - 1 ? Docs[index + 1] : null);
-    }
-
-    /// <summary>
-    /// Whether this page answers to <paramref name="term"/>. Keywords are matched as well as the
-    /// title and the category: a reader searching for "hover" or "stagger" is naming the feature,
-    /// not the page it happens to live on, and every entry carries the terms it covers.
-    /// </summary>
-    public bool Matches(string term)
-        => Title.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Category.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Keywords.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Description.Contains(term, StringComparison.OrdinalIgnoreCase);
-
-    // The one place a group is tied to a picture. Kept as a switch rather than as a field on the
-    // record so the entries above stay a list of prose, and so two pages in the same group cannot
-    // be given two different icons.
-    private static string CategoryIcon(string category) => category switch
-    {
-        GettingStarted => Icons.Play,
-        Collect => Icons.Pulse,
-        Exporters => Icons.Send,
-        Shape => Icons.Shield,
-        Hosting => Icons.Layers,
-        Reference => Icons.Book,
-        _ => Icons.Book,
-    };
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/NotFoundContent.razor b/src/Utilities/Belemetry/Demo/Client/Shared/NotFoundContent.razor
deleted file mode 100644
index 6f1895ba218..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/NotFoundContent.razor
+++ /dev/null
@@ -1,21 +0,0 @@
-@* Rendered by NotFoundPage, which covers both a deep link the server could not route and
-   client-side navigation to an unknown route (via the router's NotFoundPage parameter). *@
-
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">404</span>
-
-    <h1>This page does not exist</h1>
-
-    <p>
-        There is nothing at this address. The documentation starts at the basics, and the search
-        in the header will find any page by name or by the feature it covers.
-    </p>
-
-    <div class="hero-actions">
-        <a class="btn-primary" href="/web-app">
-            Read the docs
-            <Icon Path="@Icons.ArrowRight" />
-        </a>
-        <a class="btn-secondary" href="/">Back to home</a>
-    </div>
-</div>
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/SideRail.razor b/src/Utilities/Belemetry/Demo/Client/Shared/SideRail.razor
deleted file mode 100644
index 0da05ba9923..00000000000
--- a/src/Utilities/Belemetry/Demo/Client/Shared/SideRail.razor
+++ /dev/null
@@ -1,119 +0,0 @@
-@inject IJSRuntime JS
-@inject NavigationManager Nav
-@implements IAsyncDisposable
-
-@* The "on this page" rail. It is built from the section headings found in the rendered page rather
-   than from a list each page has to maintain, so a page gets its entries by having sections. That
-   makes it empty until after the first render; the <nav> is rendered regardless to hold the column
-   open - dropping it would let the content column stretch and then snap back a frame later - but
-   its label and entries only appear once there is something to label. *@
-
-<nav class="side-rail" aria-label="On this page">
-    @if (_items.Length > 0)
-    {
-        <p class="side-rail-title">On this page</p>
-        <ul class="side-rail-list">
-            @foreach (var item in _items)
-            {
-                var isActive = item.Id == _activeId;
-                <li class="@(isActive ? "active" : null)">
-                    <a href="@($"#{item.Id}")" aria-current="@(isActive ? "location" : null)"
-                       @onclick="() => ScrollTo(item.Id)" @onclick:preventDefault>
-                        @item.Title
-                    </a>
-                </li>
-            }
-        </ul>
-    }
-</nav>
-
-@code {
-    /// <summary>One rail entry: the id of the heading it points at and the text shown for it.</summary>
-    public sealed record RailItem(string Id, string Title);
-
-    private RailItem[] _items = [];
-    private string? _activeId;
-    private bool _needsRefresh = true;
-    private DotNetObjectReference<SideRail>? _selfRef;
-
-    protected override void OnInitialized() => Nav.LocationChanged += OnLocationChanged;
-
-    // The headings of the page just navigated away from are gone, so the rail is emptied here and
-    // rebuilt from the new page's markup on the render that follows.
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        _items = [];
-        _activeId = null;
-        _needsRefresh = true;
-        StateHasChanged();
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (_needsRefresh is false) return;
-
-        _needsRefresh = false;
-
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-
-            // The heading anchors are hung by the same pass that collects the rail's entries, so
-            // the icon has to travel out to it. Handing it over keeps Shared/Icons.cs the one
-            // place the site's icons are drawn, rather than leaving a second copy of the path
-            // data in a script that nothing would ever update alongside it.
-            var items = await JS.InvokeAsync<RailItem[]>("blCollectSections", Icons.Link);
-            if (items.Length == 0) return;
-
-            _items = items;
-            await JS.InvokeVoidAsync("blObserveSections", _selfRef, items.Select(i => i.Id));
-            StateHasChanged();
-        }
-        catch
-        {
-            // Prerendering has no DOM to read and no JS runtime to read it with, and a browser that
-            // failed to load the script has nothing to collect either. The rail is a shortcut to
-            // content that is already on the page, so in both cases it simply stays empty.
-        }
-    }
-
-    /// <summary>Called by the scroll spy in demo.js as the reader moves between sections.</summary>
-    [JSInvokable]
-    public void SetActiveSection(string? id)
-    {
-        if (_activeId == id) return;
-
-        _activeId = id;
-        StateHasChanged();
-    }
-
-    private async Task ScrollTo(string id)
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("blScrollToSection", id);
-        }
-        catch
-        {
-            // The entries are real anchors, so the browser's own fragment navigation remains as the
-            // fallback; only the smooth scroll and the header offset are lost.
-        }
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        Nav.LocationChanged -= OnLocationChanged;
-
-        try
-        {
-            await JS.InvokeVoidAsync("blDisposeSections");
-        }
-        catch
-        {
-            // Disposal races the circuit going away (and never has a JS runtime while prerendering);
-            // the listener it would remove dies with the page either way.
-        }
-
-        _selfRef?.Dispose();
-    }
-}
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/SyntaxHighlighter.cs b/src/Utilities/Belemetry/Demo/Client/Shared/SyntaxHighlighter.cs
index ff6462c01cb..6d61caa3b44 100644
--- a/src/Utilities/Belemetry/Demo/Client/Shared/SyntaxHighlighter.cs
+++ b/src/Utilities/Belemetry/Demo/Client/Shared/SyntaxHighlighter.cs
@@ -32,14 +32,16 @@ public static string Highlight(string code, string language = "Razor")
         catch { return System.Net.WebUtility.HtmlEncode(code); }
     }
 
-    /// <summary>One encoded block per line, the same shape the lexer produces, with no tokens.</summary>
+    /// <summary>One encoded span per line, the same shape the lexer produces, with no tokens.</summary>
     private static string Plain(string code)
     {
         var sb = new StringBuilder();
-        foreach (var line in code.Split('\n'))
+        var lines = code.Split('\n');
+        for (int k = 0; k < lines.Length; k++)
         {
+            if (k > 0) sb.Append('\n');
             sb.Append("<span class=\"code-line\">")
-              .Append(line.Length == 0 ? "​" : System.Net.WebUtility.HtmlEncode(line))
+              .Append(System.Net.WebUtility.HtmlEncode(lines[k]))
               .Append("</span>");
         }
         return sb.ToString();
@@ -95,14 +97,13 @@ public string Run(bool skipMarkup = false)
             for (int k = 0; k < lines.Count; k++)
             {
                 var ln = lines[k];
-                // Each line is rendered as its own block-level span. Empty lines get a
-                // zero-width space so they keep their height. Newlines are intentionally
-                // NOT emitted: the block layout provides the line breaks, and a literal
-                // '\n' next to a display:block span would render as an extra blank line.
+                // One span per line, joined by real line feeds: the <pre> breaks the lines, and the
+                // block's text is the code itself - which is what the copy button site.js adds to
+                // every pre.bb-code takes (textContent), so it must carry no extra characters.
+                if (k > 0) outSb.Append('\n');
                 var cls = ln.Hl ? "code-line hl-line" : "code-line";
                 outSb.Append("<span class=\"").Append(cls).Append("\">");
-                if (ln.Sb.Length == 0) outSb.Append("\u200b");
-                else outSb.Append(ln.Sb);
+                outSb.Append(ln.Sb);
                 outSb.Append("</span>");
             }
             return outSb.ToString();
diff --git a/src/Utilities/Belemetry/Demo/Client/Shared/TelemetryFeedView.razor b/src/Utilities/Belemetry/Demo/Client/Shared/TelemetryFeedView.razor
index cb01a52b5ca..60f0915f39c 100644
--- a/src/Utilities/Belemetry/Demo/Client/Shared/TelemetryFeedView.razor
+++ b/src/Utilities/Belemetry/Demo/Client/Shared/TelemetryFeedView.razor
@@ -16,24 +16,25 @@
 <div class="feed @(Compact ? "feed-compact" : null)">
     @if (Compact is false)
     {
-        <div class="feed-toolbar">
-            <div class="feed-chips" role="group" aria-label="Show">
+        <div class="bb-toolbar">
+            <div class="bb-segmented" role="group" aria-label="Show">
                 @foreach (var kind in _kinds)
                 {
-                    <button type="button" class="feed-chip @(_kind == kind ? "active" : null)"
+                    <button type="button" class="@(_kind == kind ? "active" : null)"
                             aria-pressed="@(_kind == kind ? "true" : "false")" @onclick="() => _kind = kind">
                         @kind <span class="feed-chip-count">@Count(kind)</span>
                     </button>
                 }
             </div>
-            <div class="feed-actions">
-                <label class="feed-toggle" title="Server metrics and logs that belong to no session, shared by every reader">
-                    <input type="checkbox" checked="@_includeShared" @onchange="OnSharedChanged" />
-                    Include server telemetry
-                </label>
-                <button type="button" class="btn-bl-subtle" @onclick="() => _paused = !_paused">@(_paused ? "Resume" : "Pause")</button>
-                <button type="button" class="btn-bl-subtle" @onclick="Clear">Clear</button>
-            </div>
+        </div>
+        <div class="bb-toolbar">
+            <label class="bb-check" title="Server metrics and logs that belong to no session, shared by every reader">
+                <input type="checkbox" checked="@_includeShared" @onchange="OnSharedChanged" />
+                Include server telemetry
+            </label>
+            <span class="bb-spacer"></span>
+            <button type="button" class="btn btn-secondary" @onclick="() => _paused = !_paused">@(_paused ? "Resume" : "Pause")</button>
+            <button type="button" class="btn btn-secondary" @onclick="Clear">Clear</button>
         </div>
     }
 
@@ -67,7 +68,7 @@
 
     @if (visible.Length == 0)
     {
-        <p class="feed-empty">@(Compact ? EmptyText : "Nothing yet. Click around the site - page views, clicks, web vitals and your .NET logs land here within a few seconds.")</p>
+        <p class="bb-empty feed-empty">@(Compact ? EmptyText : "Nothing yet. Click around the site - page views, clicks, web vitals and your .NET logs land here within a few seconds.")</p>
     }
     else
     {
@@ -87,7 +88,7 @@
                     @if (open)
                     {
                         <div class="feed-detail">
-                            <dl class="feed-ids">
+                            <dl class="bb-params feed-ids">
                                 @if (record.Scope is not null) { <dt>scope</dt><dd><code>@record.Scope</code></dd> }
                                 @if (record.TraceId is not null) { <dt>trace</dt><dd><code>@record.TraceId</code></dd> }
                                 @if (record.SpanId is not null) { <dt>span</dt><dd><code>@record.SpanId</code>@if (record.ParentSpanId is not null) { <text> &larr; </text><code>@record.ParentSpanId</code> }</dd> }
@@ -96,7 +97,7 @@
                             </dl>
                             @if (record.Attributes.Count > 0)
                             {
-                                <table class="doc-table feed-attrs">
+                                <table class="bb-table feed-attrs">
                                     <thead><tr><th scope="col">Attribute</th><th scope="col">Value</th></tr></thead>
                                     <tbody>
                                         @foreach (var (key, value) in record.Attributes.OrderBy(a => a.Key, StringComparer.Ordinal))
@@ -110,7 +111,7 @@
                             {
                                 <details class="feed-resource">
                                     <summary>Resource (@record.Resource.Count attributes)</summary>
-                                    <table class="doc-table feed-attrs">
+                                    <table class="bb-table feed-attrs">
                                         <tbody>
                                             @foreach (var (key, value) in record.Resource.OrderBy(a => a.Key, StringComparer.Ordinal))
                                             {
diff --git a/src/Utilities/Belemetry/Demo/Server/Bit.Belemetry.Demo.Server.csproj b/src/Utilities/Belemetry/Demo/Server/Bit.Belemetry.Demo.Server.csproj
index d14b6d7a53d..82edb199646 100644
--- a/src/Utilities/Belemetry/Demo/Server/Bit.Belemetry.Demo.Server.csproj
+++ b/src/Utilities/Belemetry/Demo/Server/Bit.Belemetry.Demo.Server.csproj
@@ -37,9 +37,11 @@
             <LogicalName>BelemetryDocs/%(Filename)%(Extension)</LogicalName>
         </EmbeddedResource>
 
-        <!-- Every demo page, which is also every worked example the tools can point an agent at. -->
+        <!-- Every demo page, which is also every worked example the tools can point an agent at. Not Layout\:
+             that is the site chrome every Utilities demo shares (header, docs shell, palette, footer), and it
+             says nothing about Belemetry. -->
         <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                          Exclude="..\Client\bin\**;..\Client\obj\**">
+                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**">
             <LogicalName>BelemetrySource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
         </EmbeddedResource>
 
diff --git a/src/Utilities/Belemetry/Demo/Server/Components/App.razor b/src/Utilities/Belemetry/Demo/Server/Components/App.razor
index 21dc3d0df1e..e0d786d457d 100644
--- a/src/Utilities/Belemetry/Demo/Server/Components/App.razor
+++ b/src/Utilities/Belemetry/Demo/Server/Components/App.razor
@@ -2,75 +2,64 @@
 <html lang="en">
 
 <head>
-    <base href="/" />
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#FFFFFF" />
+    <base href="/" />
     @* No static <title> here: every page supplies its own through <PageTitle>, and with
        prerendering the HeadOutlet emits a real <title> element into this head. A second,
        earlier one would win in the served HTML (browsers and crawlers take the first). *@
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="bit Belemetry - one lightweight, OpenTelemetry-native telemetry SDK for every Blazor app: page views, web vitals, errors, fetch spans, ILogger, Activity and Meter, exported over OTLP or to Azure Monitor, with per-feature GDPR consent." />
-    <meta name="color-scheme" content="light dark" />
-    @* Painted behind the browser's own chrome on the platforms that colour it. Two declarations,
-       one per scheme, so the bar matches the theme the page is actually in - the values are the
-       --bl-clr-bg-1 of each theme in theme.css, which a meta tag cannot read a variable for. *@
-    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#1F1F1F" media="(prefers-color-scheme: dark)" />
 
     @* What a link to the site looks like when it is shared. *@
     <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="bit Belemetry" />
-    <meta property="og:title" content="bit Belemetry - telemetry for every Blazor app" />
+    <meta property="og:site_name" content="Bit.Belemetry" />
+    <meta property="og:title" content="Belemetry - telemetry for every Blazor app" />
     <meta property="og:description" content="Browser and .NET telemetry for Blazor, OpenTelemetry-native without the OpenTelemetry packages: OTLP, Azure Monitor, per-feature consent." />
     <meta property="og:url" content="https://belemetry.bitplatform.dev" />
     <meta name="twitter:card" content="summary" />
 
-    <link rel="icon" href="favicon.ico" type="image/x-icon" />
-    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
-    <link rel="stylesheet" href="css/theme.css" />
-    <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="css/docs.css" />
-    <link rel="stylesheet" href="css/belemetry.css" />
-
-    @* The theme is applied here, in the head, rather than from js/demo.js at the end of the body:
-       the stylesheets key off the data-theme attribute, and setting it after the first paint would
-       show the reader a flash of the other theme. This is the same decision js/demo.js makes for
-       the app's lifetime - see window.blTheme there - kept short enough to inline. *@
-    <script>
-        (function () {
-            var stored = null;
-            try { stored = localStorage.getItem('bl-theme'); } catch (e) { /* no stored preference */ }
-            var theme = (stored === 'light' || stored === 'dark')
-                ? stored
-                : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-            document.documentElement.setAttribute('data-theme', theme);
-        })();
-    </script>
+    <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. Bit.Belemetry itself ships no stylesheet. *@
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Belemetry.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
+    @* Before any module script: an import map added after one has started loading is ignored. *@
+    <ImportMap />
 
     @* Belemetry's browser script, as early as possible: it starts before Blazor boots, so it sees the
        initial page load, the web vitals and any early error. It writes its configuration (built from
-       the options registered in Program.cs) into the page and loads _content/Bit.Belemetry/bit-belemetry.js.
-       <BelemetryInitializer /> in Routes.razor connects it to .NET once the app is interactive. *@
-    <BelemetryScript />
+       the options registered in Program.cs) into the page and loads the module. The module is given
+       its fingerprinted address - the one the import map above hands <BelemetryInitializer /> when it
+       imports the same module once the app is interactive - so the two are one module, started once.
+       <BelemetryInitializer /> in Routes.razor connects it to .NET. *@
+    <BelemetryScript Src="@Assets["_content/Bit.Belemetry/bit-belemetry.js"]" />
 
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
     @* Same render mode as the app itself, so <PageTitle> keeps working after hydration. *@
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
 </head>
 
 <body>
     @* Prerendered on the server, then hydrated by the WebAssembly runtime. The .NET half of Belemetry
-       runs in the browser from then on; the prerender pass only renders. See Layout/MainLayout.razor
-       for the RendererInfo-driven hydration hint. *@
+       runs in the browser from then on; the prerender pass only renders. *@
     <Routes @rendermode="InteractiveWebAssembly" />
 
-    <div id="blazor-error-ui">
+    <div id="blazor-error-ui" data-nosnippet>
         An unhandled error has occurred.
         <a href="." class="reload">Reload</a>
-        <span class="dismiss">&#x1F5D9;</span>
+        <span class="dismiss">&#128473;</span>
     </div>
 
-    @* Loaded before the Blazor script so the window.bl* helpers exist by the time the app boots. *@
-    <script src="js/demo.js"></script>
-    <script src="_framework/blazor.web.js"></script>
+    <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
+    @* The one helper the instrumentation pages need beyond the kit: the triggers they press. *@
+    <script src="@Assets["demo.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Belemetry/Demo/Server/Services/BelemetrySearchIndex.cs b/src/Utilities/Belemetry/Demo/Server/Services/BelemetrySearchIndex.cs
index 53abd34375c..ddb5c78c744 100644
--- a/src/Utilities/Belemetry/Demo/Server/Services/BelemetrySearchIndex.cs
+++ b/src/Utilities/Belemetry/Demo/Server/Services/BelemetrySearchIndex.cs
@@ -1,11 +1,11 @@
-using Bit.Belemetry.Demo.Client.Shared;
+using Bit.Belemetry.Demo.Client;
 using Bit.Belemetry.Demo.Server.Dtos;
 
 namespace Bit.Belemetry.Demo.Server.Services;
 
 /// <summary>
 /// One search over everything the MCP server knows - the README's sections, the demo pages (by the words
-/// <see cref="NavItem"/> describes them with), every public type of the reflected API, and the reference
+/// <see cref="DocsCatalog"/> describes them with), every public type of the reflected API, and the reference
 /// tables - each hit carrying the exact tool call that returns its full text.
 /// </summary>
 /// <remarks>
@@ -92,10 +92,10 @@ private static Entry[] Build()
                             $"GetBelemetrySourceFile(path: \"README.md#{section.Anchor}\")"));
         }
 
-        foreach (var page in NavItem.All)
+        foreach (var (page, section) in DocsCatalog.Sections.SelectMany(s => s.Pages.Select(p => (p, s.Title))).Prepend((DocsCatalog.Landing, "")))
         {
-            entries.Add(new("page", page.Title, $"{page.Keywords} {page.Category}", page.Description, page.Url,
-                            $"GetBelemetrySourceFile(path: \"{page.SourcePath}\")"));
+            entries.Add(new("page", page.Title, $"{page.Keywords} {section}".TrimEnd(), page.Description, page.Url,
+                            $"GetBelemetrySourceFile(path: \"{SiteInfo.SourcePathOf(page.PageType)}\")"));
         }
 
         foreach (var type in BelemetryApiCatalog.All)
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/app.css b/src/Utilities/Belemetry/Demo/Server/wwwroot/app.css
new file mode 100644
index 00000000000..7b51a42ea90
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/app.css
@@ -0,0 +1,2820 @@
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/app.css b/src/Utilities/Belemetry/Demo/Server/wwwroot/css/app.css
deleted file mode 100644
index 5a53602f34a..00000000000
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/app.css
+++ /dev/null
@@ -1,2017 +0,0 @@
-/* Bit.Bmotion Demo - base and site chrome.
-
-   The docs shell: the skip link, the header, the command palette, the navigation panel, the
-   reading column with its breadcrumb and pager, the "on this page" rail, the footer and the
-   landing page. Page-level styles - sections, cards, code boxes, the sample chrome - live in
-   motion-samples.css.
-
-   Everything here is written by hand against the Fluent 2 tokens in theme.css rather than built
-   from a component library, because the demo carries no dependency other than Bit.Bmotion itself:
-   that is the promise the library makes, and a docs site that had to install a design system to
-   demonstrate it would be arguing against its own point.
-
-   Two rules hold the file together:
-
-     * No raw values. A colour, a radius, a duration or a step of spacing comes from a token, so
-       the whole site re-themes from one file and nothing can drift.
-     * Chrome only. Nothing in here reaches inside .demo-card. What happens on a stage belongs to
-       the animation being demonstrated, and the shell must never be the reason a sample moves. */
-
-/* ── Base ──────────────────────────────────────────────────────────────────── */
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-* {
-    -webkit-text-size-adjust: none;
-    -webkit-font-smoothing: antialiased;
-    -webkit-tap-highlight-color: transparent;
-}
-
-html {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    scroll-behavior: smooth;
-    /* Anything the browser scrolls to - a fragment link, a control receiving focus - has to land
-       below the sticky header rather than under it. WCAG 2.2 "Focus Not Obscured (Minimum)". */
-    scroll-padding-top: calc(var(--bl-layout-header) + var(--bl-layout-header-gap));
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-}
-
-body {
-    width: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: var(--bl-fnt-family-base);
-    font-size: var(--bl-fnt-size-400);
-    line-height: var(--bl-fnt-line-prose);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-3);
-}
-
-code, kbd, pre, samp {
-    font-family: var(--bl-fnt-family-mono);
-}
-
-h1, h2, h3, h4, h5, h6, p {
-    margin: 0;
-}
-
-h1, h2, h3, h4 {
-    font-family: var(--bl-fnt-family-display);
-    /* Fluent 2 sets its display sizes tight and slightly negative-tracked; the ramp only reads as
-       a ramp if the headings keep that treatment while the prose below them does not. */
-    letter-spacing: -0.01em;
-    text-wrap: balance;
-}
-
-a {
-    color: var(--bl-clr-brand-fg);
-    text-underline-offset: 0.125em;
-}
-
-a:hover {
-    color: var(--bl-clr-brand-fg-hover);
-}
-
-a:active {
-    color: var(--bl-clr-brand-fg-pressed);
-}
-
-code {
-    color: var(--bl-clr-fg-1);
-}
-
-img, svg {
-    max-width: 100%;
-}
-
-/* Icons. One set, stroked at Fluent's regular weight and drawn in the colour of whatever it sits
-   inside, so an icon never has to be re-coloured for a theme, a hover state or a surface. The
-   geometry is authored in Shared/Icons.cs and rendered by Shared/Icon.razor; every rule that sizes
-   an icon below sets only its width and height and leaves the paint here. */
-svg.icon {
-    flex: none;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-/* Scoped to the docs chrome on purpose: a scrollbar inside .demo-card belongs to the sample being
-   demonstrated and should look like whatever that sample renders. */
-html, body, .site-content, .nav-panel, .side-rail, .palette-results, pre {
-    scrollbar-width: thin;
-    scrollbar-color: var(--bl-clr-stroke-1) transparent;
-}
-
-h1:focus, h2:focus {
-    outline: none;
-}
-
-/* Fluent 2's focus indicator: a solid two-pixel stroke in the theme's highest-contrast neutral,
-   held one step off the control so it never sits on top of the control's own border. Declared
-   once, for every focusable thing in the chrome. A sample's own focus ring is left alone - inside
-   a stage the ring belongs to whatever is being demonstrated, and a second outline over it would
-   show readers something the sample does not actually render. */
-h1:focus-visible,
-h2:focus-visible,
-.skip-link:focus-visible,
-.app-header a:focus-visible,
-.app-header button:focus-visible,
-.nav-panel a:focus-visible,
-.nav-panel button:focus-visible,
-.nav-panel input:focus-visible,
-.side-rail a:focus-visible,
-.doc-breadcrumb a:focus-visible,
-.doc-pager a:focus-visible,
-.footer a:focus-visible,
-.footer button:focus-visible,
-.homepage a:focus-visible,
-.homepage button:focus-visible,
-.palette a:focus-visible,
-.palette button:focus-visible,
-.error-page a:focus-visible {
-    outline: var(--bl-strk-thick) solid var(--bl-clr-stroke-focus);
-    outline-offset: var(--bl-strk-thick);
-    border-radius: var(--bl-crn-medium);
-}
-
-/* ── Skip link ─────────────────────────────────────────────────────────────── */
-
-/* The nav panel puts twenty-odd links between the top of the document and the first word of the
-   page. This is the way past them for anyone driving the site from the keyboard. */
-.skip-link {
-    position: fixed;
-    z-index: 2000;
-    top: var(--bl-sp-s);
-    inset-inline-start: var(--bl-sp-s);
-    padding: var(--bl-sp-s) var(--bl-sp-l);
-    font-size: var(--bl-fnt-size-300);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-300);
-    text-decoration: none;
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-radius: var(--bl-crn-medium);
-    box-shadow: var(--bl-shdw-16);
-    transform: translateY(-200%);
-}
-
-.skip-link:focus-visible {
-    transform: translateY(0);
-}
-
-/* ── Shell ─────────────────────────────────────────────────────────────────── */
-
-.app-shell {
-    width: 100%;
-    min-height: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-}
-
-.layout-row {
-    flex: 1 1 auto;
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    min-height: 0;
-}
-
-.site-content {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    background-color: var(--bl-clr-bg-3);
-}
-
-/* The reading column and the "on this page" rail sit side by side; min-width:0 is what lets a wide
-   example or a long code line scroll inside the column instead of stretching it and pushing the
-   rail off screen. */
-.page-row {
-    width: 100%;
-    flex: 1 1 auto;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: var(--bl-sp-xxl);
-    margin: 0 auto;
-    max-width: calc(var(--bl-layout-max) - var(--bl-layout-nav));
-    padding-inline: var(--bl-sp-xxxl);
-}
-
-.page-container {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: 100%;
-    max-width: var(--bl-layout-content);
-    padding: var(--bl-sp-4xl) 0 var(--bl-sp-6xl);
-}
-
-@media (max-width: 63.9375rem) {
-    .page-row {
-        padding-inline: var(--bl-sp-xxl);
-    }
-
-    .page-container {
-        padding: var(--bl-sp-xxxl) 0 var(--bl-sp-5xl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .page-row {
-        padding-inline: var(--bl-sp-l);
-    }
-
-    .page-container {
-        padding: var(--bl-sp-xxl) 0 var(--bl-sp-4xl);
-    }
-}
-
-/* ── Header ────────────────────────────────────────────────────────────────── */
-
-/* Fluent's acrylic, near enough: the header is a translucent pane over whatever is scrolling
-   underneath it, and it grows a shadow the moment there is something underneath it to lift away
-   from (js/demo.js sets data-scrolled). */
-.app-header {
-    top: 0;
-    z-index: 1000;
-    width: 100%;
-    position: sticky;
-    backdrop-filter: blur(1.25rem) saturate(1.6);
-    -webkit-backdrop-filter: blur(1.25rem) saturate(1.6);
-    background-color: color-mix(in srgb, var(--bl-clr-bg-1) 85%, transparent);
-    border-bottom: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    transition: box-shadow var(--bl-dur-normal) var(--bl-crv-easy-ease);
-}
-
-.app-header[data-scrolled="true"] {
-    box-shadow: var(--bl-shdw-4);
-}
-
-/* A browser without backdrop-filter would show the page scrolling through the bar. Paint it. */
-@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    .app-header {
-        background-color: var(--bl-clr-bg-1);
-    }
-}
-
-.app-header-inner {
-    gap: var(--bl-sp-s);
-    display: flex;
-    flex-wrap: nowrap;
-    margin-inline: auto;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--bl-layout-header);
-    max-width: var(--bl-layout-max);
-    padding-inline: var(--bl-sp-xl);
-}
-
-.header-start,
-.header-end {
-    display: flex;
-    flex: 0 1 auto;
-    min-width: 0;
-    align-items: center;
-}
-
-.header-start {
-    gap: var(--bl-sp-xs);
-}
-
-.header-end {
-    gap: var(--bl-sp-xs);
-    flex-shrink: 0;
-}
-
-/* The mark and the library's name, as one link. The name is set in the brand colour so the bar
-   states which of the bit sites this is - the mark alone is shared with all of them. */
-.header-brand {
-    gap: var(--bl-sp-mnudge);
-    display: flex;
-    flex: none;
-    align-items: center;
-    text-decoration: none;
-    padding: var(--bl-sp-xs) var(--bl-sp-s);
-    margin-inline-end: var(--bl-sp-m);
-    border-radius: var(--bl-crn-medium);
-}
-
-.header-brand .logo {
-    flex: none;
-    width: 1.75rem;
-    height: 1.75rem;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.header-brand .wordmark {
-    flex: none;
-    font-family: var(--bl-fnt-family-display);
-    font-size: var(--bl-fnt-size-500);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-500);
-    letter-spacing: -0.02em;
-    color: var(--bl-clr-fg-1);
-}
-
-.header-brand:hover .wordmark {
-    color: var(--bl-clr-brand-fg);
-}
-
-/* The release the docs describe, next to the name that describes it. */
-.header-version {
-    flex: none;
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    padding: var(--bl-sp-xxs) var(--bl-sp-snudge);
-    color: var(--bl-clr-brand-fg);
-    background-color: var(--bl-clr-brand-wash);
-    border-radius: var(--bl-crn-circular);
-}
-
-@media (max-width: 35.9375rem) {
-    .header-version {
-        display: none;
-    }
-}
-
-.header-links {
-    gap: var(--bl-sp-xxs);
-    display: flex;
-    align-items: center;
-}
-
-/* Fluent's tab treatment: the label carries the state, and a rounded indicator under the selected
-   one says where you are without a second colour or a box. */
-.header-links .link {
-    position: relative;
-    display: flex;
-    cursor: pointer;
-    white-space: nowrap;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bl-fnt-size-300);
-    font-weight: var(--bl-fnt-weight-medium);
-    line-height: var(--bl-fnt-line-300);
-    padding: var(--bl-sp-s) var(--bl-sp-m);
-    color: var(--bl-clr-fg-2);
-    border-radius: var(--bl-crn-medium);
-    transition: color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                background-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.header-links .link:hover {
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.header-links .link:active {
-    background-color: var(--bl-clr-bg-1-pressed);
-}
-
-.header-links .link.active {
-    color: var(--bl-clr-fg-1);
-    font-weight: var(--bl-fnt-weight-semibold);
-}
-
-.header-links .link.active::after {
-    content: '';
-    left: var(--bl-sp-m);
-    right: var(--bl-sp-m);
-    bottom: calc(var(--bl-sp-s) * -1);
-    height: var(--bl-strk-thicker);
-    position: absolute;
-    background-color: var(--bl-clr-brand-stroke);
-    border-radius: var(--bl-crn-circular);
-}
-
-@media (max-width: 47.9375rem) {
-    .header-links {
-        display: none;
-    }
-}
-
-/* The command palette's handle. It states its own shortcut, because a shortcut nobody can see is
-   a shortcut nobody uses. */
-.header-search {
-    gap: var(--bl-sp-s);
-    display: flex;
-    flex: 0 1 15rem;
-    min-width: 0;
-    cursor: pointer;
-    text-align: start;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    height: 2rem;
-    padding: 0 var(--bl-sp-s) 0 var(--bl-sp-mnudge);
-    margin-inline-end: var(--bl-sp-s);
-    color: var(--bl-clr-fg-3);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-bottom-color: var(--bl-clr-stroke-accessible);
-    border-radius: var(--bl-crn-medium);
-    transition: border-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                background-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.header-search:hover:not(:disabled) {
-    color: var(--bl-clr-fg-2);
-    border-color: var(--bl-clr-stroke-accessible);
-}
-
-.header-search:disabled {
-    cursor: default;
-    color: var(--bl-clr-fg-disabled);
-    background-color: var(--bl-clr-bg-disabled);
-}
-
-.header-search .search-label {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.header-search svg {
-    flex: none;
-    width: 1rem;
-    height: 1rem;
-}
-
-/* A keycap, Fluent-style: the neutral surface one step up from the control it sits in. */
-.kbd {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bl-sp-xxs);
-    font-family: var(--bl-fnt-family-base);
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-200);
-    padding: var(--bl-sp-xxs) var(--bl-sp-xs);
-    color: var(--bl-clr-fg-3);
-    background-color: var(--bl-clr-bg-4);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-small);
-}
-
-@media (max-width: 63.9375rem) {
-    .header-search {
-        flex: none;
-        width: 2rem;
-        padding: 0;
-        justify-content: center;
-    }
-
-    .header-search .search-label,
-    .header-search .kbd {
-        display: none;
-    }
-}
-
-/* Fluent's subtle icon button: no border and no fill until it is pointed at. */
-.icon-btn {
-    padding: 0;
-    flex: none;
-    width: 2rem;
-    height: 2rem;
-    cursor: pointer;
-    display: flex;
-    border: none;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    color: var(--bl-clr-fg-2);
-    border-radius: var(--bl-crn-medium);
-    transition: background-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.icon-btn:hover {
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.icon-btn:active {
-    background-color: var(--bl-clr-bg-1-pressed);
-}
-
-.icon-btn:disabled {
-    cursor: default;
-    color: var(--bl-clr-fg-disabled);
-    background-color: transparent;
-}
-
-.icon-btn svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-/* The two theme buttons are exact complements, so exactly one of the pair is visible in every
-   possible state - including the prerendered document, which carries no data-theme attribute
-   yet, and would otherwise show both or neither. */
-:root[data-theme$='dark'] .light-theme {
-    display: none;
-}
-
-:root:not([data-theme$='dark']) .dark-theme {
-    display: none;
-}
-
-:root[data-theme$='dark'] .logo,
-:root[data-theme$='dark'] .footer .bit-logo {
-    background-image: url('../images/bit-logo-dark.svg');
-}
-
-:root:not([data-theme$='dark']) .logo,
-:root:not([data-theme$='dark']) .footer .bit-logo {
-    background-image: url('../images/bit-logo-light.svg');
-}
-
-/* The nav drawer's handle. It only exists at the widths where the panel is a drawer. */
-.menu-btn {
-    display: none;
-    margin-inline-end: var(--bl-sp-xs);
-}
-
-@media (max-width: 63.9375rem) {
-    .menu-btn {
-        display: flex;
-    }
-}
-
-@media (max-width: 29.9375rem) {
-    .app-header-inner {
-        padding-inline: var(--bl-sp-s);
-    }
-}
-
-/* The narrowest phones have room for the mark, the search and the two controls, but not for the
-   name as well. The mark carries the identity there, and nowhere wider - a header that does not
-   say which site it is has given up the one job it cannot delegate. */
-@media (max-width: 22.5rem) {
-    .header-brand .wordmark {
-        display: none;
-    }
-}
-
-/* Hydration hint - rendered by MainLayout only while RendererInfo.IsInteractive is false, i.e. on
-   the prerendered HTML the server sends before the WebAssembly runtime boots. */
-.hydrating {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bl-sp-snudge);
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-200);
-    white-space: nowrap;
-    padding-inline: var(--bl-sp-s);
-    color: var(--bl-clr-fg-3);
-}
-
-.hydrating i {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: var(--bl-crn-circular);
-    background-color: var(--bl-clr-brand-bg);
-    animation: bm-hydrating-pulse 1s var(--bl-crv-easy-ease) infinite;
-}
-
-@keyframes bm-hydrating-pulse {
-    0%, 100% { opacity: 0.25; }
-    50% { opacity: 1; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .hydrating i {
-        animation: none;
-    }
-}
-
-@media (max-width: 35.9375rem) {
-    .hydrating span {
-        display: none;
-    }
-}
-
-/* ── Command palette ───────────────────────────────────────────────────────── */
-
-/* Every page of the docs, one keystroke away. It is the same NavItem list the nav panel renders,
-   so a page is searchable here for having a nav entry rather than for being added to a second
-   index that could fall behind it. */
-.palette-backdrop {
-    inset: 0;
-    z-index: 1900;
-    position: fixed;
-    background-color: var(--bl-clr-bg-overlay);
-    animation: bm-fade-in var(--bl-dur-fast) var(--bl-crv-decelerate-mid);
-}
-
-.palette {
-    top: 12vh;
-    left: 50%;
-    z-index: 2000;
-    position: fixed;
-    width: min(40rem, calc(100vw - 2rem));
-    max-height: min(28rem, 70vh);
-    display: flex;
-    flex-flow: column nowrap;
-    overflow: hidden;
-    transform: translateX(-50%);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-xlarge);
-    box-shadow: var(--bl-shdw-64);
-    animation: bl-palette-in var(--bl-dur-normal) var(--bl-crv-decelerate-mid);
-}
-
-@keyframes bm-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@keyframes bl-palette-in {
-    from { opacity: 0; transform: translate(-50%, -0.75rem) scale(0.98); }
-    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .palette-backdrop,
-    .palette {
-        animation: none;
-    }
-}
-
-.palette-field {
-    gap: var(--bl-sp-m);
-    display: flex;
-    flex: none;
-    align-items: center;
-    padding: var(--bl-sp-l) var(--bl-sp-xl);
-    border-bottom: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.palette-field svg {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--bl-clr-fg-3);
-}
-
-.palette-field input {
-    flex: 1 1 auto;
-    min-width: 0;
-    border: none;
-    outline: none;
-    background: none;
-    font-family: inherit;
-    font-size: var(--bl-fnt-size-500);
-    line-height: var(--bl-fnt-line-500);
-    color: var(--bl-clr-fg-1);
-}
-
-.palette-field input::placeholder {
-    color: var(--bl-clr-fg-3);
-}
-
-.palette-results {
-    flex: 1 1 auto;
-    min-height: 0;
-    margin: 0;
-    padding: var(--bl-sp-s);
-    list-style: none;
-    overflow: hidden auto;
-}
-
-.palette-group {
-    gap: var(--bl-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bl-clr-fg-3);
-    padding: var(--bl-sp-m) var(--bl-sp-m) var(--bl-sp-xs);
-}
-
-.palette-group svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.palette-item a {
-    display: block;
-    cursor: pointer;
-    text-decoration: none;
-    padding: var(--bl-sp-s) var(--bl-sp-m);
-    border-radius: var(--bl-crn-medium);
-    color: var(--bl-clr-fg-1);
-}
-
-.palette-item a:hover {
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-/* The keyboard's selection, which is a different thing from the pointer's hover: it has to be
-   visible without a pointer anywhere near it. */
-.palette-item.active a {
-    background-color: var(--bl-clr-brand-wash);
-    box-shadow: inset var(--bl-strk-thicker) 0 0 var(--bl-clr-brand-stroke);
-}
-
-.palette-item .palette-title {
-    display: block;
-    font-size: var(--bl-fnt-size-300);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-300);
-    color: var(--bl-clr-fg-1);
-}
-
-.palette-item .palette-desc {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-300);
-    color: var(--bl-clr-fg-3);
-}
-
-.palette-empty {
-    padding: var(--bl-sp-4xl) var(--bl-sp-xl);
-    text-align: center;
-    font-size: var(--bl-fnt-size-300);
-    color: var(--bl-clr-fg-3);
-}
-
-.palette-footer {
-    gap: var(--bl-sp-l);
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: var(--bl-sp-s) var(--bl-sp-xl);
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-200);
-    color: var(--bl-clr-fg-3);
-    background-color: var(--bl-clr-bg-2);
-    border-top: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.palette-footer span {
-    gap: var(--bl-sp-xs);
-    display: inline-flex;
-    align-items: center;
-}
-
-@media (max-width: 35.9375rem) {
-    .palette-footer {
-        display: none;
-    }
-}
-
-/* ── Nav panel ─────────────────────────────────────────────────────────────── */
-
-.nav-panel {
-    top: var(--bl-layout-header);
-    z-index: 900;
-    flex: 0 0 var(--bl-layout-nav);
-    position: sticky;
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-    padding: var(--bl-sp-l) var(--bl-sp-m) var(--bl-sp-xxxl);
-    scrollbar-width: thin;
-    background-color: var(--bl-clr-bg-1);
-    height: calc(100vh - var(--bl-layout-header));
-    border-inline-end: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.nav-panel-search {
-    position: relative;
-    margin-bottom: var(--bl-sp-l);
-}
-
-.nav-panel-search svg {
-    top: 50%;
-    width: 1rem;
-    height: 1rem;
-    position: absolute;
-    pointer-events: none;
-    inset-inline-start: var(--bl-sp-s);
-    transform: translateY(-50%);
-    color: var(--bl-clr-fg-3);
-}
-
-/* Fluent's input: a hairline box whose bottom edge is drawn in the accessible neutral, so the
-   field reads as a field even at rest, and thickens into the brand colour on focus. */
-.nav-panel-search input {
-    width: 100%;
-    outline: none;
-    height: 2rem;
-    font-family: inherit;
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    padding: 0 var(--bl-sp-s) 0 var(--bl-sp-xxl);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-bottom-color: var(--bl-clr-stroke-accessible);
-    border-radius: var(--bl-crn-medium);
-    transition: border-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.nav-panel-search input::placeholder {
-    color: var(--bl-clr-fg-3);
-}
-
-.nav-panel-search input:hover {
-    border-color: var(--bl-clr-stroke-accessible);
-}
-
-.nav-panel-search input:focus {
-    border-color: var(--bl-clr-stroke-1);
-    border-bottom-color: var(--bl-clr-brand-stroke);
-    box-shadow: inset 0 -0.0625rem 0 var(--bl-clr-brand-stroke);
-}
-
-.nav-panel-search input:disabled {
-    cursor: default;
-    color: var(--bl-clr-fg-disabled);
-    background-color: var(--bl-clr-bg-disabled);
-}
-
-/* The index is grouped rather than flat: twenty entries in one run is a list to be read from the
-   top, and the reader almost always wants one of them for a reason - to make something spring, to
-   make something leave, to make something follow the pointer. The groups say which is which. */
-.nav-group {
-    margin-bottom: var(--bl-sp-l);
-}
-
-.nav-group-title {
-    gap: var(--bl-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bl-clr-fg-3);
-    padding: var(--bl-sp-s) var(--bl-sp-m) var(--bl-sp-xs);
-}
-
-.nav-group-title svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.nav-panel-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.nav-panel-list a {
-    gap: var(--bl-sp-s);
-    display: flex;
-    position: relative;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    padding: var(--bl-sp-snudge) var(--bl-sp-m);
-    margin-bottom: var(--bl-strk-thick);
-    color: var(--bl-clr-fg-2);
-    border-radius: var(--bl-crn-medium);
-    transition: background-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.nav-panel-list a:hover {
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.nav-panel-list a:active {
-    background-color: var(--bl-clr-bg-1-pressed);
-}
-
-/* Fluent's selected nav item: a tinted row with a short rounded indicator at the inline start,
-   inset from the row's own edges so it reads as a marker rather than as a border. */
-.nav-panel-list a.active {
-    font-weight: var(--bl-fnt-weight-semibold);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.nav-panel-list a.active::before {
-    content: '';
-    top: 20%;
-    bottom: 20%;
-    position: absolute;
-    width: var(--bl-strk-thicker);
-    inset-inline-start: 0;
-    border-radius: var(--bl-crn-circular);
-    background-color: var(--bl-clr-brand-stroke);
-}
-
-.nav-panel-empty {
-    display: block;
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-prose);
-    padding: var(--bl-sp-m);
-    color: var(--bl-clr-fg-3);
-}
-
-/* Below the panel's breakpoint it becomes a drawer over the page, opened from the header's menu
-   button - the same move the "on this page" rail makes into the reader's own scrollbar. */
-.nav-panel-overlay {
-    display: none;
-}
-
-@media (max-width: 63.9375rem) {
-    /* visibility, not just the off-screen transform: a translated drawer is still focusable, so
-       without it the closed panel's search box and every nav link stay in the tab order of the
-       page they are covering. Transitioning it keeps the panel painted for the whole slide out,
-       because visibility only flips to hidden once the transform has finished. */
-    /* It opens below the header rather than over it, so the button that opened it is still on
-       screen and is also the button that closes it. A drawer that covers its own handle leaves
-       the reader guessing at the overlay. */
-    .nav-panel {
-        left: 0;
-        z-index: 1200;
-        position: fixed;
-        top: var(--bl-layout-header);
-        height: calc(100dvh - var(--bl-layout-header));
-        width: min(20rem, 85vw);
-        flex-basis: 0;
-        visibility: hidden;
-        padding-top: var(--bl-sp-xxl);
-        transform: translateX(-100%);
-        box-shadow: var(--bl-shdw-64);
-        transition: transform var(--bl-dur-normal) var(--bl-crv-decelerate-mid),
-                    visibility var(--bl-dur-normal);
-    }
-
-    .nav-panel.open {
-        visibility: visible;
-        transform: translateX(0);
-    }
-
-    .nav-panel-overlay {
-        inset: var(--bl-layout-header) 0 0 0;
-        z-index: 1100;
-        display: block;
-        border: none;
-        padding: 0;
-        position: fixed;
-        background-color: var(--bl-clr-bg-overlay);
-    }
-}
-
-/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
-
-/* Where in the docs this page sits. Worth the line only because the index is grouped: it names
-   the group, which is the piece the page's own title cannot say. */
-.doc-breadcrumb {
-    gap: var(--bl-sp-xs);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bl-sp-m);
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-300);
-    color: var(--bl-clr-fg-3);
-}
-
-.doc-breadcrumb a {
-    text-decoration: none;
-    color: var(--bl-clr-fg-3);
-    padding: var(--bl-sp-xxs) var(--bl-sp-xs);
-    border-radius: var(--bl-crn-small);
-}
-
-.doc-breadcrumb a:hover {
-    color: var(--bl-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.doc-breadcrumb svg {
-    flex: none;
-    width: 0.75rem;
-    height: 0.75rem;
-    color: var(--bl-clr-fg-4);
-}
-
-.doc-breadcrumb .current {
-    color: var(--bl-clr-fg-2);
-    padding: var(--bl-sp-xxs) var(--bl-sp-xs);
-}
-
-/* ── Pager ─────────────────────────────────────────────────────────────────── */
-
-/* The docs are written to be read in order, so the end of a page says what the next one is. It is
-   built from the same NavItem list the panel renders, so the two can never disagree. */
-.doc-pager {
-    gap: var(--bl-sp-l);
-    display: grid;
-    margin-top: var(--bl-sp-4xl);
-    padding-top: var(--bl-sp-xxl);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-top: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.doc-pager a {
-    gap: var(--bl-sp-xxs);
-    display: flex;
-    flex-flow: column nowrap;
-    text-decoration: none;
-    padding: var(--bl-sp-m) var(--bl-sp-l);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-medium);
-    transition: border-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                box-shadow var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.doc-pager a:hover {
-    border-color: var(--bl-clr-brand-stroke);
-    box-shadow: var(--bl-shdw-4);
-}
-
-.doc-pager a.next {
-    grid-column: 2;
-    text-align: end;
-}
-
-.doc-pager .pager-dir {
-    gap: var(--bl-sp-xs);
-    display: flex;
-    align-items: center;
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-200);
-    color: var(--bl-clr-fg-3);
-}
-
-.doc-pager a.next .pager-dir {
-    justify-content: flex-end;
-}
-
-.doc-pager .pager-dir svg {
-    width: 0.75rem;
-    height: 0.75rem;
-}
-
-.doc-pager .pager-title {
-    font-size: var(--bl-fnt-size-400);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-400);
-    color: var(--bl-clr-brand-fg);
-}
-
-@media (max-width: 35.9375rem) {
-    .doc-pager {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .doc-pager a.next {
-        grid-column: 1;
-    }
-}
-
-/* ── "On this page" rail ───────────────────────────────────────────────────── */
-
-/* Navigation, not content, so it only earns its space where there is space to spare. */
-.side-rail {
-    overflow: auto;
-    position: sticky;
-    height: fit-content;
-    flex: 0 0 var(--bl-layout-rail);
-    top: calc(var(--bl-layout-header) + var(--bl-sp-4xl));
-    padding-bottom: var(--bl-sp-xxxl);
-    max-height: calc(100vh - var(--bl-layout-header) - var(--bl-sp-6xl));
-}
-
-.side-rail-title {
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding: var(--bl-sp-xs) var(--bl-sp-m);
-    color: var(--bl-clr-fg-3);
-}
-
-/* The hairline is the rail's spine: it ties the entries together and, being the only rule in the
-   margin, marks the column as secondary without adding another box to the page. */
-.side-rail-list {
-    padding: 0;
-    list-style: none;
-    margin: var(--bl-sp-s) 0 0;
-    border-inline-start: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.side-rail-list li {
-    position: relative;
-    overflow-wrap: anywhere;
-}
-
-.side-rail-list a {
-    display: block;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    padding: var(--bl-sp-snudge) var(--bl-sp-m);
-    color: var(--bl-clr-fg-3);
-    transition: color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.side-rail-list a:hover {
-    color: var(--bl-clr-fg-1);
-}
-
-/* The current section: its entry takes the brand colour and some weight, and its stretch of the
-   spine lights up in the same colour - drawn as an overlay on the list's own hairline so active
-   and inactive entries keep exactly the same geometry. */
-.side-rail-list li.active::before {
-    content: '';
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    width: var(--bl-strk-thick);
-    inset-inline-start: calc(var(--bl-strk-thin) * -1);
-    border-radius: var(--bl-crn-circular);
-    background-color: var(--bl-clr-brand-stroke);
-}
-
-.side-rail-list li.active a {
-    font-weight: var(--bl-fnt-weight-semibold);
-    color: var(--bl-clr-brand-fg);
-}
-
-@media (max-width: 84.375rem) {
-    .side-rail {
-        display: none;
-    }
-}
-
-/* ── Footer ────────────────────────────────────────────────────────────────── */
-
-.footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    background-color: var(--bl-clr-bg-1);
-    border-top: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.footer section {
-    width: 100%;
-    position: relative;
-    max-width: var(--bl-layout-max);
-    padding: var(--bl-sp-6xl) var(--bl-sp-xxxl);
-}
-
-.footer section:first-child {
-    display: grid;
-    gap: var(--bl-sp-4xl);
-    align-items: start;
-    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
-}
-
-.footer section:last-child {
-    gap: var(--bl-sp-xxl);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--bl-sp-xxl) var(--bl-sp-xxxl);
-    border-top: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.footer a {
-    text-decoration: none;
-}
-
-.footer .blurb {
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-prose);
-    max-width: var(--bl-layout-measure);
-    color: var(--bl-clr-fg-3);
-}
-
-.footer .bit-logo {
-    width: 2rem;
-    height: 1.6875rem;
-    margin-bottom: var(--bl-sp-l);
-    background-size: contain;
-    background-position: left center;
-    background-repeat: no-repeat;
-}
-
-.footer .link-columns {
-    gap: var(--bl-sp-xxl);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-}
-
-.footer .link-column {
-    display: flex;
-    gap: var(--bl-sp-xs);
-    flex-flow: column nowrap;
-    align-items: flex-start;
-}
-
-.footer .link-column h6 {
-    font-size: var(--bl-fnt-size-300);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-300);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    margin-bottom: var(--bl-sp-xs);
-    color: var(--bl-clr-fg-3);
-}
-
-.footer .link-column a {
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-500);
-    color: var(--bl-clr-fg-2);
-}
-
-.footer .link-column a:hover {
-    color: var(--bl-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .go-to-top {
-    gap: var(--bl-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bl-fnt-size-300);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-300);
-    padding: var(--bl-sp-s) var(--bl-sp-m);
-    color: var(--bl-clr-fg-2);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-radius: var(--bl-crn-medium);
-    transition: background-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                border-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.footer .go-to-top:hover {
-    color: var(--bl-clr-fg-1);
-    border-color: var(--bl-clr-stroke-accessible);
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.footer .go-to-top svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.footer .address-info {
-    display: flex;
-    gap: var(--bl-sp-xxs);
-    flex-flow: column nowrap;
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-500);
-    color: var(--bl-clr-fg-3);
-}
-
-.footer .address-info .address,
-.footer .address-info .tel,
-.footer .address-info .country {
-    padding-inline-start: var(--bl-sp-xl);
-    background-repeat: no-repeat;
-    background-position-y: 0.3125rem;
-}
-
-.footer .address-info .address,
-.footer .address-info .tel {
-    color: var(--bl-clr-fg-2);
-}
-
-.footer .address-info .address:hover,
-.footer .address-info .tel:hover {
-    color: var(--bl-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .address-info .address {
-    background-image: url('../images/footer/location-icon.svg');
-}
-
-.footer .address-info .tel {
-    background-image: url('../images/footer/tel-icon.svg');
-}
-
-.footer .social-link-group {
-    gap: var(--bl-sp-m);
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-.footer .social-link {
-    cursor: pointer;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--bl-crn-circular);
-    background-color: var(--bl-clr-fg-4);
-    background-size: 1.125rem;
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: background-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                transform var(--bl-dur-faster) var(--bl-crv-decelerate-mid);
-}
-
-.footer .social-link:hover {
-    transform: translateY(-0.125rem);
-}
-
-.footer .twitter-link { background-image: url('../images/footer/twitter-icon.svg'); }
-.footer .twitter-link:hover { background-color: #1DA1F2; }
-.footer .github-link { background-image: url('../images/footer/github-icon.svg'); }
-.footer .github-link:hover { background-color: #24292F; }
-.footer .youtube-link { background-image: url('../images/footer/youtube-icon.svg'); }
-.footer .youtube-link:hover { background-color: #FF0000; }
-.footer .linkedin-link { background-image: url('../images/footer/linkedin-icon.svg'); }
-.footer .linkedin-link:hover { background-color: #0077B5; }
-
-.footer .copy-right-txt {
-    line-height: var(--bl-fnt-line-300);
-    margin-top: var(--bl-sp-m);
-    font-size: var(--bl-fnt-size-200);
-    text-align: end;
-    color: var(--bl-clr-fg-3);
-}
-
-@media (max-width: 63.9375rem) {
-    .footer section,
-    .footer section:last-child {
-        padding-inline: var(--bl-sp-xxl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .footer section {
-        padding-block: var(--bl-sp-4xl);
-    }
-
-    .footer section:first-child {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .footer section:last-child {
-        align-items: flex-start;
-        flex-flow: column nowrap;
-        justify-content: flex-start;
-    }
-
-    .footer .social-link-group {
-        justify-content: flex-start;
-    }
-
-    .footer .copy-right-txt {
-        text-align: start;
-    }
-}
-
-/* ── Landing page ──────────────────────────────────────────────────────────── */
-
-/* The landing page is not a document, so it does not get the docs' reading column: it owns the
-   full width and lays out its own sections, which alternate surfaces and are separated by the
-   same hairline the rest of the chrome uses instead of shadows. The layout renders it without the
-   nav panel and the rail entirely - see Layout/MainLayout.razor. */
-
-.site-content.home {
-    background-color: var(--bl-clr-bg-1);
-}
-
-.homepage {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-}
-
-.homepage-section {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-.homepage-section.alt-section {
-    background-color: var(--bl-clr-bg-3);
-    border-top: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-bottom: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.homepage-section-content {
-    width: 100%;
-    margin: 0 auto;
-    max-width: var(--bl-layout-max);
-    padding: var(--bl-sp-7xl) var(--bl-sp-xxxl);
-}
-
-.section-eyebrow {
-    display: block;
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    margin-bottom: var(--bl-sp-m);
-    color: var(--bl-clr-brand-fg);
-}
-
-.homepage h2 {
-    font-size: var(--bl-fnt-size-800);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-800);
-    margin-bottom: var(--bl-sp-m);
-    color: var(--bl-clr-fg-1);
-}
-
-.homepage .section-lead {
-    line-height: var(--bl-fnt-line-prose);
-    font-size: var(--bl-fnt-size-400);
-    margin-bottom: var(--bl-sp-4xl);
-    max-width: var(--bl-layout-measure);
-    color: var(--bl-clr-fg-3);
-}
-
-/* A line of prose introducing the thing directly under it, rather than the section around it. */
-.homepage .section-note {
-    line-height: var(--bl-fnt-line-prose);
-    font-size: var(--bl-fnt-size-400);
-    margin: var(--bl-sp-4xl) 0 var(--bl-sp-l);
-    color: var(--bl-clr-fg-3);
-}
-
-/* ── Landing hero ─────────────────────────────────────────────────────────── */
-
-/* What the library is on one side, what it does on the other. */
-.hero-section {
-    position: relative;
-    overflow: hidden;
-}
-
-/* A single wash of the brand behind the headline. It is the one decorative thing on the page, and
-   it is there so the hero does not read as the first card of a stack of cards. */
-.hero-section::before {
-    content: '';
-    position: absolute;
-    top: -20rem;
-    inset-inline-start: 50%;
-    width: 75rem;
-    height: 45rem;
-    pointer-events: none;
-    transform: translateX(-70%);
-    background: radial-gradient(closest-side, var(--bl-clr-brand-wash), transparent);
-}
-
-.hero-section .homepage-section-content {
-    gap: var(--bl-sp-6xl);
-    display: grid;
-    position: relative;
-    align-items: center;
-    padding-top: var(--bl-sp-6xl);
-    padding-bottom: var(--bl-sp-6xl);
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-}
-
-.hero-eyebrow {
-    gap: var(--bl-sp-s);
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: var(--bl-sp-xl);
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    padding: var(--bl-sp-xs) var(--bl-sp-m);
-    text-decoration: none;
-    color: var(--bl-clr-brand-fg);
-    background-color: var(--bl-clr-brand-wash);
-    border-radius: var(--bl-crn-circular);
-}
-
-.hero-eyebrow svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.hero-copy h1 {
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: 1.05;
-    margin-bottom: var(--bl-sp-xl);
-    letter-spacing: -0.03em;
-    font-size: clamp(2.75rem, 5.5vw, var(--bl-fnt-size-1000));
-    color: var(--bl-clr-fg-1);
-}
-
-/* The one word of the headline that is the product's name takes the brand gradient; the rest of
-   the line stays in the text colour, so the headline is still a headline rather than an object. */
-/* Solid, not a gradient. Gradient text was tried and thrown out twice: any ramp from the brand
-   blue to the accent orange passes through a desaturated middle, and the middle of this headline
-   is where the words are. Fluent does not tint type anyway - it states things in one colour, and
-   the accent orange is already carrying the animated samples further down the page. */
-.hero-copy h1 .accent {
-    color: var(--bl-clr-brand-fg);
-}
-
-.hero-lead {
-    line-height: var(--bl-fnt-line-prose);
-    font-size: var(--bl-fnt-size-500);
-    margin-bottom: var(--bl-sp-xxl);
-    max-width: 34rem;
-    color: var(--bl-clr-fg-3);
-}
-
-.hero-actions {
-    gap: var(--bl-sp-m);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bl-sp-xxl);
-}
-
-/* Fluent's primary button. */
-.btn-primary,
-.btn-secondary {
-    gap: var(--bl-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    font-family: inherit;
-    font-weight: var(--bl-fnt-weight-semibold);
-    font-size: var(--bl-fnt-size-400);
-    line-height: var(--bl-fnt-line-400);
-    text-decoration: none;
-    /* 44px tall: the minimum a finger can reliably hit. */
-    min-height: 2.75rem;
-    padding: var(--bl-sp-m) var(--bl-sp-xxl);
-    border-radius: var(--bl-crn-medium);
-    transition: background-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                border-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.btn-primary {
-    color: var(--bl-clr-brand-fg-on-bg);
-    background-color: var(--bl-clr-brand-bg);
-    border: var(--bl-strk-thin) solid transparent;
-}
-
-.btn-primary:hover {
-    color: var(--bl-clr-brand-fg-on-bg);
-    background-color: var(--bl-clr-brand-bg-hover);
-}
-
-.btn-primary:active {
-    background-color: var(--bl-clr-brand-bg-pressed);
-}
-
-/* Fluent's secondary button: the neutral surface with a hairline, not an outlined copy of the
-   primary. Two buttons in the brand colour side by side would say neither is the main one. */
-.btn-secondary {
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-}
-
-.btn-secondary:hover {
-    color: var(--bl-clr-fg-1);
-    border-color: var(--bl-clr-stroke-accessible);
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.btn-secondary:active {
-    background-color: var(--bl-clr-bg-1-pressed);
-}
-
-.btn-primary svg,
-.btn-secondary svg {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.github-mark {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    background-color: currentColor;
-    -webkit-mask: url('../images/github-mark.svg') center / contain no-repeat;
-    mask: url('../images/github-mark.svg') center / contain no-repeat;
-}
-
-/* The install line, as a thing to copy rather than a thing to read. */
-.install-line {
-    gap: var(--bl-sp-m);
-    display: flex;
-    max-width: 26rem;
-    align-items: center;
-    padding: var(--bl-sp-s) var(--bl-sp-s) var(--bl-sp-s) var(--bl-sp-l);
-    background-color: var(--bl-clr-bg-3);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-medium);
-}
-
-.install-line code {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: auto hidden;
-    white-space: nowrap;
-    font-family: var(--bl-fnt-family-mono);
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    color: var(--bl-clr-fg-1);
-}
-
-.install-line code .prompt {
-    user-select: none;
-    color: var(--bl-clr-fg-4);
-}
-
-.install-copy {
-    gap: var(--bl-sp-xs);
-    display: inline-flex;
-    flex: none;
-    cursor: pointer;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    padding: var(--bl-sp-xs) var(--bl-sp-s);
-    color: var(--bl-clr-fg-2);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-radius: var(--bl-crn-small);
-    transition: color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                border-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.install-copy:hover {
-    color: var(--bl-clr-brand-fg);
-    border-color: var(--bl-clr-brand-stroke);
-}
-
-.install-copy svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* The hero says what the library does; the stage shows it. Each tile plays its own entrance and
-   answers the pointer, so the first thing on the page is the thing the page is about. */
-.hero-stage {
-    gap: var(--bl-sp-l);
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.hero-tile {
-    gap: var(--bl-sp-xs);
-    display: flex;
-    cursor: pointer;
-    padding: var(--bl-sp-xxl);
-    text-decoration: none;
-    flex-flow: column nowrap;
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-large);
-    box-shadow: var(--bl-shdw-4);
-}
-
-.hero-tile-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--bl-sp-s);
-    color: var(--bl-clr-brand-fg);
-    background-color: var(--bl-clr-brand-wash);
-    border-radius: var(--bl-crn-medium);
-}
-
-.hero-tile-icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.hero-tile-title {
-    font-size: var(--bl-fnt-size-400);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-400);
-    color: var(--bl-clr-fg-1);
-}
-
-.hero-tile-desc {
-    line-height: var(--bl-fnt-line-300);
-    font-size: var(--bl-fnt-size-200);
-    color: var(--bl-clr-fg-3);
-}
-
-/* The quick-start sample and the code under it. Held to the width of the prose above them: one
-   80-pixel box centred in a 1200-pixel stage reads as an empty page rather than as a sample. */
-.quick-start-body {
-    max-width: 46rem;
-}
-
-/* ── Landing sections ─────────────────────────────────────────────────────── */
-
-/* The numbers that make the pitch concrete, above the prose that explains it. */
-.stat-row {
-    gap: var(--bl-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-}
-
-.stat {
-    padding: var(--bl-sp-xl);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-large);
-}
-
-.stat-value {
-    display: block;
-    font-family: var(--bl-fnt-family-display);
-    font-size: var(--bl-fnt-size-700);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-700);
-    letter-spacing: -0.02em;
-    color: var(--bl-clr-brand-fg);
-}
-
-.stat-label {
-    display: block;
-    margin-top: var(--bl-sp-xs);
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    color: var(--bl-clr-fg-3);
-}
-
-/* What is in the box: one card per capability, each a link into the demo that proves it. */
-.feature-grid {
-    gap: var(--bl-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
-}
-
-.feature-card {
-    display: block;
-    padding: var(--bl-sp-xxl);
-    text-decoration: none;
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-large);
-    transition: border-color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                box-shadow var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.feature-card:hover {
-    border-color: var(--bl-clr-brand-stroke);
-    box-shadow: var(--bl-shdw-8);
-}
-
-.feature-card-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--bl-sp-m);
-    color: var(--bl-clr-brand-fg);
-    background-color: var(--bl-clr-brand-wash);
-    border-radius: var(--bl-crn-medium);
-}
-
-.feature-card-icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.feature-card h3 {
-    font-size: var(--bl-fnt-size-500);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-500);
-    margin-bottom: var(--bl-sp-s);
-    color: var(--bl-clr-fg-1);
-}
-
-.feature-card p {
-    line-height: var(--bl-fnt-line-prose);
-    font-size: var(--bl-fnt-size-300);
-    color: var(--bl-clr-fg-3);
-}
-
-/* The full index of the docs, grouped the way the nav panel groups it - because the landing page
-   has no nav panel, and a reader who arrives at the root should be able to reach any page without
-   first having to find their way into the docs. */
-/* Columns rather than a grid: the groups are different lengths, and a grid would leave a band of
-   empty space under every short one. Multi-column flows them instead, so the block ends level. */
-.demo-index {
-    columns: 16rem 4;
-    column-gap: var(--bl-sp-4xl);
-}
-
-.demo-index-group {
-    break-inside: avoid;
-    margin-bottom: var(--bl-sp-xxl);
-}
-
-.demo-index-group h3 {
-    gap: var(--bl-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding-bottom: var(--bl-sp-s);
-    margin-bottom: var(--bl-sp-s);
-    color: var(--bl-clr-fg-3);
-    border-bottom: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.demo-index-group h3 svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--bl-clr-brand-fg);
-}
-
-.demo-index-link {
-    display: block;
-    text-decoration: none;
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    padding: var(--bl-sp-snudge) var(--bl-sp-s);
-    margin-inline-start: calc(var(--bl-sp-s) * -1);
-    color: var(--bl-clr-fg-2);
-    border-radius: var(--bl-crn-medium);
-    transition: color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                background-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.demo-index-link:hover {
-    color: var(--bl-clr-brand-fg);
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-/* The closing call to action, on the brand rather than on a neutral: it is the last thing on the
-   page and the only place the site asks for something. */
-.cta-section .homepage-section-content {
-    text-align: center;
-}
-
-.cta-section .hero-actions {
-    margin-bottom: 0;
-    justify-content: center;
-}
-
-.cta-section .section-lead {
-    margin-inline: auto;
-}
-
-@media (max-width: 63.9375rem) {
-    .homepage-section-content {
-        padding: var(--bl-sp-6xl) var(--bl-sp-xxl);
-    }
-
-    .hero-section .homepage-section-content {
-        gap: var(--bl-sp-4xl);
-        padding-top: var(--bl-sp-4xl);
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .homepage-section-content {
-        padding: var(--bl-sp-4xl) var(--bl-sp-l);
-    }
-
-    .homepage h2 {
-        font-size: var(--bl-fnt-size-700);
-        line-height: var(--bl-fnt-line-700);
-    }
-
-    .hero-stage {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .hero-actions .btn-primary,
-    .hero-actions .btn-secondary {
-        flex: 1 1 12rem;
-    }
-}
-
-/* ── Error and not-found pages ─────────────────────────────────────────────── */
-
-.error-page {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    flex-flow: column nowrap;
-    padding: var(--bl-sp-7xl) 0 var(--bl-sp-6xl);
-}
-
-.error-page .error-code {
-    font-family: var(--bl-fnt-family-display);
-    font-size: var(--bl-fnt-size-1000);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.03em;
-    color: var(--bl-clr-brand-fg);
-}
-
-.error-page h1 {
-    font-size: var(--bl-fnt-size-800);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-800);
-    margin: var(--bl-sp-l) 0 var(--bl-sp-m);
-    color: var(--bl-clr-fg-1);
-}
-
-.error-page p {
-    max-width: 34rem;
-    font-size: var(--bl-fnt-size-400);
-    line-height: var(--bl-fnt-line-prose);
-    margin-bottom: var(--bl-sp-xxl);
-    color: var(--bl-clr-fg-3);
-}
-
-.error-page .hero-actions {
-    justify-content: center;
-    margin-bottom: 0;
-}
-
-/* ── Blazor error UI ───────────────────────────────────────────────────────── */
-
-#blazor-error-ui {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    display: none;
-    position: fixed;
-    z-index: 1500;
-    font-size: var(--bl-fnt-size-300);
-    padding: var(--bl-sp-m) var(--bl-sp-4xl) var(--bl-sp-m) var(--bl-sp-xl);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-5);
-    border-top: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    box-shadow: var(--bl-shdw-16);
-}
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: var(--bl-sp-m);
-    top: var(--bl-sp-s);
-}
-
-.blazor-error-boundary {
-    padding: var(--bl-sp-l);
-    color: #FFFFFF;
-    background: #B32121;
-    border-radius: var(--bl-crn-medium);
-}
-
-.blazor-error-boundary::after {
-    content: "An error has occurred."
-}
-
-/* No .loading-progress rules here on purpose: the app is prerendered, so the first paint is the
-   real page rather than a boot spinner. The header shows a "loading" hint while the WebAssembly
-   runtime downloads - see .hydrating above. */
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/belemetry.css b/src/Utilities/Belemetry/Demo/Server/wwwroot/css/belemetry.css
deleted file mode 100644
index 37fe01b7033..00000000000
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/belemetry.css
+++ /dev/null
@@ -1,496 +0,0 @@
-/* Bit.Belemetry Demo - the pieces that are specific to a telemetry library's docs: reference tables,
-   callouts, the consent banner and consent panel, and the live telemetry feed. Written against the
-   Fluent 2 tokens in theme.css, like app.css and docs.css. */
-
-/* ── Buttons ───────────────────────────────────────────────────────────────── */
-
-/* Fluent's secondary button: the "other" action beside a .btn-bl, or a control on a toolbar. */
-.btn-bl-subtle {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--bl-sp-s);
-    font-family: inherit;
-    font-weight: var(--bl-fnt-weight-semibold);
-    font-size: var(--bl-fnt-size-300);
-    line-height: var(--bl-fnt-line-300);
-    min-height: 2rem;
-    padding: var(--bl-sp-xs) var(--bl-sp-m);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-radius: var(--bl-crn-medium);
-    transition: background-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.btn-bl-subtle:hover {
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.btn-bl-subtle:active {
-    background-color: var(--bl-clr-bg-1-pressed);
-}
-
-.btn-bl-subtle:disabled {
-    cursor: default;
-    color: var(--bl-clr-fg-disabled);
-    background-color: var(--bl-clr-bg-disabled);
-}
-
-.btn-bl-subtle:focus-visible {
-    outline: var(--bl-strk-thick) solid var(--bl-clr-stroke-focus);
-    outline-offset: var(--bl-strk-thick);
-}
-
-.btn-bl-danger {
-    color: #fff;
-    background-color: #c50f1f;
-}
-
-.btn-bl-danger:hover {
-    background-color: #b10e1c;
-}
-
-/* ── Reference tables ──────────────────────────────────────────────────────── */
-
-/* Wide tables scroll inside their own frame instead of pushing the reading column sideways. */
-.doc-table-wrap {
-    overflow-x: auto;
-    margin-top: var(--bl-sp-l);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-large);
-}
-
-.doc-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-300);
-}
-
-.doc-table th,
-.doc-table td {
-    text-align: start;
-    vertical-align: top;
-    padding: var(--bl-sp-s) var(--bl-sp-m);
-    border-bottom: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.doc-table th {
-    font-weight: var(--bl-fnt-weight-semibold);
-    color: var(--bl-clr-fg-2);
-    background-color: var(--bl-clr-bg-2);
-    white-space: nowrap;
-}
-
-.doc-table tbody tr:last-child td {
-    border-bottom: none;
-}
-
-.doc-table code {
-    word-break: break-word;
-}
-
-.api-table-wrap {
-    margin-top: var(--bl-sp-l);
-}
-
-.api-title {
-    display: flex;
-    gap: var(--bl-sp-s);
-    align-items: baseline;
-    margin: 0;
-}
-
-.api-kind {
-    font-size: var(--bl-fnt-size-200);
-    color: var(--bl-clr-fg-3);
-}
-
-.api-summary,
-.api-loading {
-    margin: var(--bl-sp-xs) 0 0;
-    color: var(--bl-clr-fg-2);
-}
-
-/* ── Callouts ──────────────────────────────────────────────────────────────── */
-
-.callout {
-    margin-top: var(--bl-sp-l);
-    padding: var(--bl-sp-m) var(--bl-sp-l);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-brand-wash);
-    border-inline-start: var(--bl-strk-thicker) solid var(--bl-clr-brand-stroke);
-    border-radius: var(--bl-crn-medium);
-}
-
-.callout.warn {
-    background-color: color-mix(in srgb, #f7630c 10%, transparent);
-    border-inline-start-color: #f7630c;
-}
-
-.callout > :first-child {
-    margin-top: 0;
-}
-
-.callout > :last-child {
-    margin-bottom: 0;
-}
-
-/* ── Live state ────────────────────────────────────────────────────────────── */
-
-/* An on/off reading: a granted feature, an enabled instrumentation. */
-.state-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bl-sp-xs);
-    padding: 0 var(--bl-sp-s);
-    font-size: var(--bl-fnt-size-200);
-    font-weight: var(--bl-fnt-weight-semibold);
-    border-radius: var(--bl-crn-circular);
-    color: var(--bl-clr-fg-3);
-    background-color: var(--bl-clr-bg-3);
-}
-
-.state-pill.on {
-    color: #0e700e;
-    background-color: color-mix(in srgb, #107c10 14%, transparent);
-}
-
-[data-theme="dark"] .state-pill.on {
-    color: #54b054;
-}
-
-.kv {
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    gap: var(--bl-sp-xs) var(--bl-sp-l);
-    margin: var(--bl-sp-m) 0 0;
-    font-size: var(--bl-fnt-size-200);
-}
-
-.kv dt {
-    color: var(--bl-clr-fg-3);
-}
-
-.kv dd {
-    margin: 0;
-    word-break: break-all;
-}
-
-/* The per-feature consent panel: one row per feature bit. */
-.consent-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-    gap: var(--bl-sp-s);
-    width: 100%;
-}
-
-.consent-feature {
-    display: flex;
-    gap: var(--bl-sp-s);
-    align-items: flex-start;
-    padding: var(--bl-sp-s) var(--bl-sp-m);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-medium);
-    cursor: pointer;
-}
-
-.consent-feature input {
-    margin-top: 0.25rem;
-}
-
-.consent-feature small {
-    display: block;
-    color: var(--bl-clr-fg-3);
-}
-
-/* ── Consent banner ────────────────────────────────────────────────────────── */
-
-.consent-banner {
-    position: fixed;
-    z-index: 40;
-    inset-inline: var(--bl-sp-l);
-    bottom: var(--bl-sp-l);
-    margin-inline: auto;
-    max-width: 56rem;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bl-sp-l);
-    align-items: center;
-    padding: var(--bl-sp-l) var(--bl-sp-xl);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-radius: var(--bl-crn-xlarge);
-    box-shadow: var(--bl-shdw-28);
-}
-
-.consent-banner-text {
-    flex: 1 1 22rem;
-}
-
-.consent-banner-text p {
-    margin: var(--bl-sp-xs) 0 0;
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-300);
-    color: var(--bl-clr-fg-2);
-}
-
-.consent-banner-text a {
-    color: var(--bl-clr-brand-fg);
-}
-
-.consent-banner-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bl-sp-s);
-}
-
-/* ── Live telemetry feed ───────────────────────────────────────────────────── */
-
-.feed {
-    width: 100%;
-    margin-top: var(--bl-sp-l);
-}
-
-.feed-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bl-sp-m);
-    align-items: center;
-    justify-content: space-between;
-}
-
-.feed-chips,
-.feed-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bl-sp-xs);
-    align-items: center;
-}
-
-.feed-chip {
-    cursor: pointer;
-    font: inherit;
-    font-size: var(--bl-fnt-size-200);
-    padding: var(--bl-sp-xxs) var(--bl-sp-m);
-    color: var(--bl-clr-fg-2);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-1);
-    border-radius: var(--bl-crn-circular);
-}
-
-.feed-chip.active {
-    color: var(--bl-clr-brand-fg-on-bg);
-    background-color: var(--bl-clr-brand-bg);
-    border-color: transparent;
-}
-
-.feed-chip-count {
-    opacity: 0.75;
-    margin-inline-start: var(--bl-sp-xxs);
-}
-
-.feed-toggle {
-    display: inline-flex;
-    gap: var(--bl-sp-xs);
-    align-items: center;
-    font-size: var(--bl-fnt-size-200);
-    color: var(--bl-clr-fg-2);
-}
-
-.feed-status {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bl-sp-s) var(--bl-sp-m);
-    align-items: center;
-    margin-top: var(--bl-sp-m);
-    font-size: var(--bl-fnt-size-200);
-    color: var(--bl-clr-fg-2);
-}
-
-.feed-dot {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    background-color: #107c10;
-    animation: feed-pulse 1.6s ease-in-out infinite;
-}
-
-.feed-dot.paused {
-    animation: none;
-    background-color: var(--bl-clr-fg-3);
-}
-
-@keyframes feed-pulse {
-    50% { opacity: 0.35; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .feed-dot { animation: none; }
-}
-
-.feed-warn {
-    color: #bc4b09;
-}
-
-[data-theme="dark"] .feed-warn {
-    color: #faa06b;
-}
-
-.feed-empty {
-    margin-top: var(--bl-sp-m);
-    color: var(--bl-clr-fg-3);
-    font-size: var(--bl-fnt-size-200);
-}
-
-.feed-list {
-    list-style: none;
-    margin: var(--bl-sp-m) 0 0;
-    padding: 0;
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-large);
-    overflow: hidden;
-    background-color: var(--bl-clr-bg-1);
-}
-
-.feed-row + .feed-row {
-    border-top: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.feed-row-head {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 6.5rem 4.25rem 3.5rem minmax(0, 1fr) auto;
-    gap: var(--bl-sp-s);
-    align-items: center;
-    padding: var(--bl-sp-xs) var(--bl-sp-m);
-    font: inherit;
-    font-size: var(--bl-fnt-size-200);
-    text-align: start;
-    color: var(--bl-clr-fg-1);
-    background: none;
-    border: none;
-    cursor: pointer;
-}
-
-.feed-row-head:hover {
-    background-color: var(--bl-clr-bg-1-hover);
-}
-
-.feed-row-head:focus-visible {
-    outline: var(--bl-strk-thick) solid var(--bl-clr-stroke-focus);
-    outline-offset: calc(-1 * var(--bl-strk-thick));
-}
-
-.feed-time {
-    font-family: var(--bl-fnt-family-mono);
-    color: var(--bl-clr-fg-3);
-}
-
-.feed-source {
-    font-size: 0.6875rem;
-    font-weight: var(--bl-fnt-weight-semibold);
-    text-transform: uppercase;
-    text-align: center;
-    padding: 0 var(--bl-sp-xs);
-    border-radius: var(--bl-crn-small);
-    color: var(--bl-clr-fg-2);
-    background-color: var(--bl-clr-bg-3);
-}
-
-.feed-source.src-browser { color: #0f6cbd; background-color: color-mix(in srgb, #0f6cbd 12%, transparent); }
-.feed-source.src-wasm { color: #8a3bc4; background-color: color-mix(in srgb, #8a3bc4 12%, transparent); }
-.feed-source.src-server { color: #0e700e; background-color: color-mix(in srgb, #107c10 12%, transparent); }
-
-[data-theme="dark"] .feed-source.src-browser { color: #62abf5; }
-[data-theme="dark"] .feed-source.src-wasm { color: #c595f0; }
-[data-theme="dark"] .feed-source.src-server { color: #54b054; }
-
-.feed-kind {
-    font-weight: var(--bl-fnt-weight-semibold);
-    color: var(--bl-clr-fg-2);
-}
-
-.kind-error .feed-kind { color: #c50f1f; }
-.kind-event .feed-kind { color: #0f6cbd; }
-.kind-metric .feed-kind { color: #8a3bc4; }
-
-[data-theme="dark"] .kind-error .feed-kind { color: #f1707b; }
-[data-theme="dark"] .kind-event .feed-kind { color: #62abf5; }
-[data-theme="dark"] .kind-metric .feed-kind { color: #c595f0; }
-
-.feed-name {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-family: var(--bl-fnt-family-mono);
-}
-
-.feed-meta {
-    color: var(--bl-clr-fg-3);
-    white-space: nowrap;
-}
-
-.feed-detail {
-    padding: var(--bl-sp-s) var(--bl-sp-m) var(--bl-sp-m);
-    background-color: var(--bl-clr-bg-2);
-}
-
-.feed-ids {
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    gap: var(--bl-sp-xxs) var(--bl-sp-m);
-    margin: 0;
-    font-size: var(--bl-fnt-size-200);
-}
-
-.feed-ids dt {
-    color: var(--bl-clr-fg-3);
-}
-
-.feed-ids dd {
-    margin: 0;
-    word-break: break-all;
-}
-
-.feed-attrs {
-    margin-top: var(--bl-sp-s);
-}
-
-.feed-attrs td:first-child {
-    width: 35%;
-}
-
-.feed-attrs td {
-    word-break: break-all;
-}
-
-.feed-resource {
-    margin-top: var(--bl-sp-s);
-    font-size: var(--bl-fnt-size-200);
-}
-
-.feed-resource summary {
-    cursor: pointer;
-    color: var(--bl-clr-fg-2);
-}
-
-.feed-compact .feed-list {
-    max-height: 22rem;
-    overflow-y: auto;
-}
-
-@media (max-width: 40rem) {
-    .feed-row-head {
-        grid-template-columns: 4.25rem 3.5rem minmax(0, 1fr);
-    }
-
-    .feed-time,
-    .feed-meta {
-        display: none;
-    }
-}
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/docs.css b/src/Utilities/Belemetry/Demo/Server/wwwroot/css/docs.css
deleted file mode 100644
index b090e8cc5e3..00000000000
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/docs.css
+++ /dev/null
@@ -1,515 +0,0 @@
-/* Bit.Bmotion Demo - page chrome and sample styles.
-
-   Everything a demo page draws inside the reading column: its title and lead, the section cards,
-   the stage a sample is played on, the code boxes and the shared sample primitives. The tokens
-   these are written against live in theme.css, and the shell around them in app.css.
-
-   Individual pages add their own <style> blocks for sample-specific pieces. Those blocks reach for
-   the --bl-* custom properties defined in theme.css, so they follow the theme without knowing
-   anything about it - and nothing in this file may assume anything about what they contain.
-
-   The line this file will not cross: it styles the frame around a sample, never the sample. Once
-   the eye is inside a .demo-card, every pixel belongs to the animation being demonstrated. */
-
-/* ── Page title and lead ───────────────────────────────────────────────────── */
-
-/* Every page opens the same way: a title, then a paragraph of prose - not another frame. */
-.page-container > h1 {
-    font-family: var(--bl-fnt-family-display);
-    font-size: var(--bl-fnt-size-900);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-900);
-    letter-spacing: -0.03em;
-    margin-bottom: var(--bl-sp-l);
-    overflow-wrap: anywhere;
-    text-wrap: balance;
-    color: var(--bl-clr-fg-1);
-}
-
-/* The lead is set one step up the ramp from the body of the page, so a reader who only reads the
-   first paragraph still gets the whole answer to "what is this page for". */
-.page-intro {
-    line-height: var(--bl-fnt-line-prose);
-    font-size: var(--bl-fnt-size-500);
-    margin-bottom: var(--bl-sp-4xl);
-    max-width: var(--bl-layout-measure);
-    color: var(--bl-clr-fg-3);
-}
-
-.page-intro strong {
-    font-weight: var(--bl-fnt-weight-semibold);
-    color: var(--bl-clr-fg-2);
-}
-
-@media (max-width: 47.9375rem) {
-    .page-container > h1 {
-        font-size: var(--bl-fnt-size-800);
-        line-height: var(--bl-fnt-line-800);
-    }
-
-    .page-intro {
-        font-size: var(--bl-fnt-size-400);
-    }
-}
-
-/* ── Section cards ─────────────────────────────────────────────────────────── */
-
-/* A hairline-bordered surface carrying Fluent's lightest elevation. On a documentation page the
-   same card repeats a dozen times, so anything heavier reads as noise long before it reads as
-   depth - but a flat card on a flat canvas leaves the page with no layers at all, and shadow2 is
-   exactly the amount that says "this is a surface" and nothing more. */
-.demo-section {
-    padding: var(--bl-sp-xxxl);
-    margin-bottom: var(--bl-sp-xxl);
-    /* Clear of the sticky header when the rail jumps to this section. */
-    scroll-margin-top: calc(var(--bl-layout-header) + var(--bl-layout-header-gap));
-    color: var(--bl-clr-fg-2);
-    background-color: var(--bl-clr-bg-1);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-large);
-    box-shadow: var(--bl-shdw-2);
-}
-
-.demo-section .align-start {
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.demo-section:last-child {
-    margin-bottom: 0;
-}
-
-/* The heading sits over a hairline, so the eye can find the boundary between sections while
-   scrolling a long page instead of relying on whitespace alone. */
-.demo-section h2 {
-    position: relative;
-    font-family: var(--bl-fnt-family-display);
-    font-size: var(--bl-fnt-size-600);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-600);
-    letter-spacing: -0.02em;
-    padding-bottom: var(--bl-sp-m);
-    margin-bottom: var(--bl-sp-l);
-    scroll-margin-top: calc(var(--bl-layout-header) + var(--bl-layout-header-gap));
-    overflow-wrap: anywhere;
-    color: var(--bl-clr-fg-1);
-    border-bottom: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-/* Every section is addressable, so a reader can link a colleague at the one paragraph that
-   answers their question. The link is added to the heading by js/demo.js, which is also what
-   gives the heading the id the "on this page" rail points at - so a section is linkable for the
-   same reason it is listed, and the two can never disagree. */
-.heading-anchor {
-    position: absolute;
-    top: 0;
-    inset-inline-start: -1.5rem;
-    width: 1.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--bl-fnt-line-600);
-    opacity: 0;
-    text-decoration: none;
-    color: var(--bl-clr-fg-4);
-    transition: opacity var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.demo-section h2:hover .heading-anchor,
-.heading-anchor:focus-visible {
-    opacity: 1;
-}
-
-.heading-anchor:hover {
-    color: var(--bl-clr-brand-fg);
-}
-
-.heading-anchor:focus-visible {
-    outline: var(--bl-strk-thick) solid var(--bl-clr-stroke-focus);
-    outline-offset: var(--bl-strk-thin);
-    border-radius: var(--bl-crn-small);
-}
-
-.heading-anchor svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* Below the width where the reading column has a margin to hang the anchor in, it would sit off
-   the edge of the card. */
-@media (max-width: 63.9375rem) {
-    .heading-anchor {
-        display: none;
-    }
-}
-
-.demo-section h3 {
-    font-family: var(--bl-fnt-family-display);
-    font-size: var(--bl-fnt-size-500);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-500);
-    letter-spacing: -0.01em;
-    margin-bottom: var(--bl-sp-s);
-    color: var(--bl-clr-fg-1);
-}
-
-.demo-section p {
-    line-height: var(--bl-fnt-line-prose);
-    font-size: var(--bl-fnt-size-400);
-    margin-bottom: var(--bl-sp-xxl);
-    max-width: var(--bl-layout-measure);
-    color: var(--bl-clr-fg-2);
-}
-
-.demo-section strong {
-    font-weight: var(--bl-fnt-weight-semibold);
-    color: var(--bl-clr-fg-1);
-}
-
-.demo-section em {
-    font-style: italic;
-}
-
-.demo-section a {
-    text-decoration: underline;
-}
-
-/* An inline code span, wherever a page sets one in prose. */
-.page-intro code,
-.demo-section code {
-    display: inline;
-    font-size: 0.875em;
-    padding: 0.0625rem 0.25rem;
-    overflow-wrap: anywhere;
-    font-family: var(--bl-fnt-family-mono);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-3);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-small);
-}
-
-@media (max-width: 47.9375rem) {
-    .demo-section {
-        padding: var(--bl-sp-xl);
-    }
-}
-
-/* ── Sample stage ──────────────────────────────────────────────────────────── */
-
-.demo-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bl-sp-xxl);
-    align-items: center;
-}
-
-/* The stage a sample is played on. Kept one surface step off the card around it so a demo is
-   never confused with the page describing it, and printed with a faint measure grid: an animation
-   about position or scale is far easier to read against something regular than against a blank
-   field, and the grid is the quietest possible way to give the eye that reference. */
-.demo-card {
-    flex: 1;
-    display: flex;
-    padding: var(--bl-sp-xxxl);
-    min-width: 13.75rem;
-    min-height: 10rem;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--bl-card);
-    background-image: radial-gradient(circle at center,
-        color-mix(in srgb, var(--bl-clr-fg-1) 7%, transparent) 0.0625rem, transparent 0.0625rem);
-    background-size: 1.25rem 1.25rem;
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-large);
-}
-
-/* A stage that stacks a caption above the moving part instead of centring one thing in the
-   middle. Nearly every page needs it, so it is a modifier here rather than the same three inline
-   declarations repeated down each page. */
-.demo-card.stack {
-    gap: var(--bl-sp-m);
-    flex-direction: column;
-}
-
-/* The caption naming what a stage is showing - a spring's constants, an easing's name, the CSS
-   property being animated. Deliberately quiet: it labels the sample, it is not part of it. */
-.demo-label {
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-300);
-    text-align: center;
-    color: var(--bl-clr-fg-3);
-}
-
-/* The controls that drive a sample, always directly under its stage. */
-.demo-actions {
-    gap: var(--bl-sp-s);
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: var(--bl-sp-l);
-    align-items: center;
-}
-
-/* ── Sample primitives ─────────────────────────────────────────────────────── */
-
-/* The moving parts keep their own rounding and their gradient fill: they are the subject of the
-   page, not chrome, and the docs' restrained surfaces would flatten exactly the thing being
-   shown. Their colours come from the theme's accents, so the samples follow the theme too. */
-/* The label is set at 20px/700 rather than at the body size. A gradient cannot be one colour, so a
-   white label on it has to clear the bar against the lightest point it actually covers - and 20px
-   bold is the size at which that bar is WCAG's large-text 3:1 rather than 4.5:1, which the middle
-   of this gradient does not reach. The alternative was darkening the accent, which would have
-   changed the look of every sample on the site to fix the handful that carry a word. */
-.box {
-    width: 5rem;
-    height: 5rem;
-    color: #fff;
-    display: flex;
-    font-weight: var(--bl-fnt-weight-bold);
-    font-size: var(--bl-fnt-size-500);
-    line-height: var(--bl-fnt-line-500);
-    cursor: pointer;
-    user-select: none;
-    border-radius: 0.625rem;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background: linear-gradient(135deg, var(--bl-primary), var(--bl-secondary));
-}
-
-.box-sm {
-    width: 3.125rem;
-    height: 3.125rem;
-    border-radius: 0.5rem;
-}
-
-/* ── Buttons ───────────────────────────────────────────────────────────────── */
-
-/* The button that drives a sample. Fluent's primary, at Fluent's control height. */
-.btn-bl {
-    border: var(--bl-strk-thin) solid transparent;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--bl-sp-s);
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-300);
-    font-size: var(--bl-fnt-size-300);
-    font-family: inherit;
-    min-height: 2rem;
-    padding: var(--bl-sp-xs) var(--bl-sp-m);
-    color: var(--bl-clr-brand-fg-on-bg);
-    background-color: var(--bl-clr-brand-bg);
-    border-radius: var(--bl-crn-medium);
-    transition: background-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.btn-bl:hover {
-    background-color: var(--bl-clr-brand-bg-hover);
-}
-
-.btn-bl:active {
-    background-color: var(--bl-clr-brand-bg-pressed);
-}
-
-.btn-bl:disabled {
-    cursor: default;
-    color: var(--bl-clr-fg-disabled);
-    background-color: var(--bl-clr-bg-disabled);
-}
-
-.btn-bl:focus-visible {
-    outline: var(--bl-strk-thick) solid var(--bl-clr-stroke-focus);
-    outline-offset: var(--bl-strk-thick);
-}
-
-/* ── Code boxes ────────────────────────────────────────────────────────────── */
-
-/* One frame around the toolbar and the code, rather than a button floating above a slab: the bar
-   is the code box's own header, so opening a snippet grows a panel instead of adding a second
-   thing to the page. */
-.code-snippet {
-    margin-top: var(--bl-sp-xxl);
-    overflow: hidden;
-    background-color: var(--bl-clr-bg-3);
-    border: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-    border-radius: var(--bl-crn-medium);
-}
-
-.code-snippet-bar {
-    gap: var(--bl-sp-s);
-    display: flex;
-    align-items: center;
-    padding: var(--bl-sp-xs) var(--bl-sp-s);
-}
-
-.code-snippet.open .code-snippet-bar {
-    border-bottom: var(--bl-strk-thin) solid var(--bl-clr-stroke-2);
-}
-
-.code-toggle,
-.code-copy {
-    gap: var(--bl-sp-xs);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    font-weight: var(--bl-fnt-weight-semibold);
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-300);
-    font-family: inherit;
-    padding: var(--bl-sp-xs) var(--bl-sp-s);
-    border: var(--bl-strk-thin) solid transparent;
-    background: transparent;
-    color: var(--bl-clr-fg-2);
-    border-radius: var(--bl-crn-small);
-    transition: color var(--bl-dur-faster) var(--bl-crv-easy-ease),
-                background-color var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.code-toggle:hover,
-.code-copy:hover {
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-3-hover);
-}
-
-.code-toggle[aria-expanded="true"] {
-    color: var(--bl-clr-fg-1);
-}
-
-.code-toggle:focus-visible,
-.code-copy:focus-visible {
-    outline: var(--bl-strk-thick) solid var(--bl-clr-stroke-focus);
-    outline-offset: var(--bl-strk-thin);
-}
-
-.code-toggle svg,
-.code-copy svg {
-    flex: none;
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* The chevron turns rather than being swapped for a different glyph, so the control reads as one
-   thing in two states instead of as two controls. */
-.code-toggle-icon {
-    display: inline-flex;
-    transition: transform var(--bl-dur-faster) var(--bl-crv-easy-ease);
-}
-
-.code-toggle[aria-expanded="true"] .code-toggle-icon {
-    transform: rotate(90deg);
-}
-
-/* The language, and the spring that pushes the copy button to the far end of the bar. */
-.code-lang {
-    flex: 1 1 auto;
-    text-align: end;
-    font-size: var(--bl-fnt-size-200);
-    line-height: var(--bl-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bl-clr-fg-4);
-}
-
-.code-copy.copied {
-    color: var(--bl-clr-brand-fg);
-}
-
-.code-block {
-    margin: 0;
-    width: 100%;
-    display: block;
-    overflow: auto;
-    direction: ltr;
-    white-space: pre;
-    line-height: 1.6;
-    font-size: var(--bl-fnt-size-300);
-    max-height: 32rem;
-    font-family: var(--bl-fnt-family-mono);
-    padding: var(--bl-sp-l);
-    color: var(--bl-clr-fg-1);
-    background-color: var(--bl-clr-bg-3);
-}
-
-.code-block code {
-    display: block;
-    padding: 0;
-    border: none;
-    color: inherit;
-    background: none;
-    font-size: inherit;
-    line-height: inherit;
-    font-family: inherit;
-}
-
-.code-block::-webkit-scrollbar {
-    width: 0.5rem;
-}
-
-.code-block::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
-}
-
-.code-block::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-
-.code-block::-webkit-scrollbar-thumb {
-    border-radius: var(--bl-crn-circular);
-    background-color: var(--bl-clr-stroke-1);
-}
-
-.code-block::-webkit-scrollbar-thumb:hover {
-    background-color: var(--bl-clr-stroke-accessible);
-}
-
-.code-block::-webkit-scrollbar-button {
-    display: none;
-}
-
-/* ── Syntax highlighting tokens ────────────────────────────────────────────── */
-
-.code-block .tok-com  { color: var(--bl-tok-com); font-style: italic; }
-.code-block .tok-tag  { color: var(--bl-tok-tag); }
-.code-block .tok-attr { color: var(--bl-tok-attr); }
-.code-block .tok-str  { color: var(--bl-tok-str); }
-.code-block .tok-key  { color: var(--bl-tok-key); }
-.code-block .tok-type { color: var(--bl-tok-type); }
-.code-block .tok-num  { color: var(--bl-tok-num); }
-.code-block .tok-raz  { color: var(--bl-tok-raz); }
-
-/* Each source line is its own block so highlighted and plain lines share uniform spacing. */
-.code-block .code-line {
-    display: block;
-}
-
-/* Lines where a Bmotion component is used, so they stand out from the markup around them. */
-.code-block .hl-line {
-    display: block;
-    margin: 0 calc(var(--bl-sp-l) * -1);
-    padding: 0 var(--bl-sp-l);
-    background-color: var(--bl-accent-soft);
-    box-shadow: inset var(--bl-strk-thicker) 0 0 var(--bl-clr-brand-stroke);
-}
-
-/* ── Badges ────────────────────────────────────────────────────────────────── */
-
-.badge-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bl-sp-s);
-}
-
-/* Fluent's outlined badge: quiet, sized to sit under a paragraph without competing with it. */
-.badge {
-    font-weight: var(--bl-fnt-weight-semibold);
-    line-height: var(--bl-fnt-line-200);
-    font-size: var(--bl-fnt-size-200);
-    padding: var(--bl-sp-xs) var(--bl-sp-mnudge);
-    color: var(--bl-clr-brand-fg);
-    background-color: var(--bl-clr-brand-wash);
-    border: var(--bl-strk-thin) solid transparent;
-    border-radius: var(--bl-crn-circular);
-}
-
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/theme.css b/src/Utilities/Belemetry/Demo/Server/wwwroot/css/theme.css
deleted file mode 100644
index 38b10724b59..00000000000
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/css/theme.css
+++ /dev/null
@@ -1,451 +0,0 @@
-/* Bit.Bmotion Demo - design tokens.
-
-   The demo carries no dependency other than Bit.Bmotion itself, so the design system it is built
-   on is written out here rather than pulled from a component library. It is Microsoft's Fluent 2,
-   transcribed: the brand ramp, the neutral ramps, the type ramp, the corner radii, the elevation
-   shadows and the motion curves all carry Fluent's own names and Fluent's own values.
-
-   Three layers, in the order a token should be reached for:
-
-     1. Ramps      --bl-brand-10..160, --bl-grey-*.  Raw colour. Never used outside this file.
-     2. Semantic   --bl-clr-*, --bl-fnt-*, --bl-crn-*, --bl-shdw-*, --bl-dur-*, --bl-crv-*.
-                   What a token is *for*. This is the layer to write CSS against.
-     3. Aliases    --bit-clr-*, --bl-primary and friends. The names the site used before this
-                   file was a design system, kept pointing at the semantic layer so that the
-                   twenty demo pages - each of which carries its own <style> block - keep working
-                   untouched, and so that anything copied over from the Bit.BlazorUI demo still
-                   lands on the right colour.
-
-   The brand ramp is Fluent's own Microsoft-blue ramp shifted so that shade 80 lands exactly on
-   bit's #1276C6: the two are within a just-noticeable difference of each other to begin with, so
-   the site stays on brand and on Fluent at the same time.
-
-   The theme is selected by the data-theme attribute on <html>, which the bootstrap script in
-   App.razor sets before first paint (see js/demo.js). The bare :root selector carries the light
-   palette so a document with no attribute at all - the pre-hydration prerender, or a browser with
-   JS disabled - still renders a complete theme rather than unstyled markup. */
-
-/* ── 1. Ramps ──────────────────────────────────────────────────────────────── */
-
-:root {
-    /* Brand. Fluent's blue ramp, anchored on bit's accent at shade 80. */
-    --bl-brand-10: #0A1C2A;
-    --bl-brand-20: #0D293E;
-    --bl-brand-30: #103551;
-    --bl-brand-40: #124265;
-    --bl-brand-50: #144F7D;
-    --bl-brand-60: #145D94;
-    --bl-brand-70: #1567AC;
-    --bl-brand-80: #1276C6;
-    --bl-brand-90: #2B90E7;
-    --bl-brand-100: #4BA7FD;
-    --bl-brand-110: #67B4FD;
-    --bl-brand-120: #7CC0FF;
-    --bl-brand-130: #9CCEFF;
-    --bl-brand-140: #BADEFF;
-    --bl-brand-150: #D6EBFF;
-    --bl-brand-160: #EDF5FE;
-
-    /* Neutrals. Fluent's grey ramp, named by lightness the way Fluent names it. */
-    --bl-grey-0: #000000;
-    --bl-grey-8: #141414;
-    --bl-grey-10: #1A1A1A;
-    --bl-grey-12: #1F1F1F;
-    --bl-grey-14: #242424;
-    --bl-grey-16: #292929;
-    --bl-grey-20: #333333;
-    --bl-grey-24: #3D3D3D;
-    --bl-grey-26: #424242;
-    --bl-grey-30: #4D4D4D;
-    --bl-grey-38: #616161;
-    --bl-grey-44: #707070;
-    --bl-grey-50: #808080;
-    --bl-grey-60: #999999;
-    --bl-grey-68: #ADADAD;
-    --bl-grey-78: #C7C7C7;
-    --bl-grey-82: #D1D1D1;
-    --bl-grey-84: #D6D6D6;
-    --bl-grey-88: #E0E0E0;
-    --bl-grey-90: #E6E6E6;
-    --bl-grey-92: #EBEBEB;
-    --bl-grey-94: #F0F0F0;
-    --bl-grey-96: #F5F5F5;
-    --bl-grey-98: #FAFAFA;
-    --bl-grey-100: #FFFFFF;
-
-    /* The one hue outside the Fluent set: bit's accent orange, which the animated samples are
-       painted with. It exists to be the far end of a gradient from the brand blue, so it is not
-       asked to carry text and does not need a ramp of its own. */
-    --bl-peach-light: #FFC7AC;
-    --bl-peach: #FD7F36;
-    --bl-peach-dark: #C25520;
-}
-
-/* ── 2. Semantic - light ───────────────────────────────────────────────────── */
-
-:root,
-:root[data-theme="light"] {
-    color-scheme: light;
-
-    /* Brand. Backgrounds take shade 80 and darken on interaction, exactly as Fluent does; text
-       and links take shade 70, which is the shade that clears 4.5:1 on both of the surfaces this
-       site paints - the white card and the grey canvas behind it. */
-    --bl-clr-brand-bg: var(--bl-brand-80);
-    --bl-clr-brand-bg-hover: var(--bl-brand-70);
-    --bl-clr-brand-bg-pressed: var(--bl-brand-60);
-    --bl-clr-brand-bg-subtle: var(--bl-brand-160);
-    --bl-clr-brand-fg: var(--bl-brand-70);
-    --bl-clr-brand-fg-hover: var(--bl-brand-60);
-    --bl-clr-brand-fg-pressed: var(--bl-brand-50);
-    --bl-clr-brand-fg-on-bg: var(--bl-grey-100);
-    --bl-clr-brand-stroke: var(--bl-brand-80);
-
-    /* The dual-role accent, which Fluent itself does not have.
-
-       Fluent splits the brand in two - one shade for a surface to be painted with, another for
-       text to be set in - because a control knows which of the two it is. The demo pages do not:
-       each of them carries a <style> block written against a single --bl-primary that is a
-       gradient stop on one line and a label colour on the next. So the accent below is the shade
-       that works as both, in both themes, and the legacy names at the foot of this file point at
-       it. Chrome written after this file existed uses the split pair above instead. */
-    --bl-clr-brand-accent: var(--bl-brand-80);
-    --bl-clr-brand-accent-hover: var(--bl-brand-70);
-    --bl-clr-brand-accent-pressed: var(--bl-brand-60);
-    --bl-clr-brand-accent-contrast: var(--bl-grey-100);
-
-    /* Neutral backgrounds. Background1 is the raised surface - a card, the header, the nav panel;
-       the canvas the whole page is painted on is Background3, one step down from it. */
-    --bl-clr-bg-1: var(--bl-grey-100);
-    --bl-clr-bg-1-hover: var(--bl-grey-96);
-    --bl-clr-bg-1-pressed: var(--bl-grey-88);
-    --bl-clr-bg-2: var(--bl-grey-98);
-    --bl-clr-bg-3: var(--bl-grey-96);
-    --bl-clr-bg-3-hover: var(--bl-grey-92);
-    --bl-clr-bg-4: var(--bl-grey-94);
-    --bl-clr-bg-5: var(--bl-grey-92);
-    --bl-clr-bg-disabled: var(--bl-grey-94);
-    --bl-clr-bg-inverted: var(--bl-grey-14);
-    --bl-clr-bg-overlay: rgba(0, 0, 0, 0.4);
-
-    /* Neutral foregrounds. */
-    --bl-clr-fg-1: var(--bl-grey-14);
-    --bl-clr-fg-2: var(--bl-grey-26);
-    --bl-clr-fg-3: var(--bl-grey-38);
-    --bl-clr-fg-4: var(--bl-grey-44);
-    --bl-clr-fg-disabled: var(--bl-grey-68);
-    --bl-clr-fg-inverted: var(--bl-grey-100);
-
-    /* Neutral strokes. Stroke2 draws the hairlines that separate the site's surfaces; Stroke1
-       draws the edge of a control; StrokeAccessible is the one that clears 3:1 against both
-       surfaces, so it is what a control's own border becomes on hover. */
-    --bl-clr-stroke-1: var(--bl-grey-82);
-    --bl-clr-stroke-2: var(--bl-grey-88);
-    --bl-clr-stroke-3: var(--bl-grey-94);
-    --bl-clr-stroke-accessible: var(--bl-grey-38);
-    --bl-clr-stroke-focus: var(--bl-grey-14);
-
-    /* Fluent's elevation set. The alpha pairs are Fluent's own: a tight ambient shadow under a
-       wider directional one, so a raised surface reads as raised at any size. */
-    --bl-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bl-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bl-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bl-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bl-shdw-28: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.24), 0 0 0.5rem rgba(0, 0, 0, 0.2);
-    --bl-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.24), 0 0 0.5rem rgba(0, 0, 0, 0.2);
-
-    /* The tint a brand-coloured surface is washed with. color-mix keeps it tied to the accent
-       rather than freezing one theme's hex value. */
-    --bl-clr-brand-wash: color-mix(in srgb, var(--bl-brand-80) 10%, transparent);
-
-    /* Syntax highlighting for the code boxes. The token set is the demo's own (see
-       Shared/SyntaxHighlighter.cs); only the colours are themed, and they are tuned against
-       --bl-clr-bg-3, which is the surface a <pre> is painted on. */
-    --bl-tok-com: #3E7A34;
-    --bl-tok-tag: #1F5FA8;
-    --bl-tok-attr: #1A6FA8;
-    --bl-tok-str: #A63A20;
-    --bl-tok-key: #1F5FA8;
-    --bl-tok-type: #197066;
-    --bl-tok-num: #4F6E1E;
-    --bl-tok-raz: #8A3D9C;
-}
-
-/* ── 2. Semantic - dark ────────────────────────────────────────────────────── */
-
-/* Fluent's dark theme is a neutral grey theme rather than a tinted one, and it inverts the
-   surface relationship rather than the ramp: the canvas is the darkest surface and a card sits
-   above it, one step lighter. Everything below mirrors the light block role for role. */
-
-:root[data-theme="dark"] {
-    color-scheme: dark;
-
-    --bl-clr-brand-bg: var(--bl-brand-70);
-    --bl-clr-brand-bg-hover: var(--bl-brand-80);
-    --bl-clr-brand-bg-pressed: var(--bl-brand-60);
-    --bl-clr-brand-bg-subtle: var(--bl-brand-20);
-    --bl-clr-brand-fg: var(--bl-brand-100);
-    --bl-clr-brand-fg-hover: var(--bl-brand-110);
-    --bl-clr-brand-fg-pressed: var(--bl-brand-120);
-    --bl-clr-brand-fg-on-bg: var(--bl-grey-100);
-    --bl-clr-brand-stroke: var(--bl-brand-100);
-
-    /* The dual-role accent flips to the light end of the ramp here, and takes near-black as its
-       contrast colour: on a dark canvas the shade that reads as text is the light one, and the
-       pages use the same token for both jobs. See the light block for why. */
-    --bl-clr-brand-accent: var(--bl-brand-100);
-    --bl-clr-brand-accent-hover: var(--bl-brand-110);
-    --bl-clr-brand-accent-pressed: var(--bl-brand-120);
-    --bl-clr-brand-accent-contrast: var(--bl-grey-14);
-
-    --bl-clr-bg-1: var(--bl-grey-12);
-    --bl-clr-bg-1-hover: var(--bl-grey-16);
-    --bl-clr-bg-1-pressed: var(--bl-grey-20);
-    --bl-clr-bg-2: var(--bl-grey-10);
-    --bl-clr-bg-3: var(--bl-grey-8);
-    --bl-clr-bg-3-hover: var(--bl-grey-12);
-    --bl-clr-bg-4: var(--bl-grey-16);
-    --bl-clr-bg-5: var(--bl-grey-20);
-    --bl-clr-bg-disabled: var(--bl-grey-16);
-    --bl-clr-bg-inverted: var(--bl-grey-96);
-    --bl-clr-bg-overlay: rgba(0, 0, 0, 0.65);
-
-    --bl-clr-fg-1: var(--bl-grey-100);
-    --bl-clr-fg-2: var(--bl-grey-84);
-    --bl-clr-fg-3: var(--bl-grey-68);
-    --bl-clr-fg-4: var(--bl-grey-60);
-    --bl-clr-fg-disabled: var(--bl-grey-38);
-    --bl-clr-fg-inverted: var(--bl-grey-14);
-
-    --bl-clr-stroke-1: var(--bl-grey-30);
-    --bl-clr-stroke-2: var(--bl-grey-20);
-    --bl-clr-stroke-3: var(--bl-grey-16);
-    --bl-clr-stroke-accessible: var(--bl-grey-68);
-    --bl-clr-stroke-focus: var(--bl-grey-100);
-
-    /* Fluent deepens the alphas so an elevated surface still reads against a near-black canvas,
-       where a light-theme shadow would vanish. */
-    --bl-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bl-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bl-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bl-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bl-shdw-28: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.4), 0 0 0.5rem rgba(0, 0, 0, 0.28);
-    --bl-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.4), 0 0 0.5rem rgba(0, 0, 0, 0.28);
-
-    --bl-clr-brand-wash: color-mix(in srgb, var(--bl-brand-100) 14%, transparent);
-
-    --bl-tok-com: #6A9955;
-    --bl-tok-tag: #569CD6;
-    --bl-tok-attr: #9CDCFE;
-    --bl-tok-str: #CE9178;
-    --bl-tok-key: #569CD6;
-    --bl-tok-type: #4EC9B0;
-    --bl-tok-num: #B5CEA8;
-    --bl-tok-raz: #C586C0;
-}
-
-/* ── 2. Semantic - shape, type, motion and layout ──────────────────────────── */
-
-/* The parts of Fluent that do not change with the palette. */
-
-:root {
-    /* Corner radius. Fluent 2's scale - the step up from Fluent 1's near-square 2px is the most
-       visible single thing about the newer system, so it is taken as written. */
-    --bl-crn-none: 0;
-    --bl-crn-small: 0.125rem;
-    --bl-crn-medium: 0.25rem;
-    --bl-crn-large: 0.375rem;
-    --bl-crn-xlarge: 0.5rem;
-    --bl-crn-circular: 62.4375rem;
-
-    /* Stroke width. */
-    --bl-strk-thin: 0.0625rem;
-    --bl-strk-thick: 0.125rem;
-    --bl-strk-thicker: 0.1875rem;
-
-    /* Spacing. Fluent's ramp, and the only source of a margin or a padding in this site. */
-    --bl-sp-none: 0;
-    --bl-sp-xxs: 0.125rem;
-    --bl-sp-xs: 0.25rem;
-    --bl-sp-snudge: 0.375rem;
-    --bl-sp-s: 0.5rem;
-    --bl-sp-mnudge: 0.625rem;
-    --bl-sp-m: 0.75rem;
-    --bl-sp-l: 1rem;
-    --bl-sp-xl: 1.25rem;
-    --bl-sp-xxl: 1.5rem;
-    --bl-sp-xxxl: 2rem;
-    --bl-sp-4xl: 2.5rem;
-    --bl-sp-5xl: 3rem;
-    --bl-sp-6xl: 4rem;
-    --bl-sp-7xl: 5rem;
-
-    /* Type. Segoe UI Variable is Fluent 2's typeface and ships with Windows 11; the rest of the
-       stack is the platform's own UI face, so the site is never the reason a font is downloaded. */
-    --bl-fnt-family-base: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bl-fnt-family-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bl-fnt-family-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-    /* Fluent's type ramp. The sizes are the ramp as published; the leading on the two body sizes
-       is opened up from Fluent's own because this site is read as prose rather than scanned as an
-       application surface, and 22px on 16px is tight for a paragraph. */
-    --bl-fnt-size-100: 0.625rem;   /* Caption2   10 */
-    --bl-fnt-size-200: 0.75rem;    /* Caption1   12 */
-    --bl-fnt-size-300: 0.875rem;   /* Body1      14 */
-    --bl-fnt-size-400: 1rem;       /* Body2      16 */
-    --bl-fnt-size-500: 1.25rem;    /* Subtitle1  20 */
-    --bl-fnt-size-600: 1.5rem;     /* Title3     24 */
-    --bl-fnt-size-700: 1.75rem;    /* Title2     28 */
-    --bl-fnt-size-800: 2rem;       /* Title1     32 */
-    --bl-fnt-size-900: 2.5rem;     /* LargeTitle 40 */
-    --bl-fnt-size-1000: 4.25rem;   /* Display    68 */
-
-    --bl-fnt-line-100: 0.875rem;
-    --bl-fnt-line-200: 1rem;
-    --bl-fnt-line-300: 1.25rem;
-    --bl-fnt-line-400: 1.375rem;
-    --bl-fnt-line-500: 1.75rem;
-    --bl-fnt-line-600: 2rem;
-    --bl-fnt-line-700: 2.25rem;
-    --bl-fnt-line-800: 2.5rem;
-    --bl-fnt-line-900: 3.25rem;
-    --bl-fnt-line-1000: 5.75rem;
-
-    /* Prose leading, used wherever a run of text is longer than a label. */
-    --bl-fnt-line-prose: 1.625;
-
-    --bl-fnt-weight-regular: 400;
-    --bl-fnt-weight-medium: 500;
-    --bl-fnt-weight-semibold: 600;
-    --bl-fnt-weight-bold: 700;
-
-    /* Motion. Fluent's duration ramp and its curve set - a decelerating curve for anything
-       entering, an accelerating one for anything leaving, and easyEase for a state change that
-       does neither. */
-    --bl-dur-ultra-fast: 50ms;
-    --bl-dur-faster: 100ms;
-    --bl-dur-fast: 150ms;
-    --bl-dur-normal: 200ms;
-    --bl-dur-gentle: 250ms;
-    --bl-dur-slow: 300ms;
-    --bl-dur-slower: 400ms;
-    --bl-dur-ultra-slow: 500ms;
-
-    --bl-crv-accelerate-max: cubic-bezier(0.9, 0.1, 1, 0.2);
-    --bl-crv-accelerate-mid: cubic-bezier(1, 0, 1, 1);
-    --bl-crv-accelerate-min: cubic-bezier(0.8, 0, 0.78, 1);
-    --bl-crv-decelerate-max: cubic-bezier(0.1, 0.9, 0.2, 1);
-    --bl-crv-decelerate-mid: cubic-bezier(0, 0, 0, 1);
-    --bl-crv-decelerate-min: cubic-bezier(0.33, 0, 0.1, 1);
-    --bl-crv-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
-    --bl-crv-linear: cubic-bezier(0, 0, 1, 1);
-
-    /* Layout. The decisions a design system leaves to the product: how wide the reading column
-       runs, how far prose may stretch before it gets hard to follow, and how much room the two
-       sticky columns take. */
-    --bl-layout-max: 90rem;        /* 1440px - the outer rail-to-rail width */
-    --bl-layout-content: 53rem;    /* 848px  - the article column */
-    --bl-layout-measure: 72ch;
-    --bl-layout-header: 3.5rem;    /* 56px - every sticky offset below is derived from this */
-    --bl-layout-nav: 16.5rem;      /* 264px */
-    --bl-layout-rail: 15rem;       /* 240px */
-    /* Breathing room between the sticky header and whatever has been scrolled to. WCAG 2.2's
-       "focus not obscured" is why this is a token rather than a number: the header, the
-       scroll-padding on <html> and the rail's own jump all have to agree on it. */
-    --bl-layout-header-gap: 1.5rem;
-}
-
-/* Chrome transitions only. Anything inside .demo-card belongs to the animation being demonstrated
-   and must keep its own timing, which is exactly what this library exists to control - so the
-   durations are collapsed here rather than the animations deleted. */
-@media (prefers-reduced-motion: reduce) {
-    :root {
-        --bl-dur-ultra-fast: 0.01ms;
-        --bl-dur-faster: 0.01ms;
-        --bl-dur-fast: 0.01ms;
-        --bl-dur-normal: 0.01ms;
-        --bl-dur-gentle: 0.01ms;
-        --bl-dur-slow: 0.01ms;
-        --bl-dur-slower: 0.01ms;
-        --bl-dur-ultra-slow: 0.01ms;
-    }
-}
-
-/* ── 3. Aliases ────────────────────────────────────────────────────────────── */
-
-/* The names this site used before the block above existed. Every demo page carries a <style>
-   block of its own that reaches for them, and anything lifted from the Bit.BlazorUI demo is
-   written against the --bit-clr-* half, so both stay as the seam between the pages and the
-   theme: re-theming happens above, and none of those blocks ever has to be touched. */
-
-:root {
-    /* primary - the dual-role accent, because a demo page's <style> block uses this one name for
-       a gradient stop and for a label colour alike. */
-    --bit-clr-pri: var(--bl-clr-brand-accent);
-    --bit-clr-pri-hover: var(--bl-clr-brand-accent-hover);
-    --bit-clr-pri-active: var(--bl-clr-brand-accent-pressed);
-    --bit-clr-pri-light: var(--bl-brand-130);
-    --bit-clr-pri-text: var(--bl-clr-brand-accent-contrast);
-    --bit-clr-pri-dis: var(--bl-clr-brand-bg-subtle);
-    /* secondary */
-    --bit-clr-sec: var(--bl-peach);
-    --bit-clr-sec-light: var(--bl-peach-light);
-    --bit-clr-sec-text: var(--bl-grey-14);
-    /* info - the quiet, neutral accent */
-    --bit-clr-inf: var(--bl-clr-fg-3);
-    --bit-clr-inf-light: var(--bl-clr-fg-4);
-    /* foreground */
-    --bit-clr-fg-pri: var(--bl-clr-fg-1);
-    --bit-clr-fg-sec: var(--bl-clr-fg-2);
-    --bit-clr-fg-ter: var(--bl-clr-fg-3);
-    /* background */
-    --bit-clr-bg-pri: var(--bl-clr-bg-1);
-    --bit-clr-bg-pri-hover: var(--bl-clr-bg-1-hover);
-    --bit-clr-bg-sec: var(--bl-clr-bg-3);
-    --bit-clr-bg-sec-hover: var(--bl-clr-bg-3-hover);
-    --bit-clr-bg-ter: var(--bl-clr-bg-5);
-    --bit-clr-bg-overlay: var(--bl-clr-bg-overlay);
-    /* border */
-    --bit-clr-brd-pri: var(--bl-clr-stroke-accessible);
-    --bit-clr-brd-sec: var(--bl-clr-stroke-1);
-    --bit-clr-brd-ter: var(--bl-clr-stroke-2);
-
-    /* shape and motion */
-    --bit-shp-brd-radius: var(--bl-crn-medium);
-    --bit-shp-brd-width: var(--bl-strk-thin);
-    --bit-shp-brd-style: solid;
-    --bit-mot-duration-full: var(--bl-dur-normal);
-    --bit-mot-duration-short-full: var(--bl-dur-faster);
-    --bit-mot-duration-long-full: var(--bl-dur-slow);
-    --bit-mot-duration: var(--bl-dur-normal);
-    --bit-mot-duration-short: var(--bl-dur-faster);
-    --bit-mot-duration-long: var(--bl-dur-slow);
-    --bit-mot-easing: var(--bl-crv-easy-ease);
-
-    /* The shell's own names, kept because the demo pages and js/demo.js read them. */
-    --demo-font-sans: var(--bl-fnt-family-base);
-    --demo-font-mono: var(--bl-fnt-family-mono);
-    --demo-content-width: var(--bl-layout-max);
-    --demo-measure: var(--bl-layout-measure);
-    --demo-header-height: var(--bl-layout-header);
-    --demo-nav-width: var(--bl-layout-nav);
-
-    /* The sample palette. Every demo page's <style> block reaches for these, so redefining them
-       here re-themes all twenty pages at once. */
-    --bl-primary: var(--bl-clr-brand-accent);
-    --bl-primary-text: var(--bl-clr-brand-accent-contrast);
-    --bl-secondary: var(--bit-clr-sec);
-    --bl-dark: var(--bl-clr-bg-3);
-    --bl-surface: var(--bl-clr-bg-1);
-    /* The stage a sample is played on: one surface step off the card it sits in, in both themes,
-       so a sample reads as a thing placed on the page rather than as part of it. */
-    --bl-card: var(--bl-clr-bg-3);
-    --bl-text: var(--bl-clr-fg-1);
-    --bl-muted: var(--bl-clr-fg-2);
-    --bl-border: var(--bl-clr-stroke-2);
-    --bl-radius: var(--bl-crn-medium);
-    /* The recessed surface a sample paints a track, a groove or a gutter on - one step deeper
-       than the stage it sits on, in both themes. */
-    --bl-track: var(--bl-clr-bg-5);
-    --bl-accent-soft: var(--bl-clr-brand-wash);
-    --bl-accent-line: color-mix(in srgb, var(--bl-clr-brand-stroke) 35%, transparent);
-}
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/demo.css b/src/Utilities/Belemetry/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..8a06d3fe793
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,506 @@
+/* ============================================================================================
+   Belemetry demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is this site's own - the syntax highlighter's tokens, the
+   pieces the shared components (Client/Shared/*.razor) add to the kit's markup, the consent banner
+   and the live telemetry feed - and it is written against the kit's --bb-* names, so it follows the
+   light/dark theme with no rules of its own for either. Bit.Belemetry itself ships no stylesheet.
+   ============================================================================================ */
+
+/* ---------- Colors the kit has no token for ----------
+
+   The highlighter tells more kinds apart than the kit's four code colors, and the feed tells three
+   sources and four kinds of record apart. Each extra color is picked to hold its contrast on its
+   surface in both themes. */
+:root {
+    --demo-code-type: #8250DF;
+    --demo-code-number: #CF222E;
+    --demo-code-razor: #A21CAF;
+    --demo-violet: #8250DF;
+    --demo-violet-soft: color-mix(in srgb, #8250DF 12%, transparent);
+}
+
+:root[bit-theme="dark"] {
+    --demo-code-type: #D2A8FF;
+    --demo-code-number: #FF7B72;
+    --demo-code-razor: #F0ABFC;
+    --demo-violet: #D2A8FF;
+    --demo-violet-soft: color-mix(in srgb, #D2A8FF 16%, transparent);
+}
+
+/* ---------- Code: SyntaxHighlighter's tokens on the kit's code surface ---------- */
+
+.bb-code .tok-com { color: var(--bb-code-comment); font-style: italic; }
+.bb-code .tok-tag,
+.bb-code .tok-key { color: var(--bb-code-keyword); }
+.bb-code .tok-attr { color: var(--bb-code-param); }
+.bb-code .tok-str { color: var(--bb-code-string); }
+.bb-code .tok-type { color: var(--demo-code-type); }
+.bb-code .tok-num { color: var(--demo-code-number); }
+.bb-code .tok-raz { color: var(--demo-code-razor); font-weight: var(--fl-weight-semibold); }
+
+/* The lines that use a Belemetry component (<BelemetryScript />, <BelemetryInitializer />), so they
+   stand out from the markup around them: tinted edge to edge of the block, with the brand's rule
+   down the start. The block's padding is 1rem at the start and 3rem at the end (room for the copy
+   button), which is what the margins reach back out over. */
+.bb-code .hl-line {
+    display: inline-block;
+    min-width: calc(100% + 4rem);
+    margin-inline: -1rem -3rem;
+    padding-inline: 1rem 3rem;
+    background: var(--bb-primary-soft);
+    box-shadow: inset 3px 0 0 var(--bb-primary);
+}
+
+/* ---------- CodeSnippet: the language on its disclosure ---------- */
+
+.demo-snippet-caret {
+    font-size: .75em;
+    color: var(--bb-text-soft);
+}
+
+.demo-snippet-lang {
+    margin-inline-start: .25rem;
+    padding-inline-start: .5rem;
+    border-inline-start: 1px solid var(--bb-border-strong);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+/* ---------- ApiTable: the reflected reference of one type ---------- */
+
+.demo-api {
+    margin: 0 0 1.5rem;
+}
+
+.demo-api-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 .375rem;
+}
+
+.demo-api-head > code {
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.demo-api-summary,
+.demo-api-loading {
+    max-width: var(--bb-measure);
+    margin: 0 0 .75rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    color: var(--bb-text-muted);
+}
+
+/* The member and type columns wrap between the words of a signature but never inside one: a member
+   name or a type broken letter by letter cannot be read. The table's own layout then gives the
+   description what is left, and a table that no longer fits scrolls inside its .bb-scroll.
+   Defaults are values, and may still break anywhere. */
+.demo-api-table td:is(:first-child, :nth-child(2)),
+.demo-api-table td:is(:first-child, :nth-child(2)) code {
+    overflow-wrap: normal;
+}
+
+/* The default, under the type it is a value of. */
+.demo-api-default {
+    display: block;
+    margin-top: .25rem;
+    color: var(--bb-text-soft);
+}
+
+.demo-api-table td .demo-api-default code {
+    overflow-wrap: anywhere;
+}
+
+/* ---------- Inside the samples ---------- */
+
+/* The sample's name in its title bar, after the "Live" label and a hairline - usually the API it
+   exercises, or the consent feature it needs. */
+.demo-sample-title {
+    margin-inline-start: .625rem;
+    padding-inline-start: .625rem;
+    border-inline-start: 1px solid var(--bb-border-strong);
+    font-size: var(--fl-font-size-200);
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--bb-text);
+}
+
+/* A caption over one part of a sample - "Per feature", "Groups", "Exporters". */
+.bb-overline.demo-sublabel {
+    margin: 0 0 .5rem;
+}
+
+* + .bb-overline.demo-sublabel {
+    margin-top: 1rem;
+}
+
+/* What a sample's last action did, under its controls. */
+.demo-status {
+    margin: 0 0 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    color: var(--bb-text-muted);
+}
+
+/* A row of tinted readouts: the features in effect, the parameters a list redacts. */
+.demo-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+    margin: 0 0 1rem;
+}
+
+/* A state that is off, next to the tinted badges of states that are on. */
+.bb-badge.demo-badge-off {
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-muted);
+    box-shadow: inset 0 0 0 1px var(--bb-border);
+}
+
+/* The destructive or deliberately-wrong action in a row - throw, reject, revoke: danger-stroked,
+   never filled, so it reads as "careful" rather than as the thing to press. */
+.btn.demo-btn-danger {
+    background: transparent;
+    color: var(--bb-danger-text);
+    border-color: color-mix(in srgb, var(--bb-danger) 45%, transparent);
+}
+
+.btn.demo-btn-danger:hover {
+    background: var(--bb-danger-soft);
+    border-color: var(--bb-danger);
+    color: var(--bb-danger-text);
+}
+
+/* A text field that takes what is left of its row, beside the button that submits it. */
+.bb-field.demo-field-grow {
+    flex: 1;
+    min-width: min(240px, 100%);
+}
+
+.bb-field.demo-field-grow > input {
+    width: 100%;
+}
+
+.bb-field > :is(input, select) {
+    font-weight: var(--fl-weight-regular);
+}
+
+.demo-toolbar-label {
+    font-size: var(--fl-font-size-200);
+}
+
+/* The MCP page's review console: code, typed into. The kit gives every textarea a field's chrome;
+   this one is a code editor, so it takes the code surface and the monospace face instead. */
+textarea.demo-code-input {
+    display: block;
+    margin: 0 0 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    tab-size: 4;
+    white-space: pre;
+    color: var(--bb-code-fg);
+    background: var(--bb-code-bg);
+}
+
+/* The landing page's hero sample: a live corner of the site under the code that drives it. */
+.demo-home-live {
+    padding: 1rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.demo-home-live .bb-toolbar {
+    margin-bottom: .75rem;
+}
+
+/* ---------- The consent panel: one tile per feature bit ---------- */
+
+.demo-consent-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.demo-consent-feature {
+    display: flex;
+    gap: .625rem;
+    align-items: flex-start;
+    padding: .625rem .75rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.45;
+    color: var(--bb-text);
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.demo-consent-feature:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface-hover);
+}
+
+.demo-consent-feature:has(input:checked) {
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+.demo-consent-feature:has(input:disabled) {
+    cursor: not-allowed;
+}
+
+.demo-consent-feature input {
+    margin-top: .1875rem;
+}
+
+.demo-consent-feature strong {
+    display: block;
+}
+
+.demo-consent-feature small {
+    display: block;
+    color: var(--bb-text-muted);
+}
+
+/* ---------- The consent banner (Shared/ConsentBanner.razor) ----------
+
+   A Fluent dialog surface pinned to the bottom of the viewport, over the page but under the
+   header, its drawers and the search palette - an open palette is what the reader is using. */
+.demo-consent-banner {
+    position: fixed;
+    z-index: 950;
+    inset-inline: 1rem;
+    bottom: 1rem;
+    max-width: 56rem;
+    margin-inline: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem 1.5rem;
+    align-items: center;
+    padding: 1rem 1.25rem;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-inline-start: 3px solid var(--bb-primary);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+}
+
+.demo-consent-banner-text {
+    flex: 1 1 22rem;
+    min-width: 0;
+}
+
+.demo-consent-banner-text p {
+    margin: .25rem 0 0;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    color: var(--bb-text-muted);
+}
+
+.demo-consent-banner-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+}
+
+@media print {
+    .demo-consent-banner {
+        display: none;
+    }
+}
+
+/* ---------- The live telemetry feed (Shared/TelemetryFeedView.razor) ---------- */
+
+.feed {
+    width: 100%;
+    min-width: 0;
+}
+
+.feed-chip-count {
+    margin-inline-start: .25rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--bb-text-soft);
+}
+
+.feed-status {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem .75rem;
+    align-items: center;
+    margin: 0 0 .75rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.feed-dot {
+    width: .5rem;
+    height: .5rem;
+    flex: none;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-success);
+    animation: feed-pulse 1.6s ease-in-out infinite;
+}
+
+.feed-dot.paused {
+    animation: none;
+    background: var(--bb-text-soft);
+}
+
+@keyframes feed-pulse {
+    50% { opacity: .35; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .feed-dot { animation: none; }
+}
+
+.feed-warn {
+    color: var(--bb-warning-text);
+}
+
+.bb-empty.feed-empty {
+    margin: 0;
+    padding: 1.25rem 1rem;
+}
+
+.feed-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.feed-row + .feed-row {
+    border-top: 1px solid var(--bb-border);
+}
+
+.feed-row-head {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 6.5rem 4.25rem 3.5rem minmax(0, 1fr) auto;
+    gap: .5rem;
+    align-items: center;
+    padding: .375rem .75rem;
+    font: inherit;
+    font-size: var(--fl-font-size-200);
+    text-align: start;
+    color: var(--bb-text);
+    background: none;
+    border: 0;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.feed-row-head:hover {
+    background: var(--bb-surface-hover);
+}
+
+.feed-row.open > .feed-row-head {
+    background: var(--bb-primary-soft);
+}
+
+.feed-row-head:focus-visible {
+    outline-offset: -2px;
+}
+
+.feed-time {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text-soft);
+}
+
+.feed-source {
+    font-size: .6875rem;
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.6;
+    text-transform: uppercase;
+    text-align: center;
+    padding: 0 .25rem;
+    border-radius: var(--bb-radius-sm);
+    color: var(--bb-text-muted);
+    background: var(--bb-surface-sunken);
+}
+
+.feed-source.src-browser { color: var(--bb-primary-hover); background: var(--bb-primary-soft); }
+.feed-source.src-wasm { color: var(--demo-violet); background: var(--demo-violet-soft); }
+.feed-source.src-server { color: var(--bb-success-text); background: var(--bb-success-soft); }
+
+.feed-kind {
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+.kind-error .feed-kind { color: var(--bb-danger-text); }
+.kind-event .feed-kind { color: var(--bb-primary); }
+.kind-metric .feed-kind { color: var(--demo-violet); }
+
+.feed-name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-family: var(--bb-mono);
+    font-size: .9em;
+}
+
+.feed-meta {
+    white-space: nowrap;
+    color: var(--bb-text-soft);
+}
+
+.feed-detail {
+    padding: .75rem;
+    background: var(--bb-bg);
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-params.feed-ids {
+    margin-bottom: .75rem;
+    box-shadow: none;
+}
+
+.feed-attrs {
+    margin-bottom: .75rem;
+}
+
+.feed-attrs td:first-child {
+    width: 35%;
+}
+
+.feed-resource {
+    font-size: var(--fl-font-size-200);
+}
+
+.feed-resource summary {
+    margin-bottom: .5rem;
+    cursor: pointer;
+    color: var(--bb-text-muted);
+}
+
+.feed-compact .feed-list {
+    max-height: 22rem;
+    overflow-y: auto;
+}
+
+@media (max-width: 40rem) {
+    .feed-row-head {
+        grid-template-columns: 4.25rem 3.5rem minmax(0, 1fr);
+    }
+
+    .feed-time,
+    .feed-meta {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/demo.js b/src/Utilities/Belemetry/Demo/Server/wwwroot/demo.js
new file mode 100644
index 00000000000..75d7fbe29d8
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/demo.js
@@ -0,0 +1,68 @@
+// The triggers the instrumentation pages press - the one script a page needs beyond the site kit
+// (theme.js and site.js, shared by every Utilities demo). A plain script rather than a module: the
+// pages call it by name through IJSRuntime.
+//
+// Each trigger does the thing the browser script instruments - throws, rejects, fetches, blocks the main
+// thread, writes to the console - exactly as app code would, so what the reader then sees on the Live
+// telemetry feed is what Belemetry records from a real app, not a simulation of it.
+
+window.blDemo = {
+    // Thrown from a timer so it reaches window.onerror as an uncaught error rather than being
+    // caught by the .NET interop call that triggered it.
+    throwError: function (message) {
+        setTimeout(function () { throw new TypeError(message || 'A deliberate error from the demo page'); }, 0);
+    },
+
+    rejectPromise: function (message) {
+        Promise.reject(new Error(message || 'A deliberate unhandled rejection from the demo page'));
+    },
+
+    // Plain fetch, no Blazor HttpClient: the script's fetch instrumentation records a client span
+    // and, for same-origin targets, adds a traceparent header the server answers with.
+    fetch: async function (url) {
+        const started = performance.now();
+        try {
+            const response = await fetch(url, { cache: 'no-store' });
+            const text = await response.text();
+            return { status: response.status, body: text.slice(0, 2000), ms: Math.round(performance.now() - started) };
+        } catch (e) {
+            return { status: 0, body: String(e), ms: Math.round(performance.now() - started) };
+        }
+    },
+
+    xhr: function (url) {
+        return new Promise(function (resolve) {
+            const started = performance.now();
+            const request = new XMLHttpRequest();
+            request.open('GET', url);
+            request.onloadend = function () {
+                resolve({ status: request.status, body: (request.responseText || '').slice(0, 2000), ms: Math.round(performance.now() - started) });
+            };
+            request.send();
+        });
+    },
+
+    // Blocks the main thread for longer than 50 ms, which is what the Long Tasks API reports.
+    longTask: function (ms) {
+        const end = performance.now() + (ms || 120);
+        while (performance.now() < end) { /* busy */ }
+    },
+
+    console: function (level, message) {
+        (console[level] || console.log).call(console, message);
+    },
+
+    // A layout shift for CLS: an element pushed into the flow above content the reader sees.
+    shift: function (id) {
+        const target = document.getElementById(id);
+        if (!target) return;
+        const spacer = document.createElement('div');
+        spacer.style.height = '48px';
+        target.prepend(spacer);
+        setTimeout(function () { spacer.remove(); }, 1500);
+    },
+
+    context: function () {
+        return window.BitBelemetry ? window.BitBelemetry.getContext() : null;
+    },
+};
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-dark.svg
index f898b1ecc76..6a7d271c711 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-dark.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -1,4 +1,4 @@
-<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
 <path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
 <path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-light.svg
index d65998bb15e..ad8eac6b7a6 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-light.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -1,4 +1,4 @@
-<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
 <path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
 <path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/github-icon.svg
index e05a37cdc93..3015530a905 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/github-icon.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -1,3 +1,3 @@
-<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
 </svg>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
index 093c7bb8e5b..bc0c4a3c298 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
 </svg>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/location-icon.svg
index c017738867f..a5ec5f18554 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/location-icon.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
 <path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
 </svg>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/tel-icon.svg
index 17cd1575ab2..16aab2dff2f 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/tel-icon.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
 </svg>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/twitter-icon.svg
index d896b1e596f..37c545ad56d 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/twitter-icon.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -1,3 +1,3 @@
-<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
 </svg>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/youtube-icon.svg
index b7254565d4f..ce75dd82fe6 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/youtube-icon.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
 </svg>
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/github-mark.svg
index dc9e0fc5ece..a357d582fa3 100644
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/images/github-mark.svg
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/images/github-mark.svg
@@ -1,4 +1,4 @@
-<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
      One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
 <svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/js/demo.js b/src/Utilities/Belemetry/Demo/Server/wwwroot/js/demo.js
deleted file mode 100644
index 188bcb7edfa..00000000000
--- a/src/Utilities/Belemetry/Demo/Server/wwwroot/js/demo.js
+++ /dev/null
@@ -1,440 +0,0 @@
-// Browser-side helpers for the demo shell. They live in a plain script (not a module) because the
-// components call them by name through IJSRuntime.InvokeAsync, and the file is loaded from
-// App.razor before blazor.web.js so every function exists by the time the WebAssembly runtime
-// hydrates the prerendered markup.
-//
-// Nothing here animates anything. Every moving thing on this site is Bit.Bmotion's job, and a
-// second animation engine hiding in the chrome would be the demo arguing against its own point.
-// What this file does is the handful of things a component cannot: read the document, listen to
-// the window, and talk to the clipboard.
-
-// ── Theme ────────────────────────────────────────────────────────────────────
-//
-// The stylesheets key off the data-theme attribute on <html>. This half of the file is also
-// inlined into the <head> by App.razor and runs before the first paint, so the stored theme is
-// applied to the document rather than swapped in afterwards - which would show the reader a flash
-// of the wrong one.
-
-window.blTheme = {
-    KEY: 'bl-theme',
-
-    // The stored choice if there is one, otherwise whatever the operating system asks for. Reading
-    // localStorage can throw outright (a browser with site data blocked), so a failure here falls
-    // through to the system preference rather than taking the page down with it.
-    preferred() {
-        let stored = null;
-        try { stored = localStorage.getItem(window.blTheme.KEY); } catch { /* no stored preference */ }
-        if (stored === 'light' || stored === 'dark') return stored;
-        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-
-    current() {
-        return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
-    },
-
-    apply(theme) {
-        document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : 'light');
-    },
-
-    set(theme) {
-        window.blTheme.apply(theme);
-        try { localStorage.setItem(window.blTheme.KEY, theme); } catch { /* preference is not persisted */ }
-    },
-};
-
-window.blToggleTheme = function () {
-    const next = window.blTheme.current() === 'dark' ? 'light' : 'dark';
-    window.blTheme.set(next);
-    return next;
-};
-
-window.blTheme.apply(window.blTheme.preferred());
-
-// ── Layout metrics ───────────────────────────────────────────────────────────
-//
-// The header's height and the gap under it are tokens in theme.css. Everything that has to clear
-// the header reads them from there rather than repeating the number, so the CSS and this file can
-// only ever agree.
-
-window.blMetrics = {
-    rem(name, fallback) {
-        const root = getComputedStyle(document.documentElement);
-        const value = parseFloat(root.getPropertyValue(name));
-        return (isNaN(value) ? fallback : value) * parseFloat(root.fontSize || '16');
-    },
-
-    headerOffset() {
-        return window.blMetrics.rem('--bl-layout-header', 3.5)
-             + window.blMetrics.rem('--bl-layout-header-gap', 1.5);
-    },
-};
-
-// ── Header ───────────────────────────────────────────────────────────────────
-//
-// The header is a translucent pane. It grows a shadow the moment there is something scrolled
-// underneath it to lift away from, and loses it again at the top of the page - so the elevation
-// says "there is more above" rather than being decoration that is always on.
-
-window.blHeader = {
-    onScroll: null,
-
-    update() {
-        const header = document.querySelector('.app-header');
-        if (!header) return;
-        header.setAttribute('data-scrolled', window.scrollY > 4 ? 'true' : 'false');
-    },
-};
-
-(function watchHeader() {
-    let queued = false;
-    window.blHeader.onScroll = function () {
-        if (queued) return;
-        queued = true;
-        requestAnimationFrame(() => {
-            queued = false;
-            window.blHeader.update();
-        });
-    };
-
-    window.addEventListener('scroll', window.blHeader.onScroll, { passive: true });
-    document.addEventListener('DOMContentLoaded', window.blHeader.update);
-    window.blHeader.update();
-})();
-
-// ── "On this page" rail ──────────────────────────────────────────────────────
-//
-// The rail is built from the section headings actually present in the rendered page, so a demo
-// page earns its entries by having sections rather than by maintaining a second list of them.
-
-window.blSections = {
-    ids: [],
-    dotNetRef: null,
-    activeId: null,
-    onScroll: null,
-
-    // The last heading that has passed under the header is the one being read. Falls back to the
-    // first entry so a page scrolled to the very top still marks its opening section.
-    update() {
-        const offset = window.blMetrics.headerOffset();
-        let current = window.blSections.ids[0] || null;
-
-        for (const id of window.blSections.ids) {
-            const el = document.getElementById(id);
-            if (!el) continue;
-            if (el.getBoundingClientRect().top - offset <= 1) current = id;
-        }
-
-        if (current === window.blSections.activeId) return;
-
-        window.blSections.activeId = current;
-        window.blSections.dotNetRef?.invokeMethodAsync('SetActiveSection', current);
-    },
-};
-
-// Returns the section headings of the current page, giving any that lack one a stable id derived
-// from its text so the rail's links survive a re-render - and hanging a link on each, so a reader
-// can send a colleague the one section that answers their question. A section is addressable for
-// exactly the same reason it is listed in the rail, which is why both happen here.
-window.blCollectSections = function (anchorIcon) {
-    const headings = document.querySelectorAll('.page-container .demo-section > h2');
-    const items = [];
-    const used = new Set();
-
-    headings.forEach((h, index) => {
-        let id = h.id;
-        if (!id) {
-            const slug = (h.textContent || '').trim().toLowerCase()
-                .replace(/[^a-z0-9]+/g, '-')
-                .replace(/^-+|-+$/g, '');
-            id = slug || `section-${index + 1}`;
-            while (used.has(id)) id = `${id}-${index + 1}`;
-            h.id = id;
-        }
-        used.add(id);
-
-        const title = (h.textContent || '').trim();
-        items.push({ id, title });
-
-        // The icon's geometry is handed in by the caller rather than written out here: it lives in
-        // Shared/Icons.cs with the rest of the set, and a second copy in this file is a copy that
-        // would never be updated alongside it. Without one the anchor is simply not hung - it is a
-        // shortcut to an id that the heading has either way.
-        if (anchorIcon && !h.querySelector('.heading-anchor')) {
-            const anchor = document.createElement('a');
-            anchor.className = 'heading-anchor';
-            anchor.href = `#${id}`;
-            anchor.setAttribute('aria-label', `Link to "${title}"`);
-            anchor.innerHTML = '<svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
-                + anchorIcon + '</svg>';
-            h.prepend(anchor);
-        }
-    });
-
-    return items;
-};
-
-// The caller has just collected the sections to build the rail from, so it hands the ids straight
-// over rather than making this walk the same headings a second time. Collecting them here is only
-// the fallback for a caller that has not.
-window.blObserveSections = function (dotNetRef, ids) {
-    window.blDisposeSections();
-
-    window.blSections.dotNetRef = dotNetRef;
-    window.blSections.ids = ids ?? window.blCollectSections().map(i => i.id);
-    window.blSections.activeId = null;
-
-    // A passive listener with the work deferred to the next frame: scroll fires far more often than
-    // the rail can meaningfully change, and this is running alongside the animations the page
-    // exists to demonstrate.
-    let queued = false;
-    window.blSections.onScroll = function () {
-        if (queued) return;
-        queued = true;
-        requestAnimationFrame(() => {
-            queued = false;
-            window.blSections.update();
-        });
-    };
-
-    window.addEventListener('scroll', window.blSections.onScroll, { passive: true });
-    window.addEventListener('resize', window.blSections.onScroll, { passive: true });
-    window.blSections.update();
-};
-
-window.blDisposeSections = function () {
-    if (window.blSections.onScroll) {
-        window.removeEventListener('scroll', window.blSections.onScroll);
-        window.removeEventListener('resize', window.blSections.onScroll);
-    }
-
-    window.blSections.onScroll = null;
-    window.blSections.dotNetRef = null;
-    window.blSections.ids = [];
-    window.blSections.activeId = null;
-};
-
-// scrollIntoView would put the heading under the sticky header, so the position is computed instead
-// and the header's height taken off it. The CSS scroll-padding covers the browser's own fragment
-// navigation; this covers the rail's.
-window.blScrollToSection = function (id) {
-    const el = document.getElementById(id);
-    if (!el) return;
-
-    const top = el.getBoundingClientRect().top + window.scrollY - window.blMetrics.headerOffset();
-    window.scrollTo({ top, behavior: 'smooth' });
-};
-
-window.blScrollToTop = function () {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-};
-
-// ── Keyboard shortcuts and the command palette ───────────────────────────────
-//
-// One listener, on the document, for the whole site. It owns exactly two things: the shortcut that
-// opens the palette, and - while the palette is open - the four keys that dialog needs. Everything
-// else falls straight through, which is why this is here rather than in an @onkeydown handler: a
-// Blazor handler cannot decide per event whether to preventDefault, so it would have to suppress
-// either every key or none of them, and both break typing into the palette's own input.
-
-window.blShortcuts = {
-    dotNetRef: null,
-    paletteRef: null,
-    paletteOpen: false,
-    onKeyDown: null,
-    returnFocusTo: null,
-
-    isMac() {
-        const platform = navigator.userAgentData?.platform || navigator.platform || '';
-        return /mac|iphone|ipad|ipod/i.test(platform);
-    },
-
-    // A key pressed while the reader is typing somewhere is theirs, not ours - with the single
-    // exception of the palette shortcut, which is a chord nothing else claims.
-    isTyping(target) {
-        if (!target) return false;
-        if (target.isContentEditable) return true;
-        return /^(input|textarea|select)$/i.test(target.tagName || '');
-    },
-};
-
-/// Installs the listener and returns the label for the header's keycap, so the shortcut and the
-/// key it advertises are decided in the same place.
-window.blRegisterShortcuts = function (dotNetRef) {
-    window.blUnregisterShortcuts();
-
-    window.blShortcuts.dotNetRef = dotNetRef;
-
-    window.blShortcuts.onKeyDown = function (e) {
-        if ((e.ctrlKey || e.metaKey) && !e.altKey && (e.key === 'k' || e.key === 'K')) {
-            e.preventDefault();
-            window.blShortcuts.dotNetRef?.invokeMethodAsync('OnSearchShortcut');
-            return;
-        }
-
-        // The bare slash is the other search shortcut readers reach for, but only when they are
-        // not already typing - otherwise it would eat the character.
-        if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey
-            && !window.blShortcuts.paletteOpen && !window.blShortcuts.isTyping(e.target)) {
-            e.preventDefault();
-            window.blShortcuts.dotNetRef?.invokeMethodAsync('OnSearchShortcut');
-            return;
-        }
-
-        if (!window.blShortcuts.paletteOpen) return;
-
-        const keys = { ArrowDown: 'down', ArrowUp: 'up', Enter: 'enter', Escape: 'close' };
-        const action = keys[e.key];
-        if (!action) return;
-
-        e.preventDefault();
-        window.blShortcuts.paletteRef?.invokeMethodAsync('OnPaletteKey', action);
-    };
-
-    document.addEventListener('keydown', window.blShortcuts.onKeyDown);
-
-    return window.blShortcuts.isMac() ? '⌘ K' : 'Ctrl K';
-};
-
-window.blUnregisterShortcuts = function () {
-    if (window.blShortcuts.onKeyDown) {
-        document.removeEventListener('keydown', window.blShortcuts.onKeyDown);
-    }
-
-    window.blShortcuts.onKeyDown = null;
-    window.blShortcuts.dotNetRef = null;
-};
-
-// Called by the palette as it opens and closes. It takes the focus on the way in and gives it back
-// on the way out - a dialog that leaves the reader's place behind is a dialog that costs more to
-// dismiss than it did to open - and holds the page still underneath it while it is up.
-window.blSetPaletteOpen = function (open, paletteRef) {
-    window.blShortcuts.paletteOpen = !!open;
-    window.blShortcuts.paletteRef = open ? paletteRef : null;
-
-    if (open) {
-        window.blShortcuts.returnFocusTo = document.activeElement;
-        document.body.style.overflow = 'hidden';
-
-        // The input does not exist yet: this runs from the component's parameter pass, which is
-        // before the render that creates it. Two frames is enough for Blazor to have applied the
-        // edit, and each attempt is cheap.
-        let attempts = 0;
-        const focus = () => {
-            const input = document.getElementById('palette-input');
-            if (input) { input.focus(); return; }
-            if (attempts++ < 10) requestAnimationFrame(focus);
-        };
-        requestAnimationFrame(focus);
-        return;
-    }
-
-    document.body.style.overflow = '';
-
-    const back = window.blShortcuts.returnFocusTo;
-    window.blShortcuts.returnFocusTo = null;
-    // Not if the reader has already moved on - navigating away from the palette puts focus where
-    // the new page wants it, and dragging it back to a header button would undo that.
-    if (back && document.body.contains(back) && document.activeElement === document.body) {
-        back.focus();
-    }
-};
-
-// The selection can move past either end of the visible list, and a selection nobody can see is
-// the same as no selection at all.
-window.blScrollPaletteActive = function () {
-    const active = document.querySelector('.palette-item.active');
-    active?.scrollIntoView({ block: 'nearest' });
-};
-
-// ── Clipboard ────────────────────────────────────────────────────────────────
-//
-// Backs the "Copy" buttons of Shared/CodeSnippet.razor and the landing page's install line.
-
-window.blCopyToClipboard = async function (text) {
-    try {
-        if (navigator.clipboard && window.isSecureContext) {
-            await navigator.clipboard.writeText(text);
-            return true;
-        }
-    } catch { /* fall through to legacy path */ }
-    const ta = document.createElement('textarea');
-    try {
-        ta.value = text;
-        ta.style.position = 'fixed';
-        ta.style.opacity = '0';
-        document.body.appendChild(ta);
-        ta.focus();
-        ta.select();
-        return document.execCommand('copy');
-    } catch {
-        return false;
-    } finally {
-        // Always remove the textarea, even if focus/select/execCommand throws.
-        if (ta.parentNode) document.body.removeChild(ta);
-    }
-};
-
-// ── Triggers for the instrumentation pages ──────────────────────────────────
-// Each one does the thing the browser script instruments - throws, rejects, fetches, blocks the main
-// thread, writes to the console - exactly as app code would, so what the reader then sees on the
-// Live telemetry feed is what Belemetry records from a real app, not a simulation of it.
-window.blDemo = {
-    // Thrown from a timer so it reaches window.onerror as an uncaught error rather than being
-    // caught by the .NET interop call that triggered it.
-    throwError: function (message) {
-        setTimeout(function () { throw new TypeError(message || 'A deliberate error from the demo page'); }, 0);
-    },
-
-    rejectPromise: function (message) {
-        Promise.reject(new Error(message || 'A deliberate unhandled rejection from the demo page'));
-    },
-
-    // Plain fetch, no Blazor HttpClient: the script's fetch instrumentation records a client span
-    // and, for same-origin targets, adds a traceparent header the server answers with.
-    fetch: async function (url) {
-        const started = performance.now();
-        try {
-            const response = await fetch(url, { cache: 'no-store' });
-            const text = await response.text();
-            return { status: response.status, body: text.slice(0, 2000), ms: Math.round(performance.now() - started) };
-        } catch (e) {
-            return { status: 0, body: String(e), ms: Math.round(performance.now() - started) };
-        }
-    },
-
-    xhr: function (url) {
-        return new Promise(function (resolve) {
-            const started = performance.now();
-            const request = new XMLHttpRequest();
-            request.open('GET', url);
-            request.onloadend = function () {
-                resolve({ status: request.status, body: (request.responseText || '').slice(0, 2000), ms: Math.round(performance.now() - started) });
-            };
-            request.send();
-        });
-    },
-
-    // Blocks the main thread for longer than 50 ms, which is what the Long Tasks API reports.
-    longTask: function (ms) {
-        const end = performance.now() + (ms || 120);
-        while (performance.now() < end) { /* busy */ }
-    },
-
-    console: function (level, message) {
-        (console[level] || console.log).call(console, message);
-    },
-
-    // A layout shift for CLS: an element pushed into the flow above content the reader sees.
-    shift: function (id) {
-        const target = document.getElementById(id);
-        if (!target) return;
-        const spacer = document.createElement('div');
-        spacer.style.height = '48px';
-        target.prepend(spacer);
-        setTimeout(function () { spacer.remove(); }, 1500);
-    },
-
-    context: function () {
-        return window.BitBelemetry ? window.BitBelemetry.getContext() : null;
-    },
-};
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/site.js b/src/Utilities/Belemetry/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Belemetry/Demo/Server/wwwroot/theme.js b/src/Utilities/Belemetry/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Belemetry/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/BevTools/Bit.BevTools/Capabilities/CapabilityReport.cs b/src/Utilities/BevTools/Bit.BevTools/Capabilities/CapabilityReport.cs
index 503c2a68756..afe2c0d57db 100644
--- a/src/Utilities/BevTools/Bit.BevTools/Capabilities/CapabilityReport.cs
+++ b/src/Utilities/BevTools/Bit.BevTools/Capabilities/CapabilityReport.cs
@@ -37,6 +37,7 @@ public static IReadOnlyList<BevToolsCapability> Build(BevToolsSession session)
         var reflectionOk = BlazorReflection.CanWrapRenderFragment;
         var hierarchyOk = BlazorReflection.CanResolveHierarchy;
         var batchesOk = BlazorReflection.CanDetectBatches;
+        var renderQueueOk = BlazorReflection.CanReadRenderQueue;
         var eventsObserved = ActivityObserver.HandleEventActivitiesObserved;
         var navObserved = ActivityObserver.NavigateActivitiesObserved;
         var lifecycleObserved = ActivityObserver.LifecycleMetricsObserved;
@@ -62,7 +63,7 @@ public static IReadOnlyList<BevToolsCapability> Build(BevToolsSession session)
             new("Rendering", "Render batches", batchesOk ? BevCapabilityStatus.RequiresInstrumentation : BevCapabilityStatus.NotReliable, batchesOk ? "Batch boundaries come from the renderer's batch builder; a batch is one diff sent to the browser." : "Falling back to idle-time heuristics for batch boundaries."),
             new("Rendering", "Batch diff duration and DOM edit count", diffAttributionLost ? BevCapabilityStatus.NotReliable : batchMetricsObserved ? BevCapabilityStatus.Available : metricsSupported ? BevCapabilityStatus.RequiresRuntimeSupport : BevCapabilityStatus.NotAvailable, diffAttributionLost ? "Attribution stopped after the browser acknowledgement backlog exceeded the bounded queue. Later measurements are omitted rather than attached to the wrong batch." : batchMetricsObserved ? "Observed through the aspnetcore.components.render_diff meters (.NET 10). On Blazor Server the measurement arrives when the browser acknowledges the render, so it is matched back to the batch it belongs to." : metricsHint),
             new("Rendering", "Render cause: parent re-render", hierarchyOk && batchesOk ? BevCapabilityStatus.Available : BevCapabilityStatus.NotReliable, "Attributed when an ancestor rendered earlier in the same batch (the renderer re-applies parameters)."),
-            new("Rendering", "Render cause: UI event", eventsObserved ? BevCapabilityStatus.Available : BevCapabilityStatus.RequiresRuntimeSupport, eventsObserved ? "Observed through the Microsoft.AspNetCore.Components.HandleEvent activity (.NET 10). AddBitBevToolsServices registers the framework ActivitySource itself, which is what makes this work outside server-side rendering." : eventsHint),
+            new("Rendering", "Render cause: UI event", !eventsObserved ? BevCapabilityStatus.RequiresRuntimeSupport : renderQueueOk ? BevCapabilityStatus.Available : BevCapabilityStatus.Partial, eventsObserved ? "Observed through the Microsoft.AspNetCore.Components.HandleEvent activity (.NET 10). AddBitBevToolsServices registers the framework ActivitySource itself, which is what makes this work outside server-side rendering. Work a handler starts without awaiting it (a timer, a fire-and-forget task) is not attributed to the event once the event has ended." + (renderQueueOk ? "" : " The renderer's render queue could not be read on this framework version, so the render a synchronous handler queued, which the framework processes after the event ended, is labeled StateHasChanged.") : eventsHint),
             new("Rendering", "Render cause: explicit StateHasChanged", BevCapabilityStatus.Partial, "Anything not attributable to a parent, event or navigation is reported as StateHasChanged (timer, async continuation, state notification). The caller is not identifiable without a stack walk."),
             new("Rendering", "Lifecycle method durations (SetParametersAsync)", lifecycleObserved ? BevCapabilityStatus.Available : metricsSupported ? BevCapabilityStatus.RequiresRuntimeSupport : BevCapabilityStatus.NotAvailable, lifecycleObserved ? "Per component type, from aspnetcore.components.update_parameters.duration (.NET 10)." : metricsHint),
             new("Events", "UI events with handler duration", eventsObserved ? BevCapabilityStatus.Available : BevCapabilityStatus.RequiresRuntimeSupport, FrameworkInstrumentationExists ? "From the framework ActivitySource; includes component type, method and attribute name." : EarlierRuntimeHint),
diff --git a/src/Utilities/BevTools/Bit.BevTools/Instrumentation/ActivityObserver.cs b/src/Utilities/BevTools/Bit.BevTools/Instrumentation/ActivityObserver.cs
index b9e83626f29..1f0e7a1ad8a 100644
--- a/src/Utilities/BevTools/Bit.BevTools/Instrumentation/ActivityObserver.cs
+++ b/src/Utilities/BevTools/Bit.BevTools/Instrumentation/ActivityObserver.cs
@@ -26,6 +26,7 @@ internal static class ActivityObserver
     private const string EventProperty = "Bit.BevTools.Event";
     private const string SessionProperty = "Bit.BevTools.Session";
     private const string ComponentTypeProperty = "Bit.BevTools.ComponentType";
+    private const string QueuedRendersProperty = "Bit.BevTools.QueuedRenders";
 
     private static readonly object Lock = new();
     private static ActivityListener? _listener;
@@ -331,6 +332,8 @@ private static void OnActivityStopped(Activity activity)
             return;
         }
 
+        NoteQueuedRenders(activity, session);
+
         var duration = activity.Duration.TotalMilliseconds;
         var failed = activity.Status == ActivityStatusCode.Error;
         string? errorType = null;
@@ -381,8 +384,17 @@ private static void OnActivityStopped(Activity activity)
         }
     }
 
-    /// <summary>Returns the UI event or navigation executing right now on the given session (walks Activity.Current).</summary>
-    public static BevToolsEvent? CurrentTriggerEvent(BevToolsSession session)
+    /// <summary>
+    /// Returns the UI event or navigation the current work belongs to on the given session (walks Activity.Current).
+    /// <para>
+    /// Activity.Current flows with the execution context, so a timer, background loop or fire-and-forget task started
+    /// inside an event or navigation still sees its activity long after it ended; what that work does is not the
+    /// trigger's. A trigger therefore counts while its activity runs, and once stopped only for the batch that
+    /// renders what it had queued (see <see cref="QueuedRenders"/>). <paramref name="rendering"/> and
+    /// <paramref name="batch"/> name the render asking; without them the question is about the batch in progress.
+    /// </para>
+    /// </summary>
+    public static BevToolsEvent? CurrentTriggerEvent(BevToolsSession session, BevComponentRecord? rendering = null, BevRenderBatchInfo? batch = null)
     {
         var activity = Activity.Current;
         var hops = 0;
@@ -390,12 +402,19 @@ private static void OnActivityStopped(Activity activity)
         {
             if (activity.OperationName == HandleEventName || activity.OperationName == NavigateName)
             {
-                if (activity.GetCustomProperty(EventProperty) is BevToolsEvent evt)
+                var property = activity.GetCustomProperty(EventProperty);
+                if (activity.IsStopped)
+                {
+                    if (property is BevToolsEvent stopped && OwnsQueuedRenders(activity, session, rendering, batch))
+                    {
+                        return stopped;
+                    }
+                }
+                else if (property is BevToolsEvent evt)
                 {
                     return ReferenceEquals(evt, IgnoredEvent) || !ReferenceEquals(activity.GetCustomProperty(SessionProperty), session) ? null : evt;
                 }
-
-                if (activity.GetCustomProperty(EventProperty) is null && !activity.IsStopped)
+                else if (property is null)
                 {
                     return Adopt(activity, session);
                 }
@@ -407,6 +426,81 @@ private static void OnActivityStopped(Activity activity)
         return null;
     }
 
+    /// <summary>
+    /// Remembers which renders a trigger had queued when its activity stopped. The framework stops a synchronous
+    /// handler's activity as soon as the handler returns, and renders what it queued only afterwards (in
+    /// DispatchEventAsync's finally block), so without this the click's own render would look like StateHasChanged.
+    /// </summary>
+    private static void NoteQueuedRenders(Activity activity, BevToolsSession session)
+    {
+        try
+        {
+            // The queue belongs to the dispatcher; an activity stopped anywhere else has nothing of its own in it.
+            if (session.Components.Renderer is not { } renderer || !renderer.Dispatcher.CheckAccess()
+                || BlazorReflection.QueuedComponents(renderer) is not { Length: > 0 } queued)
+            {
+                return;
+            }
+
+            List<long>? instanceIds = null;
+            foreach (var component in queued)
+            {
+                if (session.Components.TryGet(component, out var record))
+                {
+                    (instanceIds ??= []).Add(record.InstanceId);
+                }
+            }
+
+            if (instanceIds is not null)
+            {
+                activity.SetCustomProperty(QueuedRendersProperty, new QueuedRenders(instanceIds.ToArray(), session.RenderTracker.BatchStarts + 1));
+            }
+        }
+        catch
+        {
+            // some renderers throw for Dispatcher before initialization; nothing is queued then.
+        }
+    }
+
+    private static bool OwnsQueuedRenders(Activity activity, BevToolsSession session, BevComponentRecord? rendering, BevRenderBatchInfo? batch)
+    {
+        if (activity.GetCustomProperty(QueuedRendersProperty) is not QueuedRenders queued || !ReferenceEquals(activity.GetCustomProperty(SessionProperty), session))
+        {
+            return false;
+        }
+
+        if (rendering is not null)
+        {
+            return batch is not null && queued.Owns(rendering, batch);
+        }
+
+        // Not a render - a component being created, an HTTP request, a JS call: it is the trigger's only while the
+        // renderer is still processing that batch. The tracker's batch outlives the pass (without diff metrics it stays
+        // current until the next render), so the renderer's own in-progress flag decides.
+        return session.RenderTracker.CurrentBatch is { } current && queued.Owns(null, current)
+            && session.Components.Renderer is { } renderer && BlazorReflection.GetIsBatchInProgress?.Invoke(renderer) == true;
+    }
+
+    /// <summary>
+    /// What a trigger had queued for rendering when its activity stopped, and the one batch it keeps for it. That
+    /// batch is the one in progress at the stop or the next one, and it is identified by rendering one of those
+    /// components: a later batch - a timer tick re-rendering the same component - is never the trigger's.
+    /// </summary>
+    private sealed class QueuedRenders(long[] instanceIds, long lastCandidateBatch)
+    {
+        private BevRenderBatchInfo? _batch;
+
+        public bool Owns(BevComponentRecord? rendering, BevRenderBatchInfo batch)
+        {
+            if (_batch is null && rendering is not null && batch.Sequence <= lastCandidateBatch && Array.IndexOf(instanceIds, rendering.InstanceId) >= 0)
+            {
+                _batch = batch;
+            }
+
+            return ReferenceEquals(_batch, batch);
+        }
+    }
+
     private static void OnMeasurement<T>(Instrument instrument, T value, ReadOnlySpan<KeyValuePair<string, object?>> tags) where T : struct
     {
         // Cheap dispatch first: the parameter-update histogram fires once per component per parameter update.
diff --git a/src/Utilities/BevTools/Bit.BevTools/Instrumentation/BlazorReflection.cs b/src/Utilities/BevTools/Bit.BevTools/Instrumentation/BlazorReflection.cs
index 7d38b3bd081..37c4e1e92f4 100644
--- a/src/Utilities/BevTools/Bit.BevTools/Instrumentation/BlazorReflection.cs
+++ b/src/Utilities/BevTools/Bit.BevTools/Instrumentation/BlazorReflection.cs
@@ -1,4 +1,5 @@
-using System.Linq.Expressions;
+using System.Collections;
+using System.Linq.Expressions;
 using System.Reflection;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
@@ -81,6 +82,20 @@ static BlazorReflection()
                 var renderer = Expression.Parameter(typeof(Renderer), "r");
                 GetIsBatchInProgress = Expression.Lambda<Func<Renderer, bool>>(Expression.Field(renderer, batchInProgressField), renderer).Compile();
             }
+
+            // The renders the renderer was asked for and has not started: RenderBatchBuilder.ComponentRenderQueue, a
+            // queue of RenderQueueEntry structs whose ComponentState field names the component.
+            var queueProperty = batchBuilderField?.FieldType.GetProperty("ComponentRenderQueue", Instance);
+            var entryType = queueProperty?.PropertyType is { IsGenericType: true } queueType ? queueType.GetGenericArguments()[0] : null;
+            var entryStateField = entryType?.GetField("ComponentState", Instance);
+            if (batchBuilderField is not null && queueProperty is not null && typeof(IEnumerable).IsAssignableFrom(queueProperty.PropertyType)
+                && entryStateField is not null && entryStateField.FieldType == typeof(ComponentState))
+            {
+                var renderer = Expression.Parameter(typeof(Renderer), "r");
+                GetRenderQueue = Expression.Lambda<Func<Renderer, IEnumerable>>(Expression.Property(Expression.Field(renderer, batchBuilderField), queueProperty), renderer).Compile();
+                var entry = Expression.Parameter(typeof(object), "e");
+                GetQueueEntryState = Expression.Lambda<Func<object, ComponentState>>(Expression.Field(Expression.Convert(entry, entryType!), entryStateField), entry).Compile();
+            }
         }
         catch (Exception ex)
         {
@@ -116,6 +131,10 @@ static BlazorReflection()
 
     public static Func<Renderer, bool>? GetIsBatchInProgress { get; }
 
+    public static Func<Renderer, IEnumerable>? GetRenderQueue { get; }
+
+    public static Func<object, ComponentState>? GetQueueEntryState { get; }
+
     public static Exception? InitializationError { get; }
 
     public static bool CanWrapRenderFragment => RenderFragmentField is not null && GetRenderFragment is not null;
@@ -126,6 +145,32 @@ static BlazorReflection()
 
     public static bool CanDetectBatches => GetUpdatedDiffCount is not null;
 
+    public static bool CanReadRenderQueue => GetRenderQueue is not null && GetQueueEntryState is not null;
+
+    /// <summary>The components whose render is queued but not started, in queue order; null when the queue cannot be read.</summary>
+    public static IComponent[]? QueuedComponents(Renderer renderer)
+    {
+        if (GetRenderQueue is null || GetQueueEntryState is null)
+        {
+            return null;
+        }
+
+        try
+        {
+            List<IComponent>? components = null;
+            foreach (var entry in GetRenderQueue(renderer))
+            {
+                (components ??= []).Add(GetQueueEntryState(entry!).Component);
+            }
+
+            return components?.ToArray() ?? [];
+        }
+        catch
+        {
+            return null;
+        }
+    }
+
     /// <summary>Replaces the component's render fragment. Works on the readonly field through FieldInfo (allowed by the runtime for instance fields).</summary>
     public static bool TrySetRenderFragment(ComponentBase component, RenderFragment fragment)
     {
diff --git a/src/Utilities/BevTools/Bit.BevTools/Instrumentation/RenderTracker.cs b/src/Utilities/BevTools/Bit.BevTools/Instrumentation/RenderTracker.cs
index 1a22606f440..c498033e9b3 100644
--- a/src/Utilities/BevTools/Bit.BevTools/Instrumentation/RenderTracker.cs
+++ b/src/Utilities/BevTools/Bit.BevTools/Instrumentation/RenderTracker.cs
@@ -24,6 +24,9 @@ public sealed class BevRenderBatchInfo
     /// <summary>Every render seen in this batch, BevTools' own and paused ones included; compared with the renderer's diff count to detect a new pass.</summary>
     internal int ObservedRenders { get; set; }
 
+    /// <summary>Position among every batch the session has seen, bookkept ones included, so "the next batch" can be named before it starts.</summary>
+    internal long Sequence { get; init; }
+
     public long EventId { get; set; }
 
     public long StartTicks { get; init; }
@@ -69,6 +72,7 @@ internal sealed class RenderTracker
     private readonly int _maxAwaitingDiff;
     private BevRenderBatchInfo? _lastDiffBatch;
     private long _batchSequence;
+    private long _batchStarts;
     private long _renderSequence;
     private long _lastRenderEndTicks;
 
@@ -83,6 +87,9 @@ public RenderTracker(BevToolsSession session, BitBevToolsOptions options)
 
     public long BatchCount => Volatile.Read(ref _batchSequence);
 
+    /// <summary>The <see cref="BevRenderBatchInfo.Sequence"/> of the latest batch; the next one gets this plus one.</summary>
+    internal long BatchStarts => Volatile.Read(ref _batchStarts);
+
     public bool DiffAttributionLost { get; private set; }
 
     public void Instrument(BevComponentRecord record)
@@ -386,24 +393,24 @@ private void ResolveRenderer(BevComponentRecord record, ComponentBase component)
             if (track && !current.IsTracked)
             {
                 // The first application render in a batch that so far held only unrecorded renders.
-                StartTracking(current);
+                StartTracking(current, record);
             }
 
             return current;
         }
 
         CloseBatch();
-        var batch = new BevRenderBatchInfo { StartTicks = Stopwatch.GetTimestamp(), ObservedRenders = 1 };
+        var batch = new BevRenderBatchInfo { StartTicks = Stopwatch.GetTimestamp(), ObservedRenders = 1, Sequence = Interlocked.Increment(ref _batchStarts) };
         if (track)
         {
-            StartTracking(batch);
+            StartTracking(batch, record);
         }
 
         CurrentBatch = batch;
         return batch;
     }
 
-    private void StartTracking(BevRenderBatchInfo batch)
+    private void StartTracking(BevRenderBatchInfo batch, BevComponentRecord firstRender)
     {
         batch.IsTracked = true;
         batch.Id = Interlocked.Increment(ref _batchSequence);
@@ -413,7 +420,7 @@ private void StartTracking(BevRenderBatchInfo batch)
             Category = "render-batch",
             Title = "Render batch #" + batch.Id,
             Detail = "in progress",
-            ParentEventId = ActivityObserver.CurrentTriggerEvent(_session)?.Id,
+            ParentEventId = ActivityObserver.CurrentTriggerEvent(_session, firstRender, batch)?.Id,
             StartTicks = batch.StartTicks,
             Data = new Dictionary<string, object?> { ["batch"] = batch.Id },
         });
@@ -559,7 +566,7 @@ internal void RecordBatchDiffSize(int diffSize)
     {
         if (!record.HasRendered)
         {
-            return (BevRenderCause.Initial, InitialCauseDetail, ActivityObserver.CurrentTriggerEvent(_session)?.Id);
+            return (BevRenderCause.Initial, InitialCauseDetail, ActivityObserver.CurrentTriggerEvent(_session, record, batch)?.Id);
         }
 
         if (!_options.TrackRenderCauses)
@@ -587,8 +594,8 @@ internal void RecordBatchDiffSize(int diffSize)
             }
         }
 
-        // 2. A UI event or navigation is executing on this session.
-        var trigger = ActivityObserver.CurrentTriggerEvent(_session);
+        // 2. A UI event or navigation is executing on this session, or this batch renders what one had queued.
+        var trigger = ActivityObserver.CurrentTriggerEvent(_session, record, batch);
         if (trigger is not null)
         {
             return trigger.Kind == BevToolsEventKind.Navigation
diff --git a/src/Utilities/BevTools/Demo/Client/Components/ErrorScenarios.razor b/src/Utilities/BevTools/Demo/Client/Components/ErrorScenarios.razor
index 0b96fb628f2..306d92426d1 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/ErrorScenarios.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/ErrorScenarios.razor
@@ -4,19 +4,19 @@
 @* A component of its own so the Errors page can wrap it in an ErrorBoundary: event handler exceptions are routed to
    the boundary above the component that owns the handler, so a boundary inside the page could not catch them. *@
 
-<div class="row">
-    <button @onclick="ThrowInHandler">Throw in event handler</button>
-    <button @onclick="ThrowAsync">Throw after await</button>
-    <button @onclick="() => _renderBomb = true">Throw during render (inside ErrorBoundary)</button>
-    <button @onclick="() => _initBomb = true">Child throws in OnInitialized (inside ErrorBoundary)</button>
-    <button @onclick="Http404">HTTP 404</button>
-    <button @onclick="() => { _renderBomb = false; _initBomb = false; _boundary?.Recover(); }">Reset</button>
+<div class="bb-toolbar">
+    <button type="button" class="btn btn-secondary" @onclick="ThrowInHandler">Throw in event handler</button>
+    <button type="button" class="btn btn-secondary" @onclick="ThrowAsync">Throw after await</button>
+    <button type="button" class="btn btn-secondary" @onclick="() => _renderBomb = true">Throw during render (inside ErrorBoundary)</button>
+    <button type="button" class="btn btn-secondary" @onclick="() => _initBomb = true">Child throws in OnInitialized (inside ErrorBoundary)</button>
+    <button type="button" class="btn btn-secondary" @onclick="Http404">HTTP 404</button>
+    <button type="button" class="btn btn-outline" @onclick="() => { _renderBomb = false; _initBomb = false; _boundary?.Recover(); }">Reset</button>
 </div>
 
 <ErrorBoundary @ref="_boundary">
     <ChildContent>
-        <div class="card">
-            <h3>Protected area</h3>
+        <div class="demo-tile">
+            <h4 class="demo-tile-title">Protected area</h4>
             @if (_renderBomb)
             {
                 <div>@ThrowingValue</div>
@@ -25,11 +25,11 @@
             {
                 <BrokenChild />
             }
-            <div class="muted">Nothing exploded (yet).</div>
+            <div class="bb-muted">Nothing exploded (yet).</div>
         </div>
     </ChildContent>
     <ErrorContent Context="ex">
-        <div class="card error">ErrorBoundary caught: @ex.GetType().Name — @ex.Message</div>
+        <div class="bb-note bb-note-danger">ErrorBoundary caught: @ex.GetType().Name — @ex.Message</div>
     </ErrorContent>
 </ErrorBoundary>
 
diff --git a/src/Utilities/BevTools/Demo/Client/Components/FilterBar.razor b/src/Utilities/BevTools/Demo/Client/Components/FilterBar.razor
index 25d9b0538a8..6d72a7754df 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/FilterBar.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/FilterBar.razor
@@ -1,9 +1,9 @@
 @namespace Bit.BevTools.Demo.Client.Components
 @inject FilterState Filter
 
-<div class="row">
-    <input placeholder="Search products (every keystroke notifies FilterState)" value="@Filter.Query" @oninput="OnQuery" style="min-width:320px" />
-    <select value="@Filter.Category" @onchange="OnCategory">
+<div class="bb-toolbar">
+    <input type="search" class="demo-search" aria-label="Search products" placeholder="Search products (every keystroke notifies FilterState)" value="@Filter.Query" @oninput="OnQuery" />
+    <select aria-label="Category" value="@Filter.Category" @onchange="OnCategory">
         <option>All</option>
         <option>Office</option>
         <option>Audio</option>
@@ -11,8 +11,8 @@
         <option>Outdoor</option>
         <option>Accessories</option>
     </select>
-    <label>Max price <input type="range" min="10" max="1000" value="@Filter.MaxPrice" @oninput="OnPrice" /> @Filter.MaxPrice.ToString("C0")</label>
-    <button @onclick="Filter.Touch">Notify without change (@Filter.ChangeCount)</button>
+    <label class="bb-check">Max price <input type="range" min="10" max="1000" value="@Filter.MaxPrice" @oninput="OnPrice" /> <span class="demo-range-value">@Filter.MaxPrice.ToString("C0")</span></label>
+    <button type="button" class="btn btn-secondary" @onclick="Filter.Touch">Notify without change (@Filter.ChangeCount)</button>
 </div>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/Components/LiveClock.razor b/src/Utilities/BevTools/Demo/Client/Components/LiveClock.razor
index 4472a733647..2da797a22bd 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/LiveClock.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/LiveClock.razor
@@ -1,8 +1,8 @@
 @namespace Bit.BevTools.Demo.Client.Components
 @implements IDisposable
 
-<div class="big clock">@_now.ToString("HH:mm:ss.f")</div>
-<div class="muted">ticks every 500 ms (StateHasChanged from a timer)</div>
+<div class="demo-big demo-clock">@_now.ToString("HH:mm:ss.f")</div>
+<div class="bb-muted">ticks every 500 ms (StateHasChanged from a timer)</div>
 
 @code {
     private DateTime _now = DateTime.Now;
diff --git a/src/Utilities/BevTools/Demo/Client/Components/ProblemCard.razor b/src/Utilities/BevTools/Demo/Client/Components/ProblemCard.razor
index 15fa68d4f22..c7eae7e8668 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/ProblemCard.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/ProblemCard.razor
@@ -1,18 +1,27 @@
 @namespace Bit.BevTools.Demo.Client.Components
 
-<div class="problem">
-    <h3>@Title</h3>
-    <div class="muted">@Symptom</div>
-    <ol>
+@* One problem of the index: a section of the Problems page (its title feeds the page's "on this
+   page" rail), the symptom a developer would report, the steps through BevTools, and a link to the
+   page the problem lives on. *@
+
+<div class="bb-card demo-problem" id="@Id">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> @Title</h3>
+    <p class="bb-card-desc"><strong>Symptom:</strong> @Symptom</p>
+    <ol class="bb-detail-list">
         @ChildContent
     </ol>
     @if (Href is not null)
     {
-        <div class="row"><a href="@Href">Open @Href</a></div>
+        <div class="bb-try">
+            <a class="btn btn-outline" href="@Href">Open @(DocsCatalog.FindByPath(Href)?.Title ?? Href) →</a>
+        </div>
     }
 </div>
 
 @code {
+    /// <summary>The anchor other pages link to (<c>problems#problem-1</c>).</summary>
+    [Parameter] public string? Id { get; set; }
+
     [Parameter] public string Title { get; set; } = "";
 
     [Parameter] public string Symptom { get; set; } = "";
diff --git a/src/Utilities/BevTools/Demo/Client/Components/ProductList.razor b/src/Utilities/BevTools/Demo/Client/Components/ProductList.razor
index 5b92ce477f6..7bd7a2dfbd7 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/ProductList.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/ProductList.razor
@@ -4,21 +4,23 @@
 @inject ProductApi Api
 @inject CartState Cart
 
-<div class="card">
-    <h3>Products <span class="muted">(@_visible.Count of @_all.Count) · rendered @_renders times · @(SearchOnType ? "searching the API on every keystroke" : "filtering locally")</span></h3>
+<div class="demo-tile">
+    <h4 class="demo-tile-title">Products <span class="bb-muted">(@_visible.Count of @_all.Count) · rendered @_renders times · @(SearchOnType ? "searching the API on every keystroke" : "filtering locally")</span></h4>
     @if (_error is not null)
     {
-        <div class="error">@_error</div>
+        <div class="bb-note bb-note-danger">@_error</div>
     }
-    <table>
-        <thead><tr><th>Name</th><th>Category</th><th>Price</th><th>Stock</th><th>Rating</th><th></th></tr></thead>
-        <tbody>
-            @foreach (var p in _visible)
-            {
-                <ProductRow Product="p" Highlight="@(p.Id % 7 == 0)" OnAdd="Cart.Add" />
-            }
-        </tbody>
-    </table>
+    <div class="bb-scroll demo-table-scroll">
+        <table class="bb-table demo-products">
+            <thead><tr><th>Name</th><th>Category</th><th>Price</th><th>Stock</th><th>Rating</th><th></th></tr></thead>
+            <tbody>
+                @foreach (var p in _visible)
+                {
+                    <ProductRow Product="p" Highlight="@(p.Id % 7 == 0)" OnAdd="Cart.Add" />
+                }
+            </tbody>
+        </table>
+    </div>
 </div>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/Components/ProductRow.razor b/src/Utilities/BevTools/Demo/Client/Components/ProductRow.razor
index 707297943a4..1cbd9fac96b 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/ProductRow.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/ProductRow.razor
@@ -4,9 +4,9 @@
     <td>@Product.Name</td>
     <td>@Product.Category</td>
     <td>@Product.Price.ToString("C")</td>
-    <td class="@(Product.Stock == 0 ? "error" : "")">@(Product.Stock == 0 ? "sold out" : Product.Stock.ToString())</td>
-    <td>@Product.Rating ★</td>
-    <td><button @onclick="() => OnAdd.InvokeAsync(Product)" disabled="@(Product.Stock == 0)">Add</button></td>
+    <td class="@(Product.Stock == 0 ? "demo-sold-out" : "")">@(Product.Stock == 0 ? "sold out" : Product.Stock.ToString())</td>
+    <td class="bb-nowrap">@Product.Rating ★</td>
+    <td class="bb-table-action"><button type="button" class="btn btn-secondary demo-btn-sm" @onclick="() => OnAdd.InvokeAsync(Product)" disabled="@(Product.Stock == 0)">Add</button></td>
 </tr>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/Components/RecentOrders.razor b/src/Utilities/BevTools/Demo/Client/Components/RecentOrders.razor
index 88fb2a4f5f2..9cde09ff4d6 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/RecentOrders.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/RecentOrders.razor
@@ -1,25 +1,33 @@
 @namespace Bit.BevTools.Demo.Client.Components
 @inject ProductApi Api
 
-<div class="card" style="grid-column: span 2">
-    <h3>Recent orders <span class="muted">(HTTP, 1.2–2.6 s server delay)</span></h3>
+<div class="demo-tile demo-span-2">
+    <h4 class="demo-tile-title">Recent orders <span class="bb-muted">(HTTP, 1.2–2.6 s server delay)</span></h4>
     @if (_orders is null)
     {
-        <div class="muted">@(_error ?? "loading…")</div>
+        <div class="bb-muted demo-loading">
+            @if (_error is null)
+            {
+                <span class="bb-spinner" aria-hidden="true"></span>
+            }
+            @(_error ?? "loading…")
+        </div>
     }
     else
     {
-        <table>
-            <thead><tr><th>#</th><th>Customer</th><th>Total</th><th>Status</th></tr></thead>
-            <tbody>
-                @foreach (var o in _orders.Take(5))
-                {
-                    <tr><td>@o.Id</td><td>@o.Customer</td><td>@o.Total.ToString("C")</td><td>@o.Status</td></tr>
-                }
-            </tbody>
-        </table>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>#</th><th>Customer</th><th>Total</th><th>Status</th></tr></thead>
+                <tbody>
+                    @foreach (var o in _orders.Take(5))
+                    {
+                        <tr><td>@o.Id</td><td>@o.Customer</td><td>@o.Total.ToString("C")</td><td>@o.Status</td></tr>
+                    }
+                </tbody>
+            </table>
+        </div>
     }
-    <div class="row"><button @onclick="Reload">Reload</button></div>
+    <div class="bb-toolbar"><button type="button" class="btn btn-secondary" @onclick="Reload">Reload</button></div>
 </div>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/Components/RendererStatus.razor b/src/Utilities/BevTools/Demo/Client/Components/RendererStatus.razor
new file mode 100644
index 00000000000..19aa1f752fc
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Components/RendererStatus.razor
@@ -0,0 +1,12 @@
+@namespace Bit.BevTools.Demo.Client.Components
+
+@* Where the sample is running right now. Under Interactive Auto the same page can come up on the
+   Server renderer (a circuit) or on WebAssembly, and several scenarios behave differently on each,
+   so every sample says which one it got. It takes no parameters, so a parent re-render never
+   re-renders it: it adds nothing to the renders a scenario is about. *@
+
+<span class="demo-renderer">
+    <span class="bb-dot @(RendererInfo.IsInteractive ? "bb-dot-success" : "bb-dot-warning")" aria-hidden="true"></span>
+    Renderer: <strong>@RendererInfo.Name</strong> · @(RendererInfo.IsInteractive ? "interactive" : "prerendering")
+</span>
+<span class="demo-shortcut"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>D</kbd> opens BevTools</span>
diff --git a/src/Utilities/BevTools/Demo/Client/Components/StatsCard.razor b/src/Utilities/BevTools/Demo/Client/Components/StatsCard.razor
index 14413a3a719..9dac5be97e5 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/StatsCard.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/StatsCard.razor
@@ -1,9 +1,9 @@
 @namespace Bit.BevTools.Demo.Client.Components
 
-<div class="card @(Settings?.Dense == true ? "dense" : "")" style="border-top: 3px solid @(Settings?.Accent ?? "#0969da")">
-    <h3>@Title</h3>
-    <div class="big">@Value</div>
-    <div class="muted">@Trend · settings v@(Settings?.Version ?? 0)</div>
+<div class="demo-tile demo-stat @(Settings?.Dense == true ? "dense" : "")" style="border-top-color: @(Settings?.Accent ?? DashboardSettings.DefaultAccent)">
+    <h4 class="demo-tile-title">@Title</h4>
+    <div class="demo-big">@Value</div>
+    <div class="bb-muted">@Trend · settings v@(Settings?.Version ?? 0)</div>
 </div>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/Components/UserProfile.razor b/src/Utilities/BevTools/Demo/Client/Components/UserProfile.razor
index 4b1097ee1b0..74f993fea7c 100644
--- a/src/Utilities/BevTools/Demo/Client/Components/UserProfile.razor
+++ b/src/Utilities/BevTools/Demo/Client/Components/UserProfile.razor
@@ -2,18 +2,18 @@
 @inject UserSession Session
 @inject ProductApi Api
 
-<div class="card">
-    <h3>User profile</h3>
-    <div><strong>@Session.DisplayName</strong> <span class="muted">(@Session.UserName)</span></div>
+<div class="demo-tile">
+    <h4 class="demo-tile-title">User profile</h4>
+    <div><strong>@Session.DisplayName</strong> <span class="bb-muted">(@Session.UserName)</span></div>
     @if (_profile is null)
     {
-        <div class="muted">@(_error ?? "loading profile…")</div>
+        <div class="bb-muted">@(_error ?? "loading profile…")</div>
     }
     else
     {
         <div>@_profile.Email · plan @_profile.Plan</div>
     }
-    <div class="muted">The access token, api key and the Bearer header are redacted in BevTools (Components → State / Network → headers).</div>
+    <p class="demo-tile-note">The access token, api key and the Bearer header are redacted in BevTools (Components → State / Network → headers).</p>
 </div>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/DocsCatalog.cs b/src/Utilities/BevTools/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..0c0165594e4
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,180 @@
+using Bit.BevTools.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.BevTools.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "BevTools";
+
+    public const string PackageId = "Bit.BevTools";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/BevTools";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "BevTools is an in-app developer tool for Blazor: a live component tree, a render profiler that explains " +
+        "why a component rendered, a timeline, state, network, JS interop, errors, DI and circuit diagnostics. " +
+        "This site is a Blazor app with BevTools switched on - press Ctrl+Shift+D to open it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["render", "state", "network", "interop", "circuit"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    /// <remarks>Off here: while the BevTools panel is open, Ctrl+K opens its own search and command palette.</remarks>
+    public static readonly bool PaletteCtrlK = false;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/problems", "Problems"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Start here",
+        [
+            new("/getting-started", "Getting started",
+                "Install the packages, register BevTools in the server and the client, place the panel once and open it with Ctrl+Shift+D.",
+                "install setup nuget package AddBitBevToolsServices AddBitBevToolsServerServices BevToolsPanel program.cs MetricsSupport interactive auto enabled development shortcut",
+                typeof(GettingStarted)),
+            new("/problems", "Problems to diagnose",
+                "Ten real problems planted in this app, each with the panels and the steps that lead from the symptom to its cause.",
+                "problems index scenarios exercises planted bugs walkthrough diagnose symptoms causes",
+                typeof(Problems)),
+        ]),
+        new("Rendering",
+        [
+            new("/dashboard", "Dashboard",
+                "A component hierarchy with a cascading value, HTTP data and a live clock: the component tree, render causes and renders driven only by a parent.",
+                "components tree inspector profiler cascading value CascadingParameter StatsCard LiveClock timer StateHasChanged parent render forced re-render",
+                typeof(Dashboard)),
+            new("/products", "Products",
+                "A 120-row list that re-renders on every keystroke and a search that fires one request per key: render storms, cascades and duplicate HTTP.",
+                "render storm cascade ShouldRender FilterState ProductList ProductRow keystroke oninput duplicate requests search debounce profiler by type",
+                typeof(Products)),
+            new("/counter", "Counter",
+                "The baseline: one click, one event, one render - and ten renders from a single event that awaits between them.",
+                "counter baseline click event render timeline StateHasChanged await caused by",
+                typeof(Counter)),
+        ]),
+        new("Network & state",
+        [
+            new("/orders", "Orders",
+                "Slow, very slow, flaky and missing endpoints and a burst of identical requests, for the Network panel and the HTTP rules.",
+                "network http slow flaky 404 duplicate requests IHttpClientFactory status duration trigger",
+                typeof(Orders)),
+            new("/checkout", "Checkout",
+                "A cart and a validated form whose every action is a named state change with a before/after diff.",
+                "state CartState AppState IBevStateProvider AddBevToolsStateProvider diff history form validation EditForm",
+                typeof(Checkout)),
+        ]),
+        new("Interop, errors & circuits",
+        [
+            new("/interop", "JS interop",
+                "Measured, slow, chatty and failing JS calls, JS → .NET callbacks and browser storage, each attributed to the component that made it.",
+                "js interop IJSRuntime IJSObjectReference module slow chatty callbacks DotNetObjectReference JSInvokable localStorage sessionStorage redaction",
+                typeof(Interop)),
+            new("/errors", "Errors",
+                "Exceptions from an event handler, an async continuation, a render, a child's OnInitialized and an HTTP call, with the component and the click before each.",
+                "errors exceptions ErrorBoundary unhandled stack trace component handler render lifecycle OnInitialized http 404",
+                typeof(Errors)),
+            new("/circuit", "Circuit",
+                "Block the Blazor Server circuit's only thread, or end the circuit with an unhandled exception, and read the circuit diagnostics.",
+                "circuit blazor server blocked thread sleep reconnect disconnect inbound message slow DispatchExceptionAsync",
+                typeof(Circuit)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/BevTools/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/BevTools/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/BevTools/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/BevTools/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/DocsPager.razor b/src/Utilities/BevTools/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/Footer.razor b/src/Utilities/BevTools/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/Footer.razor.css b/src/Utilities/BevTools/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/Header.razor b/src/Utilities/BevTools/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/Header.razor.css b/src/Utilities/BevTools/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/MainLayout.razor b/src/Utilities/BevTools/Demo/Client/Layout/MainLayout.razor
index 94746736a44..44980dda101 100644
--- a/src/Utilities/BevTools/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/BevTools/Demo/Client/Layout/MainLayout.razor
@@ -1,35 +1,30 @@
 @inherits LayoutComponentBase
-@inject AppState AppState
-@inject NavigationManager Navigation
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-    <main>
-        <div class="top-row">
-            <span class="renderer-info">Renderer: <strong>@RendererInfo.Name</strong> @(RendererInfo.IsInteractive ? "(interactive)" : "(prerendering)")</span>
-            <span class="hint">Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> or use the badge to open BevTools</span>
-        </div>
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-        <article class="content">
-            @Body
-        </article>
-    </main>
-</div>
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-<BevToolsPanel />
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-<div id="blazor-error-ui" data-nosnippet>
-    An unhandled error has occurred.
-    <a href="." class="reload">Reload</a>
-    <span class="dismiss">🗙</span>
-</div>
+    <Header />
 
-@code {
-    protected override void OnInitialized()
-    {
-        Navigation.LocationChanged += (_, e) => AppState.Visit("/" + Navigation.ToBaseRelativePath(e.Location));
-    }
-}
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
+
+    <Footer />
+</div>
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/BevTools/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/NavMenu.razor b/src/Utilities/BevTools/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 11d62eb5d2c..00000000000
--- a/src/Utilities/BevTools/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="nav-brand">BevTools Demo</div>
-<nav class="nav-menu">
-    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Dashboard</NavLink>
-    <NavLink class="nav-link" href="products">Products</NavLink>
-    <NavLink class="nav-link" href="orders">Orders</NavLink>
-    <NavLink class="nav-link" href="checkout">Checkout</NavLink>
-    <NavLink class="nav-link" href="interop">JS Interop</NavLink>
-    <NavLink class="nav-link" href="errors">Errors</NavLink>
-    <NavLink class="nav-link" href="circuit">Circuit</NavLink>
-    <NavLink class="nav-link" href="counter">Counter</NavLink>
-    <div class="nav-section">Problems to diagnose</div>
-    <NavLink class="nav-link nav-problems" href="problems">Problem index</NavLink>
-</nav>
diff --git a/src/Utilities/BevTools/Demo/Client/Layout/ReconnectModal.razor.css b/src/Utilities/BevTools/Demo/Client/Layout/ReconnectModal.razor.css
index 3ad3773f39d..4b77b620812 100644
--- a/src/Utilities/BevTools/Demo/Client/Layout/ReconnectModal.razor.css
+++ b/src/Utilities/BevTools/Demo/Client/Layout/ReconnectModal.razor.css
@@ -1,3 +1,9 @@
+/* The reconnect dialog of a Blazor Server circuit (the Circuit page kills one on purpose), drawn
+   as a Fluent dialog on the site's tokens so it follows the light/dark theme: a raised surface at
+   the dialog elevation over the shared scrim, the brand spinner, and a primary button. The class
+   names and ids are the framework's contract with ReconnectModal.razor.js and blazor.web.js -
+   only their looks are this file's. */
+
 .components-reconnect-first-attempt-visible,
 .components-reconnect-repeated-attempt-visible,
 .components-reconnect-failed-visible,
@@ -19,36 +25,39 @@
     display: block;
 }
 
-
 #components-reconnect-modal {
-    background-color: white;
-    width: 20rem;
+    width: min(22rem, calc(100vw - 2rem));
     margin: 20vh auto;
-    padding: 2rem;
-    border: 0;
-    border-radius: 0.5rem;
-    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
+    padding: 2rem 1.5rem 1.75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    box-shadow: var(--bb-shadow-dialog);
+    font-family: var(--bb-font-sans);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
     opacity: 0;
-    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
-    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
-    &[open]
-
-{
-    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
-    animation-fill-mode: both;
+    transition: display .5s allow-discrete, overlay .5s allow-discrete;
+    animation: components-reconnect-modal-fadeOutOpacity .5s both;
 }
 
+#components-reconnect-modal[open] {
+    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) .3s, components-reconnect-modal-fadeInOpacity .5s ease-in-out .3s;
+    animation-fill-mode: both;
 }
 
+/* ::backdrop inherits the custom properties of its dialog in current browsers; the literal is the
+   kit's own light scrim, for the ones that do not. */
 #components-reconnect-modal::backdrop {
-    background-color: rgba(0, 0, 0, 0.4);
-    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
+    background-color: var(--bb-scrim, rgba(0, 0, 0, .4));
+    animation: components-reconnect-modal-fadeInOpacity .5s ease-in-out;
     opacity: 1;
 }
 
 @keyframes components-reconnect-modal-slideUp {
     0% {
-        transform: translateY(30px) scale(0.95);
+        transform: translateY(30px) scale(.95);
     }
 
     100% {
@@ -86,23 +95,33 @@
 #components-reconnect-modal p {
     margin: 0;
     text-align: center;
+    color: var(--bb-text);
 }
 
+/* Fluent's primary button, restated here because these buttons are the framework's markup. */
 #components-reconnect-modal button {
-    border: 0;
-    background-color: #6b9ed2;
-    color: white;
-    padding: 4px 24px;
-    border-radius: 4px;
+    min-height: 2rem;
+    padding: .3125rem 1.5rem;
+    border: 1px solid var(--bb-primary);
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-    #components-reconnect-modal button:hover {
-        background-color: #3b6ea2;
-    }
+#components-reconnect-modal button:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+}
 
-    #components-reconnect-modal button:active {
-        background-color: #6b9ed2;
-    }
+#components-reconnect-modal button:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
 
 .components-rejoining-animation {
     position: relative;
@@ -110,17 +129,17 @@
     height: 80px;
 }
 
-    .components-rejoining-animation div {
-        position: absolute;
-        border: 3px solid #0087ff;
-        opacity: 1;
-        border-radius: 50%;
-        animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-    }
+.components-rejoining-animation div {
+    position: absolute;
+    border: 3px solid var(--bb-primary);
+    opacity: 1;
+    border-radius: 50%;
+    animation: components-rejoining-animation 1.5s cubic-bezier(0, .2, .8, 1) infinite;
+}
 
-        .components-rejoining-animation div:nth-child(2) {
-            animation-delay: -0.5s;
-        }
+.components-rejoining-animation div:nth-child(2) {
+    animation-delay: -.5s;
+}
 
 @keyframes components-rejoining-animation {
     0% {
@@ -148,10 +167,18 @@
     }
 
     100% {
-        top: 0px;
-        left: 0px;
+        top: 0;
+        left: 0;
         width: 80px;
         height: 80px;
         opacity: 0;
     }
 }
+
+/* No slide under reduced motion: the dialog only fades in. The spinner keeps turning - it is the
+   progress indicator, not decoration. */
+@media (prefers-reduced-motion: reduce) {
+    #components-reconnect-modal[open] {
+        animation: components-reconnect-modal-fadeInOpacity .2s ease-in-out both;
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Models/DemoModels.cs b/src/Utilities/BevTools/Demo/Client/Models/DemoModels.cs
index f5cb36868be..24756854ca9 100644
--- a/src/Utilities/BevTools/Demo/Client/Models/DemoModels.cs
+++ b/src/Utilities/BevTools/Demo/Client/Models/DemoModels.cs
@@ -42,7 +42,12 @@ public sealed record ThemeSettings(string Accent, bool Dense, int Version);
 /// <summary>Cascaded to the whole dashboard; changing it re-renders every subscriber (intentional cascade demo).</summary>
 public sealed class DashboardSettings
 {
-    public string Accent { get; set; } = "#0969da";
+    /// <summary>The site's brand blue; "Change accent" flips to <see cref="AlternateAccent"/> and back.</summary>
+    public const string DefaultAccent = "#1276C6";
+
+    public const string AlternateAccent = "#FD7F36";
+
+    public string Accent { get; set; } = DefaultAccent;
 
     public bool Dense { get; set; }
 
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Checkout.razor b/src/Utilities/BevTools/Demo/Client/Pages/Checkout.razor
index 9c21a1d21e6..f3a11f5faf4 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Checkout.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Checkout.razor
@@ -2,63 +2,129 @@
 @inject CartState Cart
 @inject AppState AppState
 
-<PageTitle>Checkout</PageTitle>
-
-<h1>Checkout</h1>
-<p class="muted">Forms, validation and state changes. Every cart action is a named state change in BevTools → State → CartState with a before/after diff.</p>
-
-<div class="cards">
-    <div class="card">
-        <h3>Cart (@Cart.ItemCount items)</h3>
-        @if (Cart.Lines.Count == 0)
-        {
-            <div class="muted">Empty. Add products from the <a href="products">products page</a> or:</div>
-            <div class="row"><button @onclick="AddSample">Add sample items</button></div>
-        }
-        else
-        {
-            <table>
-                <tbody>
-                    @foreach (var line in Cart.Lines)
-                    {
-                        <tr><td>@line.Product.Name</td><td>× @line.Quantity</td><td>@line.LineTotal.ToString("C")</td><td><button @onclick="() => Cart.Remove(line.Product.Id)">✕</button></td></tr>
-                    }
-                </tbody>
-            </table>
-            <div><strong>Total @Cart.Total.ToString("C")</strong> @(Cart.CouponCode is null ? "" : $"(coupon {Cart.CouponCode})")</div>
-            <div class="row">
-                <button @onclick='() => Cart.ApplyCoupon("SAVE10")'>Apply coupon</button>
-                <button @onclick="Cart.Clear">Clear</button>
-            </div>
-        }
-    </div>
+<PageTitle>Checkout · BevTools</PageTitle>
+
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · State</p>
+    <h1>Checkout</h1>
+    <p class="bb-subtitle">
+        A cart, a validated form and a few application settings. <code>CartState</code> and <code>AppState</code> are
+        ordinary scoped services that implement <code>IBevStateProvider</code>, so every action on them is a named state
+        change in BevTools, with a before/after diff and the click that made it.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The checkout</h3>
+    <p class="bb-card-desc">
+        Add, remove, apply the coupon or clear the cart, then fill the form in and place the order - nothing is sent
+        anywhere. The two toggles change <code>AppState</code> values only; the site's own light/dark theme is the
+        button in the header.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
 
-    <div class="card" style="grid-column: span 2">
-        <h3>Shipping details</h3>
-        <EditForm Model="_model" OnValidSubmit="Submit" FormName="checkout">
-            <DataAnnotationsValidator />
-            <div class="form-grid">
-                <label>Full name</label><InputText @bind-Value="_model.FullName" />
-                <label>Email</label><InputText @bind-Value="_model.Email" />
-                <label>Address</label><InputText @bind-Value="_model.Address" />
-                <label>Postal code</label><InputText @bind-Value="_model.PostalCode" />
-                <label>Notes</label><InputTextArea @bind-Value="_model.Notes" />
-                <label></label><label><InputCheckbox @bind-Value="_model.AcceptTerms" /> I accept the terms</label>
+        <div class="demo-tiles demo-tiles-pair">
+            <div class="demo-tile">
+                <h4 class="demo-tile-title">Cart (@Cart.ItemCount items)</h4>
+                @if (Cart.Lines.Count == 0)
+                {
+                    <div class="bb-muted">Empty. Add products from the <a href="products">products page</a> or:</div>
+                    <div class="bb-toolbar"><button type="button" class="btn btn-secondary" @onclick="AddSample">Add sample items</button></div>
+                }
+                else
+                {
+                    <div class="bb-scroll">
+                        <table class="bb-table demo-cart">
+                            <tbody>
+                                @foreach (var line in Cart.Lines)
+                                {
+                                    <tr><td>@line.Product.Name</td><td class="bb-nowrap">× @line.Quantity</td><td class="bb-nowrap">@line.LineTotal.ToString("C")</td><td class="bb-table-action"><button type="button" class="bb-icon-btn" aria-label="Remove @line.Product.Name" @onclick="() => Cart.Remove(line.Product.Id)">✕</button></td></tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                    <div><strong>Total @Cart.Total.ToString("C")</strong> @(Cart.CouponCode is null ? "" : $"(coupon {Cart.CouponCode})")</div>
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-secondary" @onclick='() => Cart.ApplyCoupon("SAVE10")'>Apply coupon</button>
+                        <button type="button" class="btn btn-secondary" @onclick="Cart.Clear">Clear</button>
+                    </div>
+                }
             </div>
-            <ValidationSummary />
-            <div class="row">
-                <button type="submit" class="primary">Place order</button>
-                <button type="button" @onclick="ToggleTheme">Toggle AppState.Theme (@AppState.Theme)</button>
-                <button type="button" @onclick="() => AppState.NotificationsEnabled = !AppState.NotificationsEnabled">Toggle notifications (@AppState.NotificationsEnabled)</button>
+
+            <div class="demo-tile demo-span-2">
+                <h4 class="demo-tile-title">Shipping details</h4>
+                <EditForm Model="_model" OnValidSubmit="Submit" FormName="checkout">
+                    <DataAnnotationsValidator />
+                    <div class="demo-form">
+                        <label class="bb-field">Full name <InputText @bind-Value="_model.FullName" /></label>
+                        <label class="bb-field">Email <InputText @bind-Value="_model.Email" /></label>
+                        <label class="bb-field">Address <InputText @bind-Value="_model.Address" /></label>
+                        <label class="bb-field">Postal code <InputText @bind-Value="_model.PostalCode" /></label>
+                        <label class="bb-field demo-form-wide">Notes <InputTextArea @bind-Value="_model.Notes" /></label>
+                        <label class="bb-check demo-form-wide"><InputCheckbox @bind-Value="_model.AcceptTerms" /> I accept the terms</label>
+                    </div>
+                    <ValidationSummary />
+                    <div class="bb-toolbar">
+                        <button type="submit" class="btn btn-primary">Place order</button>
+                        <button type="button" class="btn btn-secondary" @onclick="ToggleTheme">Toggle AppState.Theme (@AppState.Theme)</button>
+                        <button type="button" class="btn btn-secondary" @onclick="() => AppState.NotificationsEnabled = !AppState.NotificationsEnabled">Toggle notifications (@AppState.NotificationsEnabled)</button>
+                    </div>
+                </EditForm>
+                @if (_submitted)
+                {
+                    <p class="bb-note bb-note-success">Order placed for @_model.FullName. (Nothing was actually sent.)</p>
+                }
             </div>
-        </EditForm>
-        @if (_submitted)
-        {
-            <p class="ok">Order placed for @_model.FullName. (Nothing was actually sent.)</p>
-        }
+        </div>
     </div>
 </div>
 
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> State: history with diffs</h3>
+    <p class="bb-card-desc">
+        Open <strong>State</strong> and select <code>CartState</code>: the change history names each action
+        (<code>Add</code>, <code>Remove</code>, <code>ApplyCoupon</code>, <code>Clear</code>), with the values before and
+        after and a link to the UI event that triggered it. <code>AppState</code> records <code>SetTheme</code>,
+        <code>ToggleNotifications</code>, <code>Click</code> and a <code>Visit</code> per navigation - and shows its
+        <code>ApiKey</code> redacted.
+    </p>
+    <div class="bb-try">
+        <a href="problems#problem-10" class="btn btn-outline">Problem 10 →</a>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Exposing your own state</h3>
+    <p class="bb-card-desc">
+        A state container becomes a provider by implementing <code>IBevStateProvider</code> - a name, a snapshot and a
+        <code>Changed</code> event carrying the action - and being registered with
+        <code>AddBevToolsStateProvider</code>. This is the cart above, shortened:
+    </p>
+    <pre class="bb-code"><span class="k">public sealed class</span> CartState : IBevStateProvider
+{
+    <span class="k">public</span> List&lt;CartLine&gt; Lines { <span class="k">get</span>; } = [];
+
+    <span class="k">public string</span> Name =&gt; <span class="s">"CartState"</span>;
+
+    <span class="k">public string</span>? Description =&gt; <span class="s">"scoped service, one per circuit / app"</span>;
+
+    <span class="k">public event</span> Action&lt;BevStateChangeInfo&gt;? Changed;
+
+    <span class="k">public object</span>? GetSnapshot() =&gt; <span class="k">this</span>;
+
+    <span class="k">public void</span> Add(Product product)
+    {
+        <span class="c">// … update Lines …</span>
+        Changed?.Invoke(<span class="k">new</span> BevStateChangeInfo(<span class="s">"Add"</span>, product.Name));
+    }
+}
+
+<span class="c">// Program.cs - registers it as a scoped service and as a state provider</span>
+builder.Services.AddBevToolsStateProvider&lt;CartState&gt;();</pre>
+</div>
+
 @code {
     private readonly CheckoutModel _model = new();
     private bool _submitted;
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Circuit.razor b/src/Utilities/BevTools/Demo/Client/Pages/Circuit.razor
index ea372b132c0..794bae1d43e 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Circuit.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Circuit.razor
@@ -1,23 +1,68 @@
 @page "/circuit"
 
-<PageTitle>Circuit</PageTitle>
+<PageTitle>Circuit · BevTools</PageTitle>
 
-<h1>Circuit</h1>
-@if (RendererInfo.Name != "Server")
-{
-    <p class="warn">This page is running on the <strong>@RendererInfo.Name</strong> renderer. Circuit scenarios only apply to Interactive Server; under Interactive Auto the app switches to WebAssembly once the runtime is cached. Open the site in a fresh private window (or clear site data) to get a Server circuit, then come back here.</p>
-}
-else
-{
-    <p class="muted">Circuit problems: blocking the circuit's single thread, and killing the circuit with an unhandled exception. Watch BevTools → Circuit and Timeline (circuit events, reconnect state from the browser).</p>
-}
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · Blazor Server</p>
+    <h1>Circuit</h1>
+    <p class="bb-subtitle">
+        Circuit problems: blocking the circuit's single thread, and killing the circuit with an unhandled exception.
+        BevTools → Circuit and the Timeline show the circuit's events, the time each inbound message took, and the
+        reconnect state reported by the browser.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> The circuit</h3>
+    @if (RendererInfo.Name != "Server")
+    {
+        <div class="bb-note bb-note-warn">
+            This page is running on the <strong>@RendererInfo.Name</strong> renderer. Circuit scenarios only apply to
+            Interactive Server; under Interactive Auto the app switches to WebAssembly once the runtime is cached. Open
+            the site in a fresh private window (or clear site data) to get a Server circuit, then come back here.
+        </div>
+    }
+    else
+    {
+        <p class="bb-card-desc">
+            Each user of a Blazor Server app has one circuit, and it processes one message at a time: while a handler
+            blocks, nothing else for that user is handled. The last button ends the circuit for good - the reconnect
+            dialog follows.
+        </p>
+    }
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
+
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="Block">Block the circuit for 800 ms (Thread.Sleep in a handler)</button>
+            <button type="button" class="btn btn-secondary" @onclick="BlockRepeatedly">Block 5× in a row</button>
+            <button type="button" class="btn demo-btn-danger" @onclick="Kill">Unhandled exception in a background task (terminates the circuit)</button>
+        </div>
+        <p class="bb-muted">Blocked: @_blocked times. Renderer: @RendererInfo.Name, interactive: @RendererInfo.IsInteractive.</p>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Blocking: slow inbound messages</h3>
+    <p class="bb-card-desc">
+        Block the circuit. The <strong>Timeline</strong> shows a <em>Slow inbound message</em>, the
+        <strong>Circuit</strong> panel the maximum inbound processing time, and <strong>Diagnostics</strong> the slow
+        event handler. The fix: never block in a handler - await the work instead.
+    </p>
+</div>
 
-<div class="row">
-    <button @onclick="Block">Block the circuit for 800 ms (Thread.Sleep in a handler)</button>
-    <button @onclick="BlockRepeatedly">Block 5× in a row</button>
-    <button class="danger" @onclick="Kill">Unhandled exception in a background task (terminates the circuit)</button>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Killing: the circuit's last moments</h3>
+    <p class="bb-card-desc">
+        Kill the circuit. <strong>Errors</strong> shows the logged circuit exception; <strong>Browser</strong> and
+        <strong>Circuit</strong> show the reconnect state changes. Each circuit has a BevTools session of its own, so
+        the session ends with the circuit; the page that comes back starts a new one.
+    </p>
+    <div class="bb-try">
+        <a href="problems#problem-9" class="btn btn-outline">Problem 9 →</a>
+    </div>
 </div>
-<p class="muted">Blocked: @_blocked times. Renderer: @RendererInfo.Name, interactive: @RendererInfo.IsInteractive.</p>
 
 @code {
     private int _blocked;
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Counter.razor b/src/Utilities/BevTools/Demo/Client/Pages/Counter.razor
index 4cd9f454b0c..5f01b42e139 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Counter.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Counter.razor
@@ -1,14 +1,51 @@
 @page "/counter"
 
-<PageTitle>Counter</PageTitle>
+<PageTitle>Counter · BevTools</PageTitle>
 
-<h1>Counter</h1>
-<p class="muted">The classic. Useful as a baseline: one click → one <em>onclick → Counter.IncrementCount</em> event → one render of <code>Counter</code>, nothing else.</p>
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · Rendering</p>
+    <h1>Counter</h1>
+    <p class="bb-subtitle">
+        The classic, and the baseline every other scenario is measured against: one click is one
+        <em>onclick → Counter.IncrementCount</em> event and one render of <code>Counter</code>, nothing else.
+    </p>
+</div>
 
-<p role="status">Current count: @currentCount</p>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The counter</h3>
+    <p class="bb-card-desc">
+        The second button increments ten times from one event, calling <code>StateHasChanged</code> and awaiting
+        between the steps - ten renders that all trace back to a single click.
+    </p>
 
-<button class="primary" @onclick="IncrementCount">Click me</button>
-<button @onclick="IncrementTenTimes">Increment 10× with awaits (10 renders from one event)</button>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
+
+        <p role="status" class="demo-count">Current count: <strong>@currentCount</strong></p>
+
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+            <button type="button" class="btn btn-secondary" @onclick="IncrementTenTimes">Increment 10× with awaits (10 renders from one event)</button>
+        </div>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Timeline: one click, one render</h3>
+    <p class="bb-card-desc">
+        Open the <strong>Timeline</strong> and click <em>Click me</em>: the <em>onclick → Counter.IncrementCount</em>
+        event, the one batch it produced and the render of <code>Counter</code> inside it - no layout, header or
+        other page component renders with it. The ten-step button shows ten renders caused by the same event.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Profiler: what did this one click cost?</h3>
+    <p class="bb-card-desc">
+        In the <strong>Profiler</strong>, press <em>Reset</em>, click once and tick <em>since reset</em>: one row, one
+        render. Compare with one keystroke on the <a href="products">Products</a> page.
+    </p>
+</div>
 
 @code {
     private int currentCount = 0;
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Dashboard.razor b/src/Utilities/BevTools/Demo/Client/Pages/Dashboard.razor
new file mode 100644
index 00000000000..5b3b3e22d4a
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Dashboard.razor
@@ -0,0 +1,112 @@
+@page "/dashboard"
+@inject AppState AppState
+
+<PageTitle>Dashboard · BevTools</PageTitle>
+
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · Rendering</p>
+    <h1>Dashboard</h1>
+    <p class="bb-subtitle">
+        A realistic component hierarchy: stat cards under a cascading value, a live clock, a user profile and the
+        recent orders loaded over HTTP. It is where the component tree, the cause of every render and the most common
+        avoidable cost in a Blazor app - renders driven only by a parent - are easiest to see.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The dashboard</h3>
+    <p class="bb-card-desc">
+        Plain application code, with one problem left in on purpose: tick <em>clock re-renders whole dashboard</em>
+        and the clock's timer calls <code>StateHasChanged</code> on the whole page twice a second.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
+
+        <CascadingValue Value="_settings">
+            <div class="bb-toolbar">
+                <button type="button" class="btn btn-secondary" @onclick="() => { _settings.Dense = !_settings.Dense; _settings.Version++; }">Toggle dense (cascading value → re-renders subscribers)</button>
+                <button type="button" class="btn btn-secondary" @onclick="ChangeAccent">Change accent</button>
+                <button type="button" class="btn btn-secondary" @onclick="AppState.Click">Click counter (AppState) = @AppState.Counters["clicks"]</button>
+                <label class="bb-check"><input type="checkbox" @bind="_clockRerendersDashboard" /> clock re-renders whole dashboard (intentional problem)</label>
+            </div>
+
+            <div class="demo-tiles">
+                <StatsCard Title="Revenue" Value="@_revenue.ToString("C0")" Trend="+4.2%" />
+                <StatsCard Title="Orders" Value="@_orders.ToString()" Trend="+12" />
+                <StatsCard Title="Visitors" Value="@_visitors.ToString("N0")" Trend="-1.8%" />
+                <div class="demo-tile">
+                    <h4 class="demo-tile-title">Server time</h4>
+                    <LiveClock OnTick="OnClockTick" />
+                </div>
+            </div>
+
+            <div class="demo-tiles demo-tiles-pair">
+                <UserProfile />
+                <RecentOrders />
+            </div>
+        </CascadingValue>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Components: the tree and the inspector</h3>
+    <p class="bb-card-desc">
+        Open BevTools (<kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>D</kbd>) on the <strong>Components</strong> tab.
+        <code>Dashboard</code> sits under the site's layouts with its children: three <code>StatsCard</code>s,
+        <code>LiveClock</code>, <code>UserProfile</code> and <code>RecentOrders</code>.
+    </p>
+    <ul class="bb-detail-list">
+        <li>Select a <code>StatsCard</code>: its parameters (<code>Title</code>, <code>Value</code>, <code>Trend</code>), the cascading <code>DashboardSettings</code> it reads, and <em>Why did it render?</em> for every render it has had.</li>
+        <li>Select <code>UserProfile</code>: its injected <code>UserSession</code> shows <code>AccessToken</code> and <code>Nickname</code> redacted - one by its name, the other by <code>[BevToolsSensitive]</code>.</li>
+        <li>Press <em>Toggle dense</em> or <em>Change accent</em>: the cascading value changes and every card that reads it renders again.</li>
+    </ul>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Profiler and Diagnostics: renders nobody asked for</h3>
+    <p class="bb-card-desc">
+        Tick the checkbox, then open the <strong>Profiler</strong> and sort by renders: <code>Dashboard</code> and every
+        card climb together. Selected in the inspector, the Revenue card says <em>Parent Dashboard re-rendered
+        (parameters re-applied)</em> and marks those renders <em>forced</em>, because none of its parameter values
+        changed - unlike the Visitors card, whose <code>Value</code> does. <strong>Diagnostics</strong> reports
+        <em>Renders driven only by the parent</em> for each card.
+    </p>
+    <div class="bb-try">
+        <a href="problems#problem-1" class="btn btn-outline">Problem 1, step by step →</a>
+        <a href="products" class="btn btn-outline">A bigger cascade: Products →</a>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> State, Network and Services</h3>
+    <ul class="bb-detail-list">
+        <li><strong>State</strong> → <code>AppState</code>: every press of <em>Click counter</em> is a named <code>Click</code> change, and every navigation a <code>Visit</code>. Its <code>ApiKey</code> is redacted.</li>
+        <li><strong>Network</strong>: <code>GET /api/orders</code>, slow on purpose, and <code>GET /api/profile</code>, whose <code>Authorization</code> header is redacted.</li>
+        <li><strong>Services</strong>: search <code>LeakyCache</code> and <code>ReportService</code> - a singleton capturing a scoped service and a circular dependency, registered in this app and never resolved.</li>
+    </ul>
+</div>
+
+@code {
+    private readonly DashboardSettings _settings = new();
+    private decimal _revenue = 128_430;
+    private int _orders = 1_204;
+    private int _visitors = 48_213;
+    private bool _clockRerendersDashboard;
+
+    private void ChangeAccent()
+    {
+        _settings.Accent = _settings.Accent == DashboardSettings.DefaultAccent ? DashboardSettings.AlternateAccent : DashboardSettings.DefaultAccent;
+        _settings.Version++;
+    }
+
+    private void OnClockTick()
+    {
+        // Intentional problem #1: a timer in a child bubbles up and re-renders the entire dashboard twice a second.
+        if (_clockRerendersDashboard)
+        {
+            _visitors++;
+            StateHasChanged();
+        }
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Errors.razor b/src/Utilities/BevTools/Demo/Client/Pages/Errors.razor
index c2d5489824b..d50bad3fb41 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Errors.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Errors.razor
@@ -1,33 +1,78 @@
 @page "/errors"
 
-<PageTitle>Errors</PageTitle>
+<PageTitle>Errors · BevTools</PageTitle>
 
-<h1>Errors</h1>
-<p class="muted">Each button produces a different kind of failure. BevTools → Errors shows type, message, stack, the component and what happened right before.</p>
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · Errors</p>
+    <h1>Errors</h1>
+    <p class="bb-subtitle">
+        Each button produces a different kind of failure: in an event handler, after an <code>await</code>, while
+        rendering, in a child's <code>OnInitialized</code> and from an HTTP call. BevTools → Errors shows the type,
+        message and stack of each, the component, and what happened right before it.
+    </p>
+</div>
 
-@if (RendererInfo.Name == "Server")
-{
-    <p class="muted">On the <strong>Server</strong> renderer an unhandled exception would terminate the circuit, and this BevTools session with it, so here the scenarios run inside a page-level <code>ErrorBoundary</code>: <em>Throw in event handler</em>, <em>Throw after await</em> and <em>HTTP 404</em> are caught by it instead. On WebAssembly they stay unhandled.</p>
-    <ErrorBoundary @ref="_pageBoundary">
-        <ChildContent>
-            <ErrorScenarios />
-        </ChildContent>
-        <ErrorContent Context="ex">
-            <div class="card error">
-                <div>The page-level ErrorBoundary caught: @ex.GetType().Name — @ex.Message</div>
-                <div class="row"><button @onclick="() => _pageBoundary?.Recover()">Recover</button></div>
-            </div>
-        </ErrorContent>
-    </ErrorBoundary>
-}
-else
-{
-    @if (RendererInfo.IsInteractive)
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> The failures</h3>
+    @if (RendererInfo.Name == "Server")
     {
-        <p class="muted">On <strong>@RendererInfo.Name</strong> <em>Throw in event handler</em>, <em>Throw after await</em> and <em>HTTP 404</em> are genuinely unhandled: Blazor shows its error bar at the bottom of the page and the app keeps running.</p>
+        <p class="bb-card-desc">
+            On the <strong>Server</strong> renderer an unhandled exception would terminate the circuit, and this BevTools
+            session with it, so here the scenarios run inside a page-level <code>ErrorBoundary</code>: <em>Throw in event
+            handler</em>, <em>Throw after await</em> and <em>HTTP 404</em> are caught by it instead. On WebAssembly they
+            stay unhandled.
+        </p>
     }
-    <ErrorScenarios />
-}
+    else if (RendererInfo.IsInteractive)
+    {
+        <p class="bb-card-desc">
+            On <strong>@RendererInfo.Name</strong> <em>Throw in event handler</em>, <em>Throw after await</em> and
+            <em>HTTP 404</em> are genuinely unhandled: Blazor shows its error bar at the bottom of the page and the app
+            keeps running.
+        </p>
+    }
+    <p class="bb-card-desc">
+        <em>Throw during render</em> and <em>Child throws in OnInitialized</em> happen inside an <code>ErrorBoundary</code>
+        of their own on every renderer; <em>Reset</em> recovers it.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
+
+        @if (RendererInfo.Name == "Server")
+        {
+            <ErrorBoundary @ref="_pageBoundary">
+                <ChildContent>
+                    <ErrorScenarios />
+                </ChildContent>
+                <ErrorContent Context="ex">
+                    <div class="bb-note bb-note-danger">
+                        <p>The page-level ErrorBoundary caught: @ex.GetType().Name — @ex.Message</p>
+                        <div class="bb-toolbar"><button type="button" class="btn btn-secondary" @onclick="() => _pageBoundary?.Recover()">Recover</button></div>
+                    </div>
+                </ErrorContent>
+            </ErrorBoundary>
+        }
+        else
+        {
+            <ErrorScenarios />
+        }
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Errors: where it came from</h3>
+    <p class="bb-card-desc">
+        For each error the <strong>Errors</strong> panel shows where it was caught - a render, an HTTP call, a JS
+        call, the browser or the framework's log - the component, the source location taken from the stack, the UI event that preceded it and the last ten timeline
+        entries before it - the click, the renders and the requests that led there. <strong>Diagnostics</strong>
+        reports an error that keeps repeating.
+    </p>
+    <div class="bb-try">
+        <a href="problems#problem-6" class="btn btn-outline">Problem 6 →</a>
+        <a href="interop" class="btn btn-outline">JS errors: JS interop →</a>
+    </div>
+</div>
 
 @code {
     private ErrorBoundary? _pageBoundary;
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/BevTools/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..34f5e89dcbf
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,120 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · BevTools</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        A package, one line in <code>Program.cs</code> and one tag in your layout. BevTools then inspects the running
+        app - its components, renders, state, requests, interop calls, errors, services and circuits - with no change
+        to the components themselves.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        <code>Bit.BevTools</code> works in any Blazor host. <code>Bit.BevTools.Server</code> adds the circuit
+        instrumentation of Blazor Server - add it to the server project of a Blazor Server or Interactive Auto app.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.BevTools          <span class="c"># any Blazor host</span>
+dotnet add package Bit.BevTools.Server   <span class="c"># + Blazor Server circuits</span></pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
+    <p class="bb-card-desc">
+        In the server project, <code>AddBitBevToolsServerServices</code> registers everything plus the circuit
+        diagnostics; elsewhere <code>AddBitBevToolsServices</code> does. An <strong>Interactive Auto</strong> solution
+        calls both - the first in the server project, the second in the <code>.Client</code> project - so BevTools works
+        whichever render mode a page ends up in.
+    </p>
+    <pre class="bb-code"><span class="k">using</span> Bit.BevTools;
+
+<span class="c">// Program.cs of the server project</span>
+builder.Services.AddBitBevToolsServerServices();
+
+<span class="c">// Program.cs of a WebAssembly (.Client) project</span>
+builder.Services.AddBitBevToolsServices(o =&gt;
+    o.Enabled = builder.HostEnvironment.IsDevelopment());</pre>
+    <p class="bb-card-desc">
+        BevTools turns itself on only when the host environment is <code>Development</code>; set
+        <code>options.Enabled</code> to decide yourself. In a WebAssembly client pass the host environment explicitly, as
+        above, so Development-only activation does not depend on the server's environment variables. Disabled, it
+        registers no instrumentation at all.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> WebAssembly: keep the metrics</h3>
+    <p class="bb-card-desc">
+        The WebAssembly SDK compiles <code>System.Diagnostics.Metrics</code> out by default, and render-diff and
+        lifecycle timings come from those meters. Put them back in the WebAssembly project; without it the About panel
+        says that these timings are not available, and everything else still works.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">PropertyGroup</span>&gt;
+    &lt;<span class="k">MetricsSupport</span>&gt;true&lt;/<span class="k">MetricsSupport</span>&gt;
+&lt;/<span class="k">PropertyGroup</span>&gt;</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Place the panel</h3>
+    <p class="bb-card-desc">
+        Once, inside an interactive component - typically the layout. It renders nothing during prerendering, and it
+        loads its own script and stylesheet (static web assets of the package), so no <code>&lt;script&gt;</code> or
+        <code>&lt;link&gt;</code> tag is needed.
+    </p>
+    <pre class="bb-code"><span class="c">@@* _Imports.razor *@@</span>
+<span class="k">@@using</span> Bit.BevTools
+
+<span class="c">@@* MainLayout.razor (or any interactive component) *@@</span>
+&lt;<span class="k">BevToolsPanel</span> /&gt;</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Open it</h3>
+    <p class="bb-card-desc">
+        Press <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>D</kbd> or click the ⚙ BevTools badge in the bottom corner. Inside
+        the panel, <kbd>Ctrl</kbd><kbd>K</kbd> opens search and the command palette - <code>&gt;pause</code> freezes
+        every buffer, <code>&gt;export</code> exports the session. The panel's defaults are options too:
+    </p>
+    <pre class="bb-code">builder.Services.AddBitBevToolsServerServices(o =&gt;
+{
+    o.Ui.ToggleShortcut = <span class="s">"Ctrl+Shift+D"</span>;   <span class="c">// the default</span>
+    o.Ui.Dock = BevToolsDock.Right;        <span class="c">// or Bottom (the default)</span>
+    o.Ui.Theme = BevToolsTheme.Auto;       <span class="c">// Auto, Light or Dark</span>
+    o.Ui.OpenByDefault = <span class="k">false</span>;
+});</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> How this site does it</h3>
+    <p class="bb-card-desc">
+        This demo is a Blazor Web App in Interactive Auto, and it exists to show BevTools wherever it is deployed, so it
+        enables it explicitly instead of relying on the Development environment. The panel sits in
+        <code>Routes.razor</code>, after the router, so it survives every navigation.
+    </p>
+    <pre class="bb-code"><span class="c">// Demo/Server/Program.cs</span>
+builder.Services.AddBitBevToolsServerServices(o =&gt; o.Enabled = <span class="k">true</span>);
+
+<span class="c">// Demo/Client/Program.cs</span>
+builder.Services.AddBitBevToolsServices(options =&gt;
+{
+    options.Enabled = <span class="k">true</span>;
+    options.Ui.OpenByDefault = <span class="k">false</span>;
+});</pre>
+    <div class="bb-note">
+        The site's own header, docs layout and footer are ordinary application components here, so they appear in
+        the Components tree, the Profiler and the JS Interop panel next to the scenarios, as a layout does in any app.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where to go next</h3>
+    <div class="bb-try">
+        <a href="problems" class="btn btn-primary">Problems to diagnose →</a>
+        <a href="dashboard" class="btn btn-outline">Why did it render? →</a>
+        <a href="checkout" class="btn btn-outline">Expose your state →</a>
+        <a href="@($"{SiteInfo.ProjectUrl}#extending")" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Extend BevTools ↗</a>
+    </div>
+</div>
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Home.razor b/src/Utilities/BevTools/Demo/Client/Pages/Home.razor
index 539acc4f926..6490f3e16a6 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Home.razor
@@ -1,55 +1,348 @@
 @page "/"
-@inject AppState AppState
+@layout MainLayout
 
-<PageTitle>Dashboard</PageTitle>
+<PageTitle>BevTools - in-app developer tools for Blazor</PageTitle>
 
-<h1>Dashboard</h1>
-<p class="muted">A realistic component hierarchy with cascading settings, async HTTP data, a live clock and a user profile. Open BevTools → Components to see the tree; Profiler to see who renders and why.</p>
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with the
+   browser's own dev tools → persona tiles → FAQ → final call to action. Everything else on the
+   site is a documentation page under DocsLayout. The hero's live sample is BevTools itself: the
+   panel is running on this page, and the button gives it one event to show. *@
 
-<CascadingValue Value="_settings">
-    <div class="row">
-        <button @onclick="() => { _settings.Dense = !_settings.Dense; _settings.Version++; }">Toggle dense (cascading value → re-renders subscribers)</button>
-        <button @onclick="ChangeAccent">Change accent</button>
-        <button @onclick="AppState.Click">Click counter (AppState) = @AppState.Counters["clicks"]</button>
-        <label><input type="checkbox" @bind="_clockRerendersDashboard" /> clock re-renders whole dashboard (intentional problem)</label>
-    </div>
+<div class="bb-landing">
 
-    <div class="cards">
-        <StatsCard Title="Revenue" Value="@_revenue.ToString("C0")" Trend="+4.2%" />
-        <StatsCard Title="Orders" Value="@_orders.ToString()" Trend="+12" />
-        <StatsCard Title="Visitors" Value="@_visitors.ToString("N0")" Trend="-1.8%" />
-        <div class="card">
-            <h3>Server time</h3>
-            <LiveClock OnTick="OnClockTick" />
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Dev tools for Blazor,<br /><span class="bb-hero-accent">inside your app.</span></h1>
+            <p class="bb-hero-sub">
+                A live component tree, a profiler that says <em>why</em> each component rendered, a timeline that links
+                every click to what it caused, and inspectors for state, HTTP, JS interop, errors, DI and circuits -
+                added with one line in <code>Program.cs</code> and no change to your components.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.BevTools</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="problems" class="btn btn-secondary bb-btn-lg">Problems to diagnose</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The setup, framed as a window, and underneath it the tool running on this very page. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Program.cs · MainLayout.razor</span>
+                </div>
+                <pre class="bb-code"><span class="c">// Program.cs</span>
+builder.Services.AddBitBevToolsServerServices();
+
+<span class="c">@@* MainLayout.razor *@@</span>
+&lt;<span class="k">BevToolsPanel</span> /&gt;</pre>
+                <div class="home-hero-live">
+                    <p>
+                        <strong>It is running here.</strong> Press <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>D</kbd> or the
+                        ⚙ BevTools badge, open the <strong>Timeline</strong>, then click:
+                    </p>
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-primary" id="hero-click" @onclick="Click">Clicked @_clicks @(_clicks == 1 ? "time" : "times")</button>
+                        <span class="bb-muted">one <em>onclick → Home.Click</em> event, one render of <code>Home</code></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>No source changes</strong><span>public hooks: the component activator, HTTP handlers, loggers</span></div>
+        <div><strong>Never fakes data</strong><span>what it cannot observe, it says it cannot</span></div>
+        <div><strong>Every render mode</strong><span>WebAssembly, Server, Auto and static SSR</span></div>
+        <div><strong>Dormant in production</strong><span>on in Development only; off, it registers nothing</span></div>
+    </section>
+
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>The questions it answers</h2>
+        <p class="bb-section-sub">
+            Each panel answers a question that logs and breakpoints answer slowly. Every page of this site is a small
+            app built to ask one of them - open the panel on it and look.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Why did it render?</h3>
+                <p class="bb-card-desc">
+                    The component tree with parameters, cascading values, state and services - and for every render its
+                    cause: an event, a parent re-render, a navigation or <code>StateHasChanged</code>.
+                </p>
+                <a href="dashboard" class="btn btn-outline">Dashboard →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What did this keystroke cost?</h3>
+                <p class="bb-card-desc">
+                    A profiler per instance and per type, render batches with their diff cost, and the rules that spot
+                    render storms, cascades and renders forced by a parent.
+                </p>
+                <a href="products" class="btn btn-outline">Products →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What happened when I clicked?</h3>
+                <p class="bb-card-desc">
+                    One timeline for renders, batches, events, navigation, state, HTTP, JS, errors and circuits, with
+                    each entry linked to what caused it and to what it caused.
+                </p>
+                <a href="counter" class="btn btn-outline">Counter →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Which request failed?</h3>
+                <p class="bb-card-desc">
+                    Every <code>IHttpClientFactory</code> request with status, duration, headers (redacted) and the UI
+                    event that sent it - including the ones a Blazor Server app makes on the server.
+                </p>
+                <a href="orders" class="btn btn-outline">Orders →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What changed in my state?</h3>
+                <p class="bb-card-desc">
+                    State containers that implement <code>IBevStateProvider</code> get a history of named actions with
+                    before/after diffs and the click behind each one.
+                </p>
+                <a href="checkout" class="btn btn-outline">Checkout →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Which JS call is slow?</h3>
+                <p class="bb-card-desc">
+                    Interop calls per identifier with durations, failures and the component that made them, plus the
+                    JS → .NET callbacks and the browser's storage, redacted.
+                </p>
+                <a href="interop" class="btn btn-outline">JS interop →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Where did that exception come from?</h3>
+                <p class="bb-card-desc">
+                    Errors from rendering, handlers, HTTP, interop and the browser, each with its component, its source
+                    location and the ten timeline entries before it.
+                </p>
+                <a href="errors" class="btn btn-outline">Errors →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Is my circuit blocked?</h3>
+                <p class="bb-card-desc">
+                    On Blazor Server: the circuit's lifecycle, connection state, time spent on each inbound message and
+                    the reconnect attempts the browser reports.
+                </p>
+                <a href="circuit" class="btn btn-outline">Circuit →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Is my DI set up right?</h3>
+                <p class="bb-card-desc">
+                    Every registration with its lifetime and dependencies, and the mistakes that only fail later: a
+                    singleton capturing a scoped service, a circular dependency.
+                </p>
+                <a href="problems#problem-8" class="btn btn-outline">Problem 8 →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>Three steps, and two of them are optional</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Register it</h3>
+                    <p>
+                        One call in the server project, one in the <code>.Client</code> project of an Interactive Auto app.
+                        It switches itself on in Development only.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code"><span class="c">// Server project</span>
+builder.Services.AddBitBevToolsServerServices();
+
+<span class="c">// .Client project</span>
+builder.Services.AddBitBevToolsServices(o =&gt;
+    o.Enabled = builder.HostEnvironment.IsDevelopment());</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Expose your state</h3>
+                    <p>
+                        A state container that implements <code>IBevStateProvider</code> gets a history of named
+                        changes with diffs. Register it once and the State panel shows it.
+                    </p>
+                    <a href="checkout">Checkout →</a>
+                </div>
+                <pre class="bb-code"><span class="k">public sealed class</span> CartState : IBevStateProvider
+{
+    <span class="k">public string</span> Name =&gt; <span class="s">"CartState"</span>;
+    <span class="k">public event</span> Action&lt;BevStateChangeInfo&gt;? Changed;
+    <span class="k">public object</span>? GetSnapshot() =&gt; <span class="k">this</span>;
+    <span class="c">// … Changed?.Invoke(new BevStateChangeInfo("Add", product.Name));</span>
+}
+
+builder.Services.AddBevToolsStateProvider&lt;CartState&gt;();</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Keep secrets out of it</h3>
+                    <p>
+                        Members, headers, query values and storage keys that look sensitive are redacted at capture time.
+                        Mark the rest yourself, or hide a member or a component entirely.
+                    </p>
+                    <a href="problems#problem-7">Problem 7 →</a>
+                </div>
+                <pre class="bb-code"><span class="k">public sealed class</span> UserSession
+{
+    <span class="c">// Redacted by its name.</span>
+    <span class="k">public string</span> AccessToken { <span class="k">get</span>; <span class="k">set</span>; } = <span class="s">"…"</span>;
+
+    [BevToolsSensitive]
+    <span class="k">public string</span> Nickname { <span class="k">get</span>; <span class="k">set</span>; } = <span class="s">"…"</span>;
+}</pre>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not the browser's dev tools?</h2>
+        <p class="bb-section-sub">
+            The browser sees the DOM, the requests the browser makes and JavaScript. A Blazor app's questions are about
+            components, .NET state, the server and the renderer - and on Blazor Server most of it never reaches the
+            browser at all.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="The browser's dev tools compared with BevTools">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Question</th><th>Browser dev tools</th><th>BevTools</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Which components exist, with what parameters?</td><td>DOM elements only</td><td>The component tree, parameters, cascading values, state and services</td></tr>
+                    <tr><td>Why did this component render?</td><td>Not visible</td><td>A cause per render: event, parent, navigation, <code>StateHasChanged</code></td></tr>
+                    <tr><td>HTTP calls of a Blazor Server app</td><td>Not visible - they are made by the server</td><td>Every <code>IHttpClientFactory</code> request with the UI event that sent it</td></tr>
+                    <tr><td>JS interop on Blazor Server</td><td>SignalR frames</td><td>Calls per identifier, with duration, result and component</td></tr>
+                    <tr><td>What is registered in DI?</td><td>Not visible</td><td>Lifetimes, dependencies, captive dependencies and cycles</td></tr>
+                    <tr><td>Is the circuit healthy?</td><td>A WebSocket</td><td>Lifecycle, connection state, inbound message time, reconnects</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to BevTools?</h3>
+                <p class="bb-card-desc">Install, register, place the panel - and see your own app from the inside.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to practise first?</h3>
+                <p class="bb-card-desc">Ten real problems are planted in this app, each with the steps from the symptom to its cause.</p>
+                <a href="problems" class="btn btn-outline">Problems to diagnose →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Writing a library?</h3>
+                <p class="bb-card-desc">Contribute panels, state providers, diagnostic rules and commands through <code>IBevToolsExtension</code>.</p>
+                <a href="@($"{SiteInfo.ProjectUrl}#extending")" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Extending BevTools ↗</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Does it end up in production?</summary>
+                <p>
+                    Only if you ask it to. It is enabled when the host environment is <code>Development</code> unless
+                    <code>options.Enabled</code> says otherwise, renders nothing during prerendering, and when disabled
+                    registers no activator, handler or logger - a referenced but disabled BevTools measured at about 2 %
+                    in the benchmark, inside its noise. This site turns it on explicitly so that you can try it.
+                </p>
+            </details>
+            <details>
+                <summary>Which .NET versions and render modes?</summary>
+                <p>
+                    .NET 8, 9 and 10, in WebAssembly, Server, Interactive Auto and static SSR. The render causes that
+                    come from UI events and the framework's own timings need .NET 10; on .NET 8 and 9 those rows say
+                    <em>Requires .NET 10</em> instead of showing nothing.
+                </p>
+            </details>
+            <details>
+                <summary>How does it see inside the app without changing it?</summary>
+                <p>
+                    Through public hooks - the component activator, an HTTP message handler filter, a logger provider, a
+                    circuit handler - plus the framework's own activities and meters, and optional reflection over Blazor
+                    internals that reports a capability as unavailable rather than failing when a member is missing.
+                </p>
+            </details>
+            <details>
+                <summary>What about passwords and tokens?</summary>
+                <p>
+                    Redacted when they are captured: by name (<code>password</code>, <code>token</code>,
+                    <code>authorization</code>, …), by <code>[BevToolsSensitive]</code>, and in the browser before storage
+                    values reach .NET. Request and response bodies are never read, nothing is sent anywhere, and an export
+                    contains exactly what the panels show.
+                </p>
+            </details>
+            <details>
+                <summary>What does it cost?</summary>
+                <p>
+                    Roughly 0.4 µs and 0.4 KB per component render while recording, measured by a benchmark in the
+                    repository, with every buffer bounded. The About panel reports what BevTools itself is costing the
+                    running app.
+                </p>
+            </details>
+            <details>
+                <summary>Why does this site's header show up in the component tree?</summary>
+                <p>
+                    Because it is part of the app. The header, the docs layout and the footer of this site are ordinary
+                    components, so BevTools lists them, profiles them and attributes their JS calls like any other - only
+                    BevTools' own UI is left out.
+                </p>
+            </details>
         </div>
-    </div>
+    </section>
 
-    <div class="cards">
-        <UserProfile />
-        <RecentOrders />
-    </div>
-</CascadingValue>
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Find the cause, not just the symptom</h2>
+        <p class="bb-section-sub">One package, one line in Program.cs, one tag in your layout.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.BevTools</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="problems" class="btn btn-secondary bb-btn-lg">Problems to diagnose</a>
+        </div>
+    </section>
+</div>
 
 @code {
-    private readonly DashboardSettings _settings = new();
-    private decimal _revenue = 128_430;
-    private int _orders = 1_204;
-    private int _visitors = 48_213;
-    private bool _clockRerendersDashboard;
-
-    private void ChangeAccent()
-    {
-        _settings.Accent = _settings.Accent == "#0969da" ? "#cf222e" : "#0969da";
-        _settings.Version++;
-    }
-
-    private void OnClockTick()
-    {
-        // Intentional problem #1: a timer in a child bubbles up and re-renders the entire dashboard twice a second.
-        if (_clockRerendersDashboard)
-        {
-            _visitors++;
-            StateHasChanged();
-        }
-    }
+    private int _clicks;
+
+    // A named method rather than a lambda, so the Timeline's entry for the click reads "Home.Click".
+    private void Click() => _clicks++;
 }
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Interop.razor b/src/Utilities/BevTools/Demo/Client/Pages/Interop.razor
index 414d334912b..31afef76d13 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Interop.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Interop.razor
@@ -2,25 +2,78 @@
 @implements IAsyncDisposable
 @inject IJSRuntime JS
 
-<PageTitle>JS Interop</PageTitle>
-
-<h1>JS Interop</h1>
-<p class="muted">Every call below goes through the <code>IJSRuntime</code> injected into this component, so BevTools → JS Interop attributes it to <code>Interop</code> with duration and result. JS → .NET callbacks are reported by the browser bridge.</p>
-
-<div class="row">
-    <button class="primary" @onclick="Measure">Measure element</button>
-    <button @onclick="() => Slow(400)">Slow call (400 ms busy JS)</button>
-    <button @onclick="Chatty">Chatty loop (120 calls)</button>
-    <button @onclick="ToggleCallbacks">@(_callbacks ? "Stop" : "Start") JS → .NET callbacks (every 200 ms)</button>
-    <button @onclick="ThrowInJs">JS function throws</button>
-    <button @onclick="UnhandledJs">Unhandled JS error + rejection</button>
-    <button @onclick="WriteStorage">Write localStorage/sessionStorage</button>
+<PageTitle>JS interop · BevTools</PageTitle>
+
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · JS interop</p>
+    <h1>JS interop</h1>
+    <p class="bb-subtitle">
+        Every call below goes through the <code>IJSRuntime</code> injected into this component and the JS module it
+        imports, so BevTools → JS Interop attributes it to <code>Interop</code> with its duration and result. JS → .NET
+        callbacks are reported by the browser bridge.
+    </p>
 </div>
 
-<div id="measure-target" class="card">
-    <h3>Measured element</h3>
-    <div>@_result</div>
-    <div class="muted">callbacks received: @_ticks</div>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The calls</h3>
+    <p class="bb-card-desc">
+        The functions live in <code>wwwroot/js/interop.js</code>: one measures the box below, one busy-waits for
+        400 ms, one is called 120 times in a loop, one throws, one leaves an error and a rejected promise unhandled,
+        one writes to <code>localStorage</code> and <code>sessionStorage</code>, and one calls back into .NET every
+        200 ms.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
+
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="Measure">Measure element</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => Slow(400)">Slow call (400 ms busy JS)</button>
+            <button type="button" class="btn btn-secondary" @onclick="Chatty">Chatty loop (120 calls)</button>
+            <button type="button" class="btn btn-secondary" @onclick="ToggleCallbacks">@(_callbacks ? "Stop" : "Start") JS → .NET callbacks (every 200 ms)</button>
+            <button type="button" class="btn btn-secondary" @onclick="ThrowInJs">JS function throws</button>
+            <button type="button" class="btn btn-secondary" @onclick="UnhandledJs">Unhandled JS error + rejection</button>
+            <button type="button" class="btn btn-secondary" @onclick="WriteStorage">Write localStorage/sessionStorage</button>
+        </div>
+
+        <div id="measure-target" class="demo-tile">
+            <h4 class="demo-tile-title">Measured element</h4>
+            <div class="bb-mono">@_result</div>
+            <div class="bb-muted">callbacks received: @_ticks</div>
+        </div>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> JS Interop: per call and per identifier</h3>
+    <p class="bb-card-desc">
+        The <strong>JS Interop</strong> panel counts the calls per identifier with their total, average and maximum
+        duration and how many failed, and lists the recent calls with the component that made each one and its
+        result. On the Server renderer every one of those calls is a round trip to the browser.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Diagnostics, Errors and Browser</h3>
+    <ul class="bb-detail-list">
+        <li><strong>Diagnostics</strong>: <em>Chatty loop</em> is excessive interop (more than 50 calls to one identifier in a second) and <em>Slow call</em> is slow interop (over 250 ms). The fix for both: batch the work into one JS function.</li>
+        <li><strong>Errors</strong>: the JS exception the page catches, and the unhandled error and rejection the browser bridge reports.</li>
+        <li><strong>Browser</strong> → read storage: <code>demo:auth_token</code> is redacted before it ever reaches .NET.</li>
+    </ul>
+    <div class="bb-try">
+        <a href="problems#problem-5" class="btn btn-outline">Problem 5 →</a>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Calls that are not this page's</h3>
+    <p class="bb-card-desc">
+        The panel shows every tracked call in the app, so the site around this page shows up too: the search box in
+        the header registers its keyboard shortcut once (<code>bitDemoSite.registerPalette</code>, from
+        <code>CommandPalette</code>) and locks the page scroll while it is open (<code>bitDemoSite.lockScroll</code>),
+        and the theme button calls <code>bitDemoTheme.toggle</code> from <code>Header</code>. The framework's own
+        calls - <code>FocusOnNavigate</code> moving focus after each navigation - are listed as well.
+    </p>
 </div>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/NotFound.razor b/src/Utilities/BevTools/Demo/Client/Pages/NotFound.razor
index 3be13187934..3ca09d494cd 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/NotFound.razor
@@ -1,7 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<PageTitle>Not found</PageTitle>
+<PageTitle>Not found · BevTools</PageTitle>
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
\ No newline at end of file
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="problems" class="btn btn-secondary">Problems to diagnose</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Orders.razor b/src/Utilities/BevTools/Demo/Client/Pages/Orders.razor
index a393990b6ee..da2deb809f4 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Orders.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Orders.razor
@@ -1,43 +1,88 @@
 @page "/orders"
 @inject ProductApi Api
 
-<PageTitle>Orders</PageTitle>
-
-<h1>Orders</h1>
-<p class="muted">Network problems to diagnose: a slow endpoint, a flaky endpoint that fails two thirds of the time, a burst of identical requests and a 404.</p>
-
-<div class="row">
-    <button class="primary" @onclick="() => Load()">Load orders (slow, 1.2–2.6 s)</button>
-    <button @onclick="() => Load(4000)">Load orders (very slow, 4 s)</button>
-    <button @onclick="Flaky">Call flaky endpoint</button>
-    <button @onclick="Burst">Fire 8 identical requests</button>
-    <button @onclick="Missing">Request a missing URL (404)</button>
-    <button @onclick="() => _log.Clear()">Clear log</button>
+<PageTitle>Orders · BevTools</PageTitle>
+
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · Network</p>
+    <h1>Orders</h1>
+    <p class="bb-subtitle">
+        Network problems to diagnose: a slow endpoint, a flaky endpoint that fails two thirds of the time, a burst of
+        identical requests and a 404. Every request goes through <code>IHttpClientFactory</code>, so BevTools sees it
+        with no change to the code that sends it.
+    </p>
 </div>
 
-@if (_loading)
-{
-    <p class="muted">loading…</p>
-}
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The orders client</h3>
+    <p class="bb-card-desc">
+        Each button calls the demo's own API (<code>/api/orders</code>, <code>/api/flaky</code>,
+        <code>/api/products</code>, and an address that does not exist). On the Server renderer these requests are made
+        by the server, so the browser's own network tab never sees them.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
+
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="() => Load()">Load orders (slow, 1.2–2.6 s)</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => Load(4000)">Load orders (very slow, 4 s)</button>
+            <button type="button" class="btn btn-secondary" @onclick="Flaky">Call flaky endpoint</button>
+            <button type="button" class="btn btn-secondary" @onclick="Burst">Fire 8 identical requests</button>
+            <button type="button" class="btn btn-secondary" @onclick="Missing">Request a missing URL (404)</button>
+            <button type="button" class="btn btn-outline" @onclick="() => _log.Clear()">Clear log</button>
+        </div>
+
+        @if (_loading)
+        {
+            <p class="bb-muted demo-loading"><span class="bb-spinner" aria-hidden="true"></span> loading…</p>
+        }
+
+        @if (_orders is not null)
+        {
+            <div class="bb-scroll demo-table-scroll">
+                <table class="bb-table">
+                    <thead><tr><th>#</th><th>Customer</th><th>Total</th><th>Status</th><th>Placed</th></tr></thead>
+                    <tbody>
+                        @foreach (var o in _orders)
+                        {
+                            <tr><td>@o.Id</td><td>@o.Customer</td><td>@o.Total.ToString("C")</td><td>@o.Status</td><td>@o.PlacedAt.ToLocalTime().ToString("g")</td></tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
 
-@if (_orders is not null)
-{
-    <table>
-        <thead><tr><th>#</th><th>Customer</th><th>Total</th><th>Status</th><th>Placed</th></tr></thead>
-        <tbody>
-            @foreach (var o in _orders)
+        <div class="bb-log">
+            @if (_log.Count == 0)
             {
-                <tr><td>@o.Id</td><td>@o.Customer</td><td>@o.Total.ToString("C")</td><td>@o.Status</td><td>@o.PlacedAt.ToLocalTime().ToString("g")</td></tr>
+                <div class="bb-log-empty">No requests yet…</div>
             }
-        </tbody>
-    </table>
-}
+            @foreach (var line in _log)
+            {
+                <div class="bb-log-line">@line</div>
+            }
+        </div>
+    </div>
+</div>
 
-<div class="log">
-    @foreach (var line in _log)
-    {
-        <div>@line</div>
-    }
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Network: durations, statuses, triggers</h3>
+    <p class="bb-card-desc">
+        The <strong>Network</strong> panel lists every request with its method, address, status, duration, headers -
+        sensitive ones redacted, bodies never captured - and the UI event that triggered it.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Errors and Diagnostics: what went wrong</h3>
+    <ul class="bb-detail-list">
+        <li><strong>Errors</strong>: the failed flaky calls and the 404, each with the UI event that preceded it.</li>
+        <li><strong>Diagnostics</strong>: slow HTTP (the 4 s load), repeated failures (call the flaky endpoint a few times) and duplicate requests (the burst of 8).</li>
+    </ul>
+    <div class="bb-try">
+        <a href="problems#problem-4" class="btn btn-outline">Problem 4 →</a>
+    </div>
 </div>
 
 @code {
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Problems.razor b/src/Utilities/BevTools/Demo/Client/Pages/Problems.razor
index aea17f7f03e..6b774b6b88a 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Problems.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Problems.razor
@@ -1,57 +1,64 @@
 @page "/problems"
 
-<PageTitle>Problems to diagnose</PageTitle>
+<PageTitle>Problems to diagnose · BevTools</PageTitle>
 
-<h1>Problems to diagnose</h1>
-<p class="muted">Each problem is real, deliberately left in the code, and discoverable with BevTools. Follow the steps; the point is to reach the cause faster than with logs and breakpoints.</p>
+<div class="bb-intro">
+    <p class="bb-overline">Start here</p>
+    <h1>Problems to diagnose</h1>
+    <p class="bb-subtitle">
+        Each problem is real, deliberately left in this app's code, and discoverable with BevTools. Follow the steps;
+        the point is to reach the cause faster than with logs and breakpoints. Open the panel with
+        <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>D</kbd> or the ⚙ BevTools badge in the bottom corner.
+    </p>
+</div>
 
-<ProblemCard Title="1. The whole dashboard re-renders twice a second" Symptom="Dashboard feels busy; Profiler shows StatsCard, UserProfile and RecentOrders rendering constantly." Href="/">
+<ProblemCard Id="problem-1" Title="1. The whole dashboard re-renders twice a second" Symptom="Dashboard feels busy; Profiler shows StatsCard, UserProfile and RecentOrders rendering constantly." Href="/dashboard">
     <li>On the dashboard, tick "clock re-renders whole dashboard".</li>
-    <li>BevTools → Profiler: sort by renders. <code>Home</code> and every child climb together.</li>
-    <li>Select the Revenue <code>StatsCard</code>: "Why did it render?" says <em>Parent Home re-rendered (parameters re-applied)</em>. Keep it selected for a few ticks: the render list marks each one <em>forced</em> because no observable parameter value changed (compare with the Visitors card, whose <code>Value</code> does change), and <em>Forced re-renders</em> counts them.</li>
-    <li>Select <code>Home</code>: cause is <em>StateHasChanged outside an event</em>; the Timeline shows it right after each <code>LiveClock</code> render.</li>
-    <li>Diagnostics reports <em>Renders driven only by the parent</em> for each StatsCard: every one of their renders was caused by Home, never by their own state. Fix: do not call StateHasChanged on the parent from the clock tick (or override ShouldRender in the cards).</li>
+    <li>BevTools → Profiler: sort by renders. <code>Dashboard</code> and every child climb together.</li>
+    <li>Select the Revenue <code>StatsCard</code>: "Why did it render?" says <em>Parent Dashboard re-rendered (parameters re-applied)</em>. Keep it selected for a few ticks: the render list marks each one <em>forced</em> because no observable parameter value changed (compare with the Visitors card, whose <code>Value</code> does change), and <em>Forced re-renders</em> counts them.</li>
+    <li>Select <code>Dashboard</code>: cause is <em>StateHasChanged outside an event</em>; the Timeline shows it right after each <code>LiveClock</code> render.</li>
+    <li>Diagnostics reports <em>Renders driven only by the parent</em> for each StatsCard: every one of their renders was caused by Dashboard, never by their own state. Fix: do not call StateHasChanged on the parent from the clock tick (or override ShouldRender in the cards).</li>
 </ProblemCard>
 
-<ProblemCard Title="2. Typing in the product search renders 120 rows per keystroke" Symptom="Input feels laggy on Server; Profiler shows ProductRow × 120 per keystroke." Href="/products">
+<ProblemCard Id="problem-2" Title="2. Typing in the product search renders 120 rows per keystroke" Symptom="Input feels laggy on Server; Profiler shows ProductRow × 120 per keystroke." Href="/products">
     <li>Type a few characters. Diagnostics: render storm on <code>ProductList</code>, render cascade of 100+ components per batch.</li>
     <li>Timeline: each <em>oninput → FilterBar</em> event is followed by a state notification and one batch with 121 renders.</li>
     <li>Fix candidates: debounce <code>FilterState</code>, override <code>ShouldRender</code> in <code>ProductRow</code>, use <code>@@key</code> and immutable rows.</li>
 </ProblemCard>
 
-<ProblemCard Title="3. One HTTP request per keystroke, none cancelled" Symptom="Network panel fills with GET /api/search?q=… requests; results arrive out of order." Href="/products">
+<ProblemCard Id="problem-3" Title="3. One HTTP request per keystroke, none cancelled" Symptom="Network panel fills with GET /api/search?q=… requests; results arrive out of order." Href="/products">
     <li>Enable "search the API on every keystroke", type quickly.</li>
     <li>Network: overlapping requests, each triggered by an <em>oninput</em> event (see Trigger column). Diagnostics: duplicate HTTP requests.</li>
     <li>Fix: debounce and pass a <code>CancellationToken</code> that is cancelled by the next keystroke.</li>
 </ProblemCard>
 
-<ProblemCard Title="4. Slow and failing endpoints" Symptom="Orders take seconds; the flaky endpoint fails intermittently; a 404 goes unnoticed." Href="/orders">
+<ProblemCard Id="problem-4" Title="4. Slow and failing endpoints" Symptom="Orders take seconds; the flaky endpoint fails intermittently; a 404 goes unnoticed." Href="/orders">
     <li>Use the buttons on the Orders page.</li>
     <li>Network: durations and statuses; Errors: HTTP failures with the preceding UI event; Diagnostics: slow HTTP, repeated failures.</li>
 </ProblemCard>
 
-<ProblemCard Title="5. Chatty and slow JS interop" Symptom="On Server every interop call is a round trip; 120 calls in a loop take a while." Href="/interop">
+<ProblemCard Id="problem-5" Title="5. Chatty and slow JS interop" Symptom="On Server every interop call is a round trip; 120 calls in a loop take a while." Href="/interop">
     <li>Click "Chatty loop" and "Slow call". JS Interop panel: per-identifier counts, max duration, originating component.</li>
     <li>Diagnostics: excessive interop, slow interop. Fix: batch into one JS function; move loops to JS.</li>
 </ProblemCard>
 
-<ProblemCard Title="6. Where did that exception come from?" Symptom="An error surfaces; which component and which click caused it?" Href="/errors">
+<ProblemCard Id="problem-6" Title="6. Where did that exception come from?" Symptom="An error surfaces; which component and which click caused it?" Href="/errors">
     <li>Trigger any error. Errors panel: source, component, source location (from the stack), the UI event that preceded it and the last ten timeline entries.</li>
 </ProblemCard>
 
-<ProblemCard Title="7. Sensitive data must not leak into a debugging tool" Symptom="Tokens and keys exist in state, headers and storage." Href="/">
-    <li>Components → UserProfile → Injected services / State → <code>AccessToken</code>, <code>Nickname</code> and <code>ApiKey</code> are redacted; Network → headers show a redacted Authorization; Browser → storage redacts <code>demo:auth_token</code>.</li>
+<ProblemCard Id="problem-7" Title="7. Sensitive data must not leak into a debugging tool" Symptom="Tokens and keys exist in state, headers and storage." Href="/dashboard">
+    <li>Components → UserProfile → Injected services / State → <code>AccessToken</code>, <code>Nickname</code> and <code>ApiKey</code> are redacted; Network → headers show a redacted Authorization; Browser → storage redacts <code>demo:auth_token</code> (written by the JS Interop page).</li>
 </ProblemCard>
 
-<ProblemCard Title="8. A singleton captures a scoped service; two services depend on each other" Symptom="Works on the developer machine, leaks user state in production; the cycle throws only when resolved." Href="/">
+<ProblemCard Id="problem-8" Title="8. A singleton captures a scoped service; two services depend on each other" Symptom="Works on the developer machine, leaks user state in production; the cycle throws only when resolved." Href="/dashboard">
     <li>BevTools → Services: search <code>LeakyCache</code> (captive dependency) and <code>ReportService</code> (cycle). Diagnostics lists both with the evidence.</li>
 </ProblemCard>
 
-<ProblemCard Title="9. The circuit freezes and eventually disconnects (Server only)" Symptom="UI stops responding for a moment; reconnect dialog appears; circuit dies." Href="/circuit">
+<ProblemCard Id="problem-9" Title="9. The circuit freezes and eventually disconnects (Server only)" Symptom="UI stops responding for a moment; reconnect dialog appears; circuit dies." Href="/circuit">
     <li>Block the circuit; Timeline shows <em>Slow inbound message</em>; Circuit panel shows max inbound processing time.</li>
     <li>Kill the circuit; Errors shows the logged circuit exception, Browser/Circuit show reconnect state changes.</li>
 </ProblemCard>
 
-<ProblemCard Title="10. What changed in the cart, and which click did it?" Symptom="State mutated somewhere; find the action and the before/after values." Href="/checkout">
+<ProblemCard Id="problem-10" Title="10. What changed in the cart, and which click did it?" Symptom="State mutated somewhere; find the action and the before/after values." Href="/checkout">
     <li>Add and remove items. State → CartState: change history with named actions, diffs and a link to the triggering UI event.</li>
 </ProblemCard>
diff --git a/src/Utilities/BevTools/Demo/Client/Pages/Products.razor b/src/Utilities/BevTools/Demo/Client/Pages/Products.razor
index 95b38c493d5..249d32e5a2e 100644
--- a/src/Utilities/BevTools/Demo/Client/Pages/Products.razor
+++ b/src/Utilities/BevTools/Demo/Client/Pages/Products.razor
@@ -2,18 +2,81 @@
 @implements IDisposable
 @inject CartState Cart
 
-<PageTitle>Products</PageTitle>
+<PageTitle>Products · BevTools</PageTitle>
 
-<h1>Products</h1>
-<p class="muted">Type in the search box and watch the Profiler: <code>ProductList</code> and every <code>ProductRow</code> re-render on each keystroke because <code>FilterState</code> notifies without coalescing and rows never override <code>ShouldRender</code>. Enable "search on type" to also fire one HTTP request per keystroke.</p>
+<div class="bb-intro">
+    <p class="bb-overline">Scenario · Rendering</p>
+    <h1>Products</h1>
+    <p class="bb-subtitle">
+        A searchable list of 120 products, built the way lists often are at first: a state container that notifies on
+        every change, a list that re-renders on every notification, and rows that never override
+        <code>ShouldRender</code>. Each keystroke costs a render of every row - and, with search on type, an HTTP request.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The product list</h3>
+    <p class="bb-card-desc">
+        Type in the search box. <code>FilterBar</code> writes to <code>FilterState</code>, which raises
+        <code>Changed</code> without coalescing; <code>ProductList</code> re-renders, and every <code>ProductRow</code>
+        with it. <em>Add</em> puts a product in the cart, a named change of <code>CartState</code>.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span><RendererStatus /></div>
+
+        <div class="bb-toolbar">
+            <label class="bb-check"><input type="checkbox" @bind="_searchOnType" /> search the API on every keystroke (duplicate/overlapping requests)</label>
+            <span class="bb-spacer"></span>
+            <span class="bb-muted">Cart: @Cart.ItemCount items, @Cart.Total.ToString("C") — see BevTools → State → CartState</span>
+        </div>
+
+        <FilterBar />
+        <ProductList SearchOnType="_searchOnType" />
+    </div>
+</div>
 
-<div class="row">
-    <label><input type="checkbox" @bind="_searchOnType" /> search the API on every keystroke (duplicate/overlapping requests)</label>
-    <span class="muted">Cart: @Cart.ItemCount items, @Cart.Total.ToString("C") — see BevTools → State → CartState</span>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Profiler: what one keystroke costs</h3>
+    <p class="bb-card-desc">
+        Open the <strong>Profiler</strong>, press <em>Reset</em>, type one character and read <em>since reset</em>; tick
+        <em>by type</em> to see all the rows as one line - what 120 <code>ProductRow</code>s cost together, and that every
+        one of their renders was a parent re-render. <strong>Diagnostics</strong> names the pattern: a render storm on
+        <code>ProductList</code> and a render cascade of 100+ components per batch.
+    </p>
 </div>
 
-<FilterBar />
-<ProductList SearchOnType="_searchOnType" />
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Timeline: from the keystroke to the batch</h3>
+    <p class="bb-card-desc">
+        Each <em>oninput → FilterBar</em> event is followed by a state notification and one batch with 121 renders.
+        Select the event and the Timeline lists what it <em>caused</em>; select one of those renders and
+        <em>caused by</em> leads back to the keystroke.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Network: a request per keystroke</h3>
+    <p class="bb-card-desc">
+        Tick <em>search the API on every keystroke</em> and type quickly. The <strong>Network</strong> panel fills with
+        overlapping <code>GET /api/search?q=…</code> requests, each triggered by an <em>oninput</em> event (the Trigger
+        column), none cancelled, answers arriving out of order. <strong>Diagnostics</strong> reports duplicate HTTP
+        requests.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The fixes to try</h3>
+    <ul class="bb-detail-list">
+        <li>Debounce <code>FilterState</code>, so a burst of keystrokes is one notification.</li>
+        <li>Override <code>ShouldRender</code> in <code>ProductRow</code>, use <code>@@key</code> and immutable rows.</li>
+        <li>Pass a <code>CancellationToken</code> to the search and cancel it on the next keystroke.</li>
+    </ul>
+    <div class="bb-try">
+        <a href="problems#problem-2" class="btn btn-outline">Problem 2 →</a>
+        <a href="problems#problem-3" class="btn btn-outline">Problem 3 →</a>
+    </div>
+</div>
 
 @code {
     private bool _searchOnType;
diff --git a/src/Utilities/BevTools/Demo/Client/Routes.razor b/src/Utilities/BevTools/Demo/Client/Routes.razor
index 105855d4577..1fe9258fff5 100644
--- a/src/Utilities/BevTools/Demo/Client/Routes.razor
+++ b/src/Utilities/BevTools/Demo/Client/Routes.razor
@@ -1,6 +1,31 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@implements IDisposable
+@inject AppState AppState
+@inject NavigationManager Navigation
+
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
+
+@* The tool this site demonstrates, mounted once for the whole app and outside the layouts: the site
+   chrome is shared by every Utilities demo, and the panel has to survive every navigation anyway.
+   It is still inside the interactive root (App.razor renders Routes with InteractiveAuto), which is
+   all BevToolsPanel asks of its host. *@
+<BevToolsPanel />
+
+@code {
+    // Every navigation is also a named state change of AppState ("Visit"), so the State panel has a
+    // history to show on every page, not only on the ones that change state themselves.
+    protected override void OnInitialized() => Navigation.LocationChanged += OnLocationChanged;
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+        => AppState.Visit("/" + Navigation.ToBaseRelativePath(e.Location));
+
+    public void Dispose() => Navigation.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/BevTools/Demo/Server/Components/App.razor b/src/Utilities/BevTools/Demo/Server/Components/App.razor
index f756e2db9e2..8a967ea35a8 100644
--- a/src/Utilities/BevTools/Demo/Server/Components/App.razor
+++ b/src/Utilities/BevTools/Demo/Server/Components/App.razor
@@ -4,19 +4,48 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit BevTools (Bit.BevTools) - in-app developer tools for Blazor: a live component tree, a render profiler that explains why a component rendered, a timeline, state, network, JS interop, errors, DI and circuit diagnostics." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.BevTools" />
+    <meta property="og:title" content="BevTools - in-app developer tools for Blazor" />
+    <meta property="og:description" content="See why every component rendered, what each click cost, which request failed and which service is registered wrong - inside the running app, with no changes to its source." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. BevTools' own stylesheet has no tag here: the panel links it itself, the
+       way it does in any application. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
     <link rel="stylesheet" href="@Assets["Bit.BevTools.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet @rendermode="InteractiveAuto" />
 </head>
 
 <body>
+    @* InteractiveAuto, as the scenarios need: a first visit runs on a Blazor Server circuit (the
+       Circuit page and the reconnect UI depend on it), and once the WebAssembly runtime is cached
+       the same pages run in the browser, so both render paths can be inspected. *@
     <Routes @rendermode="InteractiveAuto" />
     <ReconnectModal />
+    <div id="blazor-error-ui" data-nosnippet>
+        An unhandled error has occurred.
+        <a href="." class="reload">Reload</a>
+        <span class="dismiss">&#128473;</span>
+    </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/BevTools/Demo/Server/Components/Pages/Error.razor b/src/Utilities/BevTools/Demo/Server/Components/Pages/Error.razor
index 576cc2d2f4d..33e1014856a 100644
--- a/src/Utilities/BevTools/Demo/Server/Components/Pages/Error.razor
+++ b/src/Utilities/BevTools/Demo/Server/Components/Pages/Error.razor
@@ -1,28 +1,25 @@
 @page "/Error"
+@layout MainLayout
 @using System.Diagnostics
 
-<PageTitle>Error</PageTitle>
+<PageTitle>Error · BevTools</PageTitle>
 
-<h1 class="text-danger">Error.</h1>
-<h2 class="text-danger">An error occurred while processing your request.</h2>
+<div class="bb-error">
+    <h1>Error</h1>
+    <p>An error occurred while processing your request.</p>
 
-@if (ShowRequestId)
-{
-    <p>
-        <strong>Request ID:</strong> <code>@RequestId</code>
-    </p>
-}
+    @if (ShowRequestId)
+    {
+        <p><strong>Request ID:</strong> <code>@RequestId</code></p>
+    }
 
-<h3>Development Mode</h3>
-<p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
-</p>
-<p>
-    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
-    It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
-    and restarting the app.
-</p>
+    <p class="bb-error-hint">
+        Swapping to the <strong>Development</strong> environment displays more detailed information about the error.
+        The Development environment shouldn't be enabled for deployed applications: it can show sensitive information
+        from exceptions to end users. For local debugging, set the <strong>ASPNETCORE_ENVIRONMENT</strong> environment
+        variable to <strong>Development</strong> and restart the app.
+    </p>
+</div>
 
 @code{
     [CascadingParameter]
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/app.css b/src/Utilities/BevTools/Demo/Server/wwwroot/app.css
index ab4fed8c50d..7b51a42ea90 100644
--- a/src/Utilities/BevTools/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/app.css
@@ -1,50 +1,2820 @@
-:root { --accent: #0969da; --bg: #f6f8fa; --fg: #1f2328; --muted: #59636e; --border: #d0d7de; --card: #ffffff; --err: #cf222e; --ok: #1a7f37; --warn: #9a6700; }
-* { box-sizing: border-box; }
-html, body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color: var(--fg); background: var(--bg); }
-a { color: var(--accent); }
-h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
-h1:focus { outline: none; }
-h2 { font-size: 1.15rem; margin: 1.2rem 0 .5rem; }
-p { line-height: 1.5; }
-code, kbd { font-family: ui-monospace, Consolas, monospace; background: #eef1f4; padding: 1px 4px; border-radius: 3px; font-size: .9em; }
-button { font: inherit; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; }
-button:hover { background: #eef1f4; }
-button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
-button.danger { background: var(--err); color: #fff; border-color: var(--err); }
-input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
-table { border-collapse: collapse; width: 100%; }
-th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
-th { color: var(--muted); font-weight: 600; }
-.page { display: flex; min-height: 100vh; }
-.sidebar { width: 220px; background: #24292f; color: #fff; flex: none; }
-.nav-brand { font-weight: 700; padding: 16px; font-size: 1.05rem; }
-.nav-menu { display: flex; flex-direction: column; }
-.nav-link { color: #c9d1d9; text-decoration: none; padding: 8px 16px; }
-.nav-link:hover { background: #32383f; color: #fff; }
-.nav-link.active { background: #0969da; color: #fff; }
-.nav-section { color: #8b949e; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: 14px 16px 4px; }
-.nav-problems { color: #ffd33d; }
-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-.top-row { display: flex; gap: 16px; align-items: center; padding: 8px 20px; background: var(--card); border-bottom: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
-.top-row .hint { margin-left: auto; }
-.content { padding: 20px; padding-bottom: 50vh; }
-.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
-.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
-.card h3 { margin: 0 0 6px; font-size: .95rem; color: var(--muted); }
-.card .big { font-size: 1.6rem; font-weight: 700; }
-.card.dense { padding: 8px; }
-.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
-.muted { color: var(--muted); }
-.error { color: var(--err); }
-.ok { color: var(--ok); }
-.warn { color: var(--warn); }
-.problem { border-left: 4px solid #ffd33d; background: var(--card); border-radius: 6px; padding: 12px 14px; margin: 10px 0; }
-.problem h3 { margin: 0 0 4px; }
-.problem ol { margin: 6px 0 0 18px; padding: 0; }
-.validation-message { color: var(--err); font-size: .85rem; }
-.form-grid { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; max-width: 560px; align-items: center; }
-.log { background: #24292f; color: #c9d1d9; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; padding: 8px; border-radius: 6px; max-height: 200px; overflow: auto; }
-.product-row.highlight { background: #fff8c5; }
-.clock { font-variant-numeric: tabular-nums; }
-#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
-#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/demo.css b/src/Utilities/BevTools/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..2eecf13d0db
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,399 @@
+/* ============================================================================================
+   BevTools demo - the styles of the sample app and of the BevTools panel's place on the page.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is this demo's own - the dashboard tiles, the product and
+   order tables, the checkout form - and it is written against the kit's --bb-* names, so it
+   follows the light/dark theme with no rules of its own for either.
+
+   Nothing here may change what a scenario renders: the classes are on markup the scenario
+   components already emit, so BevTools sees the same components, parameters and renders it saw
+   before the site was restyled.
+   ============================================================================================ */
+
+/* ---------- The live sample's status line (RendererStatus) ---------- */
+
+.demo-renderer {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.demo-renderer strong {
+    color: var(--bb-text);
+}
+
+.demo-shortcut {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+}
+
+@media (max-width: 600px) {
+    .demo-shortcut {
+        display: none;
+    }
+}
+
+/* ---------- Tiles: the dashboard's cards and the other samples' panes ----------
+
+   A tile is a raised surface inside a sample. Its title is an h4 on purpose: site.js builds the
+   "on this page" rail from h2 and h3.bb-card-title, and a tile is a part of a sample, not a
+   section of the page. */
+
+.demo-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
+    gap: .75rem;
+    margin: 0 0 .75rem;
+    container-type: inline-size;
+}
+
+.demo-tiles:last-child {
+    margin-bottom: 0;
+}
+
+.demo-tile {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+}
+
+.demo-tile.dense {
+    padding: .5rem .75rem;
+}
+
+.demo-tile > .bb-toolbar:last-child,
+.demo-tile > .bb-scroll:last-child,
+.demo-tile > :last-child {
+    margin-bottom: 0;
+}
+
+/* StatsCard: the accent comes from the cascading DashboardSettings, inline, as border-top-color. */
+.demo-stat {
+    border-top-width: 3px;
+}
+
+/* Fluent's Overline: small, spaced and uppercase, so it reads as a label over the value. */
+.demo-tile-title {
+    margin: 0 0 .5rem;
+    font-family: var(--bb-font-sans);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+.demo-tile-title .bb-muted {
+    text-transform: none;
+    letter-spacing: 0;
+    font-weight: var(--fl-weight-regular);
+}
+
+.demo-tile-note {
+    margin: .75rem 0 0;
+    font-size: var(--fl-font-size-100);
+    line-height: 1.5;
+    color: var(--bb-text-soft);
+}
+
+/* A row of one narrow and one wide pane (the profile and the orders, the cart and the form): wider
+   tracks, three of them on a desktop column, the wide pane taking two. Once the sample is too
+   narrow for that, the wide pane takes a single track like the other - a span of two in a
+   one-track grid would add a track and push the page sideways. */
+.demo-tiles.demo-tiles-pair {
+    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
+    align-items: start;
+}
+
+.demo-span-2 {
+    grid-column: span 2;
+}
+
+@container (max-width: 34rem) {
+    .demo-span-2 {
+        grid-column: auto;
+    }
+}
+
+.demo-big {
+    font-family: var(--bb-font-display);
+    font-size: var(--fl-font-size-600);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    letter-spacing: -.01em;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+}
+
+.demo-tile.dense .demo-big {
+    font-size: var(--fl-font-size-400);
+}
+
+/* Monospaced so the ticking digits do not shift, and a step smaller than the stats: ten characters
+   of it have to fit the narrowest tile of the row. */
+.demo-clock {
+    font-family: var(--bb-mono);
+    font-size: 1.125rem;
+    white-space: nowrap;
+}
+
+.demo-loading {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.demo-count {
+    font-size: var(--fl-font-size-400);
+    margin-bottom: 1rem;
+}
+
+/* ---------- Tables ---------- */
+
+/* A long table scrolls inside its own frame rather than making the page a list of 120 rows. The
+   frame moves from the table to the box so the sticky header stays inside it. */
+.bb-scroll.demo-table-scroll {
+    max-height: 30rem;
+    overflow: auto;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.demo-table-scroll > .bb-table {
+    border: 0;
+    border-radius: 0;
+    overflow: visible;
+}
+
+.demo-table-scroll > .bb-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+/* Product names and cart lines are prose, not identifiers. */
+.demo-products td:first-child,
+.demo-cart td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.demo-products td,
+.demo-cart td {
+    vertical-align: middle;
+}
+
+/* Every seventh product is highlighted (the Highlight parameter of ProductRow). */
+.bb-table tbody tr.product-row.highlight td {
+    background: var(--bb-warning-soft);
+}
+
+.bb-table tbody tr.product-row.highlight:hover td {
+    background: color-mix(in srgb, var(--bb-warning-soft) 70%, var(--bb-surface-hover));
+}
+
+.demo-sold-out {
+    color: var(--bb-danger-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.demo-cart {
+    margin-bottom: .75rem;
+}
+
+/* ---------- Controls ---------- */
+
+/* The scenario buttons say what they do, at length, so on a narrow sample they wrap rather than
+   push the page sideways. */
+.bb-demo .bb-toolbar > .btn {
+    max-width: 100%;
+    white-space: normal;
+}
+
+.btn.demo-btn-sm {
+    min-height: 1.5rem;
+    padding: .0625rem .625rem;
+    font-size: var(--fl-font-size-100);
+}
+
+/* Fluent has no danger button; the scenario that ends a circuit is the one place that needs one. */
+/* The text takes the primary button's on-fill color: white on the light theme's dark red, the
+   dark surface color on the dark theme's light one. */
+.btn.demo-btn-danger {
+    background: var(--bb-danger);
+    border-color: var(--bb-danger);
+    color: var(--bb-primary-text);
+}
+
+.btn.demo-btn-danger:hover {
+    background: var(--bb-danger-text);
+    border-color: var(--bb-danger-text);
+    color: var(--bb-primary-text);
+}
+
+.demo-search {
+    flex: 1 1 18rem;
+    min-width: 0;
+}
+
+.demo-range-value {
+    min-width: 3.5rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.bb-demo input[type="range"] {
+    max-width: 100%;
+}
+
+/* ---------- The checkout form ---------- */
+
+.demo-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+.demo-form > .bb-field > :is(input, textarea) {
+    width: 100%;
+}
+
+.demo-form-wide {
+    grid-column: 1 / -1;
+}
+
+/* EditForm's own markup: the classes InputBase and ValidationSummary write. */
+.demo-form :is(input, textarea).invalid {
+    border-color: var(--bb-danger);
+}
+
+.demo-form :is(input, textarea).modified.valid {
+    border-bottom-color: var(--bb-success);
+}
+
+.validation-errors {
+    margin: 0 0 1rem;
+    padding: .75rem 1rem .75rem 2.25rem;
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-danger-soft);
+}
+
+.validation-message {
+    color: var(--bb-danger-text);
+    font-size: var(--fl-font-size-200);
+}
+
+/* ---------- Landing page: the live strip under the hero's code ---------- */
+
+.home-hero-live {
+    padding: 1rem 1.25rem 1.25rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.home-hero-live p {
+    margin-bottom: .75rem;
+}
+
+.home-hero-live .bb-toolbar {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   The BevTools panel on this page.
+
+   The panel is rendered into the page like any component, so the site's element styles reach it:
+   app.css draws every <code> as a chip and gives text fields a Fluent height. bit-bevtools.css
+   only sets what it needs, so those two are put back here - the panel should look the way it does
+   in any application, not like a page of this site.
+   ============================================================================================ */
+
+.bev-root code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    overflow-wrap: normal;
+}
+
+.bev-root input:where(:not([type]), [type="text"], [type="search"]) {
+    min-height: 0;
+    line-height: inherit;
+}
+
+/* The panel's Auto theme follows the system preference. On this site "the system" is the
+   header's light/dark toggle, which can differ from the OS once it has been used, so Auto here
+   follows the site: the panel's own two palettes (bit-bevtools.css), keyed to bit-theme instead of
+   prefers-color-scheme. An explicit Light or Dark choice in the panel is left alone. */
+:root[bit-theme="light"] .bev-root[data-theme="auto"] {
+    --bev-bg: #ffffff;
+    --bev-bg2: #f3f4f6;
+    --bev-bg3: #e8eaee;
+    --bev-fg: #1f2328;
+    --bev-fg2: #59636e;
+    --bev-border: #d0d7de;
+    --bev-accent: #0969da;
+    --bev-accent-bg: #ddf4ff;
+    --bev-warn: #9a6700;
+    --bev-warn-bg: #fff8c5;
+    --bev-err: #cf222e;
+    --bev-err-bg: #ffebe9;
+    --bev-ok: #1a7f37;
+    --bev-ok-bg: #dafbe1;
+    --bev-render: #8250df;
+    --bev-event: #0969da;
+    --bev-http: #1a7f37;
+    --bev-js: #bf8700;
+    --bev-state: #cf222e;
+    --bev-nav: #0a7ea4;
+    --bev-error: #cf222e;
+    --bev-lifecycle: #6e7781;
+    --bev-flash: #fff8c5;
+    color-scheme: light;
+}
+
+:root[bit-theme="dark"] .bev-root[data-theme="auto"] {
+    --bev-bg: #0d1117;
+    --bev-bg2: #161b22;
+    --bev-bg3: #21262d;
+    --bev-fg: #e6edf3;
+    --bev-fg2: #8b949e;
+    --bev-border: #30363d;
+    --bev-accent: #58a6ff;
+    --bev-accent-bg: #0c2d6b;
+    --bev-warn: #d29922;
+    --bev-warn-bg: #3b2e00;
+    --bev-err: #f85149;
+    --bev-err-bg: #4a1414;
+    --bev-ok: #3fb950;
+    --bev-ok-bg: #0f3a1c;
+    --bev-render: #bc8cff;
+    --bev-event: #58a6ff;
+    --bev-http: #3fb950;
+    --bev-js: #e3b341;
+    --bev-state: #ff7b72;
+    --bev-nav: #39c5cf;
+    --bev-error: #ff7b72;
+    --bev-lifecycle: #8b949e;
+    --bev-flash: #3b2e00;
+    color-scheme: dark;
+}
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/BevTools/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/site.js b/src/Utilities/BevTools/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/BevTools/Demo/Server/wwwroot/theme.js b/src/Utilities/BevTools/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/BevTools/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/BevTools/Tests/Bit.BevTools.Tests/ComponentTrackingTests.cs b/src/Utilities/BevTools/Tests/Bit.BevTools.Tests/ComponentTrackingTests.cs
index 2e76be91a69..26c14f4d907 100644
--- a/src/Utilities/BevTools/Tests/Bit.BevTools.Tests/ComponentTrackingTests.cs
+++ b/src/Utilities/BevTools/Tests/Bit.BevTools.Tests/ComponentTrackingTests.cs
@@ -30,6 +30,7 @@ public void Reflection_accessors_are_available_on_this_framework()
         Assert.IsTrue(BlazorReflection.CanResolveRenderer);
         Assert.IsTrue(BlazorReflection.CanResolveHierarchy);
         Assert.IsTrue(BlazorReflection.CanDetectBatches);
+        Assert.IsTrue(BlazorReflection.CanReadRenderQueue);
     }
 
     [TestMethod]
diff --git a/src/Utilities/BevTools/Tests/Bit.BevTools.Tests/TriggerOwnershipTests.cs b/src/Utilities/BevTools/Tests/Bit.BevTools.Tests/TriggerOwnershipTests.cs
new file mode 100644
index 00000000000..f3d05ec3a79
--- /dev/null
+++ b/src/Utilities/BevTools/Tests/Bit.BevTools.Tests/TriggerOwnershipTests.cs
@@ -0,0 +1,328 @@
+using System.Diagnostics;
+using Bunit;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace Bit.BevTools.Tests;
+
+/// <summary>
+/// Which work a UI event or navigation is the cause of. A timer, background loop or fire-and-forget task started
+/// inside one inherits its execution context, Activity.Current included, and keeps it after the trigger ended; what
+/// that work renders later is not the trigger's doing. The renders the trigger itself produces still are, including
+/// the ones the framework only processes after stopping its activity.
+/// </summary>
+[TestClass]
+public class TriggerOwnershipTests : BunitContext
+{
+    private static readonly TimeSpan Patience = TimeSpan.FromSeconds(10);
+
+    public TriggerOwnershipTests()
+    {
+        Services.AddBitBevToolsServices(o => o.Enabled = true);
+    }
+
+    private BevToolsSession Session => Services.GetRequiredService<BevToolsSession>();
+
+    private BevComponentRecord RecordOf<TComponent>() => Session.Components.All.Single(r => r.Type == typeof(TComponent));
+
+    private BevToolsEvent BatchEventOf(BevRenderSample sample) =>
+        Session.Timeline.Snapshot().Single(e => e.Kind == BevToolsEventKind.RenderBatch && e.Title == "Render batch #" + sample.BatchId);
+
+    [TestMethod]
+    public async Task Work_that_inherited_an_activity_after_it_stopped_is_not_attributed_to_it()
+    {
+        // The framework's own activities only exist on .NET 10; emitting one the same way keeps the rule covered on
+        // every runtime: a render while the navigation runs is its own, a continuation that outlives it is not.
+        var cut = Render<FireAndForget>();
+        var record = RecordOf<FireAndForget>();
+        using var source = new ActivitySource(ActivityObserver.SourceName);
+        await cut.InvokeAsync(() =>
+        {
+            var activity = source.CreateActivity(ActivityObserver.NavigateName, ActivityKind.Internal)!;
+            activity.DisplayName = "Route /later -> MyApp.Pages.Later";
+            activity.Start();
+            cut.Instance.Start();
+            activity.Stop();
+        });
+
+        var navigation = Assert.ContainsSingle(e => e.Kind == BevToolsEventKind.Navigation, Session.Timeline.Snapshot());
+        Assert.AreEqual(BevRenderCause.Navigation, record.LastRender!.Cause);
+        Assert.AreEqual(navigation.Id, record.LastRender.TriggerEventId);
+
+        cut.Instance.Gate.SetResult();
+        await cut.Instance.Done.Task.WaitAsync(Patience);
+
+        Assert.AreEqual(BevRenderCause.StateHasChanged, record.LastRender!.Cause);
+        Assert.IsNull(record.LastRender.TriggerEventId);
+    }
+
+    // UI events and navigations are the framework's HandleEvent and Navigate activities, which .NET 10 introduced.
+#if NET10_0_OR_GREATER
+    [TestMethod]
+    public async Task A_timer_started_by_a_click_is_not_attributed_to_that_click()
+    {
+        var cut = Render<TimerOnClick>();
+        var record = RecordOf<TimerOnClick>();
+
+        cut.Find("button").Click();
+
+        var click = Assert.ContainsSingle(e => e.Kind == BevToolsEventKind.UiEvent, Session.Timeline.Snapshot());
+        Assert.AreEqual(BevRenderCause.UiEvent, record.LastRender!.Cause);
+        Assert.AreEqual(click.Id, record.LastRender.TriggerEventId);
+
+        await cut.Instance.Ticked.Task.WaitAsync(Patience);
+
+        var tick = record.LastRender!;
+        Assert.AreEqual(BevRenderCause.StateHasChanged, tick.Cause);
+        Assert.IsNull(tick.TriggerEventId);
+        Assert.IsNull(BatchEventOf(tick).ParentEventId);
+    }
+
+    [TestMethod]
+    public async Task A_fire_and_forget_continuation_of_a_click_is_not_attributed_to_that_click()
+    {
+        var cut = Render<FireAndForget>();
+        var record = RecordOf<FireAndForget>();
+        BevErrorRecord? error = null;
+        cut.Instance.Continued = () => error = Session.Errors.Record(new InvalidOperationException("later"), "test");
+
+        cut.Find("button").Click();
+
+        var click = Assert.ContainsSingle(e => e.Kind == BevToolsEventKind.UiEvent, Session.Timeline.Snapshot());
+        Assert.AreEqual(click.Id, record.LastRender!.TriggerEventId);
+
+        cut.Instance.Gate.SetResult();
+        await cut.Instance.Done.Task.WaitAsync(Patience);
+
+        // Nothing the continuation does points at the click: its render, the component it shows, the error it raises.
+        Assert.AreEqual(BevRenderCause.StateHasChanged, record.LastRender!.Cause);
+        Assert.IsNull(record.LastRender.TriggerEventId);
+        var child = RecordOf<ChildComponent>();
+        Assert.IsNull(child.LastRender!.TriggerEventId);
+        Assert.IsNull(Session.Timeline.Snapshot().Single(e => e.Kind == BevToolsEventKind.Lifecycle && e.ComponentInstanceId == child.InstanceId).ParentEventId);
+        Assert.IsNull(error!.PrecedingEventId);
+    }
+
+    [TestMethod]
+    public void A_click_owns_the_batch_that_renders_what_it_queued()
+    {
+        // The framework stops a synchronous handler's activity before it renders what the handler queued, so this
+        // batch runs after the stop and still belongs to the click - the component it shows included.
+        var cut = Render<FireAndForget>();
+        var record = RecordOf<FireAndForget>();
+
+        cut.Find("#show").Click();
+
+        var click = Assert.ContainsSingle(e => e.Kind == BevToolsEventKind.UiEvent, Session.Timeline.Snapshot());
+        Assert.AreEqual(BevRenderCause.UiEvent, record.LastRender!.Cause);
+        Assert.AreEqual(click.Id, BatchEventOf(record.LastRender).ParentEventId);
+        var child = RecordOf<ChildComponent>();
+        Assert.AreEqual(click.Id, child.LastRender!.TriggerEventId);
+        Assert.AreEqual(click.Id, Session.Timeline.Snapshot().Single(e => e.Kind == BevToolsEventKind.Lifecycle && e.ComponentInstanceId == child.InstanceId).ParentEventId);
+    }
+
+    [TestMethod]
+    public async Task An_async_handler_owns_the_render_after_its_await()
+    {
+        var cut = Render<AsyncClick>();
+        var record = RecordOf<AsyncClick>();
+
+        cut.Find("button").Click();
+        cut.Instance.Gate.SetResult();
+        await cut.Instance.Completed.Task.WaitAsync(Patience);
+
+        var click = Assert.ContainsSingle(e => e.Kind == BevToolsEventKind.UiEvent, Session.Timeline.Snapshot());
+        Assert.AreEqual(BevRenderCause.UiEvent, record.LastRender!.Cause);
+        Assert.AreEqual(click.Id, record.LastRender.TriggerEventId);
+    }
+
+    [TestMethod]
+    public async Task A_timer_started_by_the_page_a_navigation_rendered_is_not_attributed_to_that_navigation()
+    {
+        // The demo's live clock: the timer starts in OnAfterRender of the page's first render, inside the Navigate
+        // activity, and ticks long after it.
+        RenderFragment<RouteData> found = routeData => builder =>
+        {
+            builder.OpenComponent<RouteView>(0);
+            builder.AddComponentParameter(1, nameof(RouteView.RouteData), routeData);
+            builder.AddComponentParameter(2, nameof(RouteView.DefaultLayout), typeof(NavigationLayout));
+            builder.CloseComponent();
+        };
+        var navigationManager = Services.GetRequiredService<NavigationManager>();
+        navigationManager.NavigateTo("/bev-tests/start");
+        var router = Render<Router>(ps => ps.Add(p => p.AppAssembly, typeof(ClockPage).Assembly).Add(p => p.Found, found));
+        var layout = RecordOf<NavigationLayout>();
+
+        navigationManager.NavigateTo("/bev-tests/clock");
+
+        // The navigation's own renders are still the navigation's: the layout it re-rendered, the page it created.
+        var navigations = Session.Timeline.Snapshot().Where(e => e.Kind == BevToolsEventKind.Navigation && e.Title.Contains("/bev-tests/clock", StringComparison.Ordinal)).Select(e => e.Id).ToArray();
+        Assert.AreEqual(BevRenderCause.Navigation, layout.LastRender!.Cause);
+        Assert.Contains(layout.LastRender.TriggerEventId!.Value, navigations);
+        var page = RecordOf<ClockPage>();
+        Assert.Contains(page.Renders[0].TriggerEventId!.Value, navigations);
+
+        await router.FindComponent<ClockPage>().Instance.Ticked.Task.WaitAsync(Patience);
+
+        var tick = page.LastRender!;
+        Assert.AreEqual(BevRenderCause.StateHasChanged, tick.Cause);
+        Assert.IsNull(tick.TriggerEventId);
+        Assert.IsNull(BatchEventOf(tick).ParentEventId);
+    }
+#endif
+
+    /// <summary>A live clock started by a button: the timer captures the execution context, and with it the click.</summary>
+    public sealed class TimerOnClick : ComponentBase, IDisposable
+    {
+        private Timer? _timer;
+        private int _ticks;
+
+        public TaskCompletionSource Ticked { get; } = new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenElement(0, "button");
+            builder.AddAttribute(1, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, Start));
+            builder.AddContent(2, _ticks);
+            builder.CloseElement();
+        }
+
+        private void Start() => _timer = new Timer(_ => InvokeAsync(() =>
+        {
+            _ticks++;
+            StateHasChanged();
+            Ticked.TrySetResult();
+        }), null, 10, Timeout.Infinite);
+
+        public void Dispose() => _timer?.Dispose();
+    }
+
+    /// <summary>Starts work it does not await, which refreshes the component once <see cref="Gate"/> opens.</summary>
+    public sealed class FireAndForget : ComponentBase
+    {
+        private bool _showChild;
+        private int _refreshes;
+
+        public TaskCompletionSource Gate { get; } = new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        public TaskCompletionSource Done { get; } = new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        /// <summary>Runs inside the continuation, after its render.</summary>
+        public Action? Continued { get; set; }
+
+        public void Start()
+        {
+            _ = RefreshLaterAsync();
+            StateHasChanged();
+        }
+
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenElement(0, "button");
+            builder.AddAttribute(1, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, Start));
+            builder.AddContent(2, _refreshes);
+            builder.CloseElement();
+            builder.OpenElement(3, "button");
+            builder.AddAttribute(4, "id", "show");
+            builder.AddAttribute(5, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, () => _showChild = true));
+            builder.CloseElement();
+            if (_showChild)
+            {
+                builder.OpenComponent<ChildComponent>(6);
+                builder.AddComponentParameter(7, nameof(ChildComponent.Text), "shown");
+                builder.CloseComponent();
+            }
+        }
+
+        private async Task RefreshLaterAsync()
+        {
+            await Gate.Task;
+            await InvokeAsync(() =>
+            {
+                _refreshes++;
+                _showChild = true;
+                StateHasChanged();
+                Continued?.Invoke();
+            });
+            Done.TrySetResult();
+        }
+    }
+
+    /// <summary>An awaited handler: the framework renders again when it completes, still inside the event.</summary>
+    public sealed class AsyncClick : ComponentBase
+    {
+        private int _count;
+
+        public TaskCompletionSource Gate { get; } = new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        public TaskCompletionSource Completed { get; } = new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenElement(0, "button");
+            builder.AddAttribute(1, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, OnClick));
+            builder.AddContent(2, _count);
+            builder.CloseElement();
+        }
+
+        protected override void OnAfterRender(bool firstRender)
+        {
+            if (_count > 0)
+            {
+                Completed.TrySetResult();
+            }
+        }
+
+        private async Task OnClick()
+        {
+            await Gate.Task;
+            _count++;
+        }
+    }
+
+    public sealed class NavigationLayout : LayoutComponentBase
+    {
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenElement(0, "main");
+            builder.AddContent(1, Body);
+            builder.CloseElement();
+        }
+    }
+
+    [Route("/bev-tests/start")]
+    public sealed class StartPage : ComponentBase
+    {
+        protected override void BuildRenderTree(RenderTreeBuilder builder) => builder.AddContent(0, "start");
+    }
+
+    /// <summary>The demo's LiveClock, reduced to one tick.</summary>
+    [Route("/bev-tests/clock")]
+    public sealed class ClockPage : ComponentBase, IDisposable
+    {
+        private Timer? _timer;
+        private int _ticks;
+
+        public TaskCompletionSource Ticked { get; } = new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        protected override void BuildRenderTree(RenderTreeBuilder builder) => builder.AddContent(0, _ticks);
+
+        protected override void OnAfterRender(bool firstRender)
+        {
+            if (firstRender)
+            {
+                _timer = new Timer(_ => InvokeAsync(() =>
+                {
+                    _ticks++;
+                    StateHasChanged();
+                    Ticked.TrySetResult();
+                }), null, 10, Timeout.Infinite);
+            }
+        }
+
+        public void Dispose() => _timer?.Dispose();
+    }
+}
diff --git a/src/Utilities/BevTools/docs/architecture.md b/src/Utilities/BevTools/docs/architecture.md
index 49554e77864..e33e859e94a 100644
--- a/src/Utilities/BevTools/docs/architecture.md
+++ b/src/Utilities/BevTools/docs/architecture.md
@@ -49,7 +49,14 @@ A render sample's cause is decided in this order, and the label says which rule
 2. An ancestor rendered earlier **in the same batch** → *Parent re-rendered (parameters re-applied)*. This is exactly
    what the renderer does: the parent's diff calls `SetParametersAsync` on the child, which queues the child in the same
    batch.
-3. A `HandleEvent`/`Navigate` activity is current on the session → *Event: onclick → Type.Method* / *Navigation*.
+3. A `HandleEvent`/`Navigate` activity is running on the session, or it has stopped and this batch renders what it had
+   queued → *Event: onclick → Type.Method* / *Navigation*. The second half exists because the framework stops a
+   synchronous handler's activity before it renders the components the handler queued; `ActivityObserver` reads the
+   renderer's queue (`RenderBatchBuilder.ComponentRenderQueue`) when the activity stops, and the trigger keeps the one
+   batch - the one in progress or the next - that renders one of them. Nothing else counts once the activity stopped:
+   `Activity.Current` flows with the execution context, so a timer, background loop or fire-and-forget task started
+   inside an event or navigation still carries its activity long after it ended, and what that work renders, requests
+   or logs is not the trigger's.
 4. Otherwise → *StateHasChanged outside an event*: timer, async continuation, state-container notification or explicit
    call. BevTools does not walk the stack to name the caller; the timeline's *Just before* section shows the surrounding
    activity instead.
diff --git a/src/Utilities/BevTools/docs/capabilities.md b/src/Utilities/BevTools/docs/capabilities.md
index b5d6573f172..b09ca25840b 100644
--- a/src/Utilities/BevTools/docs/capabilities.md
+++ b/src/Utilities/BevTools/docs/capabilities.md
@@ -35,8 +35,8 @@ rather than "not observed yet" (renders inside events are then labeled *StateHas
 | Render batches (one DOM diff) | Instrumentation | Batch boundary = `RenderBatchBuilder.UpdatedComponentDiffs.Count == 0` at render start. Fallback: idle-time heuristic (flagged *Unreliable*). |
 | Batch diff duration and DOM edit count | Runtime | `aspnetcore.components.render_diff.duration/size` meters (.NET 10). On Blazor Server the framework records them when the browser acknowledges the render, so BevTools matches each measurement back to the batch that produced it. Batches BevTools does not record (its own UI, renders while capture is paused) are still bookkept, so their measurements never land on an application batch. **Blazor WebAssembly compiles `System.Diagnostics.Metrics` out by default**: add `<MetricsSupport>true</MetricsSupport>` to the WebAssembly project, otherwise the About panel reports this row as *Not available* and says why. |
 | Cause: parent re-render | Available* | An ancestor rendered earlier in the same batch (renderer re-applied parameters). *Needs hierarchy + batches. |
-| Cause: UI event (with attribute, component, method) | Runtime | `Microsoft.AspNetCore.Components.HandleEvent` activity; BevTools adds an `ActivityListener` **and registers the framework's own `ComponentsActivitySource`** (`AddComponentsTracing`), which server-side rendering registers but WebAssembly and custom hosts do not. Interactions with the BevTools panel itself are excluded. Before the first activity is seen the About panel says so. |
-| Cause: navigation | Partial | `NavigationManager.LocationChanged` always; `Navigate` activity when emitted. |
+| Cause: UI event (with attribute, component, method) | Runtime | `Microsoft.AspNetCore.Components.HandleEvent` activity; BevTools adds an `ActivityListener` **and registers the framework's own `ComponentsActivitySource`** (`AddComponentsTracing`), which server-side rendering registers but WebAssembly and custom hosts do not. Interactions with the BevTools panel itself are excluded. Before the first activity is seen the About panel says so. An event owns the renders made while its activity runs and the batch that renders what it had queued (read from `RenderBatchBuilder.ComponentRenderQueue` when the activity stops, since the framework renders a synchronous handler's changes after stopping it); a timer or fire-and-forget task the handler started is not the event's once it has ended, although it inherits the activity. |
+| Cause: navigation | Partial | `NavigationManager.LocationChanged` always; `Navigate` activity when emitted. Same ownership as a UI event: the renders of the navigation itself, not those of a timer the page it rendered started. |
 | Cause: explicit `StateHasChanged` / async continuation | Partial | Everything not attributable above. The caller is not identified (no stack walk by design). |
 | Forced re-render (parent re-applied identical parameters) | Partial | For the component selected in the inspector (or all, with `CaptureComponentStateOnRender`), parameter and cascading values are flattened two levels deep (≤ 25 collection items, one time budget per render) before each render and diffed against the previous captured render. A parent-caused render with no observable change is marked *forced* and counted. Delegates compare by target method, so a recreated lambda with the same body counts as unchanged. Render fragments compare by instance, and one that reads component state as it runs never counts as unchanged, so new child content is never called forced. `[BevToolsSensitive]` parameters compare as redacted. Not decided for the first captured render (nothing to compare against), nor for the first one after renders that were not compared (the component was not inspected, or capture was paused). |
 | `SetParametersAsync` cost (OnInitialized/OnParametersSet) | Runtime | `aspnetcore.components.update_parameters.duration`, per component type. Same WebAssembly caveat as the diff meters. |
diff --git a/src/Utilities/Bink/Demo/Client/DocsCatalog.cs b/src/Utilities/Bink/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..14d7059c1c0
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,183 @@
+using Bit.Bink.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bink.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bink";
+
+    public const string PackageId = "Bit.Bink";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bink";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bink is a Blazor-native drawing and ink engine: pressure-aware strokes, brushes, erasers, selection, " +
+        "layers, annotations, undo, collaboration and SVG/PNG export, with the engine written in C#. Every page " +
+        "of this site is a working canvas.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["signature", "pressure", "layers", "export", "collaboration"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package and put a canvas on a page - no services to register and no stylesheet to link.",
+                "install setup nuget package quick start BinkCanvas _Imports render mode InteractiveWebAssembly stylesheet initializer brush tool",
+                typeof(GettingStarted)),
+        ]),
+        new("Use cases",
+        [
+            new("/signature", "Signature",
+                "A signature field with validation, a read-only accepted state, and SVG and PNG export cropped to the ink.",
+                "signature pad sign field validate accept read only ReadOnly StrokeCompleted export svg png crop BinkExportRegion",
+                typeof(Signature)),
+            new("/handwriting", "Handwriting",
+                "A note-taking surface tuned for writing: tight point spacing, pressure and tilt, palm rejection and ruled paper.",
+                "handwriting notes pen stylus pressure tilt palm rejection RejectTouchWhilePen pencil marker highlighter eraser smoothing spacing",
+                typeof(Handwriting)),
+            new("/whiteboard", "Whiteboard",
+                "The full editor: pens, markers, highlighters, three erasers, shapes, text, selection, layers, pan, zoom, save and export.",
+                "whiteboard editor tools layers selection transform move resize rotate text shapes arrow eraser zoom pan save open export duplicate",
+                typeof(Whiteboard)),
+            new("/diagram", "Diagram surface",
+                "Nodes and connectors on the document model: move a node and its connectors follow, in the same undo step.",
+                "diagram nodes connectors graph flowchart custom tool metadata Changed listener batch undo labels",
+                typeof(Diagram)),
+            new("/image-annotation", "Image annotation",
+                "Open a screenshot or photo, mark it up with arrows, boxes and highlights on a layer above it, and export it.",
+                "image annotation screenshot photo markup arrow box highlight locked layer LoadImageAsync BinkImageElement export png svg",
+                typeof(ImageAnnotation)),
+            new("/document-annotation", "Document review",
+                "Highlight text, attach callout comments and write in the margin, with every annotation listed beside the page.",
+                "document review annotation highlight callout comment pdf contract margin notes description accessibility",
+                typeof(DocumentAnnotation)),
+            new("/collaboration", "Collaboration",
+                "Two canvases kept in sync by exchanging operations, with live cursors, remote ink, latency and an offline queue.",
+                "collaboration realtime sync multiplayer presence cursors operations transport signalr websockets offline queue BinkCollaborationSession",
+                typeof(Collaboration)),
+        ]),
+        new("Engine",
+        [
+            new("/serialization", "Serialization",
+                "Save, inspect, edit and reload the vector document, and see what the compact and readable formats cost.",
+                "serialization save load json format compact readable BinkSerializer TryDeserialize round trip bytes per point file",
+                typeof(SerializationPage)),
+            new("/performance", "Performance",
+                "Generate thousands of strokes and time geometry, redraw, hit testing, save, load and SVG export in your browser.",
+                "performance benchmark speed strokes redraw culling hit test save load export zero-copy render path",
+                typeof(Performance)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bink/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bink/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bink/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bink/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bink/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/Footer.razor b/src/Utilities/Bink/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bink/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/Header.razor b/src/Utilities/Bink/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bink/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bink/Demo/Client/Layout/MainLayout.razor
index da01ca60534..44980dda101 100644
--- a/src/Utilities/Bink/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bink/Demo/Client/Layout/MainLayout.razor
@@ -1,11 +1,30 @@
 @inherits LayoutComponentBase
 
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. *@
-<div class="app" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
-    <a class="skip-link" href="#main">Skip to content</a>
-    <NavMenu />
-    <main class="main" id="main" tabindex="-1">
-        @Body
-    </main>
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
+
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
+
+    <Footer />
 </div>
diff --git a/src/Utilities/Bink/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bink/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Bink/Demo/Client/Layout/NavMenu.razor b/src/Utilities/Bink/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 30d952b3c1e..00000000000
--- a/src/Utilities/Bink/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,33 +0,0 @@
-<nav class="sidebar" aria-label="Demonstrations">
-    <a class="brand" href="">
-        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
-            <path d="M4 24C8 8 14 6 18 12s-2 10 2 12" fill="none" stroke="currentColor" stroke-width="3.5"
-                  stroke-linecap="round" />
-            <circle cx="25" cy="9" r="3.5" fill="currentColor" />
-        </svg>
-        bit Bink
-    </a>
-
-    <div class="nav-section">Overview</div>
-    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Introduction</NavLink>
-
-    <div class="nav-section">Use cases</div>
-    <NavLink class="nav-link" href="signature">Signature</NavLink>
-    <NavLink class="nav-link" href="handwriting">Handwriting</NavLink>
-    <NavLink class="nav-link" href="whiteboard">Whiteboard</NavLink>
-    <NavLink class="nav-link" href="diagram">Diagram surface</NavLink>
-    <NavLink class="nav-link" href="image-annotation">Image annotation</NavLink>
-    <NavLink class="nav-link" href="document-annotation">Document review</NavLink>
-    <NavLink class="nav-link" href="collaboration">Collaboration</NavLink>
-
-    <div class="nav-section">Engine</div>
-    <NavLink class="nav-link" href="serialization">Serialization</NavLink>
-    <NavLink class="nav-link" href="performance">Performance</NavLink>
-
-    <div class="nav-section">AI</div>
-    <NavLink class="nav-link" href="mcp-server">MCP server</NavLink>
-
-    <div class="nav-section">Project</div>
-    <a class="nav-link" href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bink" target="_blank" rel="noopener">Source on GitHub</a>
-    <a class="nav-link" href="https://www.nuget.org/packages/Bit.Bink" target="_blank" rel="noopener">NuGet package</a>
-</nav>
diff --git a/src/Utilities/Bink/Demo/Client/Pages/Collaboration.razor b/src/Utilities/Bink/Demo/Client/Pages/Collaboration.razor
index ca77f3322cd..ae7c2436269 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/Collaboration.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/Collaboration.razor
@@ -2,92 +2,125 @@
 @using System.Numerics
 @implements IAsyncDisposable
 
-<PageTitle>Collaboration - bit Bink</PageTitle>
-
-<h1>Collaboration</h1>
-<p class="page-intro">
-    Two independent canvases with two independent documents, synchronized by exchanging operations. Draw on
-    either side and the stroke appears on the other, with the other person's cursor and their stroke in progress
-    shown live. This runs entirely in the browser over an in-memory transport; a real application implements the
-    same interface over SignalR or WebSockets.
-</p>
-
-<div class="toolbar panel" style="border-radius:10px 10px 0 0;border-bottom:none">
-    <label class="field">
-        Latency
-        <input type="range" min="0" max="400" step="25" value="@_latency" aria-label="Simulated latency"
-               @onchange="OnLatencyChanged" />
-        <span style="min-width:6ch">@_latency ms</span>
-    </label>
-    <div class="toolbar-separator"></div>
-    @for (int index = 0; index < 2; index++)
-    {
-        int i = index;
-        <label class="field">
-            <input type="checkbox" checked="@_online[i]" @onchange="e => SetOnlineAsync(i, e.Value is true)" />
-            @Participants[i].Name online
-        </label>
-    }
-    <div class="toolbar-spacer"></div>
-    <span class="field">Queued while offline: <strong>@(_sessions[0]?.PendingCount ?? 0)</strong> / <strong>@(_sessions[1]?.PendingCount ?? 0)</strong></span>
-    <span class="badge @(Converged ? "on" : null)" role="status">@(Converged ? "replicas identical" : "replicas differ")</span>
+<PageTitle>Collaboration · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Collaboration</h1>
+    <p class="bb-subtitle">
+        Two independent canvases with two independent documents, synchronized by exchanging operations. Draw on
+        either side and the stroke appears on the other, with the other person's cursor and their stroke in progress
+        shown live. This runs entirely in the browser over an in-memory transport; a real application implements the
+        same interface over SignalR or WebSockets.
+    </p>
 </div>
 
-<div class="split" style="gap:1rem">
-    @for (int index = 0; index < 2; index++)
-    {
-        int i = index;
-        <div class="panel">
-            <div class="toolbar">
-                <strong style="color:@Participants[i].Color">@Participants[i].Name</strong>
-                <div class="toolbar-separator"></div>
-                <ColorSwatches Colors="Palette" Value="@_colors[i]" ValueChanged="color => SetColor(i, color)"
-                               Label="@($"{Participants[i].Name}'s colour")" Prefix="@Participants[i].Name" />
-                <div class="toolbar-spacer"></div>
-                <button type="button" class="btn" disabled="@(_canvases[i] is not { History.CanUndo: true })" @onclick="() => _canvases[i]?.Undo()">Undo</button>
-                <button type="button" class="btn" disabled="@(_canvases[i] is not { History.CanRedo: true })" @onclick="() => _canvases[i]?.Redo()">Redo</button>
-                <button type="button" class="btn danger" disabled="@_documents[i].IsEmpty" @onclick="() => _canvases[i]?.Clear()">Clear</button>
-            </div>
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Network">
+        <label class="bink-field">
+            Latency
+            <input type="range" min="0" max="400" step="25" value="@_latency" aria-label="Simulated latency"
+                   @onchange="OnLatencyChanged" />
+            <span class="bink-field-value bink-field-value--wide">@_latency ms</span>
+        </label>
+        <span class="bink-sep" aria-hidden="true"></span>
+        @for (int index = 0; index < 2; index++)
+        {
+            int i = index;
+            <label class="bb-check">
+                <input type="checkbox" checked="@_online[i]" @onchange="e => SetOnlineAsync(i, e.Value is true)" />
+                @Participants[i].Name online
+            </label>
+        }
+        <span class="bb-spacer"></span>
+        <span class="bink-hint">Queued while offline: <strong>@(_sessions[0]?.PendingCount ?? 0)</strong> / <strong>@(_sessions[1]?.PendingCount ?? 0)</strong></span>
+        <span class="@CanvasStatus.Badge(Converged)" role="status">@(Converged ? "replicas identical" : "replicas differ")</span>
+    </div>
 
-            <PointerTracker Moved="(position, pressed) => OnPointerMoved(i, position, pressed)" Left="() => OnPointerLeft(i)">
-                <BinkCanvas @ref="_canvases[i]" HistoryChanged="() => StateHasChanged()"
-                           EnableTouchGestures="true"
-                           Document="_documents[i]"
-                           Height="380px"
-                           Brush="_brushes[i]"
-                           AriaLabel="@($"{Participants[i].Name}'s canvas")"
-                           StrokeCompleted="() => OnStrokeCompleted(i)"
-                           DocumentChanged="() => StateHasChanged()"
-                           Ready="() => StateHasChanged()" />
-                <PresenceOverlay Session="_sessions[i]" Canvas="_canvases[i]" />
-            </PointerTracker>
-
-            <div class="statusbar">
-                <span><strong>@_documents[i].ElementCount</strong> elements</span>
-                <span>sent <strong>@(_transports[i]?.SentCount ?? 0)</strong> messages, <strong>@FormatBytes(_transports[i]?.SentBytes ?? 0)</strong></span>
-                @if (_transports[i]?.InboxCount is > 0 and var waiting)
-                {
-                    <span><strong>@waiting</strong> waiting on the server</span>
-                }
-                <span class="badge @(_online[i] ? "on" : null)">@(_online[i] ? "connected" : "offline")</span>
+    <div class="bink-pair">
+        @for (int index = 0; index < 2; index++)
+        {
+            int i = index;
+            <div class="bink-peer">
+                <div class="bb-toolbar bink-toolbar">
+                    <span class="bink-participant">
+                        <span class="bink-participant-dot" style="background:@Participants[i].Color" aria-hidden="true"></span>
+                        @Participants[i].Name
+                    </span>
+                    <span class="bink-sep" aria-hidden="true"></span>
+                    <ColorSwatches Colors="Palette" Value="@_colors[i]" ValueChanged="color => SetColor(i, color)"
+                                   Label="@($"{Participants[i].Name}'s colour")" Prefix="@Participants[i].Name" />
+                    <span class="bb-spacer"></span>
+                    <div class="bink-group" role="group" aria-label="History">
+                        <button type="button" class="btn btn-secondary" disabled="@(_canvases[i] is not { History.CanUndo: true })" @onclick="() => _canvases[i]?.Undo()">Undo</button>
+                        <button type="button" class="btn btn-secondary" disabled="@(_canvases[i] is not { History.CanRedo: true })" @onclick="() => _canvases[i]?.Redo()">Redo</button>
+                        <button type="button" class="btn btn-secondary bink-danger" disabled="@_documents[i].IsEmpty" @onclick="() => _canvases[i]?.Clear()">Clear</button>
+                    </div>
+                </div>
+
+                <div class="bink-surface">
+                    <PointerTracker Moved="(position, pressed) => OnPointerMoved(i, position, pressed)" Left="() => OnPointerLeft(i)">
+                        <BinkCanvas @ref="_canvases[i]" HistoryChanged="() => StateHasChanged()"
+                                   EnableTouchGestures="true"
+                                   Document="_documents[i]"
+                                   Height="380px"
+                                   Brush="_brushes[i]"
+                                   AriaLabel="@($"{Participants[i].Name}'s canvas")"
+                                   StrokeCompleted="() => OnStrokeCompleted(i)"
+                                   DocumentChanged="() => StateHasChanged()"
+                                   Ready="() => StateHasChanged()" />
+                        <PresenceOverlay Session="_sessions[i]" Canvas="_canvases[i]" />
+                    </PointerTracker>
+                </div>
+
+                <div class="bink-status">
+                    <span><strong>@_documents[i].ElementCount</strong> elements</span>
+                    <span>sent <strong>@(_transports[i]?.SentCount ?? 0)</strong> messages, <strong>@FormatBytes(_transports[i]?.SentBytes ?? 0)</strong></span>
+                    @if (_transports[i]?.InboxCount is > 0 and var waiting)
+                    {
+                        <span><strong>@waiting</strong> waiting on the server</span>
+                    }
+                    <span class="@CanvasStatus.Badge(_online[i])">@(_online[i] ? "connected" : "offline")</span>
+                </div>
             </div>
-        </div>
-    }
+        }
+    </div>
 </div>
 
-<h2>What travels on the wire</h2>
-<p class="page-intro">
-    Drawing a stroke sends that stroke once, as a single operation. Nothing else is transmitted: not the other
-    strokes, not the document. While the pen is down, the stroke in progress travels as presence, throttled, so
-    the other side sees it being drawn. The most recent operation is shown below exactly as it was sent.
-</p>
-<pre class="output"><code>@(_lastMessage ?? "Draw on one of the canvases to see the operation that is sent.")</code></pre>
-
-<div class="note">
-    Conflicts are resolved by last-writer-wins on each element's version, with the participant id breaking ties so
-    every replica reaches the same result. Two people drawing at once never conflict, because each stroke is a new
-    element with its own id. Take a participant offline and draw on both sides: the offline side queues what it
-    sends, the server keeps what is sent to it, and on reconnect both catch up until the replicas are identical.
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What travels on the wire</h3>
+    <p class="bb-card-desc">
+        Drawing a stroke sends that stroke once, as a single operation. Nothing else is transmitted: not the other
+        strokes, not the document. While the pen is down, the stroke in progress travels as presence, throttled, so
+        the other side sees it being drawn. The most recent operation is shown below exactly as it was sent.
+    </p>
+    <pre class="bb-code bink-output">@(_lastMessage ?? "Draw on one of the canvases to see the operation that is sent.")</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Conflicts and going offline</h3>
+    <p class="bb-card-desc">
+        Conflicts are resolved by last-writer-wins on each element's version, with the participant id breaking ties so
+        every replica reaches the same result. Two people drawing at once never conflict, because each stroke is a new
+        element with its own id. Take a participant offline and draw on both sides: the offline side queues what it
+        sends, the server keeps what is sent to it, and on reconnect both catch up until the replicas are identical.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Wiring a session</h3>
+    <p class="bb-card-desc">
+        Both participants start from the same document, layer ids included - which is what joining a session does in a
+        real application: load a snapshot. A session then joins that document to a transport. The transport here is
+        the demo's in-memory <code>LoopbackTransport</code> (<code>Shared/LoopbackTransport.cs</code>); anything that
+        implements <code>IBinkCollaborationTransport</code> - a SignalR hub, a WebSocket - takes its place unchanged.
+    </p>
+    <pre class="bb-code">_documents[1] = BinkSerializer.Deserialize(BinkSerializer.Serialize(_documents[0]));
+
+LoopbackTransport transport = _hub.CreateClient();
+<span class="k">var</span> session = <span class="k">new</span> BinkCollaborationSession(_documents[i], transport, Participants[i].Id);
+
+<span class="c">// Cursors and the stroke in progress travel as presence, not as operations.</span>
+<span class="k">await</span> session.UpdatePresenceAsync(<span class="k">new</span> BinkPresenceState { ParticipantId = <span class="s">"alex"</span>, Cursor = position });</pre>
 </div>
 
 @code {
diff --git a/src/Utilities/Bink/Demo/Client/Pages/Diagram.razor b/src/Utilities/Bink/Demo/Client/Pages/Diagram.razor
index 7542a7a6bdf..5148dfd2e50 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/Diagram.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/Diagram.razor
@@ -2,47 +2,49 @@
 @using System.Numerics
 @implements IDisposable
 
-<PageTitle>Diagram surface - bit Bink</PageTitle>
-
-<h1>Diagram surface</h1>
-<p class="page-intro">
-    Nodes and connectors, built entirely on top of the document model. Bit.Bink knows nothing about diagrams: a
-    node is a rectangle, a connector is a line and a label is text, and what joins them is element metadata plus
-    one listener. Move a node and its connectors and label follow, in the same undo step as the move.
-</p>
-
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Diagram tools">
-        <div class="toolbar-group" role="group" aria-label="Tool">
+<PageTitle>Diagram surface · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Diagram surface</h1>
+    <p class="bb-subtitle">
+        Nodes and connectors, built entirely on top of the document model. Bit.Bink knows nothing about diagrams: a
+        node is a rectangle, a connector is a line and a label is text, and what joins them is element metadata plus
+        one listener. Move a node and its connectors and label follow, in the same undo step as the move.
+    </p>
+</div>
+
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Diagram tools">
+        <div class="bb-segmented" role="group" aria-label="Tool">
             @foreach ((string id, string label) in Tools)
             {
-                <button type="button" class="btn @(_toolId == id ? "active" : null)"
-                        aria-pressed="@(_toolId == id ? "true" : "false")"
+                <button type="button" aria-pressed="@(_toolId == id ? "true" : "false")"
                         @onclick="() => SelectTool(id)">@label</button>
             }
         </div>
 
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
 
         <ColorSwatches Colors="Palette" Value="@_color" ValueChanged="SetColor" />
 
-        <div class="toolbar-separator"></div>
-
-        <button type="button" class="btn" @onclick="ResetToSample">Sample diagram</button>
+        <span class="bink-sep" aria-hidden="true"></span>
 
-        <div class="toolbar-spacer"></div>
+        <button type="button" class="btn btn-secondary" @onclick="ResetToSample">Sample diagram</button>
 
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanUndo)"
-                @onclick="() => _canvas?.Undo()">Undo</button>
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanRedo)"
-                @onclick="() => _canvas?.Redo()">Redo</button>
-        <button type="button" class="btn danger" disabled="@_document.IsEmpty" @onclick="() => _canvas?.Clear()">Clear</button>
+        <span class="bb-spacer"></span>
+        <div class="bink-group" role="group" aria-label="History">
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanUndo)"
+                    @onclick="() => _canvas?.Undo()">Undo</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanRedo)"
+                    @onclick="() => _canvas?.Redo()">Redo</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@_document.IsEmpty" @onclick="() => _canvas?.Clear()">Clear</button>
+        </div>
     </div>
 
-    <div class="toolbar" style="border-top:none" role="toolbar" aria-label="Selected node">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Selected node">
         @if (SelectedNode is { } node)
         {
-            <label class="field">
+            <label class="bink-field">
                 Label
                 <input type="text" value="@(DiagramGraph.LabelOf(node))" maxlength="60" aria-label="Node label"
                        @onchange="e => Rename(node.Id, e.Value?.ToString())" />
@@ -50,16 +52,18 @@
         }
         else
         {
-            <span class="field">Select a single node to rename it. Picking a colour recolours the selection.</span>
+            <span class="bink-hint">Select a single node to rename it. Picking a colour recolours the selection.</span>
         }
-        <button type="button" class="btn danger" disabled="@(_canvas is null || _canvas.Selection.IsEmpty)"
+        <button type="button" class="btn btn-secondary bink-danger" disabled="@(_canvas is null || _canvas.Selection.IsEmpty)"
                 @onclick="() => _canvas?.DeleteSelection()">Delete</button>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" disabled="@_document.IsEmpty" @onclick="() => _canvas?.ZoomToFit()">Fit</button>
-        <button type="button" class="btn" disabled="@_document.IsEmpty" @onclick="ExportSvgAsync">Export SVG</button>
+        <span class="bb-spacer"></span>
+        <div class="bink-group" role="group" aria-label="View and export">
+            <button type="button" class="btn btn-secondary" disabled="@_document.IsEmpty" @onclick="() => _canvas?.ZoomToFit()">Fit</button>
+            <button type="button" class="btn btn-secondary" disabled="@_document.IsEmpty" @onclick="ExportSvgAsync">Export SVG</button>
+        </div>
     </div>
 
-    <div class="canvas-host">
+    <div class="bink-surface">
         <BinkCanvas @ref="_canvas" HistoryChanged="() => StateHasChanged()"
                    Document="_document"
                    Height="560px"
@@ -79,12 +83,48 @@
     </CanvasStatus>
 </div>
 
-<div class="note">
+<div class="bb-note">
     Drag with <strong>Node</strong> to draw a box, then drag with <strong>Connector</strong> from one box to
     another. Switch to <strong>Select</strong> and move a node: the connectors re-route while the move is still
     being reported, so the document never shows a connector detached from its node, and one undo puts everything
-    back. Delete a node and its connectors go with it. Connector endpoints and label positions are derived data,
-    so they are recomputed rather than stored as offsets.
+    back. Delete a node and its connectors go with it.
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Derived geometry, in the same undo step</h3>
+    <p class="bb-card-desc">
+        The diagram is one listener on <code>BinkDocument.Changed</code> (<code>Diagramming/DiagramGraph.cs</code>).
+        When a node moves it reroutes every connector touching it, applying those edits while it is still handling
+        the change that caused them. The document reports them with a greater <code>Depth</code>, and history folds
+        them into the same undo step - so connector endpoints and label positions are recomputed, never stored as
+        offsets.
+    </p>
+    <pre class="bb-code"><span class="c">// Inside the Changed handler: a consequence of the change being handled, not a new edit.</span>
+<span class="k">using</span> (_document.BeginBatch(<span class="s">"Update diagram"</span>))
+{
+    <span class="k">if</span> (updates.Count &gt; 0) _document.ReplaceElements(updates, <span class="s">"Route connectors"</span>);
+    <span class="k">foreach</span> (BinkElement label <span class="k">in</span> additions) _document.AddElement(label, LabelLayerId);
+    <span class="k">if</span> (deletions.Count &gt; 0) _document.RemoveElements(deletions);
+}</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Custom tools</h3>
+    <p class="bb-card-desc">
+        <strong>Node</strong> and <strong>Connector</strong> are the demo's own tools
+        (<code>Diagramming/DiagramTools.cs</code>). A custom tool needs nothing from the library beyond
+        <code>BinkToolBase</code>: it reads pointer samples, draws its own preview on the overlay, and adds an
+        ordinary element when the gesture ends. Undo, selection, hit testing, serialization and export follow because
+        the result is a normal document element.
+    </p>
+    <pre class="bb-code"><span class="k">public sealed class</span> NodeTool : BinkToolBase
+{
+    <span class="k">public override string</span> Id =&gt; <span class="s">"diagram-node"</span>;
+    <span class="k">public override string</span> DisplayName =&gt; <span class="s">"Node"</span>;
+    <span class="k">public override string</span> Cursor =&gt; <span class="s">"crosshair"</span>;
+
+    <span class="k">public override bool</span> OnPointerDown(IBinkToolContext context, <span class="k">in</span> BinkInputSample sample) { … }
+}</pre>
 </div>
 
 @code {
diff --git a/src/Utilities/Bink/Demo/Client/Pages/DocumentAnnotation.razor b/src/Utilities/Bink/Demo/Client/Pages/DocumentAnnotation.razor
index 8699b8089d6..50dd62369f7 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/DocumentAnnotation.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/DocumentAnnotation.razor
@@ -2,40 +2,43 @@
 @using System.Numerics
 @implements IDisposable
 
-<PageTitle>Document review - bit Bink</PageTitle>
-
-<h1>Document review</h1>
-<p class="page-intro">
-    A review surface over a document: select text to highlight it, attach a callout comment, or write freehand in
-    the margin. This is the shape a PDF or contract review interface takes. The annotations are vector objects
-    carrying their own metadata, so an application can list them, filter them and store them next to the document
-    rather than burning them into a picture.
-</p>
-
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Review tools">
-        <div class="toolbar-group" role="group" aria-label="Tool">
+<PageTitle>Document review · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Document review</h1>
+    <p class="bb-subtitle">
+        A review surface over a document: select text to highlight it, attach a callout comment, or write freehand in
+        the margin. This is the shape a PDF or contract review interface takes. The annotations are vector objects
+        carrying their own metadata, so an application can list them, filter them and store them next to the document
+        rather than burning them into a picture.
+    </p>
+</div>
+
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Review tools">
+        <div class="bb-segmented" role="group" aria-label="Tool">
             @foreach ((string id, string label) in Tools)
             {
-                <button type="button" class="btn @(_toolId == id ? "active" : null)"
-                        aria-pressed="@(_toolId == id ? "true" : "false")"
+                <button type="button" aria-pressed="@(_toolId == id ? "true" : "false")"
                         @onclick="() => SelectTool(id)">@label</button>
             }
         </div>
 
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
 
         <ColorSwatches Colors="HighlightColors" Value="@_color" ValueChanged="SetColor" Label="Highlight colour" />
 
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
-        <button type="button" class="btn" @onclick="ExportSvgAsync">Export SVG</button>
-        <button type="button" class="btn danger" disabled="@(_annotations.Count == 0)" @onclick="ClearAnnotations">Clear annotations</button>
+        <span class="bb-spacer"></span>
+        <div class="bink-group" role="group" aria-label="History and export">
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
+            <button type="button" class="btn btn-secondary" @onclick="ExportSvgAsync">Export SVG</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@(_annotations.Count == 0)" @onclick="ClearAnnotations">Clear annotations</button>
+        </div>
     </div>
 
-    <div class="split" style="gap:0">
-        <div style="position:relative;background:var(--surface)">
+    <div class="bink-review">
+        <div class="bink-surface">
             <BinkCanvas @ref="_canvas" Ready="() => StateHasChanged()" HistoryChanged="() => StateHasChanged()"
                        EnableTouchGestures="true"
                        Document="_document"
@@ -49,59 +52,77 @@
                        DocumentChanged="OnDocumentChanged" />
         </div>
 
-        <div style="padding:1rem;border-left:1px solid var(--border);overflow:auto;max-height:620px">
-            <h2 style="margin-top:0">Annotations</h2>
+        <aside class="bink-review-panel" aria-labelledby="bink-annotations-title">
+            <h3 class="bink-panel-title" id="bink-annotations-title">Annotations</h3>
             @if (_annotations.Count == 0)
             {
-                <p style="color:var(--text-muted);font-size:0.87rem">
+                <p class="bink-hint">
                     Drag across a line of text to highlight it, or pick "Add comment" and drag where the note should point.
                 </p>
             }
             else
             {
-                <ul style="list-style:none;padding:0;margin:0;display:grid;gap:0.6rem">
+                <ul class="bink-annotations">
                     @foreach (AnnotationEntry entry in _annotations)
                     {
                         bool selected = _canvas?.Selection.Contains(entry.Id) == true;
-                        <li class="card" style="padding:0.7rem 0.8rem;@(selected ? "border-color:var(--accent)" : null)">
-                            <div style="display:flex;justify-content:space-between;gap:0.5rem;align-items:start">
-                                <div style="flex:1;min-width:0">
-                                    <strong style="font-size:0.85rem">@entry.Kind</strong>
-                                    @if (entry.Editable)
-                                    {
-                                        <textarea rows="2" maxlength="500" aria-label="Comment text"
-                                                  style="display:block;width:100%;margin-top:0.3rem;font:inherit;font-size:0.85rem"
-                                                  value="@entry.Text"
-                                                  @onchange="e => EditComment(entry.Id, e.Value?.ToString())"></textarea>
-                                    }
-                                    else
-                                    {
-                                        <div style="color:var(--text-muted);font-size:0.85rem">@entry.Text</div>
-                                    }
-                                </div>
-                                <div style="display:flex;gap:0.3rem">
-                                    <button type="button" class="btn icon" aria-label="@("Select " + entry.Kind.ToLowerInvariant() + " on the page")"
+                        <li class="bink-annotation @(selected ? "is-selected" : null)">
+                            <div class="bink-annotation-head">
+                                <strong class="bink-annotation-kind">@entry.Kind</strong>
+                                <div class="bink-annotation-actions">
+                                    <button type="button" class="bb-icon-btn" aria-label="@("Select " + entry.Kind.ToLowerInvariant() + " on the page")"
                                             title="Select on the page" @onclick="() => Reveal(entry.Id)">&#8599;</button>
-                                    <button type="button" class="btn icon danger" aria-label="@("Delete " + entry.Kind.ToLowerInvariant())"
-                                            @onclick="() => Delete(entry.Id)">&times;</button>
+                                    <button type="button" class="bb-icon-btn bink-danger" aria-label="@("Delete " + entry.Kind.ToLowerInvariant())"
+                                            title="Delete" @onclick="() => Delete(entry.Id)">&times;</button>
                                 </div>
                             </div>
+                            @if (entry.Editable)
+                            {
+                                <textarea rows="2" maxlength="500" aria-label="Comment text"
+                                          value="@entry.Text"
+                                          @onchange="e => EditComment(entry.Id, e.Value?.ToString())"></textarea>
+                            }
+                            else
+                            {
+                                <div class="bink-annotation-text">@entry.Text</div>
+                            }
                         </li>
                     }
                 </ul>
             }
-        </div>
+        </aside>
     </div>
 
     <CanvasStatus Canvas="_canvas" />
 </div>
 
-<div class="note">
+<div class="bb-note">
     Each annotation carries a description, so the exported SVG and the accessible summary of the canvas both
     report what is on the page. That is how a canvas-based review tool stays usable with a screen reader: the
     strokes themselves cannot be described, but the objects around them can.
 </div>
 
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Turning a box into a comment</h3>
+    <p class="bb-card-desc">
+        The page listens to the document itself rather than to the canvas callback. That way the conversion - a
+        dragged rectangle becoming a callout, a highlight gaining a description of the text under it - runs while the
+        change is still being reported, and joins the same undo step: one undo removes a comment entirely instead of
+        first turning it back into a plain box.
+    </p>
+    <pre class="bb-code">_document.Changed += OnDocumentEdited;
+
+<span class="k">private void</span> OnDocumentEdited(<span class="k">object</span>? sender, BinkDocumentChangedEventArgs args)
+{
+    <span class="c">// Only fresh local edits are converted: undo and redo replay a conversion that already happened.</span>
+    <span class="k">if</span> (args.Origin != BinkChangeOrigin.Local || args.Depth &gt; 0) <span class="k">return</span>;
+    <span class="k">foreach</span> (BinkAddElementOperation add <span class="k">in</span> AddedElements(args.Operation))
+    {
+        <span class="k">if</span> (add.LayerId == _annotationLayer) Convert(add.Element);
+    }
+}</pre>
+</div>
+
 @code {
     private sealed record AnnotationEntry(Guid Id, string Kind, string Text, bool Editable);
 
diff --git a/src/Utilities/Bink/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bink/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..5524b89621b
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,162 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package and one tag: there are no services to register and no stylesheet to link, because the
+        package's Blazor initializer adds the canvas stylesheet by itself. Everything else - brushes, tools,
+        saving and export - is plain C# on the component and its document.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        In a Blazor Web App the package belongs in the <code>.Client</code> project, so the component's assembly
+        is downloaded to the browser; the server project gets it transitively and prerenders the same pages.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.Bink</pre>
+    <p class="bb-card-desc">
+        Then the namespace, in <code>_Imports.razor</code>. Points and sizes in the API are
+        <code>System.Numerics.Vector2</code>, so code that builds documents usually wants that namespace too:
+    </p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.Bink
+<span class="k">@@using</span> System.Numerics</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The stylesheet</h3>
+    <p class="bb-card-desc">
+        The component's stylesheet, <code>_content/Bit.Bink/bit-bink.css</code>, is injected when the app starts by
+        the package's initializer (<code>Bit.Bink.lib.module.js</code>). It is layout only - the stacked canvases,
+        the input surface, the text editor - and leaves the look of the surrounding UI to you. To control it
+        yourself, link it in the host page and the automatic injection stands down:
+    </p>
+    <pre class="bb-code">&lt;<span class="k">link</span> rel=<span class="s">"stylesheet"</span> href=<span class="s">"_content/Bit.Bink/bit-bink.css"</span> /&gt;</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> A first canvas</h3>
+    <p class="bb-card-desc">
+        <code>&lt;BinkCanvas Height="400px" /&gt;</code> is already a working canvas: pointer and stylus input,
+        pressure-aware ink, and undo and redo on the keyboard. Touch draws once <code>EnableTouchGestures</code> is
+        set. Bind <code>DocumentChanged</code> or <code>HistoryChanged</code> whenever your own markup reads canvas
+        state such as <code>CurrentDocument.IsEmpty</code> or <code>History.CanUndo</code>: a child component cannot
+        re-render its parent by itself, and drawing never re-renders anything.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">BinkCanvas</span> @@ref=<span class="s">"_canvas"</span> Height=<span class="s">"260px"</span> EnableTouchGestures=<span class="s">"true"</span>
+            DocumentChanged=<span class="s">"() =&gt; StateHasChanged()"</span> /&gt;
+
+&lt;<span class="k">button</span> @@onclick=<span class="s">"() =&gt; _canvas!.Undo()"</span>&gt;Undo&lt;/<span class="k">button</span>&gt;
+&lt;<span class="k">button</span> @@onclick=<span class="s">"() =&gt; _canvas!.Clear()"</span> disabled=<span class="s">"@@IsEmpty"</span>&gt;Clear&lt;/<span class="k">button</span>&gt;
+
+<span class="k">@@code</span> {
+    <span class="k">private</span> BinkCanvas? _canvas;
+
+    <span class="k">private bool</span> IsEmpty =&gt; _canvas?.CurrentDocument.IsEmpty ?? <span class="k">true</span>;
+}</pre>
+
+    <div class="bb-demo bink-editor">
+        <div class="bb-toolbar bink-toolbar">
+            <span class="bb-demo-label">Live</span>
+            <span class="bb-spacer"></span>
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is not { History.CanUndo: true })" @onclick="() => _canvas?.Undo()">Undo</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@IsEmpty" @onclick="() => _canvas?.Clear()">Clear</button>
+        </div>
+        <div class="bink-surface">
+            <BinkCanvas @ref="_canvas" Height="260px" EnableTouchGestures="true" AriaLabel="First canvas"
+                        DocumentChanged="() => StateHasChanged()"
+                        HistoryChanged="() => StateHasChanged()" />
+        </div>
+        <CanvasStatus Canvas="_canvas" />
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Brushes and tools</h3>
+    <p class="bb-card-desc">
+        <code>Brush</code> decides how ink looks and <code>Tool</code> what pointer input does. The built-in brushes
+        are <code>BinkPenBrush</code>, <code>BinkPencilBrush</code>, <code>BinkMarkerBrush</code>,
+        <code>BinkHighlighterBrush</code> and <code>BinkPixelEraserBrush</code>; the tools are
+        <code>BinkDrawTool</code>, <code>BinkEraserTool</code>, <code>BinkSelectTool</code>,
+        <code>BinkShapeTool</code>, <code>BinkTextTool</code> and <code>BinkPanTool</code>. Brushes are immutable
+        records, so a variant is derived with <code>with</code>.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">BinkCanvas</span> Tool=<span class="s">"_tool"</span> Brush=<span class="s">"_brush"</span> Height=<span class="s">"400px"</span> /&gt;
+
+<span class="k">@@code</span> {
+    <span class="k">private</span> IBinkTool _tool = <span class="k">new</span> BinkDrawTool();
+    <span class="k">private</span> BinkBrush _brush = <span class="k">new</span> BinkPenBrush { Color = BinkColor.Parse(<span class="s">"#1d4ed8"</span>), Width = 5f };
+
+    <span class="k">private void</span> UseRed() =&gt; _brush = _brush <span class="k">with</span> { Color = BinkColor.Parse(<span class="s">"#dc2626"</span>) };
+    <span class="k">private void</span> UseEraser() =&gt; _tool = <span class="k">new</span> BinkEraserTool { Mode = BinkEraserMode.Stroke, Radius = 12f };
+    <span class="k">private void</span> UseArrow() =&gt; _tool = <span class="k">new</span> BinkShapeTool(BinkShapeKind.Arrow);
+}</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Render modes</h3>
+    <p class="bb-card-desc">
+        The same component works in every hosting model; what differs is where the engine runs, and so what
+        happens between a pen moving and ink appearing. This site runs on <code>InteractiveWebAssembly</code>.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Hosting model</th><th>Where the engine runs, and what to know</th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bb-table-key">WebAssembly</td>
+                    <td>In the browser - the model the library is designed for. The command buffer reaches JavaScript as a view over managed memory, so a redraw is one call with no serialization; <code>UsesFastRenderPath</code> reports it.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Server</td>
+                    <td>On the server: input travels over the circuit once per animation frame, and <code>WetInk</code> (on by default) draws a provisional trail while a batch is in flight.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Web App</td>
+                    <td>Mark the page interactive - <code>@@rendermode InteractiveWebAssembly</code> for drawing pages. Prerendering is handled: the canvas renders inert markup and attaches when interactivity arrives.</td>
+                </tr>
+                <tr>
+                    <td class="bb-table-key">Hybrid</td>
+                    <td>In-process in MAUI, WPF or Windows Forms, with the canvas in the embedded WebView over the standard <code>IJSRuntime</code> path.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> How it fits together</h3>
+    <p class="bb-card-desc">
+        One rendering path serves the screen, SVG export and PNG export, so an exported file always matches what was
+        drawn. Pointer input never triggers a Blazor render: samples arrive once per frame, the active tool processes
+        them, and only the affected canvas layer is redrawn.
+    </p>
+    <pre class="bb-code">Pointer events (browser)
+  -&gt; batched once per animation frame
+  -&gt; BinkStrokeBuilder        spacing filter, streamline smoothing, pressure
+  -&gt; BinkStroke + BinkBrush   immutable vector model
+  -&gt; BinkDrawingOperation     the unit of undo, diffing and collaboration
+  -&gt; BinkDocument             layers of elements
+  -&gt; IBinkRenderContext       canvas commands, SVG, or the built-in rasterizer</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Where to go next</h3>
+    <div class="bb-try">
+        <a href="signature" class="btn btn-outline">A signature field →</a>
+        <a href="whiteboard" class="btn btn-outline">Every tool at once →</a>
+        <a href="serialization" class="btn btn-outline">Save and load →</a>
+        <a href="collaboration" class="btn btn-outline">Draw together →</a>
+    </div>
+</div>
+
+@code {
+    private BinkCanvas? _canvas;
+
+    private bool IsEmpty => _canvas?.CurrentDocument.IsEmpty ?? true;
+}
diff --git a/src/Utilities/Bink/Demo/Client/Pages/Handwriting.razor b/src/Utilities/Bink/Demo/Client/Pages/Handwriting.razor
index bc831666ca1..f0995b29aaf 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/Handwriting.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/Handwriting.razor
@@ -1,44 +1,50 @@
 @page "/handwriting"
 
-<PageTitle>Handwriting - bit Bink</PageTitle>
-
-<h1>Handwriting</h1>
-<p class="page-intro">
-    A note-taking surface tuned for writing rather than sketching: tight point spacing, light smoothing so fast
-    corners stay sharp, and a pressure curve with a wide dynamic range. Draw with a stylus to see real pressure
-    and tilt; with a mouse or finger, width is derived from writing speed instead.
-</p>
-
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Writing tools">
-        <div class="toolbar-group" role="group" aria-label="Instrument">
+<PageTitle>Handwriting · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Handwriting</h1>
+    <p class="bb-subtitle">
+        A note-taking surface tuned for writing rather than sketching: tight point spacing, light smoothing so fast
+        corners stay sharp, and a pressure curve with a wide dynamic range. Draw with a stylus to see real pressure
+        and tilt; with a mouse or finger, width is derived from writing speed instead.
+    </p>
+</div>
+
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Writing tools">
+        <div class="bb-segmented" role="group" aria-label="Instrument">
             @foreach ((string id, string label) in Instruments)
             {
-                <button type="button" class="btn @(_instrument == id ? "active" : null)"
-                        aria-pressed="@(_instrument == id ? "true" : "false")"
+                <button type="button" aria-pressed="@(_instrument == id ? "true" : "false")"
                         @onclick="() => SetInstrument(id)">@label</button>
             }
         </div>
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
         <ColorSwatches Colors="Palette" Value="@_color" ValueChanged="SetColor" Label="Ink colour" />
-        <div class="toolbar-separator"></div>
-        <label class="field">
+        <span class="bink-sep" aria-hidden="true"></span>
+        <label class="bink-field">
             Size
             <input type="range" min="1" max="24" step="0.5" value="@_width" aria-label="Nib size" @onchange="OnWidthChanged" />
-            <span style="min-width:3ch">@_width.ToString("0.#")</span>
+            <span class="bink-field-value">@_width.ToString("0.#")</span>
         </label>
-        <label class="field">
+        <label class="bb-check">
             <input type="checkbox" checked="@_ruled" @onchange="OnRuledChanged" aria-label="Show ruled lines" />
             Ruled
         </label>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
-        <button type="button" class="btn danger" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="() => _canvas?.Clear()">Clear</button>
-        <button type="button" class="btn" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="DownloadPngAsync">Download PNG</button>
+        <span class="bb-spacer"></span>
+        <div class="bink-group" role="group" aria-label="History">
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="() => _canvas?.Clear()">Clear</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="DownloadPngAsync">Download PNG</button>
+        </div>
     </div>
 
-    <div style="@(_ruled ? RuledBackground : null)">
+    @* The rules are printed over the paper rather than drawn into the document: they are a writing aid, so
+       they stay out of the saved drawing and its export, and they are multiplied onto the page so the ink
+       still reads as being on top of them (demo.css, .bink-ruled). *@
+    <div class="bink-surface @(_ruled ? "bink-ruled" : null)">
         <BinkCanvas @ref="_canvas" HistoryChanged="() => StateHasChanged()"
                    EnableTouchGestures="true"
                    Height="420px"
@@ -59,11 +65,45 @@
     </CanvasStatus>
 </div>
 
-<div class="note">
+<div class="bb-note">
     Palm rejection is on: while a pen is in contact, touch contacts are ignored, so a hand resting on a tablet
     does not draw. Turn it off with <code>RejectTouchWhilePen="false"</code> when the surface is finger-first.
 </div>
 
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A brush tuned for writing</h3>
+    <p class="bb-card-desc">
+        Writing benefits from keeping detail: less smoothing and closer point spacing than a sketching brush, and
+        a short taper at the end of each stroke. The draw tool simplifies each finished stroke only lightly, so the
+        shape of the letters survives.
+    </p>
+    <pre class="bb-code"><span class="k">private</span> IBinkTool _tool = <span class="k">new</span> BinkDrawTool { SimplifyTolerance = 0.08f };
+
+<span class="k">private</span> BinkBrush _brush = <span class="k">new</span> BinkPenBrush
+{
+    Width = 3f,
+    Color = BinkColor.Parse(<span class="s">"#111827"</span>),
+    Smoothing = 0.35f,
+    Spacing = 0.12f,
+    TaperEnd = 5f,
+};</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What the device reported</h3>
+    <p class="bb-card-desc">
+        <code>StrokeCompleted</code> hands over the finished stroke and the kind of pointer that drew it. The line
+        under the canvas reads its point count, length, duration and pressure range - and the badges above it say
+        whether this device delivered real pressure, tilt and coalesced samples at all.
+    </p>
+    <pre class="bb-code"><span class="k">private void</span> OnStrokeCompleted(BinkStrokeEventArgs args)
+{
+    <span class="k">if</span> (args.Stroke <span class="k">is not</span> { } stroke) <span class="k">return</span>;
+    <span class="k">bool</span> realPressure = args.Device == BinkPointerKind.Pen &amp;&amp; stroke.Input.HasRealPressure;
+    <span class="c">// stroke.Points.Count, .Length, .Duration and .Pressure describe what was captured</span>
+}</pre>
+</div>
+
 @code {
     private BinkCanvas? _canvas;
     private IBinkTool _tool = new BinkDrawTool { SimplifyTolerance = 0.08f };
@@ -84,10 +124,6 @@
 
     private static readonly string[] Palette = ["#111827", "#1d4ed8", "#b91c1c", "#15803d"];
 
-    private const string RuledBackground =
-        "background-image:repeating-linear-gradient(transparent,transparent 35px,var(--border) 35px,var(--border) 36px);" +
-        "background-position:0 12px";
-
     private BinkBrush _brush = new BinkPenBrush
     {
         Width = 3f,
diff --git a/src/Utilities/Bink/Demo/Client/Pages/Home.razor b/src/Utilities/Bink/Demo/Client/Pages/Home.razor
index 9fd24e705db..1376d85d06b 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/Home.razor
@@ -1,106 +1,337 @@
 @page "/"
+@layout MainLayout
 
-<PageTitle>bit Bink - drawing and ink for Blazor</PageTitle>
+<PageTitle>Bink - drawing and ink for Blazor</PageTitle>
 
-<h1>bit Bink</h1>
-<p class="page-intro">
-    A native drawing and ink engine for Blazor. The stroke model, smoothing, pressure response, hit testing,
-    undo, serialization and export are all written in C#. JavaScript only collects pointer events and replays a
-    command buffer onto a canvas.
-</p>
+@* The landing page: hero → proof strip → use cases → code walkthrough → comparison with a JavaScript
+   drawing library → persona tiles → FAQ → final call to action. Everything else on the site is a
+   documentation page under DocsLayout. The hero's sample is a live canvas rather than a picture of
+   one - an ink library is best introduced by being drawn on. *@
 
-<div class="panel" style="padding:1rem">
-    @* A host that reads canvas state (such as the undo button below) re-renders on this callback.
-       Pointer input itself never re-renders anything. *@
-    <BinkCanvas @ref="_canvas" HistoryChanged="() => StateHasChanged()" Height="260px" EnableTouchGestures="true" Brush="_brush" AriaLabel="Try drawing here"
-               DocumentChanged="() => StateHasChanged()" />
-</div>
-<div class="toolbar" style="border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px">
-    <span class="field">Draw above with a mouse, a finger or a stylus.</span>
-    <div class="toolbar-spacer"></div>
-    <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="Undo">Undo</button>
-    <button type="button" class="btn danger" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="Clear">Clear</button>
-</div>
+<div class="bb-landing">
 
-<h2>What it is for</h2>
-<div class="grid">
-    <a class="card" href="signature">
-        <h3>Signature</h3>
-        <p>A signature field with pressure-aware ink, undo and vector export that stays sharp at any size.</p>
-    </a>
-    <a class="card" href="handwriting">
-        <h3>Handwriting</h3>
-        <p>A note-taking surface tuned for fast writing, with pen pressure, tilt and palm rejection.</p>
-    </a>
-    <a class="card" href="whiteboard">
-        <h3>Whiteboard</h3>
-        <p>Pens, markers, highlighters, shapes, text, selection, layers, pan and zoom.</p>
-    </a>
-    <a class="card" href="diagram">
-        <h3>Diagram surface</h3>
-        <p>Nodes and connectors that stay attached when you move things, on a snapping grid.</p>
-    </a>
-    <a class="card" href="image-annotation">
-        <h3>Image annotation</h3>
-        <p>Drop in a screenshot, mark it up with arrows and highlights, export a flattened PNG.</p>
-    </a>
-    <a class="card" href="document-annotation">
-        <h3>Document review</h3>
-        <p>Text highlights, callouts and freehand notes over a document surface.</p>
-    </a>
-    <a class="card" href="collaboration">
-        <h3>Collaboration</h3>
-        <p>Two canvases synchronizing through operations, with live cursors and remote ink.</p>
-    </a>
-</div>
+    @* ============================== Hero ============================== *@
 
-<h2>Under the hood</h2>
-<div class="grid">
-    <a class="card" href="serialization">
-        <h3>Serialization</h3>
-        <p>Save, inspect, edit and reload the vector document, and see what each format costs in bytes.</p>
-    </a>
-    <a class="card" href="performance">
-        <h3>Performance</h3>
-        <p>Generate thousands of strokes and time geometry, redraw, hit testing, save, load and export.</p>
-    </a>
-</div>
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Drawing and ink for Blazor,<br /><span class="bb-hero-accent">engineered in C#.</span></h1>
+            <p class="bb-hero-sub">
+                Signature fields, handwriting, whiteboards, image markup and document review on one vector
+                document model. The stroke model, smoothing, pressure response, hit testing, undo, serialization
+                and export are C#; JavaScript only collects pointer input and replays a command buffer onto a
+                canvas - there is no JavaScript drawing library underneath.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bink</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="whiteboard" class="btn btn-secondary bb-btn-lg">Live demos</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
 
-<h2>How it is built</h2>
-<pre><code>Pointer events (browser)
-  -> batched once per animation frame
-  -> BinkStrokeBuilder        spacing filter, streamline smoothing, pressure
-  -> BinkStroke + BinkBrush   immutable vector model
-  -> BinkDrawingOperation     the unit of undo, diffing and collaboration
-  -> BinkDocument             layers of elements
-  -> IBinkRenderContext       canvas commands, SVG, or the built-in rasterizer</code></pre>
-
-<p>
-    One rendering path serves the screen, SVG export and PNG export, so the exported file always matches what
-    was drawn. Pointer input never triggers a Blazor render: samples arrive once per frame, the active tool
-    processes them, and only the affected canvas layer is redrawn.
-</p>
-
-<div class="note">
-    In WebAssembly the command buffer reaches JavaScript as a view over managed memory, so a redraw costs one
-    interop call and no serialization. In Blazor Server the same engine runs on the server and a lightweight
-    trail is drawn locally while each batch is in flight, so the pen still feels attached to the hand.
-</div>
+        @* The sample, framed as a window: the markup on top, and the canvas it renders underneath -
+           live, so the first thing a visitor can do here is draw on it. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Sketch.razor</span>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BinkCanvas</span> @@ref=<span class="s">"_canvas"</span> Height=<span class="s">"240px"</span> Brush=<span class="s">"_pen"</span>
+            EnableTouchGestures=<span class="s">"true"</span> /&gt;
+
+<span class="k">private</span> BinkBrush _pen = <span class="k">new</span> BinkPenBrush { Width = 4f };</pre>
+                <div class="bink-hero-live">
+                    <div class="bink-surface">
+                        @* A host that reads canvas state (such as the undo button below) re-renders on these
+                           callbacks. Pointer input itself never re-renders anything. *@
+                        <BinkCanvas @ref="_canvas" Height="240px" Brush="_pen" EnableTouchGestures="true"
+                                    AriaLabel="Try drawing here"
+                                    HistoryChanged="() => StateHasChanged()"
+                                    DocumentChanged="() => StateHasChanged()" />
+                        @if (_canvas is null || _canvas.CurrentDocument.IsEmpty)
+                        {
+                            <span class="bink-surface-hint" aria-hidden="true">Draw here with a mouse, a finger or a stylus</span>
+                        }
+                    </div>
+                    <div class="bb-toolbar bink-toolbar">
+                        <span class="bink-hint">Ink is a vector document, not pixels.</span>
+                        <span class="bb-spacer"></span>
+                        <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="Undo">Undo</button>
+                        <button type="button" class="btn btn-secondary bink-danger" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="Clear">Clear</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>Engine in C#</strong><span>strokes, geometry, hit testing and undo</span></div>
+        <div><strong>A vector document</strong><span>saved, versioned and re-rendered at any size</span></div>
+        <div><strong>Pen-grade input</strong><span>pressure, tilt, palm rejection, coalesced samples</span></div>
+        <div><strong>Every hosting model</strong><span>WebAssembly, Server, Web App and Hybrid</span></div>
+    </section>
+
+    @* ============================== Use cases ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Use cases</p>
+        <h2>One engine for everything that needs ink</h2>
+        <p class="bb-section-sub">
+            Every page of this site is a working drawing surface built from the public API - open one, draw on
+            it, and read its source from the link under the page.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Signature</h3>
+                <p class="bb-card-desc">
+                    A signature field with validation, a read-only accepted state, and vector export that stays
+                    sharp at any size.
+                </p>
+                <a href="signature" class="btn btn-outline">Signature →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Handwriting</h3>
+                <p class="bb-card-desc">
+                    A note-taking surface tuned for writing, with pen pressure, tilt and palm rejection.
+                </p>
+                <a href="handwriting" class="btn btn-outline">Handwriting →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Whiteboard</h3>
+                <p class="bb-card-desc">
+                    Pens, markers, highlighters, three erasers, shapes, text, selection, layers, pan and zoom.
+                </p>
+                <a href="whiteboard" class="btn btn-outline">Whiteboard →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Diagram surface</h3>
+                <p class="bb-card-desc">
+                    Nodes and connectors that stay attached when you move things - built on the document model,
+                    with no diagram code in the library.
+                </p>
+                <a href="diagram" class="btn btn-outline">Diagram surface →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Image annotation</h3>
+                <p class="bb-card-desc">
+                    Drop in a screenshot, mark it up with arrows, boxes and highlights, export a flattened PNG or
+                    an editable SVG.
+                </p>
+                <a href="image-annotation" class="btn btn-outline">Image annotation →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Document review</h3>
+                <p class="bb-card-desc">
+                    Text highlights, callout comments and freehand notes over a document, each one an object with
+                    its own description.
+                </p>
+                <a href="document-annotation" class="btn btn-outline">Document review →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Collaboration</h3>
+                <p class="bb-card-desc">
+                    Two canvases synchronizing through operations, with live cursors, remote ink and an offline
+                    queue.
+                </p>
+                <a href="collaboration" class="btn btn-outline">Collaboration →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Under the hood</h3>
+                <p class="bb-card-desc">
+                    Save, inspect and reload the document, and time the engine on thousands of strokes in your own
+                    browser.
+                </p>
+                <div class="bb-try">
+                    <a href="serialization" class="btn btn-outline">Serialization →</a>
+                    <a href="performance" class="btn btn-outline">Performance →</a>
+                </div>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>A canvas is one tag</h3>
+                    <p>
+                        No services to register and no stylesheet to link: the package's Blazor initializer adds
+                        <code>bit-bink.css</code> by itself. That is already a working canvas - pointer and stylus
+                        input, pressure-aware ink, undo and redo on the keyboard.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code"><span class="k">@@using</span> Bit.Bink
 
-<h2>Get started</h2>
-<pre><code>dotnet add package Bit.Bink</code></pre>
-<pre><code>@@using Bit.Bink
+&lt;<span class="k">BinkCanvas</span> Height=<span class="s">"400px"</span> /&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Pick a brush and a tool</h3>
+                    <p>
+                        <code>Brush</code> decides how ink looks, <code>Tool</code> what pointer input does. Brushes
+                        are immutable records, so a variant is a <code>with</code> away.
+                    </p>
+                    <a href="whiteboard">Whiteboard →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BinkCanvas</span> Tool=<span class="s">"_tool"</span> Brush=<span class="s">"_brush"</span> Height=<span class="s">"400px"</span> /&gt;
 
-&lt;BinkCanvas Height="400px" /&gt;</code></pre>
-<p>
-    The stylesheet is added by the package's JavaScript initializer, so there is nothing to put in the host page.
-    The source code, the documentation and the code of this demo are on
-    <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bink" target="_blank" rel="noopener">GitHub</a>.
-</p>
+<span class="k">private</span> IBinkTool _tool = <span class="k">new</span> BinkDrawTool();
+<span class="k">private</span> BinkBrush _brush = <span class="k">new</span> BinkPenBrush { Color = BinkColor.Parse(<span class="s">"#1d4ed8"</span>), Width = 5f };
+
+<span class="k">private void</span> UseEraser() =&gt; _tool = <span class="k">new</span> BinkEraserTool { Mode = BinkEraserMode.Stroke, Radius = 12f };</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Save it, export it</h3>
+                    <p>
+                        The drawing is a document you can store anywhere and load back to keep editing - and the
+                        SVG and PNG exports go through the same renderer as the screen, so they match what was drawn.
+                    </p>
+                    <a href="serialization">Serialization →</a>
+                </div>
+                <pre class="bb-code"><span class="k">string</span> json = BinkSerializer.Serialize(_canvas.CurrentDocument);
+_canvas.LoadDocument(BinkSerializer.Deserialize(json));
+
+<span class="k">string</span> svg = <span class="k">await</span> _canvas.ExportSvgAsync();
+<span class="k">byte</span>[] png = <span class="k">await</span> _canvas.ExportPngAsync(<span class="k">new</span> BinkPngExportOptions { Scale = 3f });</pre>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not wrap a JavaScript drawing library?</h2>
+        <p class="bb-section-sub">
+            A wrapper keeps the drawing in JavaScript and hands .NET a picture of it, or a copy it has to keep in
+            step by hand. Bink keeps the drawing in C#, so the document your code reads is the one on the screen.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A JavaScript drawing library wrapper compared with Bink">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>JavaScript library wrapper</th><th>Bink</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Where the drawing lives</td><td>In the library's JavaScript objects</td><td>A <code>BinkDocument</code> in C#: layers of immutable elements</td></tr>
+                    <tr><td>Undo and redo</td><td>The library's own history, out of .NET's reach</td><td>Inverse operations - never snapshots - that your code can group</td></tr>
+                    <tr><td>Saving</td><td>The library's format, or a picture</td><td>A versioned, compact JSON format, validated against hostile input</td></tr>
+                    <tr><td>Export</td><td>A screenshot of the canvas</td><td>SVG and PNG through the screen's renderer, and a pure .NET PNG path for servers</td></tr>
+                    <tr><td>Collaboration</td><td>Bring your own</td><td>Operation sync over any transport, with presence and offline queueing</td></tr>
+                    <tr><td>Testing</td><td>Needs a browser</td><td>The engine runs in a unit test, a console app or on a server</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bink?</h3>
+                <p class="bb-card-desc">Install the package, add the namespace, put a canvas on a page - a drawing surface in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to see it live?</h3>
+                <p class="bb-card-desc">The whiteboard has every tool, layers, selection and export - and every page has its source one click away.</p>
+                <a href="whiteboard" class="btn btn-outline">Open the whiteboard →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this a JavaScript drawing library behind interop?</summary>
+                <p>
+                    No. The stroke model, smoothing, pressure response, hit testing, undo, serialization and export
+                    are C#. JavaScript collects pointer and keyboard input and replays a command buffer onto a
+                    canvas. The one drawing it does on its own is a provisional trail under Blazor Server, which
+                    hides network latency and is replaced by the engine's own geometry.
+                </p>
+            </details>
+            <details>
+                <summary>Does it work with Blazor Server?</summary>
+                <p>
+                    Yes - the same component works in every hosting model. Under Blazor Server the engine runs on the
+                    server and a provisional "wet ink" trail is drawn locally while each batch is in flight. A
+                    signature field or a form annotation is fine over Server; sustained handwriting over a
+                    high-latency connection is what WebAssembly, where the engine runs in the browser, is for.
+                </p>
+            </details>
+            <details>
+                <summary>Does it support pen pressure, tilt and touch?</summary>
+                <p>
+                    Pressure, tilt and twist are captured when the device reports them, and pressure is simulated
+                    from speed when it does not. Palm rejection ignores touch while a pen is down, and with
+                    <code>EnableTouchGestures</code> a finger draws and two fingers pan and pinch-zoom.
+                </p>
+            </details>
+            <details>
+                <summary>Can I save a drawing and edit it later?</summary>
+                <p>
+                    Yes - that is the point of a vector document. <code>BinkSerializer</code> writes a versioned,
+                    compact JSON format with binary stroke points; <code>TryDeserialize</code> reports a reason
+                    instead of throwing on untrusted input, and a document written by a newer version is refused
+                    rather than half read.
+                </p>
+            </details>
+            <details>
+                <summary>Is the canvas accessible?</summary>
+                <p>
+                    The canvas is a labelled, focusable, keyboard-operable element with a live text summary of the
+                    drawing, built from the descriptions an application attaches to its elements, and polite
+                    announcements of what changed. The strokes themselves cannot be described automatically - the
+                    objects around them can.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Put ink on the page</h2>
+        <p class="bb-section-sub">One package, one tag - no services to register and no stylesheet to link.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bink</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="whiteboard" class="btn btn-secondary bb-btn-lg">Browse the demos</a>
+        </div>
+    </section>
+</div>
 
 @code {
     private BinkCanvas? _canvas;
-    private readonly BinkBrush _brush = new BinkPenBrush { Width = 4f, Color = BinkColor.Parse("#111827") };
+    private readonly BinkBrush _pen = new BinkPenBrush { Width = 4f };
 
     private void Undo() => _canvas?.Undo();
 
diff --git a/src/Utilities/Bink/Demo/Client/Pages/ImageAnnotation.razor b/src/Utilities/Bink/Demo/Client/Pages/ImageAnnotation.razor
index 42dbd4e829f..ab796ed5c7a 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/ImageAnnotation.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/ImageAnnotation.razor
@@ -1,55 +1,59 @@
 @page "/image-annotation"
 @using System.Numerics
 
-<PageTitle>Image annotation - bit Bink</PageTitle>
-
-<h1>Image annotation</h1>
-<p class="page-intro">
-    Drop in a screenshot or photo, mark it up, and export a flattened image or an SVG that keeps the annotations
-    editable. The picture is an element in the document like any other, so annotations sit above it, move with the
-    selection tool and survive a round trip through the file format.
-</p>
-
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Annotation tools">
-        <label class="btn">
+<PageTitle>Image annotation · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Image annotation</h1>
+    <p class="bb-subtitle">
+        Drop in a screenshot or photo, mark it up, and export a flattened image or an SVG that keeps the annotations
+        editable. The picture is an element in the document like any other, so annotations sit above it, move with the
+        selection tool and survive a round trip through the file format.
+    </p>
+</div>
+
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Annotation tools">
+        <label class="btn btn-secondary">
             Open image
-            <InputFile OnChange="OnFileSelected" accept="image/*" style="display:none" />
+            <InputFile OnChange="OnFileSelected" accept="image/*" class="bink-file-input" />
         </label>
-        <button type="button" class="btn" @onclick="LoadSampleAsync">Use a sample</button>
+        <button type="button" class="btn btn-secondary" @onclick="LoadSampleAsync">Use a sample</button>
 
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
 
-        <div class="toolbar-group" role="group" aria-label="Tool">
+        <div class="bb-segmented" role="group" aria-label="Tool">
             @foreach ((string id, string label) in Tools)
             {
-                <button type="button" class="btn @(_toolId == id ? "active" : null)"
-                        aria-pressed="@(_toolId == id ? "true" : "false")"
+                <button type="button" aria-pressed="@(_toolId == id ? "true" : "false")"
                         @onclick="() => SelectTool(id)">@label</button>
             }
         </div>
 
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
 
         <ColorSwatches Colors="Palette" Value="@_color" ValueChanged="SetColor" />
 
-        <div class="toolbar-spacer"></div>
-
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
-        <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
+        <span class="bb-spacer"></span>
+        <div class="bink-group" role="group" aria-label="History">
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
+        </div>
     </div>
 
-    <div class="toolbar" style="border-top:none">
-        <button type="button" class="btn danger" disabled="@(_canvas is null || _canvas.Selection.IsEmpty)"
+    <div class="bb-toolbar bink-toolbar">
+        <button type="button" class="btn btn-secondary bink-danger" disabled="@(_canvas is null || _canvas.Selection.IsEmpty)"
                 @onclick="() => _canvas?.DeleteSelection()">Delete selected</button>
-        <button type="button" class="btn danger" disabled="@(AnnotationCount == 0)" @onclick="ClearAnnotations">Clear annotations</button>
-        <span class="field"><strong>@AnnotationCount</strong>&nbsp;annotations</span>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" disabled="@_document.IsEmpty" @onclick="ExportPngAsync">Export PNG</button>
-        <button type="button" class="btn" disabled="@_document.IsEmpty" @onclick="ExportSvgAsync">Export SVG</button>
+        <button type="button" class="btn btn-secondary bink-danger" disabled="@(AnnotationCount == 0)" @onclick="ClearAnnotations">Clear annotations</button>
+        <span class="bink-hint"><strong>@AnnotationCount</strong> annotations</span>
+        <span class="bb-spacer"></span>
+        <div class="bink-group" role="group" aria-label="Export">
+            <button type="button" class="btn btn-secondary" disabled="@_document.IsEmpty" @onclick="ExportPngAsync">Export PNG</button>
+            <button type="button" class="btn btn-secondary" disabled="@_document.IsEmpty" @onclick="ExportSvgAsync">Export SVG</button>
+        </div>
     </div>
 
-    <div class="canvas-host">
+    <div class="bink-surface">
         <BinkCanvas @ref="_canvas" HistoryChanged="() => StateHasChanged()"
                    Document="_document"
                    Height="560px"
@@ -72,16 +76,34 @@
     </CanvasStatus>
 </div>
 
-<div class="note">
+@if (_error is not null)
+{
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
+}
+
+<div class="bb-note">
     The image sits on its own locked layer so annotating never moves it by accident. Exported SVG references the
     image and keeps every arrow, box and note as vector geometry; exported PNG rasterizes the whole thing at twice
     the document resolution.
 </div>
 
-@if (_error is not null)
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Placing the picture</h3>
+    <p class="bb-card-desc">
+        The browser decodes the picture first, with <code>LoadImageAsync</code>, before any edit begins. Swapping it is
+        then several edits - remove the old one, add, lock the layer - but to the person using it one action, so it is
+        one undo step.
+    </p>
+    <pre class="bb-code">BinkImageSource ready = <span class="k">await</span> _canvas.LoadImageAsync(source);
+BinkImageElement placed = BinkImageElement.AtNaturalSize(ready, Vector2.Zero, maxWidth: _document.Settings.Width - 40);
+
+<span class="k">using</span> (_canvas.History.BeginGroup(<span class="s">"Open image"</span>))
 {
-    <p role="alert" style="color:var(--danger)">@_error</p>
-}
+    _document.UpdateLayer(_imageLayer, p =&gt; p <span class="k">with</span> { IsLocked = <span class="k">false</span> });
+    _document.AddElement(placed, _imageLayer);
+    _document.UpdateLayer(_imageLayer, p =&gt; p <span class="k">with</span> { IsLocked = <span class="k">true</span> });
+}</pre>
+</div>
 
 @code {
     private BinkCanvas? _canvas;
diff --git a/src/Utilities/Bink/Demo/Client/Pages/McpServer.razor b/src/Utilities/Bink/Demo/Client/Pages/McpServer.razor
index 635bd5fc06c..a9750c8235c 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/McpServer.razor
@@ -3,18 +3,19 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - bit Bink</PageTitle>
+<PageTitle>MCP server · Bink</PageTitle>
 
-<h1>MCP server</h1>
-
-<p class="page-intro">
-    This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing drawing code
-    with Bit.Bink reads the library itself - its compiled API documentation, its guide, its brush registry, its
-    serializer and these demo pages - instead of guessing at an API it half remembers. Every tool is read-only.
-</p>
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
+        This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing drawing code
+        with Bit.Bink reads the library itself - its compiled API documentation, its guide, its brush registry, its
+        serializer and these demo pages - instead of guessing at an API it half remembers. Every tool is read-only.
+    </p>
+</div>
 
-<div class="panel">
-    <h2>Connect a client</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
@@ -22,71 +23,51 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre class="output"><code>@ClientConfig</code></pre>
-</div>
+    <pre class="bb-code">@ClientConfig</pre>
+</section>
 
-<div class="panel">
-    <h2>Tools</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
-    <table>
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code>SearchBink</code></td>
-                <td>Everything at once - the guide, every public member, the brushes, the setup guides, the stylesheet and the demo sources - each hit with the exact follow-up call.</td>
-            </tr>
-            <tr>
-                <td><code>GetBinkSetupGuide</code></td>
-                <td>The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid.</td>
-            </tr>
-            <tr>
-                <td><code>GetBinkGuideSection</code></td>
-                <td>One section of the reference guide, or the index of sections.</td>
-            </tr>
-            <tr>
-                <td><code>GetBinkApi</code></td>
-                <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
-            </tr>
-            <tr>
-                <td><code>GetBinkBrushes</code></td>
-                <td>The built-in brushes with their real defaults, their geometry and the JSON a stroke stores them as.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBinkDocument</code></td>
-                <td>What the library's own serializer and exporters make of a saved document - or a sample document, to see the format.</td>
-            </tr>
-            <tr>
-                <td><code>GetBinkSourceFile</code></td>
-                <td>One demo or library file verbatim - every page here is a working drawing surface - or the index of files.</td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var tool in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        <td>@tool.Description</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
 
     <p>
         The guide, the API, the brushes, a sample document and the sources are also exposed as <code>bink://</code>
         resources, and three prompts - <code>add-bink-to-app</code>, <code>implement-bink-feature</code> and
         <code>debug-bink-canvas</code> - walk an agent through the common jobs in the right order.
     </p>
-</div>
+</section>
 
-<div class="panel">
-    <h2>The same tools over plain HTTP</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
-        <li><a href="/api/mcp/SearchBink?query=signature%20pad%20export%20png" target="_blank" rel="noopener">/api/mcp/SearchBink?query=signature pad export png</a></li>
-        <li><a href="/api/mcp/GetBinkApi?typeName=BinkCanvas" target="_blank" rel="noopener">/api/mcp/GetBinkApi?typeName=BinkCanvas</a></li>
-        <li><a href="/api/mcp/GetBinkBrushes?kind=pen" target="_blank" rel="noopener">/api/mcp/GetBinkBrushes?kind=pen</a></li>
-        <li><a href="/api/mcp/InspectBinkDocument" target="_blank" rel="noopener">/api/mcp/InspectBinkDocument</a></li>
-        <li><a href="/api/mcp/GetBinkSourceFile?path=Demo/Client/Pages/Signature.razor" target="_blank" rel="noopener">/api/mcp/GetBinkSourceFile?path=Demo/Client/Pages/Signature.razor</a></li>
+    <ul class="bb-detail-list">
+        @foreach (var (href, text) in HttpExamples)
+        {
+            <li><a href="@href" target="_blank" rel="noopener">@text</a></li>
+        }
     </ul>
-</div>
+</section>
 
 @code {
     private const string ClientConfig = """
@@ -100,4 +81,33 @@
           }
         }
         """;
+
+    // The server's tools, in the order an agent usually needs them. The one place to change when a tool is
+    // added, renamed or retired.
+    private static readonly (string Name, string Description)[] Tools =
+    [
+        ("SearchBink",
+            "Everything at once - the guide, every public member, the brushes, the setup guides, the stylesheet and the demo sources - each hit with the exact follow-up call."),
+        ("GetBinkSetupGuide",
+            "The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid."),
+        ("GetBinkGuideSection",
+            "One section of the reference guide, or the index of sections."),
+        ("GetBinkApi",
+            "One public type with every parameter, property and method, its real default and its documentation - or the index of types."),
+        ("GetBinkBrushes",
+            "The built-in brushes with their real defaults, their geometry and the JSON a stroke stores them as."),
+        ("InspectBinkDocument",
+            "What the library's own serializer and exporters make of a saved document - or a sample document, to see the format."),
+        ("GetBinkSourceFile",
+            "One demo or library file verbatim - every page here is a working drawing surface - or the index of files."),
+    ];
+
+    private static readonly (string Href, string Text)[] HttpExamples =
+    [
+        ("/api/mcp/SearchBink?query=signature%20pad%20export%20png", "/api/mcp/SearchBink?query=signature pad export png"),
+        ("/api/mcp/GetBinkApi?typeName=BinkCanvas", "/api/mcp/GetBinkApi?typeName=BinkCanvas"),
+        ("/api/mcp/GetBinkBrushes?kind=pen", "/api/mcp/GetBinkBrushes?kind=pen"),
+        ("/api/mcp/InspectBinkDocument", "/api/mcp/InspectBinkDocument"),
+        ("/api/mcp/GetBinkSourceFile?path=Demo/Client/Pages/Signature.razor", "/api/mcp/GetBinkSourceFile?path=Demo/Client/Pages/Signature.razor"),
+    ];
 }
diff --git a/src/Utilities/Bink/Demo/Client/Pages/NotFound.razor b/src/Utilities/Bink/Demo/Client/Pages/NotFound.razor
index ab8f2bc7dc6..c128ac2d635 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/NotFound.razor
@@ -1,6 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<PageTitle>Not found - bit Bink</PageTitle>
-<h1>Not found</h1>
-<p class="page-intro">There is nothing at this address. <a href="">Back to the introduction</a>.</p>
+<PageTitle>Not found · Bink</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Bink/Demo/Client/Pages/Performance.razor b/src/Utilities/Bink/Demo/Client/Pages/Performance.razor
index 18ad47fea0b..c02a3ef581c 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/Performance.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/Performance.razor
@@ -2,18 +2,20 @@
 @using System.Diagnostics
 @using System.Numerics
 
-<PageTitle>Performance - bit Bink</PageTitle>
-
-<h1>Performance</h1>
-<p class="page-intro">
-    Numbers measured here, in your browser, on this machine. Load a synthetic document and draw over it: the
-    canvas keeps responding because a redraw only touches the visible region, and drawing only redraws the
-    overlay. Every figure below is produced by running the real engine, not quoted from a specification.
-</p>
-
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Performance controls">
-        <label class="field">
+<PageTitle>Performance · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Performance</h1>
+    <p class="bb-subtitle">
+        Numbers measured here, in your browser, on this machine. Load a synthetic document and draw over it: the
+        canvas keeps responding because a redraw only touches the visible region, and drawing only redraws the
+        overlay. Every figure below is produced by running the real engine, not quoted from a specification.
+    </p>
+</div>
+
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Performance controls">
+        <label class="bink-field">
             Strokes
             <select value="@_strokeCount" @onchange="OnCountChanged" aria-label="Number of strokes">
                 <option value="500">500</option>
@@ -22,7 +24,7 @@
                 <option value="10000">10,000</option>
             </select>
         </label>
-        <label class="field">
+        <label class="bink-field">
             Points each
             <select value="@_pointsPerStroke" @onchange="OnPointsChanged" aria-label="Points per stroke">
                 <option value="20">20</option>
@@ -30,13 +32,17 @@
                 <option value="150">150</option>
             </select>
         </label>
-        <button type="button" class="btn primary" disabled="@_busy" @onclick="GenerateAsync">Generate</button>
-        <button type="button" class="btn" disabled="@(_busy || _document.IsEmpty)" @onclick="MeasureAsync">Measure</button>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn danger" disabled="@(_busy || _document.IsEmpty)" @onclick="Clear">Clear</button>
+        <button type="button" class="btn btn-primary" disabled="@_busy" @onclick="GenerateAsync">Generate</button>
+        <button type="button" class="btn btn-secondary" disabled="@(_busy || _document.IsEmpty)" @onclick="MeasureAsync">Measure</button>
+        @if (_busy)
+        {
+            <span class="bink-hint" role="status"><span class="bb-spinner" aria-hidden="true"></span> @(_step ?? "working")...</span>
+        }
+        <span class="bb-spacer"></span>
+        <button type="button" class="btn btn-secondary bink-danger" disabled="@(_busy || _document.IsEmpty)" @onclick="Clear">Clear</button>
     </div>
 
-    <div class="canvas-host">
+    <div class="bink-surface">
         <BinkCanvas @ref="_canvas"
                    Document="_document"
                    Height="420px"
@@ -48,40 +54,52 @@
                    Ready="() => StateHasChanged()" />
     </div>
 
-    <CanvasStatus Canvas="_canvas">
-        @if (_busy)
-        {
-            <span role="status"><strong>@(_step ?? "working")...</strong></span>
-        }
-    </CanvasStatus>
+    <CanvasStatus Canvas="_canvas" />
 </div>
 
 @if (_results.Count > 0)
 {
-    <h2>Measurements</h2>
-    <table>
-        <thead>
-            <tr><th>Operation</th><th>Result</th><th>What it covers</th></tr>
-        </thead>
-        <tbody>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Measurements</h3>
+        <p class="bb-card-desc">
+            Absolute numbers depend on the machine and the browser; what carries over is the ratio between them - the
+            visible region against the whole document, a click against a redraw.
+        </p>
+        <div class="bb-stats">
             @foreach (Measurement m in _results)
             {
-                <tr>
-                    <td>@m.Name</td>
-                    <td><strong>@m.Value</strong></td>
-                    <td style="color:var(--text-muted)">@m.Detail</td>
-                </tr>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">@m.Name</span>
+                    <span class="bb-stat-value">@m.Value</span>
+                    <span class="bink-stat-detail">@m.Detail</span>
+                </div>
             }
-        </tbody>
-    </table>
+        </div>
+    </div>
 }
 
-<div class="note">
+<div class="bb-note">
     Drawing on a loaded document stays smooth because the live stroke is rendered on a separate overlay canvas:
     the thousands of committed strokes are not touched until the pen lifts. Pointer input is batched once per
     animation frame and never triggers a Blazor render.
 </div>
 
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What is being timed</h3>
+    <p class="bb-card-desc">
+        The document is built in one batch, so it raises a single change and the canvas redraws once. A redraw is a
+        recording of canvas commands; with <code>ClipBounds</code> set to the visible rectangle it records only the
+        elements whose bounds intersect it, which is what a pan or a committed stroke really costs.
+    </p>
+    <pre class="bb-code"><span class="k">using</span> (_document.BeginBatch(<span class="s">"Generate"</span>))
+{
+    <span class="k">for</span> (<span class="k">int</span> i = 0; i &lt; _strokeCount; i++) _document.AddElement(CreateStroke(random), layer);
+}
+
+<span class="k">var</span> culled = <span class="k">new</span> BinkCanvasRenderContext(1 &lt;&lt; 16);
+BinkDocumentRenderer.Render(_document, culled, <span class="k">new</span> BinkRenderOptions { ClipBounds = visible });</pre>
+</div>
+
 @code {
     private sealed record Measurement(string Name, string Value, string Detail);
 
diff --git a/src/Utilities/Bink/Demo/Client/Pages/SerializationPage.razor b/src/Utilities/Bink/Demo/Client/Pages/SerializationPage.razor
index a9b304d1114..b2533d40c49 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/SerializationPage.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/SerializationPage.razor
@@ -2,91 +2,115 @@
 @using System.Numerics
 @inject FileDownloads Downloads
 
-<PageTitle>Serialization - bit Bink</PageTitle>
-
-<h1>Serialization</h1>
-<p class="page-intro">
-    Drawings are vector documents, not pictures. Draw on the left, then save, reload and export on the right.
-    The compact format stores a handwriting point in a few bytes; the readable format is the same data as plain
-    JSON for diffing and inspection.
-</p>
-
-<div class="split">
-    <div class="panel">
-        <div class="toolbar">
-            <span class="field">Draw something, then save it.</span>
-            <div class="toolbar-spacer"></div>
-            <button type="button" class="btn" disabled="@(_canvas is not { History.CanUndo: true })" @onclick="() => _canvas?.Undo()">Undo</button>
-            <button type="button" class="btn danger" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="() => _canvas?.Clear()">Clear</button>
-        </div>
-        <BinkCanvas @ref="_canvas" HistoryChanged="() => StateHasChanged()" Height="340px" Brush="_brush" AriaLabel="Source drawing"
-                   DocumentChanged="() => StateHasChanged()"
-                   Ready="() => StateHasChanged()" />
-        <CanvasStatus Canvas="_canvas" />
-    </div>
+<PageTitle>Serialization · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Serialization</h1>
+    <p class="bb-subtitle">
+        Drawings are vector documents, not pictures. Draw on the left, then save, reload and export on the right.
+        The compact format stores a handwriting point in a few bytes; the readable format is the same data as plain
+        JSON for diffing and inspection.
+    </p>
+</div>
 
-    <div class="panel">
-        <div class="toolbar">
-            <button type="button" class="btn primary" @onclick="Save">Save</button>
-            <button type="button" class="btn" disabled="@(_saved is null)" @onclick="Load">Load into the canvas</button>
-            <button type="button" class="btn" disabled="@(_saved is null)" @onclick="DownloadAsync">Download</button>
-            <label class="btn">
-                Open file
-                <InputFile OnChange="OpenAsync" accept=".json,.bink,application/json" style="display:none" />
-            </label>
-            <div class="toolbar-spacer"></div>
-            <label class="field">
-                <input type="checkbox" checked="@_readable" @onchange="OnReadableChanged" />
-                Readable JSON
-            </label>
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bink-pair">
+        <div class="bink-peer">
+            <div class="bb-toolbar bink-toolbar">
+                <span class="bink-hint">Draw something, then save it.</span>
+                <span class="bb-spacer"></span>
+                <div class="bink-group" role="group" aria-label="History">
+                    <button type="button" class="btn btn-secondary" disabled="@(_canvas is not { History.CanUndo: true })" @onclick="() => _canvas?.Undo()">Undo</button>
+                    <button type="button" class="btn btn-secondary bink-danger" disabled="@(_canvas is null || _canvas.CurrentDocument.IsEmpty)" @onclick="() => _canvas?.Clear()">Clear</button>
+                </div>
+            </div>
+            <div class="bink-surface">
+                <BinkCanvas @ref="_canvas" HistoryChanged="() => StateHasChanged()" Height="340px" Brush="_brush" AriaLabel="Source drawing"
+                           DocumentChanged="() => StateHasChanged()"
+                           Ready="() => StateHasChanged()" />
+            </div>
+            <CanvasStatus Canvas="_canvas" />
         </div>
 
-        @if (_stats is not null)
-        {
-            <table>
-                <thead>
-                    <tr><th>Measure</th><th>Value</th></tr>
-                </thead>
-                <tbody>
-                    <tr><td>Elements</td><td>@_stats.Elements</td></tr>
-                    <tr><td>Stroke points</td><td>@_stats.Points</td></tr>
-                    <tr><td>Compact document</td><td>@FormatBytes(_stats.CompactBytes)</td></tr>
-                    <tr><td>Readable document</td><td>@FormatBytes(_stats.ReadableBytes)</td></tr>
-                    <tr><td>Bytes per point (compact)</td><td>@(_stats.Points == 0 ? "-" : (_stats.CompactBytes / (double)_stats.Points).ToString("0.0"))</td></tr>
-                    <tr><td>SVG export</td><td>@FormatBytes(_stats.SvgBytes)</td></tr>
-                    <tr><td>PNG export (1x)</td><td>@FormatBytes(_stats.PngBytes)</td></tr>
-                    <tr><td>Round trip identical</td><td>@(_stats.RoundTripStable ? "yes" : "no")</td></tr>
-                </tbody>
-            </table>
-        }
-        else
-        {
-            <p style="padding:1rem;color:var(--text-muted)">Save the drawing to see how it is stored.</p>
-        }
+        <div class="bink-peer">
+            <div class="bb-toolbar bink-toolbar">
+                <button type="button" class="btn btn-primary" @onclick="Save">Save</button>
+                <button type="button" class="btn btn-secondary" disabled="@(_saved is null)" @onclick="Load">Load into the canvas</button>
+                <button type="button" class="btn btn-secondary" disabled="@(_saved is null)" @onclick="DownloadAsync">Download</button>
+                <label class="btn btn-secondary">
+                    Open file
+                    <InputFile OnChange="OpenAsync" accept=".json,.bink,application/json" class="bink-file-input" />
+                </label>
+                <span class="bb-spacer"></span>
+                <label class="bb-check">
+                    <input type="checkbox" checked="@_readable" @onchange="OnReadableChanged" />
+                    Readable JSON
+                </label>
+            </div>
+
+            <div class="bink-pane">
+                @if (_stats is not null)
+                {
+                    <dl class="bb-params">
+                        <dt>Elements</dt><dd>@_stats.Elements</dd>
+                        <dt>Stroke points</dt><dd>@_stats.Points</dd>
+                        <dt>Compact document</dt><dd>@FormatBytes(_stats.CompactBytes)</dd>
+                        <dt>Readable document</dt><dd>@FormatBytes(_stats.ReadableBytes)</dd>
+                        <dt>Bytes per point (compact)</dt><dd>@(_stats.Points == 0 ? "-" : (_stats.CompactBytes / (double)_stats.Points).ToString("0.0"))</dd>
+                        <dt>SVG export</dt><dd>@FormatBytes(_stats.SvgBytes)</dd>
+                        <dt>PNG export (1x)</dt><dd>@FormatBytes(_stats.PngBytes)</dd>
+                        <dt>Round trip identical</dt><dd>@(_stats.RoundTripStable ? "yes" : "no")</dd>
+                    </dl>
+                }
+                else
+                {
+                    <div class="bb-empty">Save the drawing to see how it is stored.</div>
+                }
+            </div>
+        </div>
     </div>
 </div>
 
 @if (_error is not null)
 {
-    <p role="alert" style="color:var(--danger)">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 
 @if (_saved is not null)
 {
-    <h2>Stored document</h2>
-    <p class="page-intro">
-        This is the text that was saved, and you can edit it. Change a number and load it to see the edit take
-        effect, or break the JSON to see the loader refuse it with a reason instead of loading half a drawing.
-    </p>
-    <textarea class="output" aria-label="Stored document" spellcheck="false" rows="14"
-              style="width:100%;font-family:ui-monospace,monospace;font-size:0.8rem"
-              value="@_saved" @onchange="e => _saved = e.Value?.ToString()"></textarea>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Stored document</h3>
+        <p class="bb-card-desc">
+            This is the text that was saved, and you can edit it. Change a number and load it to see the edit take
+            effect, or break the JSON to see the loader refuse it with a reason instead of loading half a drawing.
+        </p>
+        <textarea class="bink-json" aria-label="Stored document" spellcheck="false" rows="14"
+                  value="@_saved" @onchange="e => _saved = e.Value?.ToString()"></textarea>
+    </div>
 }
 
-<div class="note">
-    The format carries a schema version. A document written by a newer version is refused with an explanation
-    rather than being partially read, and elements of unknown types are preserved untouched through a load and
-    save, so an old build never silently destroys work made by a new one.
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The API</h3>
+    <p class="bb-card-desc">
+        Saving is one call and so is loading. For anything that came from outside your own code - a file a person
+        opened, a request body - use <code>TryDeserialize</code>, which reports a message instead of throwing.
+    </p>
+    <pre class="bb-code"><span class="k">string</span> compact = BinkSerializer.Serialize(document);
+<span class="k">string</span> readable = BinkSerializer.Serialize(document, BinkSerializerOptions.Readable);
+
+<span class="k">if</span> (BinkSerializer.TryDeserialize(json, <span class="k">out</span> BinkDocument? loaded, <span class="k">out string</span>? error) &amp;&amp; loaded <span class="k">is not null</span>)
+{
+    _canvas.LoadDocument(loaded);
+}</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Compatibility</h3>
+    <p class="bb-card-desc">
+        The format carries a schema version. A document written by a newer version is refused with an explanation
+        rather than being partially read, and elements of unknown types are preserved untouched through a load and
+        save, so an old build never silently destroys work made by a new one.
+    </p>
 </div>
 
 @code {
diff --git a/src/Utilities/Bink/Demo/Client/Pages/Signature.razor b/src/Utilities/Bink/Demo/Client/Pages/Signature.razor
index 8c7fa03cedc..78dce438e02 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/Signature.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/Signature.razor
@@ -1,31 +1,36 @@
 @page "/signature"
 
-<PageTitle>Signature - bit Bink</PageTitle>
+<PageTitle>Signature · Bink</PageTitle>
 
-<h1>Signature</h1>
-<p class="page-intro">
-    A production signature field: capture, clear, undo, validate and export. The signature is stored as vector
-    ink, so it can be re-rendered at any size, embedded in a PDF as SVG, or rasterized at print resolution.
-</p>
+<div class="bb-intro">
+    <h1>Signature</h1>
+    <p class="bb-subtitle">
+        A production signature field: capture, clear, undo, validate and export. The signature is stored as vector
+        ink, so it can be re-rendered at any size, embedded in a PDF as SVG, or rasterized at print resolution.
+    </p>
+</div>
 
-<div class="panel">
-    <div class="toolbar">
+<div class="bb-demo bink-editor">
+    <div class="bb-toolbar bink-toolbar">
         <ColorSwatches Colors="InkColors" Value="@_color" ValueChanged="SetColor" Label="Ink colour" Prefix="Ink:" />
-        <div class="toolbar-separator"></div>
-        <label class="field">
+        <span class="bink-sep" aria-hidden="true"></span>
+        <label class="bink-field">
             Nib
             <input type="range" min="2" max="8" step="0.5" value="@_width" aria-label="Nib width"
                    @onchange="OnWidthChanged" />
-            <span style="min-width:3ch">@_width.ToString("0.#")</span>
+            <span class="bink-field-value">@_width.ToString("0.#")</span>
         </label>
-        <div class="toolbar-spacer"></div>
-        <button type="button" class="btn" disabled="@(_locked || !CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
-        <button type="button" class="btn" disabled="@(_locked || !CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
-        <button type="button" class="btn danger" disabled="@IsEmpty" @onclick="Clear">@(_locked ? "Sign again" : "Clear")</button>
+        <span class="bb-spacer"></span>
+        <div class="bink-group" role="group" aria-label="History">
+            <button type="button" class="btn btn-secondary" disabled="@(_locked || !CanUndo)" @onclick="() => _canvas?.Undo()">Undo</button>
+            <button type="button" class="btn btn-secondary" disabled="@(_locked || !CanRedo)" @onclick="() => _canvas?.Redo()">Redo</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@IsEmpty" @onclick="Clear">@(_locked ? "Sign again" : "Clear")</button>
+        </div>
     </div>
 
-    @* A fixed aspect signing area with a baseline, the way a paper form has one. *@
-    <div style="position:relative">
+    @* A fixed aspect signing area with a baseline, the way a paper form has one. The line and its caption are
+       printed on the paper, so they take the paper's colours (demo.css) rather than the theme's. *@
+    <div class="bink-surface">
         <BinkCanvas @ref="_canvas" Ready="() => StateHasChanged()"
                    EnableTouchGestures="true"
                    Height="200px"
@@ -35,46 +40,75 @@
                    StrokeCompleted="OnStrokeCompleted"
                    DocumentChanged="OnDocumentChanged"
                    HistoryChanged="() => StateHasChanged()" />
-        <div aria-hidden="true"
-             style="position:absolute;left:24px;right:24px;bottom:44px;border-bottom:1px solid var(--border);pointer-events:none"></div>
-        <div aria-hidden="true"
-             style="position:absolute;left:24px;bottom:22px;color:var(--text-muted);font-size:0.8rem;pointer-events:none">
-            Sign above the line
-        </div>
+        <div class="bink-signature-line" aria-hidden="true"></div>
+        <div class="bink-signature-caption" aria-hidden="true">Sign above the line</div>
     </div>
 
     <CanvasStatus Canvas="_canvas">
         <span>Ink length <strong>@_inkLength.ToString("0")</strong> units</span>
     </CanvasStatus>
-</div>
 
-<div class="toolbar" style="border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px">
-    <button type="button" class="btn primary" disabled="@(_locked || !IsValid)" @onclick="Accept">Accept signature</button>
-    <button type="button" class="btn" disabled="@IsEmpty" @onclick="DownloadSvgAsync">Download SVG</button>
-    <button type="button" class="btn" disabled="@IsEmpty" @onclick="DownloadPngAsync">Download PNG (3x)</button>
-    <div class="toolbar-spacer"></div>
-    <span class="field" role="status">@_message</span>
+    <div class="bb-toolbar bink-toolbar">
+        <button type="button" class="btn btn-primary" disabled="@(_locked || !IsValid)" @onclick="Accept">Accept signature</button>
+        <button type="button" class="btn btn-secondary" disabled="@IsEmpty" @onclick="DownloadSvgAsync">Download SVG</button>
+        <button type="button" class="btn btn-secondary" disabled="@IsEmpty" @onclick="DownloadPngAsync">Download PNG (3x)</button>
+        <span class="bb-spacer"></span>
+        <span class="bink-hint" role="status">@_message</span>
+    </div>
 </div>
 
 @if (_saved is not null)
 {
-    <h2>Stored signature</h2>
-    <p class="page-intro">
-        This is the document as it would be persisted. It is compact vector data, not an image: @_savedBytes bytes
-        for @_saved.ElementCount strokes.
-    </p>
-    <div class="split">
-        <div class="panel" style="padding:1rem">
-            <div style="font-size:0.78rem;color:var(--text-muted);margin-bottom:0.5rem">Re-rendered from the stored document</div>
-            @((MarkupString)_savedSvg)
-        </div>
-        <div class="panel" style="padding:1rem">
-            <div style="font-size:0.78rem;color:var(--text-muted);margin-bottom:0.5rem">Serialized document</div>
-            <pre class="output"><code>@_savedJson</code></pre>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Stored signature</h3>
+        <p class="bb-card-desc">
+            This is the document as it would be persisted. It is compact vector data, not an image: @_savedBytes bytes
+            for @_saved.ElementCount strokes.
+        </p>
+        <div class="bb-split">
+            <div class="bb-demo">
+                <div class="bb-demo-bar"><span class="bb-demo-label">Re-rendered from the stored document</span></div>
+                @* The export has a transparent background and dark ink, so it is shown on paper in either theme. *@
+                <div class="bink-paper">@((MarkupString)_savedSvg)</div>
+            </div>
+            <div class="bb-demo">
+                <div class="bb-demo-bar"><span class="bb-demo-label">Serialized document</span></div>
+                <pre class="bb-code bink-output">@_savedJson</pre>
+            </div>
         </div>
     </div>
 }
 
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Validation and the accepted state</h3>
+    <p class="bb-card-desc">
+        A scribble of one dot is not a signature. The page adds up the length of every stroke in the document and
+        enables <strong>Accept signature</strong> only past a minimum - a real validation rule that the vector model
+        makes easy to express. Accepting makes the field <code>ReadOnly</code>, the way ink on paper is final, until
+        the signer chooses to sign again.
+    </p>
+    <pre class="bb-code"><span class="k">foreach</span> (BinkElement element <span class="k">in</span> _canvas.CurrentDocument.AllElements)
+{
+    <span class="k">if</span> (element <span class="k">is</span> BinkStroke stroke) _inkLength += stroke.Points.Length;
+}</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Export cropped to the ink</h3>
+    <p class="bb-card-desc">
+        <code>BinkExportRegion.Content</code> crops an export to what was drawn, and a transparent background lets the
+        signature sit on whatever document it is placed into. The stored copy above is exported the same way, with
+        <code>BinkSvgExporter</code> on the document rather than through the canvas.
+    </p>
+    <pre class="bb-code"><span class="k">await</span> _canvas.SavePngAsync(<span class="s">"signature.png"</span>, <span class="k">new</span> BinkPngExportOptions
+{
+    Region = BinkExportRegion.Content,
+    Padding = 12f,
+    Scale = 3f,
+    Background = BinkColor.Transparent,
+});</pre>
+</div>
+
 @code {
     private BinkCanvas? _canvas;
     private BinkBrush _brush = new BinkPenBrush { Width = 3.5f, Color = BinkColor.Parse("#0f172a"), TaperEnd = 8f };
diff --git a/src/Utilities/Bink/Demo/Client/Pages/Whiteboard.razor b/src/Utilities/Bink/Demo/Client/Pages/Whiteboard.razor
index 596de6c08b3..223612944cd 100644
--- a/src/Utilities/Bink/Demo/Client/Pages/Whiteboard.razor
+++ b/src/Utilities/Bink/Demo/Client/Pages/Whiteboard.razor
@@ -2,40 +2,42 @@
 @using System.Numerics
 @inject FileDownloads Downloads
 
-<PageTitle>Whiteboard - bit Bink</PageTitle>
-
-<h1>Whiteboard</h1>
-<p class="page-intro">
-    The full editor: pens, markers, highlighters, three kinds of eraser, shapes, text, selection with move,
-    resize and rotate, layers, pan and zoom. Everything here is built from the public API.
-</p>
+<PageTitle>Whiteboard · Bink</PageTitle>
+
+<div class="bb-intro">
+    <h1>Whiteboard</h1>
+    <p class="bb-subtitle">
+        The full editor: pens, markers, highlighters, three kinds of eraser, shapes, text, selection with move,
+        resize and rotate, layers, pan and zoom. Everything here is built from the public API.
+    </p>
+</div>
 
-<div class="panel">
-    <div class="toolbar" role="toolbar" aria-label="Whiteboard tools">
-        <div class="toolbar-group" role="group" aria-label="Tool">
+<div class="bb-demo bink-editor bb-page-wide">
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Whiteboard tools">
+        <div class="bb-segmented" role="group" aria-label="Tool">
             @foreach ((string id, string label, string title) in ToolButtons)
             {
-                <button type="button" class="btn @(_toolId == id ? "active" : null)" title="@title"
+                <button type="button" title="@title"
                         aria-pressed="@(_toolId == id ? "true" : "false")"
                         @onclick="() => SelectTool(id)">@label</button>
             }
         </div>
 
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
 
         <ColorSwatches Colors="Palette" Value="@_color" ValueChanged="SetColor" />
 
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
 
-        <label class="field">
+        <label class="bink-field">
             Size
             <input type="range" min="1" max="40" step="1" value="@_width" aria-label="Size" @onchange="OnWidthChanged" />
-            <span style="min-width:2ch">@((int)_width)</span>
+            <span class="bink-field-value">@((int)_width)</span>
         </label>
 
         @if (_toolId is "rect" or "ellipse")
         {
-            <label class="field">
+            <label class="bb-check">
                 <input type="checkbox" checked="@_fill" @onchange="OnFillChanged" />
                 Fill
             </label>
@@ -43,7 +45,7 @@
 
         @if (_toolId == "eraser")
         {
-            <label class="field">
+            <label class="bink-field">
                 Eraser
                 <select value="@_eraserMode" @onchange="OnEraserModeChanged" aria-label="Eraser mode">
                     <option value="Stroke">Whole stroke</option>
@@ -53,29 +55,29 @@
             </label>
         }
 
-        <div class="toolbar-spacer"></div>
+        <span class="bb-spacer"></span>
 
-        <div class="toolbar-group" role="group" aria-label="History">
-            <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanUndo)"
+        <div class="bink-group" role="group" aria-label="History">
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanUndo)"
                     title="Undo (Ctrl+Z)" @onclick="() => _canvas?.Undo()">Undo</button>
-            <button type="button" class="btn" disabled="@(_canvas is null || !_canvas.History.CanRedo)"
+            <button type="button" class="btn btn-secondary" disabled="@(_canvas is null || !_canvas.History.CanRedo)"
                     title="Redo (Ctrl+Shift+Z)" @onclick="() => _canvas?.Redo()">Redo</button>
-            <button type="button" class="btn danger" disabled="@_document.IsEmpty" @onclick="() => _canvas?.Clear()">Clear</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@_document.IsEmpty" @onclick="() => _canvas?.Clear()">Clear</button>
         </div>
     </div>
 
-    <div class="toolbar" style="border-top:none">
-        <div class="toolbar-group" role="group" aria-label="View">
-            <button type="button" class="btn" @onclick="() => _canvas?.ZoomBy(1.25f)" aria-label="Zoom in">+</button>
-            <button type="button" class="btn" @onclick="() => _canvas?.ZoomBy(0.8f)" aria-label="Zoom out">-</button>
-            <button type="button" class="btn" @onclick="() => _canvas?.ZoomToFit()">Fit</button>
-            <button type="button" class="btn" @onclick="() => _canvas?.ResetViewport()">100%</button>
+    <div class="bb-toolbar bink-toolbar">
+        <div class="bink-group" role="group" aria-label="View">
+            <button type="button" class="btn btn-secondary bink-btn-square" @onclick="() => _canvas?.ZoomBy(1.25f)" aria-label="Zoom in" title="Zoom in (Ctrl++)">+</button>
+            <button type="button" class="btn btn-secondary bink-btn-square" @onclick="() => _canvas?.ZoomBy(0.8f)" aria-label="Zoom out" title="Zoom out (Ctrl+-)">&minus;</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => _canvas?.ZoomToFit()" title="Zoom to fit (Ctrl+9)">Fit</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => _canvas?.ResetViewport()" title="Actual size (Ctrl+0)">100%</button>
         </div>
 
-        <div class="toolbar-separator"></div>
+        <span class="bink-sep" aria-hidden="true"></span>
 
-        <div class="toolbar-group" role="group" aria-label="Layers">
-            <label class="field">
+        <div class="bink-group" role="group" aria-label="Layers">
+            <label class="bink-field">
                 Layer
                 <select value="@_activeLayer" @onchange="OnLayerChanged" aria-label="Active layer">
                     @foreach (BinkLayer layer in _document.Layers.Reverse())
@@ -84,42 +86,42 @@
                     }
                 </select>
             </label>
-            <button type="button" class="btn" @onclick="AddLayer">Add layer</button>
-            <button type="button" class="btn" aria-pressed="@(ActiveLayer?.IsVisible == false ? "true" : "false")"
+            <button type="button" class="btn btn-secondary" @onclick="AddLayer">Add layer</button>
+            <button type="button" class="btn btn-secondary" aria-pressed="@(ActiveLayer?.IsVisible == false ? "true" : "false")"
                     @onclick="ToggleLayerVisibility">@(ActiveLayer?.IsVisible == false ? "Show" : "Hide")</button>
-            <button type="button" class="btn" aria-pressed="@(ActiveLayer?.IsLocked == true ? "true" : "false")"
+            <button type="button" class="btn btn-secondary" aria-pressed="@(ActiveLayer?.IsLocked == true ? "true" : "false")"
                     @onclick="ToggleLayerLock">@(ActiveLayer?.IsLocked == true ? "Unlock" : "Lock")</button>
-            <button type="button" class="btn danger" disabled="@(_document.Layers.Count < 2)" @onclick="DeleteLayer">Delete layer</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@(_document.Layers.Count < 2)" @onclick="DeleteLayer">Delete layer</button>
         </div>
 
-        <div class="toolbar-spacer"></div>
+        <span class="bb-spacer"></span>
 
-        <div class="toolbar-group" role="group" aria-label="File">
-            <label class="btn">
+        <div class="bink-group" role="group" aria-label="File">
+            <label class="btn btn-secondary">
                 Open
-                <InputFile OnChange="OpenAsync" accept=".json,.bink,application/json" style="display:none" />
+                <InputFile OnChange="OpenAsync" accept=".json,.bink,application/json" class="bink-file-input" />
             </label>
-            <button type="button" class="btn" @onclick="SaveAsync">Save</button>
-            <button type="button" class="btn" disabled="@_document.IsEmpty" @onclick="ExportSvgAsync">Export SVG</button>
-            <button type="button" class="btn" disabled="@_document.IsEmpty" @onclick="ExportPngAsync">Export PNG</button>
+            <button type="button" class="btn btn-secondary" @onclick="SaveAsync">Save</button>
+            <button type="button" class="btn btn-secondary" disabled="@_document.IsEmpty" @onclick="ExportSvgAsync">Export SVG</button>
+            <button type="button" class="btn btn-secondary" disabled="@_document.IsEmpty" @onclick="ExportPngAsync">Export PNG</button>
         </div>
     </div>
 
-    <div class="toolbar" style="border-top:none" role="toolbar" aria-label="Selection">
-        <div class="toolbar-group" role="group" aria-label="Arrange">
-            <button type="button" class="btn" disabled="@_document.IsEmpty" title="Select all (Ctrl+A)" @onclick="SelectAll">Select all</button>
-            <button type="button" class="btn" disabled="@(!HasSelection)" title="Duplicate (Ctrl+D)" @onclick="Duplicate">Duplicate</button>
-            <button type="button" class="btn" disabled="@(!HasSelection)" @onclick="() => Arrange(toFront: true)">Bring to front</button>
-            <button type="button" class="btn" disabled="@(!HasSelection)" @onclick="() => Arrange(toFront: false)">Send to back</button>
-            <button type="button" class="btn danger" disabled="@(!HasSelection)" title="Delete" @onclick="() => _canvas?.DeleteSelection()">Delete</button>
+    <div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Selection">
+        <div class="bink-group" role="group" aria-label="Arrange">
+            <button type="button" class="btn btn-secondary" disabled="@_document.IsEmpty" title="Select all (Ctrl+A)" @onclick="SelectAll">Select all</button>
+            <button type="button" class="btn btn-secondary" disabled="@(!HasSelection)" title="Duplicate (Ctrl+D)" @onclick="Duplicate">Duplicate</button>
+            <button type="button" class="btn btn-secondary" disabled="@(!HasSelection)" @onclick="() => Arrange(toFront: true)">Bring to front</button>
+            <button type="button" class="btn btn-secondary" disabled="@(!HasSelection)" @onclick="() => Arrange(toFront: false)">Send to back</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@(!HasSelection)" title="Delete" @onclick="() => _canvas?.DeleteSelection()">Delete</button>
         </div>
         @if (_message is not null)
         {
-            <span class="field" role="status">@_message</span>
+            <span class="bink-hint" role="status">@_message</span>
         }
     </div>
 
-    <div class="canvas-host">
+    <div class="bink-surface">
         <BinkCanvas @ref="_canvas"
                    Document="_document"
                    Height="520px"
@@ -141,11 +143,53 @@
     </CanvasStatus>
 </div>
 
-<div class="note">
+<div class="bb-note">
     Selection has real handles: drag inside the box to move, the corners and edges to resize, the circle above it
-    to rotate. Manipulation only changes each element's transform, so the vector data is never rewritten and undo
-    restores it exactly. Arrow keys nudge, Shift makes larger steps, Delete removes. A locked layer is skipped by
-    selection and erasing, and saving writes the whole board, layers included, as a file you can open again.
+    to rotate. Arrow keys nudge, Shift makes larger steps, Delete removes. A locked layer is skipped by selection
+    and erasing, and saving writes the whole board, layers included, as a file you can open again.
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A tool is a parameter</h3>
+    <p class="bb-card-desc">
+        Every button in the first row swaps the canvas's <code>Tool</code> - and, for the drawing tools, its
+        <code>Brush</code>. Shapes take their stroke and fill from <code>ShapeStyle</code>, text its look from the
+        text tool's own style. Nothing about the canvas has to be told that the tool changed.
+    </p>
+    <pre class="bb-code"><span class="k">switch</span> (id)
+{
+    <span class="k">case</span> <span class="s">"marker"</span>:
+        _brush = <span class="k">new</span> BinkMarkerBrush { Width = MathF.Max(_width * 1.5f, 6f), Color = color };
+        _tool = <span class="k">new</span> BinkDrawTool();
+        <span class="k">break</span>;
+    <span class="k">case</span> <span class="s">"eraser"</span>:
+        _tool = <span class="k">new</span> BinkEraserTool { Mode = Enum.Parse&lt;BinkEraserMode&gt;(_eraserMode), Radius = MathF.Max(_width * 2f, 8f) };
+        <span class="k">break</span>;
+    <span class="k">case</span> <span class="s">"arrow"</span>:
+        _tool = <span class="k">new</span> BinkShapeTool(BinkShapeKind.Arrow);
+        <span class="k">break</span>;
+    <span class="k">case</span> <span class="s">"text"</span>:
+        _tool = <span class="k">new</span> BinkTextTool { Style = BinkTextStyle.Default <span class="k">with</span> { FontSize = MathF.Max(_width * 4f, 14f), Color = color } };
+        <span class="k">break</span>;
+}</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Transforms, not rewrites</h3>
+    <p class="bb-card-desc">
+        Moving, resizing and rotating only change each element's transform, so the vector data is never rewritten
+        and undo restores it exactly. Edits the page makes itself - duplicating, bringing to front - go through the
+        same document API, grouped into one undo step with <code>BeginBatch</code>.
+    </p>
+    <pre class="bb-code"><span class="k">using</span> (_document.BeginBatch(<span class="s">"Duplicate"</span>))
+{
+    <span class="k">foreach</span> (BinkElement element <span class="k">in</span> _canvas.Selection.Elements.ToList())
+    {
+        Guid? layer = _document.GetLayerOf(element.Id)?.Id;
+        BinkElement copy = element.Translate(<span class="k">new</span> Vector2(16f, 16f)) <span class="k">with</span> { Id = Guid.NewGuid(), Version = 0 };
+        _document.AddElement(copy, layer);
+    }
+}</pre>
 </div>
 
 @code {
diff --git a/src/Utilities/Bink/Demo/Client/Routes.razor b/src/Utilities/Bink/Demo/Client/Routes.razor
index 105855d4577..989f92736d1 100644
--- a/src/Utilities/Bink/Demo/Client/Routes.razor
+++ b/src/Utilities/Bink/Demo/Client/Routes.razor
@@ -1,6 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/Bink/Demo/Client/Shared/CanvasStatus.razor b/src/Utilities/Bink/Demo/Client/Shared/CanvasStatus.razor
index 9722adcf85a..1ad4ba1308c 100644
--- a/src/Utilities/Bink/Demo/Client/Shared/CanvasStatus.razor
+++ b/src/Utilities/Bink/Demo/Client/Shared/CanvasStatus.razor
@@ -1,22 +1,23 @@
-@* Shows what the engine and the device are actually doing. Useful for judging the library, not decoration. *@
+@* Shows what the engine and the device are actually doing. Useful for judging the library, not decoration.
+   The first number is the element count, which is what the E2E suite reads back from it. *@
 
 @if (Canvas is not null)
 {
-    <div class="statusbar" aria-live="off">
+    <div class="bink-status" aria-live="off">
         <span><strong>@Canvas.CurrentDocument.ElementCount</strong> elements</span>
         <span><strong>@Canvas.CurrentDocument.TotalPointCount</strong> points</span>
         <span><strong>@Canvas.History.UndoCount</strong> undo steps</span>
         <span>Zoom <strong>@((Canvas.CurrentViewport.Zoom * 100).ToString("0"))%</strong></span>
-        <span class="badge @(Canvas.UsesFastRenderPath ? "on" : null)">
+        <span class="@Badge(Canvas.UsesFastRenderPath)">
             @(Canvas.UsesFastRenderPath ? "zero-copy render" : "standard interop")
         </span>
-        <span class="badge @(Canvas.Capabilities.CoalescedEvents ? "on" : null)">coalesced input</span>
-        <span class="badge @(Canvas.Capabilities.ObservedPressure ? "on" : null)">
+        <span class="@Badge(Canvas.Capabilities.CoalescedEvents)">coalesced input</span>
+        <span class="@Badge(Canvas.Capabilities.ObservedPressure)">
             @(Canvas.Capabilities.ObservedPressure ? "pen pressure" : "no pressure hardware")
         </span>
         @if (Canvas.Capabilities.ObservedTilt)
         {
-            <span class="badge on">tilt</span>
+            <span class="@Badge(true)">tilt</span>
         }
         <span>DPR <strong>@Canvas.Capabilities.DevicePixelRatio.ToString("0.##")</strong></span>
         @ChildContent
@@ -27,4 +28,7 @@
     [Parameter] public BinkCanvas? Canvas { get; set; }
 
     [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>A capability the canvas has is a success badge; one it lacks is a neutral one.</summary>
+    public static string Badge(bool on) => on ? "bb-badge bb-badge-success" : "bb-badge bink-badge-off";
 }
diff --git a/src/Utilities/Bink/Demo/Client/Shared/ColorSwatches.razor b/src/Utilities/Bink/Demo/Client/Shared/ColorSwatches.razor
index 655a6e4057b..b7b3400087d 100644
--- a/src/Utilities/Bink/Demo/Client/Shared/ColorSwatches.razor
+++ b/src/Utilities/Bink/Demo/Client/Shared/ColorSwatches.razor
@@ -1,11 +1,13 @@
-@* A colour picker made of real toggle buttons, so the choice is announced by name and reachable by keyboard. *@
+@* A colour picker made of real toggle buttons, so the choice is announced by name and reachable by keyboard.
+   The colours are ink - content, not chrome - so each swatch is painted with the colour itself and the ring
+   around it, drawn from the theme's tokens (demo.css), is what keeps a black ink visible on a dark toolbar. *@
 
-<div class="toolbar-group" role="group" aria-label="@Label">
+<div class="bink-swatches" role="group" aria-label="@Label">
     @foreach (string color in Colors)
     {
         bool active = string.Equals(color, Value, StringComparison.OrdinalIgnoreCase);
         <button type="button"
-                class="swatch @(active ? "active" : null)"
+                class="bink-swatch"
                 style="background:@color"
                 title="@NameOf(color)"
                 aria-label="@(Prefix is null ? NameOf(color) : $"{Prefix} {NameOf(color)}")"
diff --git a/src/Utilities/Bink/Demo/Client/Shared/DrawingToolbar.razor b/src/Utilities/Bink/Demo/Client/Shared/DrawingToolbar.razor
index 14004f8348e..87c273d98b1 100644
--- a/src/Utilities/Bink/Demo/Client/Shared/DrawingToolbar.razor
+++ b/src/Utilities/Bink/Demo/Client/Shared/DrawingToolbar.razor
@@ -1,15 +1,16 @@
 @* A reusable toolbar built entirely from real HTML controls, so it is keyboard and screen reader accessible.
-   The canvas itself never needs to handle these interactions. *@
+   The canvas itself never needs to handle these interactions. The tools are a segmented group of toggle
+   buttons (one choice, all of them visible), the colours are a ColorSwatches group, and the history buttons
+   sit at the far end - the same arrangement every editor page on this site uses. *@
 
-<div class="toolbar" role="toolbar" aria-label="Drawing tools">
+<div class="bb-toolbar bink-toolbar" role="toolbar" aria-label="Drawing tools">
 
     @if (ShowTools)
     {
-        <div class="toolbar-group" role="group" aria-label="Tool">
+        <div class="bb-segmented" role="group" aria-label="Tool">
             @foreach (ToolChoice choice in Tools)
             {
                 <button type="button"
-                        class="btn @(IsToolActive(choice) ? "active" : null)"
                         aria-pressed="@(IsToolActive(choice) ? "true" : "false")"
                         title="@choice.Title"
                         @onclick="() => SelectToolAsync(choice)">
@@ -21,44 +22,34 @@
 
     @if (ShowColors)
     {
-        <div class="toolbar-separator"></div>
-        <div class="toolbar-group" role="group" aria-label="Colour">
-            @foreach (string color in Palette)
-            {
-                <button type="button"
-                        class="swatch @(string.Equals(color, CurrentColor, StringComparison.OrdinalIgnoreCase) ? "active" : null)"
-                        style="background:@color"
-                        aria-label="@ColorName(color)"
-                        aria-pressed="@(string.Equals(color, CurrentColor, StringComparison.OrdinalIgnoreCase) ? "true" : "false")"
-                        @onclick="() => SetColorAsync(color)"></button>
-            }
-        </div>
+        <span class="bink-sep" aria-hidden="true"></span>
+        <ColorSwatches Colors="Palette" Value="@CurrentColor" ValueChanged="SetColorAsync" />
     }
 
     @if (ShowWidth)
     {
-        <div class="toolbar-separator"></div>
-        <label class="field">
+        <span class="bink-sep" aria-hidden="true"></span>
+        <label class="bink-field">
             Size
             <input type="range" min="1" max="40" step="1" value="@((int)Width)"
                    aria-label="Brush size"
                    @onchange="OnWidthChanged" />
-            <span style="min-width:2ch">@((int)Width)</span>
+            <span class="bink-field-value">@((int)Width)</span>
         </label>
     }
 
     @ChildContent
 
-    <div class="toolbar-spacer"></div>
+    <span class="bb-spacer"></span>
 
     @if (ShowHistory && Canvas is not null)
     {
-        <div class="toolbar-group" role="group" aria-label="History">
-            <button type="button" class="btn" disabled="@(!Canvas.History.CanUndo)" @onclick="() => Canvas.Undo()"
+        <div class="bink-group" role="group" aria-label="History">
+            <button type="button" class="btn btn-secondary" disabled="@(!Canvas.History.CanUndo)" @onclick="() => Canvas.Undo()"
                     title="Undo (Ctrl+Z)">Undo</button>
-            <button type="button" class="btn" disabled="@(!Canvas.History.CanRedo)" @onclick="() => Canvas.Redo()"
+            <button type="button" class="btn btn-secondary" disabled="@(!Canvas.History.CanRedo)" @onclick="() => Canvas.Redo()"
                     title="Redo (Ctrl+Shift+Z)">Redo</button>
-            <button type="button" class="btn danger" disabled="@(Canvas.CurrentDocument.IsEmpty)" @onclick="() => Canvas.Clear()">Clear</button>
+            <button type="button" class="btn btn-secondary bink-danger" disabled="@(Canvas.CurrentDocument.IsEmpty)" @onclick="() => Canvas.Clear()">Clear</button>
         </div>
     }
 
@@ -140,17 +131,4 @@
         }
         return Task.CompletedTask;
     }
-
-    private static string ColorName(string hex) => hex switch
-    {
-        "#111827" => "Black",
-        "#dc2626" => "Red",
-        "#ea580c" => "Orange",
-        "#ca8a04" => "Yellow",
-        "#16a34a" => "Green",
-        "#2563eb" => "Blue",
-        "#7c3aed" => "Purple",
-        "#db2777" => "Pink",
-        _ => hex,
-    };
 }
diff --git a/src/Utilities/Bink/Demo/Client/Shared/PresenceOverlay.razor b/src/Utilities/Bink/Demo/Client/Shared/PresenceOverlay.razor
index 637935a9fe2..de7adf9c6b9 100644
--- a/src/Utilities/Bink/Demo/Client/Shared/PresenceOverlay.razor
+++ b/src/Utilities/Bink/Demo/Client/Shared/PresenceOverlay.razor
@@ -3,9 +3,11 @@
 @implements IDisposable
 
 @* Draws the other participants' cursors and the stroke they are drawing right now. It sits over the canvas as
-   plain SVG and only this component re-renders when presence changes, not the page or the canvas. *@
+   plain SVG and only this component re-renders when presence changes, not the page or the canvas. Every colour
+   in it is the participant's own - content, like the ink - and it is drawn over the paper, so it needs nothing
+   from the site's theme; the label takes the site's typeface (demo.css, .bink-presence). *@
 
-<svg aria-hidden="true" style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible">
+<svg class="bink-presence" aria-hidden="true">
     @if (Session is not null && Canvas is not null)
     {
         BinkViewport viewport = Canvas.CurrentViewport;
@@ -24,7 +26,7 @@
                 <g transform="translate(@Number(at.X) @Number(at.Y))">
                     <path d="M0 0 L0 15 L4 11 L7 18 L10 17 L7 10 L12 10 Z" fill="@color" stroke="white" stroke-width="1" />
                     <rect x="12" y="16" rx="4" width="@Number(8 + (presence.Name?.Length ?? 0) * 7)" height="18" fill="@color" />
-                    <text x="16" y="29" fill="white" font-size="12" font-family="system-ui, sans-serif">@presence.Name</text>
+                    <text x="16" y="29" fill="white" font-size="12">@presence.Name</text>
                 </g>
             }
         }
diff --git a/src/Utilities/Bink/Demo/Server/Bit.Bink.Demo.Server.csproj b/src/Utilities/Bink/Demo/Server/Bit.Bink.Demo.Server.csproj
index bb32de2b722..782ba06cab3 100644
--- a/src/Utilities/Bink/Demo/Server/Bit.Bink.Demo.Server.csproj
+++ b/src/Utilities/Bink/Demo/Server/Bit.Bink.Demo.Server.csproj
@@ -43,9 +43,11 @@
 
     <!-- Every demo page - each one is a working drawing surface - plus the toolbars and helpers they
          share and the client half of the hosting. The MCP page describes this server rather than the
-         library, and the not-found page teaches nothing about drawing. -->
+         library, and the not-found page teaches nothing about drawing. Layout\ and DocsCatalog.cs are
+         the site chrome every Utilities demo shares (header, docs shell, search palette, footer and
+         the catalog that drives them): an agent asking how to draw must not be handed those. -->
     <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
+                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
       <LogicalName>BinkSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
     </EmbeddedResource>
 
diff --git a/src/Utilities/Bink/Demo/Server/Components/App.razor b/src/Utilities/Bink/Demo/Server/Components/App.razor
index 87f2267d8d6..3bb5e40f847 100644
--- a/src/Utilities/Bink/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bink/Demo/Server/Components/App.razor
@@ -4,12 +4,30 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="description" content="bit Bink (Bit.Bink) - a Blazor-native drawing and ink library: pressure-aware strokes, brushes, erasers, selection, layers, annotations, undo/redo, collaboration and SVG/PNG export, with the engine written in C#." />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Bink (Bit.Bink) - a Blazor-native drawing and ink library: pressure-aware strokes, brushes, erasers, selection, layers, annotations, undo/redo, collaboration and SVG/PNG export, with the engine written in C#." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Bink" />
+    <meta property="og:title" content="Bink - drawing and ink for Blazor" />
+    <meta property="og:description" content="Signature fields, handwriting, whiteboards and annotation on one vector document model - with the ink engine written in C#, not a JavaScript drawing library." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
-    @* The canvas stylesheet (_content/Bit.Bink/bit-bink.css) is not linked here: Bit.Bink's JS
-       initializer adds it to the page by itself. *@
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. The canvas stylesheet (_content/Bit.Bink/bit-bink.css) is not linked here:
+       Bit.Bink's JS initializer adds it to the page by itself. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Bink.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -26,6 +44,7 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bink/Demo/Server/Services/BinkSourceCatalog.cs b/src/Utilities/Bink/Demo/Server/Services/BinkSourceCatalog.cs
index 5218a501b38..024f59c7f48 100644
--- a/src/Utilities/Bink/Demo/Server/Services/BinkSourceCatalog.cs
+++ b/src/Utilities/Bink/Demo/Server/Services/BinkSourceCatalog.cs
@@ -265,7 +265,6 @@ private static string KindOf(string path)
         if (path.StartsWith("Library/", StringComparison.OrdinalIgnoreCase)) return "Library";
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
-            path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -410,7 +409,7 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"///\s*<summary>(?<text>.*?)</summary>", RegexOptions.Singleline)]
     private static partial Regex XmlSummaryRegex();
 
-    [GeneratedRegex(@"<p class=""page-intro"">(?<text>.*?)</p>", RegexOptions.Singleline)]
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p class=""bb-subtitle"">(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex PageIntroRegex();
 
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/app.css b/src/Utilities/Bink/Demo/Server/wwwroot/app.css
index c02ccde71b4..7b51a42ea90 100644
--- a/src/Utilities/Bink/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/app.css
@@ -1,470 +1,2820 @@
-:root {
-    --bg: #f6f7f9;
-    --surface: #ffffff;
-    --surface-2: #f1f3f5;
-    --border: #dfe3e8;
-    --text: #1a1d21;
-    --text-muted: #616a75;
-    --accent: #2563eb;
-    --accent-soft: #dbeafe;
-    --danger: #dc2626;
-    --radius: 10px;
-    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
-    color-scheme: light dark;
-}
-
-@media (prefers-color-scheme: dark) {
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
     :root {
-        --bg: #14161a;
-        --surface: #1c1f24;
-        --surface-2: #24282e;
-        --border: #333940;
-        --text: #e8eaed;
-        --text-muted: #9aa4b0;
-        --accent: #60a5fa;
-        --accent-soft: #1e3a5f;
-        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
     }
 }
 
-* {
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
 }
 
 html,
 body {
     margin: 0;
     padding: 0;
-    height: 100%;
-}
-
-body {
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-    font-size: 15px;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
     line-height: 1.5;
-    color: var(--text);
-    background: var(--bg);
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
 }
 
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
 h1 {
-    font-size: 1.6rem;
-    margin: 0 0 0.25rem;
-    letter-spacing: -0.01em;
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
 }
 
+/* Title3 */
 h2 {
-    font-size: 1.05rem;
-    margin: 1.5rem 0 0.5rem;
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
 }
 
-p {
-    margin: 0 0 0.75rem;
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
 }
 
-code {
-    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-    font-size: 0.875em;
-    background: var(--surface-2);
-    padding: 0.1em 0.35em;
-    border-radius: 4px;
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
 }
 
-pre {
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 0.85rem 1rem;
-    overflow-x: auto;
-    font-size: 0.85rem;
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
 }
 
-pre code {
-    background: none;
-    padding: 0;
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
 }
 
-a {
-    color: var(--accent);
+p {
+    margin: 0 0 .75rem;
 }
 
-/* ---- Layout ---------------------------------------------------------------------------------- */
-
-.app {
-    display: grid;
-    grid-template-columns: 232px 1fr;
-    min-height: 100vh;
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
 }
 
-.sidebar {
-    background: var(--surface);
-    border-right: 1px solid var(--border);
-    padding: 1.25rem 0.85rem;
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    overflow-y: auto;
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
 }
 
-.brand {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    font-weight: 650;
-    font-size: 1.05rem;
-    padding: 0 0.5rem 1rem;
-    letter-spacing: -0.01em;
-    color: var(--text);
-    text-decoration: none;
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
 }
 
-.brand-mark {
-    width: 26px;
-    height: 26px;
-    flex: none;
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
 }
 
-.nav-section {
-    font-size: 0.7rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--text-muted);
-    padding: 0.9rem 0.6rem 0.35rem;
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
 }
 
-.nav-link {
-    display: block;
-    padding: 0.4rem 0.6rem;
-    border-radius: 7px;
-    color: var(--text);
-    text-decoration: none;
-    font-size: 0.9rem;
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
 }
 
-.nav-link:hover {
-    background: var(--surface-2);
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-.nav-link.active {
-    background: var(--accent-soft);
-    color: var(--accent);
-    font-weight: 550;
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
 }
 
-.main {
-    padding: 1.75rem 2rem 3rem;
-    max-width: 1180px;
+main {
     width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
 }
 
-.page-intro {
-    color: var(--text-muted);
-    max-width: 68ch;
-    margin-bottom: 1.25rem;
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
 }
 
-/* ---- Panels and controls ---------------------------------------------------------------------- */
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
 
-.panel {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    overflow: hidden;
+article {
+    width: 100%;
+    min-width: 0;
 }
 
-.toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.5rem 0.6rem;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
 }
 
-.toolbar-group {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
 }
 
-.toolbar-separator {
-    width: 1px;
-    align-self: stretch;
-    background: var(--border);
-    margin: 0.15rem 0.35rem;
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
 }
 
-.toolbar-spacer {
-    flex: 1;
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
 }
 
-.btn {
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.35rem;
-    min-height: 34px;
-    padding: 0.3rem 0.65rem;
-    border: 1px solid var(--border);
-    border-radius: 7px;
-    background: var(--surface);
-    color: var(--text);
-    font: inherit;
-    font-size: 0.85rem;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
     cursor: pointer;
+    text-decoration: none;
     white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.btn:hover:not(:disabled) {
-    background: var(--surface-2);
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
 }
 
+.btn[disabled],
 .btn:disabled {
-    opacity: 0.45;
     cursor: not-allowed;
+    opacity: .45;
 }
 
-.btn:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
 }
 
-.btn.icon {
-    min-width: 34px;
-    padding: 0.3rem;
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
 }
 
-.btn.active {
-    background: var(--accent-soft);
-    border-color: var(--accent);
-    color: var(--accent);
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-.btn.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
 }
 
-.btn.primary:hover:not(:disabled) {
-    filter: brightness(1.08);
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
 }
 
-.btn.danger {
-    color: var(--danger);
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
 }
 
-.swatch {
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    border: 2px solid var(--border);
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
     padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
     cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-.swatch.active {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
 }
 
-.field {
+/* A row of "try it" links under a paragraph. */
+.bb-try {
     display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.82rem;
-    color: var(--text-muted);
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
 }
 
-.field input[type="range"] {
-    width: 96px;
-    accent-color: var(--accent);
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-select,
-input[type="text"],
-input[type="number"] {
-    font: inherit;
-    font-size: 0.85rem;
-    padding: 0.3rem 0.45rem;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    background: var(--surface);
-    color: var(--text);
-    min-height: 34px;
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
 }
 
-.canvas-host {
-    background:
-        linear-gradient(45deg, var(--surface-2) 25%, transparent 25%) 0 0 / 16px 16px,
-        linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%) 0 8px / 16px 16px,
-        linear-gradient(45deg, transparent 75%, var(--surface-2) 75%) 8px -8px / 16px 16px,
-        linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%) -8px 0 / 16px 16px;
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
 }
 
-.statusbar {
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
     display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    padding: 0.45rem 0.7rem;
-    border-top: 1px solid var(--border);
-    background: var(--surface);
-    font-size: 0.78rem;
-    color: var(--text-muted);
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
 }
 
-.statusbar strong {
-    color: var(--text);
-    font-weight: 600;
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
 }
 
-.badge {
-    display: inline-block;
-    padding: 0.05rem 0.4rem;
-    border-radius: 999px;
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    font-size: 0.72rem;
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.badge.on {
-    background: var(--accent-soft);
-    border-color: var(--accent);
-    color: var(--accent);
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
 }
 
-.grid {
+.bb-grid {
     display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
     gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
-.card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1rem 1.1rem;
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.card h3 {
-    margin: 0 0 0.35rem;
-    font-size: 0.95rem;
+.bb-flex > .bb-card {
+    margin-bottom: 0;
 }
 
-.card p {
-    margin: 0;
-    color: var(--text-muted);
-    font-size: 0.87rem;
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
 }
 
-.card a {
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
     text-decoration: none;
 }
 
-.note {
-    border-left: 3px solid var(--accent);
-    background: var(--surface);
-    border-radius: 0 var(--radius) var(--radius) 0;
-    padding: 0.7rem 0.9rem;
-    font-size: 0.87rem;
-    color: var(--text-muted);
-    margin: 1rem 0;
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
-.output {
-    max-height: 240px;
-    overflow: auto;
-    font-size: 0.75rem;
-    white-space: pre-wrap;
-    word-break: break-all;
+.bb-link-list li {
+    display: flex;
+    align-items: center;
 }
 
-table {
-    border-collapse: collapse;
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
     width: 100%;
-    font-size: 0.85rem;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-th,
-td {
-    text-align: left;
-    padding: 0.35rem 0.6rem;
-    border-bottom: 1px solid var(--border);
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
 }
 
-th {
-    font-weight: 600;
-    color: var(--text-muted);
-    font-size: 0.78rem;
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    color: var(--bb-text-soft);
+    margin: 0;
 }
 
-.split {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 1fr;
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
 }
 
-@media (max-width: 900px) {
-    .app {
-        grid-template-columns: 1fr;
-    }
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
 
-    .sidebar {
-        position: static;
-        height: auto;
-        border-right: none;
-        border-bottom: 1px solid var(--border);
-    }
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
 
-    .main {
-        padding: 1.25rem 1rem 2.5rem;
-    }
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
 
-    .split {
-        grid-template-columns: 1fr;
-    }
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
 }
 
-#blazor-error-ui {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    display: none;
-    padding: 0.7rem 1.2rem;
-    background: #fee2e2;
-    color: #7f1d1d;
-    border-top: 1px solid #fca5a5;
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
 }
 
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    float: right;
-    font-weight: 700;
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
 }
 
-/* A keyboard user should not have to tab through eleven navigation links to reach the canvas. */
-.skip-link {
-    position: absolute;
-    left: -9999px;
-    top: 0;
-    z-index: 100;
-    padding: 0.6rem 1rem;
-    background: #111827;
-    color: #ffffff;
-    border-radius: 0 0 6px 0;
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
 }
 
-.skip-link:focus {
-    left: 0;
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
 }
 
-main:focus {
-    outline: none;
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
 }
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/demo.css b/src/Utilities/Bink/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..c65bf7f95dd
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,505 @@
+/* ============================================================================================
+   Bink demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Bink's own - the editor frames the canvases sit in, their
+   toolbars and status bars, the colour swatches and the paper - and it is written against the
+   kit's --bb-* names, so everything around the canvases follows the light/dark theme with no rules
+   of its own for either.
+
+   The paper is the one deliberate exception. A drawing's background and its ink are content: they
+   are saved with the document and exported exactly as drawn, and the palettes offer dark inks
+   chosen for a light page. So every canvas is a white sheet in both themes - the way a word
+   processor keeps its page white in dark mode - and whatever is printed ON the paper (a signature
+   line, ruled lines, a hint) takes the paper's own colours below rather than the theme's.
+   ============================================================================================ */
+
+:root {
+    --bink-paper: #FFFFFF;
+    --bink-paper-text: #5B6673;
+    --bink-paper-line: #8A96A3;
+    --bink-paper-rule: #CFDCEB;
+}
+
+/* ---------- The editor: a live sample whose rows run edge to edge ----------
+
+   Toolbars, the paper and the status bar are rows of one frame, separated by hairlines rather
+   than boxed one by one. The rows carry no background of their own, so the frame's rounded
+   corners are the only corners there are. The frame is a size container: a split editor (two
+   canvases, or a canvas and a panel) stacks when the frame, not the window, gets too narrow. */
+.bb-demo.bink-editor {
+    padding: 0;
+    margin-bottom: 2rem;
+    container: bink-editor / inline-size;
+}
+
+.bink-editor > * + *,
+.bink-peer > * + *,
+.bink-hero-live > * + * {
+    border-top: 1px solid var(--bb-border);
+}
+
+/* A row of controls. The kit's toolbar is the arrangement; this is the band it sits in. */
+.bb-toolbar.bink-toolbar {
+    min-height: 3rem;
+    margin: 0;
+    padding: .5rem .75rem;
+    gap: .5rem .625rem;
+}
+
+/* Buttons that belong together - history, view, layers, file - kept on one line where they fit. */
+.bink-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .375rem;
+}
+
+/* The trailing group keeps to the end of the toolbar even when it wraps onto a line of its own,
+   where the spacer before it is left behind at the end of the line above. */
+.bink-toolbar > .bb-spacer + .bink-group {
+    margin-inline-start: auto;
+}
+
+/* The divider between groups. */
+.bink-sep {
+    width: 1px;
+    align-self: stretch;
+    margin-block: .25rem;
+    background: var(--bb-border);
+}
+
+/* An inline labelled control: the label, the control, and its value read back. */
+.bink-field {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+    white-space: nowrap;
+}
+
+.bink-field input[type="range"] {
+    width: 6.5rem;
+}
+
+.bink-field input[type="text"] {
+    width: 14rem;
+    max-width: 50vw;
+}
+
+.bink-field-value {
+    min-width: 3ch;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+}
+
+.bink-field-value--wide {
+    min-width: 6ch;
+}
+
+/* A line of text in a toolbar: an instruction, or what the last action did. */
+.bink-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    margin: 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.bink-hint strong {
+    color: var(--bb-text);
+}
+
+/* A destructive action - Clear, Delete - is an ordinary button whose label says so in the danger
+   colour. */
+.btn.bink-danger,
+.bb-icon-btn.bink-danger {
+    color: var(--bb-danger-text);
+}
+
+.btn.bink-danger:hover:not(:disabled),
+.bb-icon-btn.bink-danger:hover {
+    color: var(--bb-danger-text);
+    background: var(--bb-danger-soft);
+    border-color: color-mix(in srgb, var(--bb-danger) 45%, transparent);
+}
+
+/* A one-character button (zoom in, zoom out) kept square. */
+.btn.bink-btn-square {
+    min-width: 2rem;
+    padding-inline: .5rem;
+}
+
+/* The file pickers are labels styled as buttons; the input itself stays out of sight. */
+.bink-file-input {
+    display: none;
+}
+
+/* ---------- Colour swatches (Shared/ColorSwatches.razor) ----------
+
+   A swatch is a dab of ink on the paper: the fill is the ink itself, the gap around it is the
+   paper's white, and the hairline outside that comes from the theme. That is what keeps a black
+   ink readable on a dark toolbar - as it will be on the page - and a pale highlighter readable on
+   a light one. The selected swatch takes the brand ring. */
+.bink-swatches {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .375rem;
+}
+
+.bink-swatch {
+    flex: none;
+    width: 1.625rem;
+    height: 1.625rem;
+    padding: 0;
+    border: 4px solid var(--bink-paper);
+    border-radius: var(--bb-radius-pill);
+    box-shadow: 0 0 0 1px var(--bb-border-strong);
+    cursor: pointer;
+    transition: box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bink-swatch:hover {
+    box-shadow: 0 0 0 1px var(--bb-text-soft);
+}
+
+.bink-swatch[aria-pressed="true"],
+.bink-swatch[aria-pressed="true"]:hover {
+    box-shadow: 0 0 0 2px var(--bb-primary);
+}
+
+/* The kit's focus ring is an outline plus a ring shadow; the shadow here is the swatch's own
+   state, so only the outline is taken - pushed clear of it. */
+.bink-swatch:focus-visible {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 1px var(--bb-border-strong);
+}
+
+.bink-swatch[aria-pressed="true"]:focus-visible {
+    box-shadow: 0 0 0 2px var(--bb-primary);
+}
+
+/* ---------- The paper ---------- */
+
+/* The row a canvas sits in. The canvas paints its document's background over all of it once it
+   is attached; until then (the prerendered page) this is what shows, so there is no flash of the
+   theme's colour where the paper is about to be. It is a stacking context of its own, so whatever
+   is printed over the canvas (the signature line, the rules, a hint) layers with the canvas's own
+   layers and nothing else. */
+.bink-surface {
+    position: relative;
+    isolation: isolate;
+    background: var(--bink-paper);
+}
+
+/* A hint printed on an empty sheet. It never takes the pointer. */
+.bink-surface-hint {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+    pointer-events: none;
+    color: var(--bink-paper-text);
+    font-size: var(--fl-font-size-200);
+    text-align: center;
+}
+
+/* The signature line and its caption, printed on the form (Pages/Signature.razor). */
+.bink-signature-line {
+    position: absolute;
+    inset-inline: 24px;
+    bottom: 44px;
+    border-bottom: 1px solid var(--bink-paper-line);
+    pointer-events: none;
+}
+
+.bink-signature-caption {
+    position: absolute;
+    inset-inline-start: 24px;
+    bottom: 22px;
+    color: var(--bink-paper-text);
+    font-size: .8125rem;
+    pointer-events: none;
+}
+
+/* Ruled paper (Pages/Handwriting.razor). The rules are printed over the sheet rather than drawn
+   into the document - they are a writing aid, not part of the notes - and multiplied onto it, so
+   white paper shows them and dark ink is left as dark as it was. */
+.bink-ruled::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image: repeating-linear-gradient(to bottom,
+        transparent 0, transparent 35px, var(--bink-paper-rule) 35px, var(--bink-paper-rule) 36px);
+    background-position: 0 12px;
+    mix-blend-mode: multiply;
+}
+
+/* A rendering of a stored drawing: exports have a transparent background and dark ink, so they
+   are shown on paper in either theme. */
+.bink-paper {
+    padding: 1rem;
+    background: var(--bink-paper);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.bink-paper svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+/* The canvas's inline text editor is a <textarea>, and the kit dresses every textarea as a form
+   field - a minimum height, padding, a moving underline on focus. Sized and placed by the canvas
+   over the text it edits, it has to stay exactly the box the library draws, so it is handed back. */
+.bit-bink-canvas > textarea.bit-bink-text-editor,
+.bit-bink-canvas > textarea.bit-bink-text-editor:hover,
+.bit-bink-canvas > textarea.bit-bink-text-editor:focus-visible {
+    min-height: 0;
+    max-width: none;
+    padding: 0;
+    border: 1px solid Highlight;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    outline: none;
+    transition: none;
+}
+
+/* ---------- Status bar (Shared/CanvasStatus.razor) ---------- */
+
+.bink-status {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .375rem 1rem;
+    padding: .5rem .875rem;
+    font-size: var(--fl-font-size-100);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+}
+
+.bink-status strong {
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+}
+
+/* A capability the canvas does not have: the kit's badge, untinted. */
+.bb-badge.bink-badge-off {
+    background: var(--bb-surface-2);
+    color: var(--bb-text-muted);
+}
+
+/* ---------- Split editors ---------- */
+
+/* Two panes side by side - two participants, or a drawing and what it was saved as. */
+.bink-pair {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bink-peer {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.bink-peer + .bink-peer {
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The body of a pane that is not a canvas. */
+.bink-pane {
+    flex: 1;
+    padding: 1rem;
+}
+
+.bink-pane > .bb-params,
+.bink-pane > .bb-empty {
+    margin: 0;
+}
+
+/* A participant's name and colour (Pages/Collaboration.razor). The colour is theirs, so it is a
+   dot beside the name rather than the colour of the name. */
+.bink-participant {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bink-participant-dot {
+    flex: none;
+    width: .625rem;
+    height: .625rem;
+    border-radius: var(--bb-radius-pill);
+}
+
+/* The other participants' cursors and live strokes (Shared/PresenceOverlay.razor). */
+.bink-presence {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    pointer-events: none;
+    font-family: var(--bb-font-sans);
+}
+
+/* ---------- Document review (Pages/DocumentAnnotation.razor) ---------- */
+
+.bink-review {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
+}
+
+.bink-review-panel {
+    min-width: 0;
+    max-height: 620px;
+    overflow: auto;
+    padding: 1rem;
+    border-inline-start: 1px solid var(--bb-border);
+    scrollbar-width: thin;
+}
+
+.bink-panel-title {
+    margin: 0 0 .75rem;
+    font-size: var(--fl-font-size-300);
+}
+
+.bink-annotations {
+    display: grid;
+    gap: .5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.bink-annotation {
+    padding: .625rem .75rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bink-annotation.is-selected {
+    border-color: var(--bb-primary);
+    box-shadow: 0 0 0 1px var(--bb-primary);
+}
+
+.bink-annotation-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: .5rem;
+}
+
+.bink-annotation-kind {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.bink-annotation-actions {
+    display: flex;
+    gap: .125rem;
+}
+
+.bink-annotation-text {
+    margin-top: .25rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+    overflow-wrap: anywhere;
+}
+
+.bink-annotation textarea {
+    margin-top: .375rem;
+}
+
+/* ---------- Readouts ---------- */
+
+/* A serialized document or a message as it was sent: a code block that scrolls and wraps rather
+   than growing the page by the length of a stroke's point data. */
+.bb-code.bink-output {
+    max-height: 16rem;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+/* The editable stored document (Pages/SerializationPage.razor). */
+.bink-json {
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.5;
+}
+
+/* What a measurement covers, under its number (Pages/Performance.razor). */
+.bink-stat-detail {
+    font-size: var(--fl-font-size-100);
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+}
+
+/* ---------- The landing page's live canvas ---------- */
+
+.bink-hero-live {
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+/* ---------- Narrow editors ---------- */
+
+@container bink-editor (max-width: 44rem) {
+    /* Once a toolbar wraps onto several lines a divider ends up at the end of one of them, dividing
+       nothing; the groups' own spacing separates them instead. */
+    .bink-sep {
+        display: none;
+    }
+
+    .bink-pair,
+    .bink-review {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bink-peer + .bink-peer {
+        border-inline-start: 0;
+        border-top: 1px solid var(--bb-border);
+    }
+
+    .bink-review-panel {
+        max-height: none;
+        border-inline-start: 0;
+        border-top: 1px solid var(--bb-border);
+    }
+}
+
+/* ---------- Forced colors ----------
+
+   The swatches and the participant dots ARE their colour - repainted with the system palette they
+   would all look the same - so they keep it, inside a ring in the system's own colours. */
+@media (forced-colors: active) {
+    .bink-swatch,
+    .bink-participant-dot {
+        forced-color-adjust: none;
+    }
+
+    .bink-swatch {
+        border-color: Canvas;
+        box-shadow: 0 0 0 1px CanvasText;
+    }
+
+    .bink-swatch[aria-pressed="true"] {
+        box-shadow: 0 0 0 3px Highlight;
+    }
+}
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Bink/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/site.js b/src/Utilities/Bink/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bink/Demo/Server/wwwroot/theme.js b/src/Utilities/Bink/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bink/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DemoRegressionTests.cs b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DemoRegressionTests.cs
index 5a9919018f8..42d89b56aeb 100644
--- a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DemoRegressionTests.cs
+++ b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DemoRegressionTests.cs
@@ -11,10 +11,10 @@ namespace Bit.Bink.Tests.E2E;
 [TestClass]
 public sealed class DemoRegressionTests : BinkTest
 {
-    private static Task<string> StatusAsync(IPage page, int index = 0) => page.Locator(".statusbar").Nth(index).InnerTextAsync();
+    private static Task<string> StatusAsync(IPage page, int index = 0) => page.Locator(".bink-status").Nth(index).InnerTextAsync();
 
     private static async Task<int> ElementCountAsync(IPage page, int index = 0)
-        => int.Parse(await page.Locator(".statusbar").Nth(index).Locator("strong").First.InnerTextAsync(), CultureInfo.InvariantCulture);
+        => int.Parse(await page.Locator(".bink-status").Nth(index).Locator("strong").First.InnerTextAsync(), CultureInfo.InvariantCulture);
 
     private static ILocator Button(IPage page, string name)
         => page.GetByRole(AriaRole.Button, new PageGetByRoleOptions { Name = name, Exact = true });
@@ -91,7 +91,7 @@ public async Task Undoing_a_highlight_removes_it_in_one_step()
         await Button(page, "Undo").ClickAsync();
         await page.WaitForTimeoutAsync(250);
         Assert.AreEqual(page0, await ElementCountAsync(page), "one undo did not remove the highlight");
-        Assert.AreEqual(0, await page.Locator("li.card").CountAsync(), "the annotation list still shows the highlight");
+        Assert.AreEqual(0, await page.Locator("li.bink-annotation").CountAsync(), "the annotation list still shows the highlight");
     }
 
     [TestMethod]
@@ -133,6 +133,6 @@ public async Task Collaborators_converge_after_one_of_them_was_offline()
         // Sam missed Alex's stroke while offline; it has to arrive on reconnect, not be lost.
         Assert.AreEqual(2, await ElementCountAsync(page, 0), "Alex does not have both strokes");
         Assert.AreEqual(2, await ElementCountAsync(page, 1), "Sam does not have both strokes");
-        Assert.AreEqual("replicas identical", await page.Locator(".badge[role=status]").InnerTextAsync());
+        Assert.AreEqual("replicas identical", await page.Locator(".bb-badge[role=status]").InnerTextAsync());
     }
 }
diff --git a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DisplayAndDemoTests.cs b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DisplayAndDemoTests.cs
index 8318498a51d..a4b4afb92fa 100644
--- a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DisplayAndDemoTests.cs
+++ b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DisplayAndDemoTests.cs
@@ -197,6 +197,7 @@ public async Task Leaving_and_returning_to_a_page_does_not_leave_surfaces_behind
 
     [TestMethod]
     [DataRow("/")]
+    [DataRow("/getting-started")]
     [DataRow("/signature")]
     [DataRow("/handwriting")]
     [DataRow("/whiteboard")]
@@ -225,7 +226,9 @@ public async Task Every_demo_page_loads_without_console_errors(string path)
         await page.WaitForTimeoutAsync(700);
 
         // Every enabled button on the page must run without throwing: a dead or broken control is a demo bug.
-        var buttons = page.Locator("button:enabled:visible");
+        // The page is what <main> holds; the site header and footer around it are the same on every page, and
+        // counting their buttons would only push the page's own past the cap.
+        var buttons = page.Locator("main button:enabled:visible");
         int count = Math.Min(await buttons.CountAsync(), 30);
         for (int i = 0; i < count; i++)
         {
@@ -253,7 +256,7 @@ public async Task The_canvas_still_draws_after_every_toolbar_control_has_been_us
     {
         var page = await OpenAsync("/whiteboard");
 
-        var buttons = page.Locator(".toolbar button:enabled:visible");
+        var buttons = page.Locator(".bink-toolbar button:enabled:visible");
         int count = await buttons.CountAsync();
         TestContext.WriteLine($"toolbar buttons: {count}");
         Assert.IsTrue(count > 5, "the whiteboard toolbar should offer more than a handful of controls");
diff --git a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DrawingTests.cs b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DrawingTests.cs
index 33644445617..81d8c09df71 100644
--- a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DrawingTests.cs
+++ b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/DrawingTests.cs
@@ -234,7 +234,7 @@ public async Task WebAssembly_uses_the_zero_copy_render_path()
 
         // The demo reports which path the canvas took. In WebAssembly the command buffer is handed to JavaScript
         // as a view over managed memory; if that ever silently fell back to JSON interop, this is what notices.
-        await Expect(page.Locator(".statusbar .badge.on", new() { HasText = "zero-copy render" })).ToBeVisibleAsync();
+        await Expect(page.Locator(".bink-status .bb-badge-success", new() { HasText = "zero-copy render" })).ToBeVisibleAsync();
     }
 
     [TestMethod]
diff --git a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/Infrastructure/BinkTest.cs b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/Infrastructure/BinkTest.cs
index 5a726f0e3ab..e3d11838902 100644
--- a/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/Infrastructure/BinkTest.cs
+++ b/src/Utilities/Bink/Tests/Bit.Bink.Tests.E2E/Infrastructure/BinkTest.cs
@@ -79,7 +79,7 @@ protected static async Task WaitForCanvasAsync(IPage page)
         await page.WaitForFunctionAsync(
             """
             () => {
-              if (document.querySelector('.app')?.dataset.interactive !== 'true') return false;
+              if (document.querySelector('.page')?.dataset.interactive !== 'true') return false;
               const canvases = [...document.querySelectorAll('canvas[data-bink-layer="document"]')];
               return canvases.length > 0 && canvases.every(c => c.width > 0 && c.style.width !== '');
             }
diff --git a/src/Utilities/Bink/Tests/Bit.Bink.Tests.Mcp/McpToolTests.cs b/src/Utilities/Bink/Tests/Bit.Bink.Tests.Mcp/McpToolTests.cs
index 5e688541dde..0fab90f739e 100644
--- a/src/Utilities/Bink/Tests/Bit.Bink.Tests.Mcp/McpToolTests.cs
+++ b/src/Utilities/Bink/Tests/Bit.Bink.Tests.Mcp/McpToolTests.cs
@@ -260,6 +260,10 @@ public async Task The_source_index_lists_the_demo_pages_and_the_stylesheet_but_n
         Assert.DoesNotContain("McpServer.razor", index);
         Assert.DoesNotContain("NotFound.razor", index);
         Assert.DoesNotContain("Error.razor", index);
+        // The shared site kit - header, docs shell, search palette, footer and the catalog driving them -
+        // is the demo site's chrome, not an example of drawing with Bink.
+        Assert.DoesNotContain("Demo/Client/Layout/", index);
+        Assert.DoesNotContain("DocsCatalog.cs", index);
     }
 
     [TestMethod]
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/AppInterop.cs b/src/Utilities/BlazeDb/Demo/Client/Components/AppInterop.cs
deleted file mode 100644
index 2fec1fd5313..00000000000
--- a/src/Utilities/BlazeDb/Demo/Client/Components/AppInterop.cs
+++ /dev/null
@@ -1,67 +0,0 @@
-using Microsoft.JSInterop;
-
-namespace Bit.BlazeDb.Demo.Client.Components;
-
-/// <summary>Thin wrapper over the demo's own ES module in <c>wwwroot/js/app.js</c>.</summary>
-public sealed class AppInterop(IJSRuntime js) : IAsyncDisposable
-{
-    private IJSObjectReference? _module;
-
-    private async ValueTask<IJSObjectReference> ModuleAsync() =>
-        _module ??= await js.InvokeAsync<IJSObjectReference>("import", "./js/app.js");
-
-    public async ValueTask<string> GetThemeAsync()
-    {
-        try
-        {
-            var module = await ModuleAsync();
-            return await module.InvokeAsync<string>("getTheme");
-        }
-        catch (JSException)
-        {
-            return "dark";
-        }
-    }
-
-    public async ValueTask SetThemeAsync(string theme)
-    {
-        try
-        {
-            var module = await ModuleAsync();
-            await module.InvokeVoidAsync("setTheme", theme);
-        }
-        catch (JSException)
-        {
-            // A missing module must never break navigation.
-        }
-    }
-
-    public async ValueTask<bool> CopyAsync(string text)
-    {
-        try
-        {
-            var module = await ModuleAsync();
-            return await module.InvokeAsync<bool>("copyText", text);
-        }
-        catch (JSException)
-        {
-            return false;
-        }
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        if (_module is not null)
-        {
-            try
-            {
-                await _module.DisposeAsync();
-            }
-            catch (JSDisconnectedException)
-            {
-                // Nothing to release.
-            }
-            _module = null;
-        }
-    }
-}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/Callout.razor b/src/Utilities/BlazeDb/Demo/Client/Components/Callout.razor
index 6b9dcdbaf23..d9a46180ae4 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/Callout.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/Callout.razor
@@ -1,32 +1,21 @@
-<div class="callout @Tone @Class">
-    <Icon Name="@ResolvedIcon" />
-    <div class="callout-body">
-        @if (!string.IsNullOrWhiteSpace(Title))
-        {
-            <strong>@Title</strong>@(" ")
-        }
-        @ChildContent
-    </div>
+@* A note in the flow of a page - the site kit's .bb-note (Fluent's MessageBar), tinted by its tone.
+   The title runs into the text as its first, bold words. *@
+
+<div class="@Tones.Note(Tone) @Class">
+    @if (!string.IsNullOrWhiteSpace(Title))
+    {
+        <strong>@Title</strong>@(" ")
+    }
+    @ChildContent
 </div>
 
 @code {
     /// <summary>One of <c>info</c>, <c>ok</c>, <c>warn</c>, <c>err</c> or <c>accent</c>.</summary>
     [Parameter] public string Tone { get; set; } = "info";
 
-    [Parameter] public string? IconName { get; set; }
-
     [Parameter] public string? Title { get; set; }
 
     [Parameter] public string? Class { get; set; }
 
     [Parameter] public RenderFragment? ChildContent { get; set; }
-
-    private string ResolvedIcon => IconName ?? Tone switch
-    {
-        "ok" => "check",
-        "warn" => "alert",
-        "err" => "alert",
-        "accent" => "bolt",
-        _ => "info",
-    };
 }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/CodeBlock.razor b/src/Utilities/BlazeDb/Demo/Client/Components/CodeBlock.razor
index cd689164a85..f049cf6e3fb 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/CodeBlock.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/CodeBlock.razor
@@ -1,28 +1,17 @@
-@inject AppInterop Interop
+@* A code sample - the site kit's pre.bb-code, which site.js gives a copy button - coloured by the
+   demo's own highlighter (CodeHighlighter.cs; its token classes are mapped onto the kit's code colours
+   in demo.css), with an optional file name above it. *@
 
-<div class="code @(Wrap ? "wrap" : null) @Class">
-    @if (ShowHeader)
+<div class="bd-code @Class">
+    @if (!string.IsNullOrWhiteSpace(Title))
     {
-        <div class="code-head">
-            @if (!string.IsNullOrWhiteSpace(Title))
-            {
-                <span class="code-title">@Title</span>
-            }
-            <span class="code-lang">@LanguageLabel</span>
-            @if (AllowCopy)
-            {
-                <button type="button" class="icon-btn" title="@(_copied ? "Copied" : "Copy to clipboard")" @onclick="CopyAsync">
-                    <Icon Name="@(_copied ? "check" : "copy")" />
-                </button>
-            }
-        </div>
+        <p class="bb-source-file">@Title</p>
     }
-    <pre><code>@_html</code></pre>
+    <pre class="bb-code @(Wrap ? "bd-wrap" : null)"><code>@_html</code></pre>
 </div>
 
 @code {
     private MarkupString _html;
-    private bool _copied;
     private string? _rendered;
 
     [Parameter, EditorRequired] public string Code { get; set; } = "";
@@ -31,24 +20,11 @@
 
     [Parameter] public string? Title { get; set; }
 
-    [Parameter] public bool AllowCopy { get; set; } = true;
-
+    /// <summary>Wraps long lines instead of scrolling them - for generated calls whose length changes as you click.</summary>
     [Parameter] public bool Wrap { get; set; }
 
-    [Parameter] public bool ShowHeader { get; set; } = true;
-
     [Parameter] public string? Class { get; set; }
 
-    private string LanguageLabel => Language.ToLowerInvariant() switch
-    {
-        "csharp" or "cs" or "c#" => "C#",
-        "razor" => "Razor",
-        "xml" => "XML",
-        "json" => "JSON",
-        "bash" or "shell" => "Shell",
-        _ => Language,
-    };
-
     protected override void OnParametersSet()
     {
         var source = Code ?? "";
@@ -59,17 +35,6 @@
 
         _rendered = source + "\u0000" + Language;
         _html = (MarkupString)CodeHighlighter.ToHtml(Dedent(source), Language);
-        _copied = false;
-    }
-
-    private async Task CopyAsync()
-    {
-        _copied = await Interop.CopyAsync(Dedent(Code ?? ""));
-        if (_copied)
-        {
-            await Task.Delay(1400);
-            _copied = false;
-        }
     }
 
     /// <summary>Strips the leading indentation shared by every line.</summary>
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/Icon.razor b/src/Utilities/BlazeDb/Demo/Client/Components/Icon.razor
index 493203c746b..879989842d0 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/Icon.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/Icon.razor
@@ -1,66 +1,58 @@
-@* Inline SVG icon set. No icon font, no sprite sheet, no network request. *@
-
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="@StrokeWidth"
-     stroke-linecap="round" stroke-linejoin="round" width="@Size" height="@Size" aria-hidden="true">@Body</svg>
-
-@code {
-    [Parameter, EditorRequired] public string Name { get; set; } = "dot";
-
-    [Parameter] public int? Size { get; set; }
-
-    [Parameter] public string StrokeWidth { get; set; } = "1.7";
-
-    private MarkupString Body =>
-        (MarkupString)(Paths.TryGetValue(Name, out var path) ? path : Paths["dot"]);
-
-    private static readonly Dictionary<string, string> Paths = new(StringComparer.OrdinalIgnoreCase)
-    {
-        ["dot"] = """<circle cx="12" cy="12" r="3.5" />""",
-        ["flame"] = """<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-.5-2-1-3-1.1-2.1-.2-4 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.2.4-2.3 1-3a2.5 2.5 0 0 0 2.5 2.5Z" />""",
-        ["overview"] = """<path d="M3 12h4l3 8 4-16 3 8h4" />""",
-        ["database"] = """<ellipse cx="12" cy="5.5" rx="8" ry="3" /><path d="M20 5.5v6c0 1.66-3.58 3-8 3s-8-1.34-8-3v-6" /><path d="M20 11.5v7c0 1.66-3.58 3-8 3s-8-1.34-8-3v-7" />""",
-        ["list"] = """<path d="M8 6h13M8 12h13M8 18h13" /><path d="M3.5 6h.01M3.5 12h.01M3.5 18h.01" />""",
-        ["schema"] = """<path d="m12 2.5 9 4.5-9 4.5-9-4.5 9-4.5Z" /><path d="m3 12 9 4.5 9-4.5" /><path d="m3 16.5 9 4.5 9-4.5" />""",
-        ["index"] = """<path d="M4 9h16M4 15h16M10 3.5 8 20.5M16.5 3.5l-2 17" />""",
-        ["query"] = """<circle cx="10.5" cy="10.5" r="6.5" /><path d="m20.5 20.5-5.4-5.4" />""",
-        ["txn"] = """<circle cx="6" cy="5.5" r="2.5" /><circle cx="6" cy="18.5" r="2.5" /><path d="M6 8v8" /><circle cx="18" cy="5.5" r="2.5" /><path d="M18 8v2a4 4 0 0 1-4 4H9" />""",
-        ["shield"] = """<path d="M12 2.5 4.5 5.4v6c0 4.7 3.2 8.9 7.5 10.1 4.3-1.2 7.5-5.4 7.5-10.1v-6L12 2.5Z" /><path d="m9 12 2.2 2.2L15.5 10" />""",
-        ["disk"] = """<path d="M2.5 13h19" /><path d="M5 5h14l2.5 8v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5L5 5Z" /><path d="M6.5 17h.01M10 17h.01" />""",
-        ["binary"] = """<rect x="3.5" y="3.5" width="6" height="7.5" rx="1.4" /><rect x="14.5" y="13" width="6" height="7.5" rx="1.4" /><path d="M14.5 3.5h3V11M3.5 13h3v7.5" />""",
-        ["alert"] = """<path d="M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4.5M12 17.2h.01" />""",
-        ["gauge"] = """<path d="M3.5 18.5a9 9 0 1 1 17 0" /><path d="m12 14 3.8-4.4" /><circle cx="12" cy="15" r="1.6" />""",
-        ["map"] = """<path d="M9 3.5 3 5.5v15l6-2 6 2 6-2v-15l-6 2-6-2Z" /><path d="M9 3.5v15M15 5.5v15" />""",
-        ["sun"] = """<circle cx="12" cy="12" r="4" /><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.1 5.1l1.4 1.4M17.5 17.5l1.4 1.4M5.1 18.9l1.4-1.4M17.5 6.5l1.4-1.4" />""",
-        ["moon"] = """<path d="M20.5 13.2A8.5 8.5 0 1 1 10.8 3.5a6.6 6.6 0 0 0 9.7 9.7Z" />""",
-        ["copy"] = """<rect x="9" y="9" width="11.5" height="11.5" rx="2" /><path d="M5.5 15H4.5a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2H12a2 2 0 0 1 2 2v1" />""",
-        ["check"] = """<path d="m20 6.5-11 11-5-5" />""",
-        ["play"] = """<path d="M7 4.5 19.5 12 7 19.5V4.5Z" />""",
-        ["plus"] = """<path d="M12 5v14M5 12h14" />""",
-        ["trash"] = """<path d="M3.5 6.5h17M9 6.5V4h6v2.5" /><path d="m5.5 6.5 1 13.5h11l1-13.5" /><path d="M10.5 10.5v6M13.5 10.5v6" />""",
-        ["refresh"] = """<path d="M20.5 12a8.5 8.5 0 1 1-2.8-6.3" /><path d="M20.5 3.5v6h-6" />""",
-        ["bolt"] = """<path d="M13.5 2.5 4 14h6.5l-1 7.5L19.5 10H13l.5-7.5Z" />""",
-        ["clock"] = """<circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3.5 2" />""",
-        ["file"] = """<path d="M14 2.5H7a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7.5l-5-5Z" /><path d="M14 2.5v5h5" />""",
-        ["code"] = """<path d="m8.5 6-6 6 6 6M15.5 6l6 6-6 6" />""",
-        ["chevron"] = """<path d="m9.5 5.5 6.5 6.5-6.5 6.5" />""",
-        ["arrow-right"] = """<path d="M4.5 12h15M13.5 6l6 6-6 6" />""",
-        ["arrow-down"] = """<path d="M12 4.5v15M6 13.5l6 6 6-6" />""",
-        ["menu"] = """<path d="M3.5 6.5h17M3.5 12h17M3.5 17.5h17" />""",
-        ["close"] = """<path d="m6 6 12 12M18 6 6 18" />""",
-        ["external"] = """<path d="M14 3.5h6.5V10" /><path d="M20.5 3.5 11 13" /><path d="M18.5 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.5a2 2 0 0 1 2-2h5" />""",
-        ["info"] = """<circle cx="12" cy="12" r="8.5" /><path d="M12 11v5.5M12 7.8h.01" />""",
-        ["search"] = """<circle cx="10.5" cy="10.5" r="6.5" /><path d="m20.5 20.5-5.4-5.4" />""",
-        ["filter"] = """<path d="M3.5 5.5h17l-6.5 8v6l-4-2v-4l-6.5-8Z" />""",
-        ["sort"] = """<path d="M7 4.5v15M7 19.5 4 16.5M7 19.5l3-3" /><path d="M17 19.5v-15M17 4.5l-3 3M17 4.5l3 3" />""",
-        ["layers"] = """<path d="m12 2.5 9 4.5-9 4.5-9-4.5 9-4.5Z" /><path d="m3 12 9 4.5 9-4.5" />""",
-        ["lock"] = """<rect x="4.5" y="10.5" width="15" height="10" rx="2" /><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5" />""",
-        ["unlock"] = """<rect x="4.5" y="10.5" width="15" height="10" rx="2" /><path d="M8 10.5V7a4 4 0 0 1 7.5-2" />""",
-        ["cpu"] = """<rect x="6.5" y="6.5" width="11" height="11" rx="2" /><path d="M10 2.5v4M14 2.5v4M10 17.5v4M14 17.5v4M2.5 10h4M2.5 14h4M17.5 10h4M17.5 14h4" />""",
-        ["key"] = """<circle cx="8" cy="16" r="4" /><path d="m10.8 13.2 8.7-8.7M17 7l2.5 2.5M14.5 9.5 17 12" />""",
-        ["tag"] = """<path d="M12.6 3.5H20v7.4l-9 9-7.4-7.4 9-9Z" /><path d="M16.5 7.5h.01" />""",
-        ["rocket"] = """<path d="M5 14.5c-1.5 1.5-2 6-2 6s4.5-.5 6-2c.9-.9.9-2.4 0-3.3a2.3 2.3 0 0 0-4 0" /><path d="M9.5 16 8 14.5C8 8.5 12 3.5 20.5 3.5c0 8.5-5 12.5-11 12.5Z" /><path d="M13.5 10.5h.01" />""",
-        ["download"] = """<path d="M12 3.5v12M7 10.5l5 5 5-5" /><path d="M3.5 20.5h17" />""",
-        ["history"] = """<path d="M3.5 12a8.5 8.5 0 1 0 2.8-6.3" /><path d="M3.5 3.5v6h6" /><path d="M12 8v4.5l3 1.8" />""",
-        ["stop"] = """<rect x="5.5" y="5.5" width="13" height="13" rx="2" />""",
-    };
-}
+@* Inline SVG icon set. No icon font, no sprite sheet, no network request. *@
+
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="@StrokeWidth"
+     stroke-linecap="round" stroke-linejoin="round" width="@Size" height="@Size" aria-hidden="true">@Body</svg>
+
+@code {
+    [Parameter, EditorRequired] public string Name { get; set; } = "dot";
+
+    [Parameter] public int? Size { get; set; }
+
+    [Parameter] public string StrokeWidth { get; set; } = "1.7";
+
+    private MarkupString Body =>
+        (MarkupString)(Paths.TryGetValue(Name, out var path) ? path : Paths["dot"]);
+
+    private static readonly Dictionary<string, string> Paths = new(StringComparer.OrdinalIgnoreCase)
+    {
+        ["dot"] = """<circle cx="12" cy="12" r="3.5" />""",


+        ["database"] = """<ellipse cx="12" cy="5.5" rx="8" ry="3" /><path d="M20 5.5v6c0 1.66-3.58 3-8 3s-8-1.34-8-3v-6" /><path d="M20 11.5v7c0 1.66-3.58 3-8 3s-8-1.34-8-3v-7" />""",
+        ["list"] = """<path d="M8 6h13M8 12h13M8 18h13" /><path d="M3.5 6h.01M3.5 12h.01M3.5 18h.01" />""",
+        ["schema"] = """<path d="m12 2.5 9 4.5-9 4.5-9-4.5 9-4.5Z" /><path d="m3 12 9 4.5 9-4.5" /><path d="m3 16.5 9 4.5 9-4.5" />""",
+        ["index"] = """<path d="M4 9h16M4 15h16M10 3.5 8 20.5M16.5 3.5l-2 17" />""",
+        ["query"] = """<circle cx="10.5" cy="10.5" r="6.5" /><path d="m20.5 20.5-5.4-5.4" />""",
+        ["txn"] = """<circle cx="6" cy="5.5" r="2.5" /><circle cx="6" cy="18.5" r="2.5" /><path d="M6 8v8" /><circle cx="18" cy="5.5" r="2.5" /><path d="M18 8v2a4 4 0 0 1-4 4H9" />""",
+        ["shield"] = """<path d="M12 2.5 4.5 5.4v6c0 4.7 3.2 8.9 7.5 10.1 4.3-1.2 7.5-5.4 7.5-10.1v-6L12 2.5Z" /><path d="m9 12 2.2 2.2L15.5 10" />""",
+        ["disk"] = """<path d="M2.5 13h19" /><path d="M5 5h14l2.5 8v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5L5 5Z" /><path d="M6.5 17h.01M10 17h.01" />""",
+        ["binary"] = """<rect x="3.5" y="3.5" width="6" height="7.5" rx="1.4" /><rect x="14.5" y="13" width="6" height="7.5" rx="1.4" /><path d="M14.5 3.5h3V11M3.5 13h3v7.5" />""",
+        ["alert"] = """<path d="M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4.5M12 17.2h.01" />""",
+        ["gauge"] = """<path d="M3.5 18.5a9 9 0 1 1 17 0" /><path d="m12 14 3.8-4.4" /><circle cx="12" cy="15" r="1.6" />""",
+        ["map"] = """<path d="M9 3.5 3 5.5v15l6-2 6 2 6-2v-15l-6 2-6-2Z" /><path d="M9 3.5v15M15 5.5v15" />""",



+        ["check"] = """<path d="m20 6.5-11 11-5-5" />""",
+        ["play"] = """<path d="M7 4.5 19.5 12 7 19.5V4.5Z" />""",
+        ["plus"] = """<path d="M12 5v14M5 12h14" />""",
+        ["trash"] = """<path d="M3.5 6.5h17M9 6.5V4h6v2.5" /><path d="m5.5 6.5 1 13.5h11l1-13.5" /><path d="M10.5 10.5v6M13.5 10.5v6" />""",
+        ["refresh"] = """<path d="M20.5 12a8.5 8.5 0 1 1-2.8-6.3" /><path d="M20.5 3.5v6h-6" />""",
+        ["bolt"] = """<path d="M13.5 2.5 4 14h6.5l-1 7.5L19.5 10H13l.5-7.5Z" />""",
+        ["clock"] = """<circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3.5 2" />""",
+        ["file"] = """<path d="M14 2.5H7a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7.5l-5-5Z" /><path d="M14 2.5v5h5" />""",
+        ["code"] = """<path d="m8.5 6-6 6 6 6M15.5 6l6 6-6 6" />""",


+        ["arrow-down"] = """<path d="M12 4.5v15M6 13.5l6 6 6-6" />""",

+        ["close"] = """<path d="m6 6 12 12M18 6 6 18" />""",
+        ["external"] = """<path d="M14 3.5h6.5V10" /><path d="M20.5 3.5 11 13" /><path d="M18.5 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.5a2 2 0 0 1 2-2h5" />""",
+        ["info"] = """<circle cx="12" cy="12" r="8.5" /><path d="M12 11v5.5M12 7.8h.01" />""",
+        ["search"] = """<circle cx="10.5" cy="10.5" r="6.5" /><path d="m20.5 20.5-5.4-5.4" />""",
+        ["filter"] = """<path d="M3.5 5.5h17l-6.5 8v6l-4-2v-4l-6.5-8Z" />""",
+        ["sort"] = """<path d="M7 4.5v15M7 19.5 4 16.5M7 19.5l3-3" /><path d="M17 19.5v-15M17 4.5l-3 3M17 4.5l3 3" />""",
+        ["layers"] = """<path d="m12 2.5 9 4.5-9 4.5-9-4.5 9-4.5Z" /><path d="m3 12 9 4.5 9-4.5" />""",
+        ["lock"] = """<rect x="4.5" y="10.5" width="15" height="10" rx="2" /><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5" />""",
+        ["unlock"] = """<rect x="4.5" y="10.5" width="15" height="10" rx="2" /><path d="M8 10.5V7a4 4 0 0 1 7.5-2" />""",
+        ["cpu"] = """<rect x="6.5" y="6.5" width="11" height="11" rx="2" /><path d="M10 2.5v4M14 2.5v4M10 17.5v4M14 17.5v4M2.5 10h4M2.5 14h4M17.5 10h4M17.5 14h4" />""",
+        ["key"] = """<circle cx="8" cy="16" r="4" /><path d="m10.8 13.2 8.7-8.7M17 7l2.5 2.5M14.5 9.5 17 12" />""",
+        ["tag"] = """<path d="M12.6 3.5H20v7.4l-9 9-7.4-7.4 9-9Z" /><path d="M16.5 7.5h.01" />""",
+        ["rocket"] = """<path d="M5 14.5c-1.5 1.5-2 6-2 6s4.5-.5 6-2c.9-.9.9-2.4 0-3.3a2.3 2.3 0 0 0-4 0" /><path d="M9.5 16 8 14.5C8 8.5 12 3.5 20.5 3.5c0 8.5-5 12.5-11 12.5Z" /><path d="M13.5 10.5h.01" />""",
+        ["download"] = """<path d="M12 3.5v12M7 10.5l5 5 5-5" /><path d="M3.5 20.5h17" />""",
+        ["history"] = """<path d="M3.5 12a8.5 8.5 0 1 0 2.8-6.3" /><path d="M3.5 3.5v6h6" /><path d="M12 8v4.5l3 1.8" />""",
+        ["stop"] = """<rect x="5.5" y="5.5" width="13" height="13" rx="2" />""",
+    };
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/PageHeader.razor b/src/Utilities/BlazeDb/Demo/Client/Components/PageHeader.razor
index 91b91ec893d..f05b28cde32 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/PageHeader.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/PageHeader.razor
@@ -1,33 +1,30 @@
-<div class="page-head rise">
+@* The title block every documentation page opens with - the site kit's .bb-intro: an overline, the
+   page's one H1 (which FocusOnNavigate moves focus to), the lead, and a row of live facts about what
+   the page is running against. *@
+
+<div class="bb-intro">
     @if (!string.IsNullOrWhiteSpace(Eyebrow))
     {
-        <div class="eyebrow">
-            @if (!string.IsNullOrWhiteSpace(IconName))
-            {
-                <Icon Name="@IconName" Size="13" />
-            }
-            @Eyebrow
-        </div>
+        <p class="bb-overline">@Eyebrow</p>
     }
     <h1>@Title</h1>
     @if (!string.IsNullOrWhiteSpace(Lead))
     {
-        <p class="lead">@Lead</p>
+        <p class="bb-subtitle">@Lead</p>
     }
     @if (ChildContent is not null)
     {
-        <div class="chip-row mt-2">@ChildContent</div>
+        <div class="bd-facts">@ChildContent</div>
     }
 </div>
 
 @code {
     [Parameter] public string? Eyebrow { get; set; }
 
-    [Parameter] public string? IconName { get; set; }
-
     [Parameter, EditorRequired] public string Title { get; set; } = "";
 
     [Parameter] public string? Lead { get; set; }
 
+    /// <summary>Badges (<c>.bb-badge</c>) with live facts about the page.</summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/Panel.razor b/src/Utilities/BlazeDb/Demo/Client/Components/Panel.razor
index b908aaf29d7..b3ea4d71061 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/Panel.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/Panel.razor
@@ -1,28 +1,40 @@
-<div class="panel @Class">
-    @if (!string.IsNullOrWhiteSpace(Title) || Actions is not null)
-    {
-        <div class="panel-head">
-            <div class="panel-title">
-                @if (!string.IsNullOrWhiteSpace(IconName))
-                {
-                    <Icon Name="@IconName" />
-                }
-                <span>@Title</span>
-                @if (!string.IsNullOrWhiteSpace(Sub))
+@* A framed piece of a page - a live sample, a readout, a set of controls - drawn as the site kit's
+   .bb-demo, with an optional title bar (.bb-demo-bar) carrying an icon, the title, a monospaced
+   sub-title and actions at the far end. Flush drops the inner padding for content that brings its
+   own rows: a table, a log, a hex dump. A flush panel with no title is no frame at all - its table
+   is framed already. The title is not a heading, so the "On this page" rail lists the page's
+   sections rather than every panel in them. *@
+
+@if (Flush && !HasBar)
+{
+    @ChildContent
+}
+else
+{
+    <div class="bb-demo bd-panel @(Flush ? "bd-flush" : null) @Class">
+        @if (HasBar)
+        {
+            <div class="bb-demo-bar">
+                <div class="bd-panel-title">
+                    @if (!string.IsNullOrWhiteSpace(IconName))
+                    {
+                        <Icon Name="@IconName" Size="16" />
+                    }
+                    <strong>@Title</strong>
+                    @if (!string.IsNullOrWhiteSpace(Sub))
+                    {
+                        <span class="bd-panel-sub">@Sub</span>
+                    }
+                </div>
+                @if (Actions is not null)
                 {
-                    <span class="panel-sub">@Sub</span>
+                    <div class="bd-panel-actions">@Actions</div>
                 }
             </div>
-            @if (Actions is not null)
-            {
-                <div class="panel-actions">@Actions</div>
-            }
-        </div>
-    }
-    <div class="panel-body @(Flush ? "flush" : null) @BodyClass">
+        }
         @ChildContent
     </div>
-</div>
+}
 
 @code {
     [Parameter] public string? Title { get; set; }
@@ -35,9 +47,9 @@
 
     [Parameter] public string? Class { get; set; }
 
-    [Parameter] public string? BodyClass { get; set; }
-
     [Parameter] public RenderFragment? Actions { get; set; }
 
     [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    private bool HasBar => !string.IsNullOrWhiteSpace(Title) || Actions is not null;
 }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/ScenarioSteps.razor b/src/Utilities/BlazeDb/Demo/Client/Components/ScenarioSteps.razor
index 4b839084c5f..e67dbea6fe4 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/ScenarioSteps.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/ScenarioSteps.razor
@@ -1,35 +1,43 @@
-@if (Steps.Count == 0)
+@* The numbered trace an interactive page writes while a scenario runs: what the engine was asked,
+   the call that asked it, and what came back - each step tinted by how it went. *@
+
+@if (Steps.Count == 0)
 {
-    <div class="empty">
-        <Icon Name="play" />
-        <div>@EmptyText</div>
-    </div>
+    <div class="bb-empty">@EmptyText</div>
 }
 else
 {
-    <div class="steps">
+    <ol class="bd-steps">
         @foreach (var step in Steps)
         {
-            <div class="step @step.Tone">
-                <div class="step-num">@step.Number</div>
-                <div class="step-body">
-                    <div class="step-title">@step.Title</div>
+            <li class="bd-step @ToneClass(step.Tone)">
+                <span class="bd-step-num" aria-hidden="true">@step.Number</span>
+                <div class="bd-step-body">
+                    <div class="bd-step-title">@step.Title</div>
                     @if (!string.IsNullOrWhiteSpace(step.Code))
                     {
-                        <div class="step-code">@step.Code</div>
+                        <div class="bd-step-code">@step.Code</div>
                     }
                     @if (!string.IsNullOrWhiteSpace(step.Note))
                     {
-                        <div class="step-note">@step.Note</div>
+                        <div class="bd-step-note">@step.Note</div>
                     }
                 </div>
-            </div>
+            </li>
         }
-    </div>
+    </ol>
 }
 
 @code {
     [Parameter] public IReadOnlyList<ScenarioStep> Steps { get; set; } = [];
 
     [Parameter] public string EmptyText { get; set; } = "Run a scenario to see what the engine does, step by step.";
+
+    private static string? ToneClass(string tone) => tone switch
+    {
+        "ok" => "bd-step-ok",
+        "err" => "bd-step-err",
+        "run" => "bd-step-run",
+        _ => null,
+    };
 }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/Section.razor b/src/Utilities/BlazeDb/Demo/Client/Components/Section.razor
index 67599899ac5..026ed2d3e2f 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/Section.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/Section.razor
@@ -1,20 +1,16 @@
-<section class="section" id="@Id">
+@* A section of a documentation page - the site kit's .bb-card with an h3.bb-card-title. In the docs
+   column it is drawn as a passage of the document rather than as a box, and its heading feeds the
+   "On this page" rail and gets an anchor link (site.js). *@
+
+<section class="bb-card" id="@Id">
     @if (!string.IsNullOrWhiteSpace(Title))
     {
-        <div class="section-head">
-            <h2>
-                @if (!string.IsNullOrWhiteSpace(IconName))
-                {
-                    <Icon Name="@IconName" />
-                }
-                @Title
-            </h2>
-            @if (!string.IsNullOrWhiteSpace(Lead))
-            {
-                <p class="lead">@Lead</p>
-            }
-            @Description
-        </div>
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> @Title</h3>
+        @if (!string.IsNullOrWhiteSpace(Lead))
+        {
+            <p class="bb-card-desc">@Lead</p>
+        }
+        @Description
     }
     @ChildContent
 </section>
@@ -22,8 +18,6 @@
 @code {
     [Parameter] public string? Title { get; set; }
 
-    [Parameter] public string? IconName { get; set; }
-
     [Parameter] public string? Lead { get; set; }
 
     [Parameter] public string? Id { get; set; }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/SiteMap.cs b/src/Utilities/BlazeDb/Demo/Client/Components/SiteMap.cs
deleted file mode 100644
index 6f8f2a62c10..00000000000
--- a/src/Utilities/BlazeDb/Demo/Client/Components/SiteMap.cs
+++ /dev/null
@@ -1,61 +0,0 @@
-namespace Bit.BlazeDb.Demo.Client.Components;
-
-public sealed record NavItem(string Path, string Title, string Icon, string Group, string Blurb);
-
-public static class SiteMap
-{
-    public static readonly NavItem[] Items =
-    [
-        new("", "Overview", "overview", "Start",
-            "What BlazeDb is, how the engine is layered, and how it performs."),
-
-        new("todos", "Live data", "list", "Start",
-            "A working app over the real engine: CRUD, index-backed filters, paging and persistence."),
-
-        new("schema", "Schema & codegen", "schema", "Engine",
-            "Attributes, the generated descriptor, supported property types and generator diagnostics."),
-
-        new("indexes", "Indexes", "index", "Engine",
-            "Hash equality indexes, ordered indexes, inclusive range bounds and index maintenance."),
-
-        new("queries", "Query primitives", "query", "Engine",
-            "Compose an index source, residual filters, ordering and paging without a query language."),
-
-        new("efcore", "EF Core", "layers", "Engine",
-            "UseBlazeDb, AddDbContext, LINQ over live rows, and SaveChanges as one transaction."),
-
-        new("transactions", "Transactions", "txn", "Engine",
-            "Ambient batches, atomic commit, rollback semantics and the single-writer rule."),
-
-        new("durability", "Durability & recovery", "shield", "Persistence",
-            "The write-ahead log, snapshots, checkpointing, crash recovery and torn writes."),
-
-        new("storage", "Storage backends", "disk", "Persistence",
-            "The four-method storage contract, OPFS in the browser, and a live trace of engine I/O."),
-
-        new("serialization", "Wire format", "binary", "Persistence",
-            "Inspect the exact bytes a row becomes, field by field, and prove schema evolution works."),
-
-        new("errors", "Errors & limits", "alert", "Reference",
-            "Every exception the engine raises, triggered live, plus what BlazeDb deliberately does not do."),
-
-        new("bench", "Benchmarks", "gauge", "Reference",
-            "Run the engine's read, write and encoding paths in your own browser and see what they cost."),
-
-        new("roadmap", "Roadmap", "map", "Reference",
-            "What ships, what never will, and how the repository is laid out."),
-
-        new("mcp-server", "MCP server", "cpu", "Reference",
-            "The Model Context Protocol server this site hosts, so an AI agent writes BlazeDb code against the real API."),
-    ];
-
-    public static readonly string[] Groups = ["Start", "Engine", "Persistence", "Reference"];
-
-    public static IEnumerable<NavItem> InGroup(string group) => Items.Where(i => i.Group == group);
-
-    public static NavItem? Find(string relativePath)
-    {
-        var path = relativePath.Split('?', '#')[0].Trim('/');
-        return Items.FirstOrDefault(i => string.Equals(i.Path, path, StringComparison.OrdinalIgnoreCase));
-    }
-}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/StatTile.razor b/src/Utilities/BlazeDb/Demo/Client/Components/StatTile.razor
index 1680e8f1829..c74d5ced691 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Components/StatTile.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/StatTile.razor
@@ -1,15 +1,12 @@
-<div class="stat @Tone">
-    <div class="stat-label">
-        @if (!string.IsNullOrWhiteSpace(IconName))
-        {
-            <Icon Name="@IconName" />
-        }
-        @Label
-    </div>
-    <div class="stat-value">@Value@if (!string.IsNullOrWhiteSpace(Unit)) {<span class="unit">@Unit</span>}</div>
+@* One measured number - a cell of the site kit's .bb-stats strip: the label, the value, and an
+   optional note saying where the number came from (usually the call that produced it). *@
+
+<div class="bb-stat @ToneClass">
+    <span class="bb-stat-label">@Label</span>
+    <span class="bb-stat-value">@Value</span>
     @if (!string.IsNullOrWhiteSpace(Note))
     {
-        <div class="stat-note">@Note</div>
+        <span class="bd-stat-note">@Note</span>
     }
 </div>
 
@@ -18,12 +15,15 @@
 
     [Parameter, EditorRequired] public string Value { get; set; } = "";
 
-    [Parameter] public string? Unit { get; set; }
-
     [Parameter] public string? Note { get; set; }
 
-    [Parameter] public string? IconName { get; set; }
-
     /// <summary>One of <c>""</c>, <c>accent</c> or <c>ok</c>.</summary>
     [Parameter] public string? Tone { get; set; }
+
+    private string? ToneClass => Tone switch
+    {
+        "accent" => "bd-stat-accent",
+        "ok" => "bd-stat-ok",
+        _ => null,
+    };
 }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/StorageStatus.razor b/src/Utilities/BlazeDb/Demo/Client/Components/StorageStatus.razor
new file mode 100644
index 00000000000..fad1ad61829
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/StorageStatus.razor
@@ -0,0 +1,66 @@
+@implements IDisposable
+@inject DemoDbService Db
+
+@* Where this tab's demo database lives, on every page: OPFS when this tab won the Web Locks election,
+   an in-memory fallback when it did not, and how many rows it holds right now. Mounted next to the
+   router (Routes.razor) rather than inside a layout, so it opens the database once whichever page the
+   visitor lands on and survives every navigation.
+
+   data-storage says where the database ended up once it is open (Opfs, LockedFallback or
+   UnavailableFallback; Opening until then), which is what the E2E suite waits for before it acts. *@
+
+<div class="bd-status" data-storage="@(Db.IsOpen ? Db.Mode : StorageMode.Opening)"
+     title="@(Db.StorageNote ?? "Where this tab's demo database lives, and the todos it holds in memory")">
+    <span class="bb-dot @Dot" aria-hidden="true"></span>
+    <span class="bd-status-label">@Db.StorageLabel</span>
+    @if (Db.IsOpen)
+    {
+        <span class="bd-status-rows">@RowCount</span>
+    }
+</div>
+
+@code {
+    private bool _disposed;
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            // Opening here means every page finds the database ready.
+            await Db.GetDatabaseAsync();
+        }
+        catch (Exception)
+        {
+            // The label reports the degraded state; individual pages surface the details.
+            return;
+        }
+
+        // The row count would otherwise only refresh when this component happens to re-render. Every
+        // write reaches storage within a flush interval and the trace fires on each storage call, so it
+        // is a cheap signal.
+        if (_disposed is false && Db.Trace is not null)
+        {
+            Db.Trace.Changed += OnStorageActivity;
+        }
+    }
+
+    private void OnStorageActivity() => InvokeAsync(StateHasChanged);
+
+    private string Dot => Db.Mode switch
+    {
+        StorageMode.Opfs => "bb-dot-success",
+        StorageMode.LockedFallback or StorageMode.UnavailableFallback => "bb-dot-warning",
+        _ => "",
+    };
+
+    private string RowCount => $"{Db.Todos.Count:N0} todos";
+
+    public void Dispose()
+    {
+        _disposed = true;
+        if (Db.Trace is not null)
+        {
+            Db.Trace.Changed -= OnStorageActivity;
+        }
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/ThemeToggle.razor b/src/Utilities/BlazeDb/Demo/Client/Components/ThemeToggle.razor
deleted file mode 100644
index 6395efecbb3..00000000000
--- a/src/Utilities/BlazeDb/Demo/Client/Components/ThemeToggle.razor
+++ /dev/null
@@ -1,18 +0,0 @@
-@inject AppInterop Interop
-
-<button type="button" class="icon-btn" title="@(_dark ? "Switch to light theme" : "Switch to dark theme")" @onclick="ToggleAsync">
-    <Icon Name="@(_dark ? "sun" : "moon")" />
-</button>
-
-@code {
-    private bool _dark = true;
-
-    protected override async Task OnInitializedAsync() =>
-        _dark = await Interop.GetThemeAsync() != "light";
-
-    private async Task ToggleAsync()
-    {
-        _dark = !_dark;
-        await Interop.SetThemeAsync(_dark ? "dark" : "light");
-    }
-}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Components/Tones.cs b/src/Utilities/BlazeDb/Demo/Client/Components/Tones.cs
new file mode 100644
index 00000000000..f9f3e615795
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Components/Tones.cs
@@ -0,0 +1,29 @@
+namespace Bit.BlazeDb.Demo.Client.Components;
+
+/// <summary>
+/// The demo's tones - <c>info</c>, <c>accent</c>, <c>ok</c>, <c>warn</c>, <c>err</c> and none - as the site
+/// kit's classes. The pages decide a tone from what the engine did (a scenario's outcome, a file's role, a
+/// benchmark's speed); this is the one place that says what each tone looks like.
+/// </summary>
+public static class Tones
+{
+    /// <summary>A note (Fluent's MessageBar) in the tone.</summary>
+    public static string Note(string? tone) => tone switch
+    {
+        "ok" => "bb-note bb-note-success",
+        "warn" => "bb-note bb-note-warn",
+        "err" => "bb-note bb-note-danger",
+        _ => "bb-note",
+    };
+
+    /// <summary>A badge in the tone; no tone is the neutral one.</summary>
+    public static string Badge(string? tone) => tone switch
+    {
+        "ok" => "bb-badge bb-badge-success",
+        "warn" => "bb-badge bb-badge-warn",
+        "err" => "bb-badge bb-badge-danger",
+        "info" => "bb-badge",
+        "accent" => "bb-badge bd-badge-accent",
+        _ => "bb-badge bd-badge-neutral",
+    };
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/DocsCatalog.cs b/src/Utilities/BlazeDb/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..9de0696761c
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,196 @@
+using Bit.BlazeDb.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.BlazeDb.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "BlazeDb";
+
+    public const string PackageId = "Bit.BlazeDb";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/BlazeDb";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "BlazeDb is a memory-first, SQL-free embedded database for .NET and Blazor WebAssembly: live rows in " +
+        "managed memory, source-generated schemas, atomic transactions, an EF Core provider and a write-ahead " +
+        "log persisted to OPFS. Every page of this site drives the real engine in your browser.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["index", "transaction", "opfs", "efcore", "wal"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/todos", "Live app"),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Start",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, declare a table, open a database and query it - the whole surface for typical use.",
+                "install setup nuget package quick start OpenAsync AddTable BlazeDbTable namespaces requirements hosting",
+                typeof(GettingStarted)),
+            new("/todos", "Live data",
+                "A working app over the real engine: CRUD, index-backed filters, paging and persisted preferences.",
+                "todos crud app insert update upsert delete get tryget contains filter paging settings live demo",
+                typeof(Todos)),
+        ]),
+        new("Engine",
+        [
+            new("/schema", "Schema & codegen",
+                "Attributes, the generated descriptor inspected at runtime, supported property types and generator diagnostics.",
+                "schema attributes BlazeDbTable BlazeDbKey BlazeDbIndex BlazeDbField BlazeDbIgnore source generator descriptor diagnostics BLZ types",
+                typeof(Schema)),
+            new("/indexes", "Indexes",
+                "Hash equality indexes, ordered indexes, inclusive range bounds and index maintenance on every write.",
+                "index hash ordered Lookup CountBy Range OrderBy BlazeDbBound unbounded null keys unique compound",
+                typeof(Indexes)),
+            new("/queries", "Query primitives",
+                "Compose an index source, residual filters, ordering and paging without a query language.",
+                "query BlazeDbQuery UseIndex Where OrderBy Skip Take Execute Count IsIndexOrdered plan composer",
+                typeof(Queries)),
+            new("/efcore", "EF Core",
+                "UseBlazeDb, AddDbContext, LINQ over live rows, SaveChanges as one transaction, and where translation stops.",
+                "efcore entity framework DbContext UseBlazeDb AddDbContext LINQ SaveChanges change tracking Include AsNoTracking",
+                typeof(EfCore)),
+            new("/transactions", "Transactions",
+                "Ambient batches, atomic commit, rollback through an undo log and the single-writer rule.",
+                "transaction BeginTransaction Commit Rollback dispose undo atomic batch nesting ambient crash",
+                typeof(Transactions)),
+        ]),
+        new("Persistence",
+        [
+            new("/durability", "Durability & recovery",
+                "The write-ahead log, snapshots, checkpoints, crash recovery, torn tails and corrupted checksums.",
+                "durability wal write-ahead log snapshot checkpoint FlushAsync CheckpointAsync FlushInterval crash recovery torn corrupt manifest",
+                typeof(Durability)),
+            new("/storage", "Storage backends",
+                "The four-method storage contract, OPFS and Web Locks in the browser, and a live trace of engine I/O.",
+                "storage IBlazeDbStorage opfs BlazeDbOpfsStorage BlazeDbFileStorage BlazeDbInMemoryStorage web locks quota trace decorator",
+                typeof(StorageBackends)),
+            new("/serialization", "Wire format",
+                "The exact bytes a row becomes, field by field, with a hex dump and schema evolution in both directions.",
+                "serialization wire format bytes varint tag field number hex BlazeDbBufferWriter BlazeDbBufferReader schema evolution",
+                typeof(WireFormat)),
+        ]),
+        new("Reference",
+        [
+            new("/errors", "Errors & limits",
+                "Every exception the engine raises, triggered live, and the cases that are deliberately not errors.",
+                "errors exceptions BlazeDbException duplicate key unique constraint stale row corrupt locked quota failure",
+                typeof(Errors)),
+            new("/bench", "Benchmarks",
+                "The engine's read, write and encoding paths run in your own browser, with what they cost on disk.",
+                "benchmarks performance speed throughput latency ns per op reads writes snapshot size",
+                typeof(Benchmarks)),
+            new("/roadmap", "Roadmap",
+                "What ships, what never will, and how the repository is laid out.",
+                "roadmap shipped non-goals features repository projects build test",
+                typeof(Roadmap)),
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent writes BlazeDb code against the real API.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Extensions/IServiceCollectionExtensions.cs b/src/Utilities/BlazeDb/Demo/Client/Extensions/IServiceCollectionExtensions.cs
index 61384901e90..7bb8b4e0583 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Extensions/IServiceCollectionExtensions.cs
+++ b/src/Utilities/BlazeDb/Demo/Client/Extensions/IServiceCollectionExtensions.cs
@@ -1,5 +1,4 @@
-using Bit.BlazeDb.Demo.Client.Components;
-using Bit.BlazeDb.Demo.Client.Data;
+using Bit.BlazeDb.Demo.Client.Data;
 
 namespace Microsoft.Extensions.DependencyInjection;
 
@@ -17,7 +16,6 @@ public static class IServiceCollectionExtensions
     public static IServiceCollection AddDemoServices(this IServiceCollection services)
     {
         services.AddSingleton<DemoDbService>();
-        services.AddSingleton<AppInterop>();
 
         return services;
     }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/BlazeDb/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/BlazeDb/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/BlazeDb/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/BlazeDb/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/DocsPager.razor b/src/Utilities/BlazeDb/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/Footer.razor b/src/Utilities/BlazeDb/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/Footer.razor.css b/src/Utilities/BlazeDb/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/Header.razor b/src/Utilities/BlazeDb/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/Header.razor.css b/src/Utilities/BlazeDb/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/MainLayout.razor b/src/Utilities/BlazeDb/Demo/Client/Layout/MainLayout.razor
index 95aa374dd57..44980dda101 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/MainLayout.razor
@@ -1,130 +1,30 @@
 @inherits LayoutComponentBase
-@implements IDisposable
-@inject NavigationManager Nav
-@inject DemoDbService Db
 
-@* data-storage says where the demo database ended up once it is open (Opfs, LockedFallback or
-   UnavailableFallback; Opening until then), which is what the E2E suite waits for before it acts. *@
-<div class="shell @(_navOpen ? "nav-open" : null)" data-storage="@(Db.IsOpen ? Db.Mode : StorageMode.Opening)">
-    <aside class="sidebar">
-        <a class="brand" href="">
-            <span class="brand-mark">
-                <Icon Name="flame" Size="17" />
-            </span>
-            <span>
-                <span class="brand-name">BlazeDb</span>
-                <span class="brand-tag">Engine demo</span>
-            </span>
-        </a>
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-        <NavMenu OnNavigate="CloseNav" />
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-        <div class="sidebar-foot">
-            <span class="storage-pill">
-                <span class="dot @StorageDot"></span>
-                <span>@Db.StorageLabel</span>
-            </span>
-            <span class="tiny">Blazor WebAssembly · .NET 10 · no runtime reflection</span>
-        </div>
-    </aside>
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-    <div class="scrim" @onclick="CloseNav"></div>
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-    <div class="main">
-        <header class="topbar">
-            <button type="button" class="icon-btn nav-toggle" title="Menu" @onclick="ToggleNav">
-                <Icon Name="@(_navOpen ? "close" : "menu")" />
-            </button>
+    <Header />
 
-            <nav class="crumbs">
-                <span>@(_current?.Group ?? "Start")</span>
-                <Icon Name="chevron" />
-                <span class="here">@(_current?.Title ?? "Not found")</span>
-            </nav>
-
-            <div class="topbar-spacer"></div>
-
-            <span class="chip" title="Rows currently held in memory in the demo database">
-                <Icon Name="database" />
-                @RowCountLabel
-            </span>
-
-            <ThemeToggle />
-        </header>
-
-        <main class="content">
-            @Body
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
         </main>
     </div>
-</div>
-
-@code {
-    private bool _navOpen;
-    private bool _disposed;
-    private NavItem? _current;
-
-    protected override void OnInitialized()
-    {
-        Nav.LocationChanged += OnLocationChanged;
-        UpdateCurrent();
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        try
-        {
-            // Opening here means every page finds the database ready.
-            await Db.GetDatabaseAsync();
-        }
-        catch (Exception)
-        {
-            // The sidebar reports the degraded state; individual pages surface details.
-            return;
-        }
-
-        // The row-count chip would otherwise only refresh on navigation. Every write reaches storage
-        // within a flush interval, and the trace fires on each storage call, so it is a cheap signal.
-        if (!_disposed && Db.Trace is not null)
-        {
-            Db.Trace.Changed += OnStorageActivity;
-        }
-    }
 
-    private void OnStorageActivity() => InvokeAsync(StateHasChanged);
-
-    private string StorageDot => Db.Mode switch
-    {
-        StorageMode.Opfs => "live",
-        StorageMode.LockedFallback => "warn",
-        StorageMode.UnavailableFallback => "warn",
-        _ => "",
-    };
-
-    private string RowCountLabel => Db.IsOpen
-        ? $"{Db.Todos.Count + Db.Settings.Count:N0} rows"
-        : "opening…";
-
-    private void UpdateCurrent() =>
-        _current = SiteMap.Find(Nav.ToBaseRelativePath(Nav.Uri));
-
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        UpdateCurrent();
-        _navOpen = false;
-        StateHasChanged();
-    }
-
-    private void ToggleNav() => _navOpen = !_navOpen;
-
-    private void CloseNav() => _navOpen = false;
-
-    public void Dispose()
-    {
-        _disposed = true;
-        Nav.LocationChanged -= OnLocationChanged;
-        if (Db.Trace is not null)
-        {
-            Db.Trace.Changed -= OnStorageActivity;
-        }
-    }
-}
+    <Footer />
+</div>
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/BlazeDb/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Layout/NavMenu.razor b/src/Utilities/BlazeDb/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 3a3aa57c030..00000000000
--- a/src/Utilities/BlazeDb/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,21 +0,0 @@
-<nav class="nav">
-    @foreach (var group in SiteMap.Groups)
-    {
-        <div class="nav-group">
-            <div class="nav-group-label">@group</div>
-            @foreach (var item in SiteMap.InGroup(group))
-            {
-                <NavLink class="nav-link" href="@item.Path"
-                         Match="@(item.Path.Length == 0 ? NavLinkMatch.All : NavLinkMatch.Prefix)"
-                         @onclick="OnNavigate">
-                    <Icon Name="@item.Icon" />
-                    <span>@item.Title</span>
-                </NavLink>
-            }
-        </div>
-    }
-</nav>
-
-@code {
-    [Parameter] public EventCallback OnNavigate { get; set; }
-}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Benchmarks.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Benchmarks.razor
index c589529a4d0..1da2218b805 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Benchmarks.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Benchmarks.razor
@@ -2,57 +2,51 @@
 @using System.Runtime.InteropServices
 @implements IAsyncDisposable
 
-<PageTitle>Benchmarks - BlazeDb</PageTitle>
+<PageTitle>Benchmarks · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Performance" IconName="gauge" Title="Measured here, in your browser, right now"
+<PageHeader Eyebrow="Benchmarks" Title="Measured here, in your browser, right now"
             Lead="These are not numbers from a README. Every figure below is produced by running the operation in this tab against a real database, on your machine, in the WebAssembly runtime you are using to read this page.">
-    <span class="chip"><Icon Name="database" /> @_rowCount.ToString("N0") rows loaded</span>
-    <span class="chip"><Icon Name="cpu" /> @Runtime</span>
-    <span class="chip @(IsDebug ? "warn" : "ok")">
-        <Icon Name="@(IsDebug ? "alert" : "check")" /> @(IsDebug ? "Debug build" : "Release build")
-    </span>
+    <span class="bb-badge bd-badge-neutral">@_rowCount.ToString("N0") rows loaded</span>
+    <span class="bb-badge bd-badge-neutral">@Runtime</span>
+    <span class="@Tones.Badge(IsDebug ? "warn" : "ok")">@(IsDebug ? "Debug build" : "Release build")</span>
 </PageHeader>
 
-<Section Title="Run the suite" IconName="play">
+<Section Title="Run the suite">
     <Panel Title="Configuration" IconName="cpu">
-        <div class="form-row">
-            <div class="field" style="flex:0 1 190px">
-                <label class="field-label" for="b-rows">Rows in the table</label>
-                <select id="b-rows" class="input" value="@_requestedRows" disabled="@_busy"
+        <div class="bb-fields">
+            <div class="bb-field" style="flex:0 1 190px">
+                <label for="b-rows">Rows in the table</label>
+                <select id="b-rows" value="@_requestedRows" disabled="@_busy"
                         @onchange="OnRowsChanged">
                     @foreach (var option in RowOptions)
                     {
                         <option value="@option">@option.ToString("N0")</option>
                     }
                 </select>
-                <span class="field-hint">rebuilds the fixtures</span>
+                <span class="bb-field-hint">rebuilds the fixtures</span>
             </div>
-            <div class="field" style="flex:0 1 190px">
-                <label class="field-label" for="b-scale">Work per benchmark</label>
-                <select id="b-scale" class="input" value="@_scale" disabled="@_busy" @onchange="OnScaleChanged">
+            <div class="bb-field" style="flex:0 1 190px">
+                <label for="b-scale">Work per benchmark</label>
+                <select id="b-scale" value="@_scale" disabled="@_busy" @onchange="OnScaleChanged">
                     <option value="1">Quick</option>
                     <option value="4">Thorough</option>
                     <option value="12">Punishing</option>
                 </select>
-                <span class="field-hint">longer runs, steadier numbers</span>
-            </div>
-            <div class="field" style="flex:1 1 auto; align-self:flex-end">
-                <div class="flex wrap">
-                    <button class="btn btn-primary" disabled="@_busy" @onclick="RunAllAsync">
-                        <Icon Name="play" /> @(_busy ? "Running…" : "Run all benchmarks")
-                    </button>
-                    <button class="btn" disabled="@(_busy || _results.Count == 0)" @onclick="() => _results.Clear()">
-                        <Icon Name="refresh" /> Clear
-                    </button>
-                </div>
+                <span class="bb-field-hint">longer runs, steadier numbers</span>
             </div>
+            <button type="button" class="btn btn-primary" disabled="@_busy" @onclick="RunAllAsync">
+                <Icon Name="play" /> @(_busy ? "Running…" : "Run all benchmarks")
+            </button>
+            <button type="button" class="btn btn-secondary" disabled="@(_busy || _results.Count == 0)" @onclick="() => _results.Clear()">
+                <Icon Name="refresh" /> Clear
+            </button>
         </div>
 
         @if (_busy)
         {
-            <div class="mt-2">
-                <div class="bar-track"><div class="bar-fill" style="width:@(_progress)%"></div></div>
-                <p class="tiny muted mt-1 mb-0">@_currentName</p>
+            <div class="bd-progress">
+                <div class="bd-bar"><div class="bd-bar-fill" style="width:@(_progress)%"></div></div>
+                <p class="bd-foot">@_currentName</p>
             </div>
         }
     </Panel>
@@ -61,17 +55,17 @@
     {
         @foreach (var group in _results.GroupBy(r => r.Group))
         {
-            <Panel Title="@group.Key" IconName="@GroupIcon(group.Key)" Flush="true" Class="mt-3">
-                <div class="table-wrap">
-                    <table class="data">
+            <Panel Title="@group.Key" IconName="@GroupIcon(group.Key)" Flush="true">
+                <div class="bb-scroll">
+                    <table class="bb-table bb-compare">
                         <thead>
                             <tr>
                                 <th>Operation</th>
-                                <th class="num">Operations</th>
-                                <th class="num">Total</th>
-                                <th class="num">Per op</th>
-                                <th class="num">Throughput</th>
-                                <th style="width:180px">Relative</th>
+                                <th class="bd-num">Operations</th>
+                                <th class="bd-num">Total</th>
+                                <th class="bd-num">Per op</th>
+                                <th class="bd-num">Throughput</th>
+                                <th class="bd-bar-col">Relative</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -79,16 +73,16 @@
                             {
                                 <tr>
                                     <td>
-                                        <div class="strong">@result.Name</div>
-                                        <div class="tiny muted">@result.Note</div>
+                                        <div class="bd-strong">@result.Name</div>
+                                        <div class="bd-foot">@result.Note</div>
                                     </td>
-                                    <td class="num mono">@result.Operations.ToString("N0")</td>
-                                    <td class="num mono">@DemoSandbox.Duration(result.Milliseconds)</td>
-                                    <td class="num mono strong">@DemoSandbox.Duration(result.PerOpMs)</td>
-                                    <td class="num mono">@FormatRate(result.OpsPerSecond)</td>
+                                    <td class="bd-num">@result.Operations.ToString("N0")</td>
+                                    <td class="bd-num">@DemoSandbox.Duration(result.Milliseconds)</td>
+                                    <td class="bd-num bd-strong">@DemoSandbox.Duration(result.PerOpMs)</td>
+                                    <td class="bd-num">@FormatRate(result.OpsPerSecond)</td>
                                     <td>
-                                        <div class="bar-track">
-                                            <div class="bar-fill @BarTone(result.OpsPerSecond)"
+                                        <div class="bd-bar">
+                                            <div class="bd-bar-fill @BarTone(result.OpsPerSecond)"
                                                  style="width:@(BarWidth(result.OpsPerSecond))%"></div>
                                         </div>
                                     </td>
@@ -102,15 +96,10 @@
     }
     else
     {
-        <Panel Class="mt-3">
-            <div class="empty">
-                <Icon Name="gauge" Size="26" />
-                <p class="mb-0">Nothing measured yet. Run the suite to fill this in.</p>
-            </div>
-        </Panel>
+        <div class="bb-empty">Nothing measured yet. Run the suite to fill this in.</div>
     }
 
-    <Callout Tone="warn" Title="Read these numbers honestly." Class="mt-3">
+    <Callout Tone="warn" Title="Read these numbers honestly.">
         The bars use a logarithmic scale because the spread between a dictionary lookup and a
         storage append is four orders of magnitude. Browser timers are deliberately coarse, so
         very fast operations are measured in bulk and averaged.
@@ -124,37 +113,37 @@
     </Callout>
 </Section>
 
-<Section Title="What the shape of these numbers means" IconName="info">
-    <div class="grid grid-3">
+<Section Title="What the shape of these numbers means">
+    <div class="bb-grid">
         <Panel Title="Reads are free" IconName="bolt" Sub="no I/O at all">
-            <p class="small mb-2">
+            <p>
                 A point read is a <code>Dictionary</code> lookup on a live object graph. There is no
                 deserialization, no copy, no cache layer, no async state machine - which is why the
                 per-op figure lands in nanoseconds rather than microseconds.
             </p>
-            <p class="small mb-0">
+            <p>
                 Nothing to await also means no re-render churn: a Blazor component can call
                 <code>TryGet</code> straight from its render logic.
             </p>
         </Panel>
         <Panel Title="Writes are memory plus a buffer" IconName="disk" Sub="durability is a background job">
-            <p class="small mb-2">
+            <p>
                 A commit applies the change to memory and appends encoded bytes to an in-memory
                 buffer. Storage is touched by the flush loop, on its own schedule, so write latency
                 does not include a round trip to OPFS.
             </p>
-            <p class="small mb-0">
+            <p>
                 Compare the per-row and single-transaction insert rows above: batching removes one
                 WAL record per row and is the single biggest write optimisation available.
             </p>
         </Panel>
         <Panel Title="Indexes change the exponent" IconName="index" Sub="not the constant">
-            <p class="small mb-2">
+            <p>
                 The scan and the index lookup do the same logical work at these row counts, and the
                 scan is not far behind. The difference is what happens as the table grows: one is
                 O(n), the other O(1) or O(log n).
             </p>
-            <p class="small mb-0">
+            <p>
                 Re-run at a larger row count to watch the scan row degrade while the index rows
                 stay flat.
             </p>
@@ -162,59 +151,59 @@
     </div>
 </Section>
 
-<Section Title="What it costs on disk" IconName="disk"
+<Section Title="What it costs on disk"
          Lead="Throughput is only half the story. These figures come from the real encoder and the real snapshot writer, measured against an in-memory storage backend.">
-    <div class="grid grid-sidebar">
+    <div class="bd-main-side">
         <Panel Title="Space" IconName="file" Flush="true">
-            <div class="table-wrap">
-                <table class="data">
-                    <thead><tr><th>Measurement</th><th class="num">Value</th><th>Notes</th></tr></thead>
+            <div class="bb-scroll">
+                <table class="bb-table bb-compare">
+                    <thead><tr><th>Measurement</th><th class="bd-num">Value</th><th>Notes</th></tr></thead>
                     <tbody>
                         <tr>
                             <td>Encoded row</td>
-                            <td class="num mono strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.RowBytes))</td>
-                            <td class="small muted">average across the loaded table</td>
+                            <td class="bd-num bd-strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.RowBytes))</td>
+                            <td>average across the loaded table</td>
                         </tr>
                         <tr>
                             <td>WAL record per insert</td>
-                            <td class="num mono strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.WalBytesPerRow))</td>
-                            <td class="small muted">16-byte header, table name, key, row</td>
+                            <td class="bd-num bd-strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.WalBytesPerRow))</td>
+                            <td>16-byte header, table name, key, row</td>
                         </tr>
                         <tr>
                             <td>Snapshot</td>
-                            <td class="num mono strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.SnapshotBytes))</td>
-                            <td class="small muted">@(_space is null ? "" : $"{_space.Rows:N0} rows, checksummed")</td>
+                            <td class="bd-num bd-strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.SnapshotBytes))</td>
+                            <td>@(_space is null ? "" : $"{_space.Rows:N0} rows, checksummed")</td>
                         </tr>
                         <tr>
                             <td>Snapshot per row</td>
-                            <td class="num mono strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.SnapshotBytesPerRow))</td>
-                            <td class="small muted">length prefix plus the encoded row</td>
+                            <td class="bd-num bd-strong">@(_space is null ? "-" : DemoSandbox.Bytes(_space.SnapshotBytesPerRow))</td>
+                            <td>length prefix plus the encoded row</td>
                         </tr>
                         <tr>
                             <td>Checkpoint</td>
-                            <td class="num mono strong">@(_space is null ? "-" : DemoSandbox.Duration(_space.CheckpointMs))</td>
-                            <td class="small muted">encode every row and write atomically</td>
+                            <td class="bd-num bd-strong">@(_space is null ? "-" : DemoSandbox.Duration(_space.CheckpointMs))</td>
+                            <td>encode every row and write atomically</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </Panel>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Where the bytes go" IconName="binary">
-                <p class="small mb-2">
+                <p>
                     A WAL record costs a little more than the row itself: the record header carries a
                     length, an LSN and a CRC32, and each operation names its table so replay can find
                     it again.
                 </p>
-                <p class="small mb-0">
+                <p>
                     Checkpointing is what stops that from mattering. The snapshot holds one copy of
                     each live row, so a table rewritten a thousand times compacts back down to its
                     real size.
                 </p>
             </Panel>
             <Panel Title="Budgeting for OPFS" IconName="shield">
-                <p class="small mb-0">
+                <p>
                     Multiply the per-row snapshot figure by your expected row count, then double it:
                     a checkpoint writes the new snapshot before deleting the old one, so peak usage
                     is roughly two snapshots plus the WAL.
@@ -224,9 +213,9 @@
     </div>
 </Section>
 
-<Section Title="How the suite is written" IconName="code"
+<Section Title="How the suite is written"
          Lead="No harness, no attributes, no build step - the benchmark code is ordinary application code, which is the point.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <CodeBlock Title="The measurement loop" Code="@HarnessSnippet" />
         <CodeBlock Title="A representative case" Code="@CaseSnippet" />
     </div>
@@ -654,9 +643,9 @@
 
     private static string BarTone(double opsPerSecond) => opsPerSecond switch
     {
-        >= 1_000_000 => "ok",
-        >= 10_000 => "accent",
-        _ => "info",
+        >= 1_000_000 => "bd-bar-ok",
+        >= 10_000 => "bd-bar-accent",
+        _ => "bd-bar-info",
     };
 
     private const string HarnessSnippet = """
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Durability.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Durability.razor
index 8d85cab1365..aa381d61825 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Durability.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Durability.razor
@@ -1,36 +1,36 @@
 @page "/durability"
 @implements IAsyncDisposable
 
-<PageTitle>Durability &amp; recovery - BlazeDb</PageTitle>
+<PageTitle>Durability &amp; recovery · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Persistence" IconName="shield" Title="Crash it on purpose"
+<PageHeader Eyebrow="Durability & recovery" Title="Crash it on purpose"
             Lead="This page drives a private database whose storage is a byte dictionary you can vandalise. Flush it, snapshot it, abandon it mid-flight, tear the tail off the log, corrupt a checksum - then reopen and see exactly what survived.">
-    <span class="chip"><Icon Name="file" /> @_files.Count files</span>
-    <span class="chip"><Icon Name="database" /> @(_table?.Count ?? 0) rows in memory</span>
-    <span class="chip"><Icon Name="disk" /> @DemoSandbox.Bytes(_totalBytes) on "disk"</span>
+    <span class="bb-badge bd-badge-neutral">@_files.Count files</span>
+    <span class="bb-badge bd-badge-neutral">@(_table?.Count ?? 0) rows in memory</span>
+    <span class="bb-badge bd-badge-neutral">@DemoSandbox.Bytes(_totalBytes) on "disk"</span>
 </PageHeader>
 
-<Section Title="How a write becomes durable" IconName="arrow-down">
-    <div class="grid grid-4">
+<Section Title="How a write becomes durable">
+    <div class="bb-grid">
         <Panel Title="1 · Memory" IconName="database">
-            <p class="small mb-0">
+            <p>
                 The row store and every index are updated synchronously. Your call has already
                 returned by the time anything else happens.
             </p>
         </Panel>
         <Panel Title="2 · Log record" IconName="file">
-            <p class="small mb-0">
+            <p>
                 A set-or-delete record with a CRC is buffered. A commit closes the batch.
             </p>
         </Panel>
         <Panel Title="3 · Append" IconName="download">
-            <p class="small mb-0">
+            <p>
                 A background loop appends buffered records to <code>wal-N.blz</code> every
                 <code>FlushInterval</code>. <code>FlushAsync</code> does it now.
             </p>
         </Panel>
         <Panel Title="4 · Checkpoint" IconName="layers">
-            <p class="small mb-0">
+            <p>
                 Once the log passes <code>CheckpointWalSize</code>, a full snapshot is written, the
                 manifest is swapped atomically and the old log is deleted.
             </p>
@@ -38,26 +38,26 @@
     </div>
 </Section>
 
-<Section Title="The sandbox" IconName="cpu"
+<Section Title="The sandbox"
          Lead="Options are read when a database is opened, so changing either one reopens the database over the same storage - which is itself a recovery.">
     <Panel Title="Options" IconName="code">
         <Actions>
-            <span class="panel-sub mono">@_optionsCode</span>
+            <span class="bd-panel-sub">@_optionsCode</span>
         </Actions>
         <ChildContent>
-            <div class="form-row">
-                <div class="field">
-                    <label class="field-label" for="d-flush">FlushInterval</label>
-                    <select id="d-flush" class="select" @bind="_flushChoice" @bind:after="ReopenAsync">
+            <div class="bb-fields">
+                <div class="bb-field">
+                    <label for="d-flush">FlushInterval</label>
+                    <select id="d-flush" @bind="_flushChoice" @bind:after="ReopenAsync">
                         <option value="never">never (1 hour - explicit flushes only)</option>
                         <option value="fast">20 ms</option>
                         <option value="default">100 ms (the default)</option>
                         <option value="slow">1 second</option>
                     </select>
                 </div>
-                <div class="field">
-                    <label class="field-label" for="d-ckpt">CheckpointWalSize</label>
-                    <select id="d-ckpt" class="select" @bind="_checkpointChoice" @bind:after="ReopenAsync">
+                <div class="bb-field">
+                    <label for="d-ckpt">CheckpointWalSize</label>
+                    <select id="d-ckpt" @bind="_checkpointChoice" @bind:after="ReopenAsync">
                         <option value="never">disabled (long.MaxValue)</option>
                         <option value="tiny">2 KB - checkpoints constantly</option>
                         <option value="small">32 KB</option>
@@ -68,53 +68,53 @@
         </ChildContent>
     </Panel>
 
-    <div class="grid grid-sidebar mt-2">
-        <div class="flex-col gap-lg">
+    <div class="bd-main-side">
+        <div class="bb-flex">
             <Panel Title="Normal operation" IconName="play">
-                <div class="grid grid-2">
-                    <button class="btn btn-sm" disabled="@_busy" @onclick="() => InsertRowsAsync(20)">
+                <div class="bd-btn-grid">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="() => InsertRowsAsync(20)">
                         <Icon Name="plus" /> Insert 20 rows
                     </button>
-                    <button class="btn btn-sm" disabled="@_busy" @onclick="() => InsertRowsAsync(400)">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="() => InsertRowsAsync(400)">
                         <Icon Name="plus" /> Insert 400 rows
                     </button>
-                    <button class="btn btn-sm" disabled="@_busy" @onclick="FlushAsync">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="FlushAsync">
                         <Icon Name="download" /> FlushAsync
                     </button>
-                    <button class="btn btn-sm" disabled="@_busy" @onclick="CheckpointAsync">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="CheckpointAsync">
                         <Icon Name="layers" /> CheckpointAsync
                     </button>
-                    <button class="btn btn-sm" disabled="@_busy" @onclick="WaitForAutoCheckpointAsync">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="WaitForAutoCheckpointAsync">
                         <Icon Name="clock" /> Fill until it self-checkpoints
                     </button>
-                    <button class="btn btn-sm" disabled="@_busy" @onclick="CleanCloseAsync">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="CleanCloseAsync">
                         <Icon Name="check" /> Clean close, then reopen
                     </button>
                 </div>
             </Panel>
 
             <Panel Title="Failure injection" IconName="alert">
-                <div class="grid grid-2">
-                    <button class="btn btn-sm btn-danger" disabled="@_busy" @onclick="CrashAsync">
+                <div class="bd-btn-grid">
+                    <button type="button" class="btn bd-btn-danger" disabled="@_busy" @onclick="CrashAsync">
                         <Icon Name="bolt" /> Crash and reopen
                     </button>
-                    <button class="btn btn-sm btn-danger" disabled="@_busy" @onclick="LoseUnflushedAsync">
+                    <button type="button" class="btn bd-btn-danger" disabled="@_busy" @onclick="LoseUnflushedAsync">
                         <Icon Name="close" /> Lose unflushed writes
                     </button>
-                    <button class="btn btn-sm btn-danger" disabled="@_busy" @onclick="TearWalAsync">
+                    <button type="button" class="btn bd-btn-danger" disabled="@_busy" @onclick="TearWalAsync">
                         <Icon Name="file" /> Tear the log tail
                     </button>
-                    <button class="btn btn-sm btn-danger" disabled="@_busy" @onclick="CorruptRecordAsync">
+                    <button type="button" class="btn bd-btn-danger" disabled="@_busy" @onclick="CorruptRecordAsync">
                         <Icon Name="binary" /> Corrupt the last record
                     </button>
-                    <button class="btn btn-sm btn-danger" disabled="@_busy" @onclick="CorruptManifestAsync">
+                    <button type="button" class="btn bd-btn-danger" disabled="@_busy" @onclick="CorruptManifestAsync">
                         <Icon Name="key" /> Corrupt the manifest
                     </button>
-                    <button class="btn btn-sm" disabled="@_busy" @onclick="ResetAsync">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="ResetAsync">
                         <Icon Name="refresh" /> Start over
                     </button>
                 </div>
-                <p class="tiny muted mt-2 mb-0">
+                <p class="bd-foot">
                     “Crash” abandons the <code>BlazeDbDatabase</code> instance - whatever it had not flushed is
                     gone and it never touches storage again - then opens a new one over the same bytes,
                     exactly what closing a tab does.
@@ -126,33 +126,30 @@
             </Panel>
         </div>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Storage contents" IconName="disk" Flush="true">
                 <Actions>
-                    <span class="panel-sub mono">@DemoSandbox.Bytes(_totalBytes)</span>
+                    <span class="bd-panel-sub">@DemoSandbox.Bytes(_totalBytes)</span>
                 </Actions>
                 <ChildContent>
                     @if (_files.Count == 0)
                     {
-                        <div class="empty">
-                            <Icon Name="file" />
-                            <div>Nothing on storage.</div>
-                        </div>
+                        <div class="bb-empty">Nothing on storage.</div>
                     }
                     else
                     {
-                        <div class="table-wrap">
-                            <table class="data">
+                        <div class="bb-scroll">
+                            <table class="bb-table">
                                 <thead>
-                                    <tr><th>File</th><th>Role</th><th class="num">Size</th></tr>
+                                    <tr><th>File</th><th>Role</th><th class="bd-num">Size</th></tr>
                                 </thead>
                                 <tbody>
                                     @foreach (var file in _files)
                                     {
                                         <tr>
-                                            <td class="mono strong">@file.Name</td>
-                                            <td><span class="badge @file.Tone">@file.Role</span></td>
-                                            <td class="num mono">@DemoSandbox.Bytes(file.Bytes)</td>
+                                            <td class="bd-strong">@file.Name</td>
+                                            <td><span class="@Tones.Badge(file.Tone)">@file.Role</span></td>
+                                            <td class="bd-num">@DemoSandbox.Bytes(file.Bytes)</td>
                                         </tr>
                                     }
                                 </tbody>
@@ -163,7 +160,7 @@
             </Panel>
 
             <Panel Title="State" IconName="database">
-                <dl class="kv">
+                <dl class="bb-params">
                     <dt>Rows in memory</dt>
                     <dd>@(_table?.Count.ToString("N0") ?? "-")</dd>
                     <dt>Log size</dt>
@@ -178,23 +175,23 @@
             </Panel>
 
             <Panel Title="File roles" IconName="info">
-                <dl class="kv">
+                <dl class="bb-params bd-params-prose">
                     <dt>manifest.blz</dt>
-                    <dd class="small">Names the newest valid snapshot and its log sequence number. Replaced atomically.</dd>
+                    <dd>Names the newest valid snapshot and its log sequence number. Replaced atomically.</dd>
                     <dt>snapshot-N.blz</dt>
-                    <dd class="small">A complete image of every table at one point in time.</dd>
+                    <dd>A complete image of every table at one point in time.</dd>
                     <dt>wal-N.blz</dt>
-                    <dd class="small">Append-only records written since that snapshot, each with a CRC.</dd>
+                    <dd>Append-only records written since that snapshot, each with a CRC.</dd>
                 </dl>
             </Panel>
         </div>
     </div>
 </Section>
 
-<Section Title="What recovery actually does" IconName="refresh">
-    <div class="grid grid-2">
+<Section Title="What recovery actually does">
+    <div class="bb-flex">
         <CodeBlock Title="Recovery, in order" Code="@RecoverySnippet" Language="text" />
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Callout Tone="ok" Title="A torn tail is expected, not exceptional.">
                 A process can die mid-append, leaving a partial record. Replay stops at the last record
                 whose checksum verifies and truncates the rest. Everything committed before that point
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/EfCore.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/EfCore.razor
index d96071c8ce8..febd471cf26 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/EfCore.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/EfCore.razor
@@ -1,18 +1,18 @@
 @page "/efcore"
 @inject DemoDbService Db
 
-<PageTitle>EF Core - BlazeDb</PageTitle>
+<PageTitle>EF Core · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Engine" IconName="layers" Title="The same engine, reached through LINQ"
+<PageHeader Eyebrow="EF Core" Title="The same engine, reached through LINQ"
             Lead="The EF Core provider is a translation layer, not a second database. AddDbContext and UseBlazeDb are the whole setup: tables come from your DbSets, LINQ becomes a query plan, and SaveChanges is one engine transaction. The rows you get back are the objects the table already holds.">
-    <span class="chip"><Icon Name="bolt" /> No SQL, no materialisation</span>
-    <span class="chip"><Icon Name="txn" /> SaveChanges is a memory commit</span>
-    <span class="chip"><Icon Name="close" /> No Include, no navigations</span>
+    <span class="bb-badge bd-badge-neutral">No SQL, no materialisation</span>
+    <span class="bb-badge bd-badge-neutral">SaveChanges is a memory commit</span>
+    <span class="bb-badge bd-badge-neutral">No Include, no navigations</span>
 </PageHeader>
 
-<Section Title="The usual EF Core setup" IconName="code"
+<Section Title="The usual EF Core setup"
          Lead="A DbContext, a UseBlazeDb call, and AddDbContext (or OnConfiguring). There is no OpenAsync and no AddTable: entity types on the context are the model.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <CodeBlock Title="AppContext.cs" Code="@ContextSnippet" />
         <CodeBlock Title="Program.cs" Code="@UseSnippet" />
     </div>
@@ -25,58 +25,58 @@
     </Callout>
 </Section>
 
-<Section Title="How EF Core concepts land on the engine" IconName="schema">
+<Section Title="How EF Core concepts land on the engine">
     <Panel Flush="true">
-        <div class="table-wrap">
-            <table class="data">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th>EF Core</th><th>BlazeDb</th><th>Notes</th></tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td class="mono">DbContext</td>
-                        <td class="mono">BlazeDbDatabase</td>
-                        <td class="small muted">one instance, one write lock, tables from the model</td>
+                        <td class="bb-mono">DbContext</td>
+                        <td class="bb-mono">BlazeDbDatabase</td>
+                        <td class="bb-muted">one instance, one write lock, tables from the model</td>
                     </tr>
                     <tr>
-                        <td class="mono">DbSet&lt;T&gt;</td>
-                        <td class="mono">BlazeDbTable&lt;TKey, TRow&gt;</td>
-                        <td class="small muted">entity type to generated descriptor</td>
+                        <td class="bb-mono">DbSet&lt;T&gt;</td>
+                        <td class="bb-mono">BlazeDbTable&lt;TKey, TRow&gt;</td>
+                        <td class="bb-muted">entity type to generated descriptor</td>
                     </tr>
                     <tr>
-                        <td class="mono">SaveChanges</td>
-                        <td class="mono">BeginTransaction / Commit</td>
-                        <td class="small muted">change-tracker entries become one atomic batch</td>
+                        <td class="bb-mono">SaveChanges</td>
+                        <td class="bb-mono">BeginTransaction / Commit</td>
+                        <td class="bb-muted">change-tracker entries become one atomic batch</td>
                     </tr>
                     <tr>
-                        <td class="mono">Find(key)</td>
-                        <td class="mono">table.Get(key)</td>
-                        <td class="small muted">already O(1) with no materialisation step</td>
+                        <td class="bb-mono">Find(key)</td>
+                        <td class="bb-mono">table.Get(key)</td>
+                        <td class="bb-muted">already O(1) with no materialisation step</td>
                     </tr>
                     <tr>
-                        <td class="mono">Where(x =&gt; x.Done)</td>
-                        <td class="mono">UseIndex(hash index)</td>
-                        <td class="small muted">equality on an indexed member becomes a lookup</td>
+                        <td class="bb-mono">Where(x =&gt; x.Done)</td>
+                        <td class="bb-mono">UseIndex(hash index)</td>
+                        <td class="bb-muted">equality on an indexed member becomes a lookup</td>
                     </tr>
                     <tr>
-                        <td class="mono">Where(x =&gt; x.At &gt;= a)</td>
-                        <td class="mono">UseIndex(ordered index)</td>
-                        <td class="small muted">comparisons become a range scan</td>
+                        <td class="bb-mono">Where(x =&gt; x.At &gt;= a)</td>
+                        <td class="bb-mono">UseIndex(ordered index)</td>
+                        <td class="bb-muted">comparisons become a range scan</td>
                     </tr>
                     <tr>
-                        <td class="mono">OrderBy / Skip / Take</td>
-                        <td class="mono">OrderBy / Skip / Take</td>
-                        <td class="small muted">already a 1:1 mapping on the plan</td>
+                        <td class="bb-mono">OrderBy / Skip / Take</td>
+                        <td class="bb-mono">OrderBy / Skip / Take</td>
+                        <td class="bb-muted">already a 1:1 mapping on the plan</td>
                     </tr>
                     <tr>
-                        <td class="mono">Select / GroupBy / aggregates</td>
+                        <td class="bb-mono">Select / GroupBy / aggregates</td>
                         <td>LINQ to Objects</td>
-                        <td class="small muted">runs over the rows the plan returned, at no extra cost</td>
+                        <td class="bb-muted">runs over the rows the plan returned, at no extra cost</td>
                     </tr>
                     <tr>
-                        <td class="mono">Include / navigations</td>
+                        <td class="bb-mono">Include / navigations</td>
                         <td>-</td>
-                        <td class="small muted">not supported: rows are flat, relationships are key properties</td>
+                        <td class="bb-muted">not supported: rows are flat, relationships are key properties</td>
                     </tr>
                 </tbody>
             </table>
@@ -86,19 +86,19 @@
 
 @if (!Db.IsOpen)
 {
-    <Panel><div class="empty">Opening the database…</div></Panel>
+    <div class="bb-empty"><span class="bb-spinner"></span> Opening the database…</div>
 }
 else
 {
-    <Section Title="LINQ against this tab's database" IconName="query"
-             Lead="Each sample is a real DbContext query over the todos table this site opened on start. The LINQ on the right is what ran; the note under it is the plan the translator produced.">
-        <div class="grid grid-sidebar">
-            <div class="flex-col gap-lg">
+    <Section Title="LINQ against this tab's database"
+             Lead="Each sample is a real DbContext query over the todos table this site opened on start. The generated call is the LINQ that ran; the panel under it is the plan the translator produced.">
+        <div class="bd-main-side">
+            <div class="bb-flex">
                 <Panel Title="Samples" IconName="list">
-                    <div class="chip-row">
+                    <div class="bb-segmented" role="group" aria-label="Samples">
                         @foreach (var sample in Samples)
                         {
-                            <button type="button" class="chip @(_sample == sample.Kind ? "on" : null)"
+                            <button type="button" aria-pressed="@(_sample == sample.Kind ? "true" : "false")"
                                     @onclick="() => RunSample(sample.Kind)">
                                 @sample.Label
                             </button>
@@ -108,32 +108,32 @@ else
 
                 <Panel Title="Result" IconName="play" Flush="true">
                     <Actions>
-                        <span class="panel-sub mono">@_querySummary</span>
+                        <span class="bd-panel-sub">@_querySummary</span>
                     </Actions>
                     <ChildContent>
                         @if (_queryLines.Count > 0)
                         {
-                            <div class="log">
+                            <div class="bb-log">
                                 @foreach (var line in _queryLines)
                                 {
-                                    <div class="log-row"><span class="log-name">@line</span></div>
+                                    <div class="bb-log-line">@line</div>
                                 }
                             </div>
                         }
                         else if (_queryRows.Count == 0)
                         {
-                            <div class="empty"><Icon Name="search" /><div>No rows matched.</div></div>
+                            <div class="bb-empty">No rows matched.</div>
                         }
                         else
                         {
-                            <div class="table-wrap">
-                                <table class="data">
+                            <div class="bb-scroll">
+                                <table class="bb-table bb-compare">
                                     <thead>
                                         <tr>
                                             <th>Title</th>
                                             <th>Category</th>
                                             <th>Priority</th>
-                                            <th class="num">Effort</th>
+                                            <th class="bd-num">Effort</th>
                                             <th>Created</th>
                                         </tr>
                                     </thead>
@@ -141,11 +141,11 @@ else
                                         @foreach (var row in _queryRows)
                                         {
                                             <tr>
-                                                <td class="strong">@row.Title</td>
-                                                <td class="mono">@(row.Category ?? "null")</td>
-                                                <td><span class="prio @row.Priority">@row.Priority</span></td>
-                                                <td class="num mono">@row.Effort</td>
-                                                <td class="mono tiny">@row.CreatedAt.ToLocalTime().ToString("MMM d HH:mm")</td>
+                                                <td class="bd-strong">@row.Title</td>
+                                                <td class="bb-mono">@(row.Category ?? "null")</td>
+                                                <td><span class="bd-prio bd-prio-@row.Priority">@row.Priority</span></td>
+                                                <td class="bd-num">@row.Effort</td>
+                                                <td class="bb-mono bd-small">@row.CreatedAt.ToLocalTime().ToString("MMM d HH:mm")</td>
                                             </tr>
                                         }
                                     </tbody>
@@ -156,12 +156,12 @@ else
                 </Panel>
             </div>
 
-            <div class="flex-col gap-lg">
+            <div class="bb-flex">
                 <Panel Title="Generated call" IconName="code">
-                    <CodeBlock Code="@_queryCode" ShowHeader="false" Wrap="true" />
+                    <CodeBlock Code="@_queryCode" Wrap="true" />
                 </Panel>
                 <Panel Title="What the translator did" IconName="layers">
-                    <dl class="kv">
+                    <dl class="bb-params">
                         <dt>Source</dt>
                         <dd>@_querySource</dd>
                         <dt>Remainder</dt>
@@ -171,23 +171,22 @@ else
                         <dt>Elapsed</dt>
                         <dd>@_queryElapsed</dd>
                     </dl>
-                    <p class="small muted mb-0 mt-2">@_queryNote</p>
+                    <p class="bb-muted">@_queryNote</p>
                 </Panel>
             </div>
         </div>
     </Section>
 }
 
-<Section Title="SaveChanges is a memory operation" IconName="txn"
+<Section Title="SaveChanges is a memory operation"
          Lead="Each run opens a throwaway database so the demo todos stay untouched. The trace is what the provider actually did, including the parts that surprise people coming from a relational provider.">
-    <div class="grid grid-sidebar">
-        <div class="flex-col gap-lg">
+    <div class="bd-main-side">
+        <div class="bb-flex">
             <Panel Title="Scenarios" IconName="list">
-                <div class="flex-col">
+                <div class="bd-actions">
                     @foreach (var scenario in TrackScenarios)
                     {
-                        <button type="button" class="btn btn-sm btn-block @(_trackKind == scenario.Kind ? "btn-primary" : null)"
-                                style="justify-content:flex-start"
+                        <button type="button" class="btn @(_trackKind == scenario.Kind ? "btn-primary" : "btn-secondary")"
                                 disabled="@_running"
                                 @onclick="() => RunTrackAsync(scenario.Kind)">
                             <Icon Name="@scenario.Icon" />
@@ -204,27 +203,27 @@ else
             }
         </div>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Trace" IconName="history" Flush="true">
                 <Actions>
                     @if (_running)
                     {
-                        <span class="spinner"></span>
+                        <span class="bb-spinner"></span>
                     }
                 </Actions>
                 <ChildContent>
-                    <ScenarioSteps Steps="_log.Steps" EmptyText="Pick a scenario on the left." />
+                    <ScenarioSteps Steps="_log.Steps" EmptyText="Pick a scenario to run it." />
                 </ChildContent>
             </Panel>
         </div>
     </div>
 </Section>
 
-<Section Title="Where the translation stops" IconName="query"
+<Section Title="Where the translation stops"
          Lead="The translator consumes the longest prefix of the operator chain that fits the plan - filters, then ordering, then paging, in that order - and chooses an index from the predicates and the sort.">
-    <div class="grid grid-2">
+    <div class="bb-split">
         <Panel Title="Absorbed into the plan" IconName="check">
-            <ul class="ticks">
+            <ul class="bd-ticks">
                 <li><code>Where</code> equalities on a key or hash index, including <code>ids.Contains(e.Id)</code> and <code>e.Category == null</code>.</li>
                 <li><code>Where</code> ranges on an ordered index, with residual filters for exclusive bounds.</li>
                 <li>A compound index when several equalities match its members.</li>
@@ -234,7 +233,7 @@ else
             </ul>
         </Panel>
         <Panel Title="Left as LINQ to Objects" IconName="cpu">
-            <ul class="ticks">
+            <ul class="bd-ticks">
                 <li>Projections, grouping, aggregates, joins and subqueries - including ones over another <code>DbSet</code>, which is read as a scan.</li>
                 <li>A <code>Where</code> after a <code>Take</code> - that is not the same as filtering first.</li>
                 <li>A <code>Skip</code> after a <code>Take</code>, which reorders paging.</li>
@@ -242,7 +241,7 @@ else
             </ul>
         </Panel>
     </div>
-    <Callout Tone="info" Title="In a relational provider that fallback is a disaster." Class="mt-2">
+    <Callout Tone="info" Title="In a relational provider that fallback is a disaster.">
         It means pulling rows over a wire and filtering client-side. Here the rows are already
         managed objects in the same heap, so the worst case is a delegate over an in-memory
         sequence - which is what the fast path is too, minus the index.
@@ -250,11 +249,11 @@ else
     </Callout>
 </Section>
 
-<Section Title="Include is refused on purpose" IconName="alert"
+<Section Title="Include is refused on purpose"
          Lead="BlazeDb rows have no navigations. Relationships are modelled as key properties and queried against the other table directly.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <Panel Title="Trigger it" IconName="play">
-            <p class="small">
+            <p>
                 This calls <code>context.Todos.Include("Anything")</code> against the live database
                 and prints the exception the provider actually throws.
             </p>
@@ -263,7 +262,7 @@ else
             </button>
             @if (_includeError is not null)
             {
-                <div class="api-call mt-2">@_includeError</div>
+                <div class="bb-log bd-out">@_includeError</div>
             }
         </Panel>
         <CodeBlock Title="Query the related table yourself" Code="@RelatedSnippet" />
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Errors.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Errors.razor
index 8c450efde6d..5416aba94ee 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Errors.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Errors.razor
@@ -1,55 +1,52 @@
 @page "/errors"
 
-<PageTitle>Errors &amp; edge cases - BlazeDb</PageTitle>
+<PageTitle>Errors &amp; limits · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Behaviour under stress" IconName="alert" Title="Every way BlazeDb says no"
+<PageHeader Eyebrow="Errors & limits" Title="Every way BlazeDb says no"
             Lead="A database earns trust by failing predictably. Each case below is executed for real against a throwaway database and reports the exception type and message it actually produced.">
-    <span class="chip"><Icon Name="play" /> @Cases.Length executable cases</span>
+    <span class="bb-badge bd-badge-neutral">@Cases.Length executable cases</span>
     @if (_ran > 0)
     {
-        <span class="chip @(_failed == 0 ? "ok" : "err")">
-            <Icon Name="@(_failed == 0 ? "check" : "alert")" />
-            @(_ran - _failed)/@_ran behaved as documented
-        </span>
+        <span class="@Tones.Badge(_failed == 0 ? "ok" : "err")">@(_ran - _failed)/@_ran behaved as documented</span>
     }
 </PageHeader>
 
-<Section Title="Run the failure modes" IconName="play"
+<Section Title="Run the failure modes"
          Lead="Nothing here is a screenshot. Each row opens its own database, provokes the failure and prints what came back.">
-    <div class="flex wrap mb-3">
-        <button class="btn btn-primary" disabled="@_busy" @onclick="RunAllAsync">
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-primary" disabled="@_busy" @onclick="RunAllAsync">
             <Icon Name="play" /> @(_busy ? "Running…" : "Run every case")
         </button>
-        <button class="btn" disabled="@(_busy || _results.Count == 0)" @onclick="Clear">
+        <button type="button" class="btn btn-secondary" disabled="@(_busy || _results.Count == 0)" @onclick="Clear">
             <Icon Name="refresh" /> Clear results
         </button>
     </div>
 
     @foreach (var group in Cases.GroupBy(c => c.Group))
     {
-        <Panel Title="@group.Key" IconName="@GroupIcon(group.Key)" Flush="true" Class="mb-3">
-            <div class="case-list">
+        <Panel Title="@group.Key" IconName="@GroupIcon(group.Key)" Flush="true">
+            <div class="bd-cases">
                 @foreach (var item in group)
                 {
                     var result = _results.GetValueOrDefault(item.Id);
-                    <div class="case">
-                        <div class="case-head">
-                            <div class="case-what">
-                                <div class="case-title">@item.Title</div>
-                                <code class="case-api">@item.Api</code>
+                    <div class="bd-case">
+                        <div class="bd-case-head">
+                            <div class="bd-case-what">
+                                <div class="bd-case-title">@item.Title</div>
+                                <code class="bd-case-api">@item.Api</code>
                             </div>
-                            <div class="case-side">
-                                <span class="badge @ExpectedTone(item)">@item.Expected</span>
-                                <button class="btn btn-sm" disabled="@_busy" @onclick="() => RunCaseAsync(item)">
+                            <div class="bd-case-side">
+                                <span class="@Tones.Badge(ExpectedTone(item)) bb-mono">@item.Expected</span>
+                                <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="() => RunCaseAsync(item)">
                                     <Icon Name="play" /> Run
                                 </button>
                             </div>
                         </div>
-                        <p class="case-note">@item.Note</p>
+                        <p class="bd-case-note">@item.Note</p>
                         @if (result is not null)
                         {
-                            <div class="case-result @result.Tone">
-                                <Icon Name="@(result.Tone == "ok" ? "check" : "alert")" />
+                            <div class="bd-case-result @(result.Tone == "ok" ? "bd-case-ok" : "bd-case-err")">
+                                <Icon Name="@(result.Tone == "ok" ? "check" : "alert")" Size="14" />
                                 <span>@result.Detail</span>
                             </div>
                         }
@@ -60,28 +57,28 @@
     }
 </Section>
 
-<Section Title="Things that look like errors but are not" IconName="info"
+<Section Title="Things that look like errors but are not"
          Lead="Several operations that other databases treat as exceptional are ordinary return values here, because they are ordinary situations.">
-    <div class="grid grid-3">
+    <div class="bb-flex">
         <Panel Title="Missing rows" IconName="search">
-            <CodeBlock ShowHeader="false" Code="@MissingSnippet" />
-            <p class="small mt-2 mb-0">
+            <CodeBlock Code="@MissingSnippet" />
+            <p>
                 <code>Get</code> returns <code>default</code>, <code>TryGet</code> returns
                 <code>false</code>, and <code>Delete</code> returns <code>false</code>. Only
                 <code>Update</code> insists the row exists.
             </p>
         </Panel>
         <Panel Title="Null index keys" IconName="key">
-            <CodeBlock ShowHeader="false" Code="@NullIndexSnippet" />
-            <p class="small mt-2 mb-0">
+            <CodeBlock Code="@NullIndexSnippet" />
+            <p>
                 A null is an index key like any other: a lookup with a null key returns the rows
                 whose value is null, never an error, and unique indexes still allow any number of
                 them. Only a bounded range excludes them, since null lies inside no interval.
             </p>
         </Panel>
         <Panel Title="Empty results" IconName="query">
-            <CodeBlock ShowHeader="false" Code="@EmptySnippet" />
-            <p class="small mt-2 mb-0">
+            <CodeBlock Code="@EmptySnippet" />
+            <p>
                 A range with no matches, a lookup on an absent value and a query with an
                 impossible predicate all yield an empty sequence - never null.
             </p>
@@ -89,20 +86,20 @@
     </div>
 </Section>
 
-<Section Title="Handling patterns" IconName="shield"
+<Section Title="Handling patterns"
          Lead="Three patterns cover almost everything an application needs to do about failure.">
-    <div class="grid grid-3">
+    <div class="bb-flex">
         <Panel Title="Open with a fallback" IconName="database" Sub="the one you must write">
-            <CodeBlock ShowHeader="false" Code="@OpenPatternSnippet" />
-            <p class="small mt-2 mb-0">
+            <CodeBlock Code="@OpenPatternSnippet" />
+            <p>
                 This site does the same, except that a locked or unavailable OPFS falls back to an
-                in-memory database rather than a replica - the badge in the sidebar reflects which
+                in-memory database rather than a replica - the storage badge in the corner of the window shows which
                 branch it took.
             </p>
         </Panel>
         <Panel Title="Guard a durability point" IconName="disk">
-            <CodeBlock ShowHeader="false" Code="@FlushPatternSnippet" />
-            <p class="small mt-2 mb-0">
+            <CodeBlock Code="@FlushPatternSnippet" />
+            <p>
                 A background flush failure never loses data - the bytes go back into the buffer and
                 the flusher retries on its next tick. <code>db.LastBackgroundError</code> exposes the
                 standing failure (and clears once a flush succeeds), and an explicit
@@ -110,15 +107,15 @@
             </p>
         </Panel>
         <Panel Title="Keep memory and disk in step" IconName="txn">
-            <CodeBlock ShowHeader="false" Code="@TxnPatternSnippet" />
-            <p class="small mt-2 mb-0">
+            <CodeBlock Code="@TxnPatternSnippet" />
+            <p>
                 Rollback reverses in-memory state and index entries in reverse order and writes
                 nothing to the log, so an abandoned transaction leaves no trace on either side.
             </p>
         </Panel>
     </div>
 
-    <Callout Tone="warn" Title="One caveat worth internalising." Class="mt-3">
+    <Callout Tone="warn" Title="One caveat worth internalising.">
         Rows are live objects, not copies. Mutating a row you fetched changes the table immediately,
         before and regardless of any <code>Update</code> call, and a rollback cannot undo it. Clone
         before editing if you need transactional semantics - the <a href="todos">CRUD page</a> does
@@ -549,7 +546,7 @@
     };
 
     private static string ExpectedTone(Case item) =>
-        item.Expected.EndsWith("Exception", StringComparison.Ordinal) ? "warn mono" : "ok mono";
+        item.Expected.EndsWith("Exception", StringComparison.Ordinal) ? "warn" : "ok";
 
     private const string MissingSnippet = """
         var row = table.Get(missingKey);          // null
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..d01d27874db
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,223 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · BlazeDb</PageTitle>
+
+<PageHeader Eyebrow="Getting started" Title="From package to query in five minutes"
+            Lead="Install one package, declare a table as an annotated partial class, open a database over the storage you want and query it with typed primitives. Everything below is the README's own setup, and every other page of this site runs it against a real database in this tab." />
+
+<Section Title="Install">
+    <p>
+        <code>Bit.BlazeDb</code> is the engine, the source generator and the browser backends in one package;
+        the EF Core provider is a second, optional one.
+    </p>
+    <CodeBlock Language="bash" Code="@InstallSnippet" />
+    <p>
+        The package carries the source generator that turns a <code>[BlazeDbTable]</code> class into a table as an
+        analyzer, so it adds nothing to the application's output. Reference the package directly from every
+        project that declares table types: analyzers do not flow transitively, so a project that gets the engine
+        only through another project compiles the attributes but generates nothing - and <code>TodoItem.Table</code>
+        then does not exist.
+    </p>
+    <CodeBlock Title="_Imports.razor or a global using" Code="@UsingsSnippet" />
+    <Callout Tone="info" Title="Requirements.">
+        .NET 8, 9 or 10 (the EF Core provider targets EF Core 8, 9 and 10 respectively), and Blazor WebAssembly -
+        standalone, or a Blazor Web App's <code>.Client</code> project - for the browser backends. The engine itself
+        has no browser dependency: it runs in any .NET process with the file or in-memory backend.
+    </Callout>
+</Section>
+
+<Section Title="Declare a table, open a database, query it"
+         Lead="A table is a partial class with a key and the indexes you query by. The generator emits its descriptor - TodoItem.Table - and a typed handle for every index under TodoItem.Indexes.">
+    <CodeBlock Title="Quick start" Code="@QuickStartSnippet" />
+    <Callout Tone="warn" Title="Rows are live objects.">
+        A read hands back the instance the table holds, so <code>Update</code> takes a <em>new</em> instance (as
+        above): the table retracts the old index entries through the values of the row it currently holds. To write
+        a row changed in place, hand the table the values it had with <code>UpdateInPlace(row, previousValues)</code>.
+    </Callout>
+    <div class="bb-try">
+        <a href="schema" class="btn btn-outline">What the generator emits →</a>
+        <a href="todos" class="btn btn-outline">The same calls driving a live app →</a>
+    </div>
+</Section>
+
+<Section Title="Open it once per tab"
+         Lead="On Blazor WebAssembly the database lives in the tab, in managed memory, persisted to OPFS. Register a singleton that opens it on first use rather than opening one per component.">
+    <CodeBlock Title="AppDatabase.cs" Code="@ServiceSnippet" />
+    <p>
+        The database does not own its storage: dispose the storage after the database, which is what releases the
+        writer lock for the next tab. <code>CreateAsync</code> throws <code>BlazeDbDatabaseLockedException</code>
+        when another tab already holds it - open a read-only replica there instead, or fall back to
+        <code>BlazeDbInMemoryStorage</code> the way this site does. There is no script tag to add: each browser
+        backend imports its ES module from <code>_content/Bit.BlazeDb/</code> the first time it is used.
+    </p>
+    <Callout Tone="warn" Title="In a Blazor Web App, mind prerendering.">
+        A prerendered component runs on the server first, where there is no OPFS, no IndexedDB and no Web Locks.
+        Turn prerendering off for the pages that use the database - this site uses
+        <code>new InteractiveWebAssemblyRenderMode(prerender: false)</code> for the whole app - or open the database
+        only once the component runs in the browser.
+    </Callout>
+</Section>
+
+<Section Title="How a read and a write travel"
+         Lead="Reads stop at the first layer. Only writes continue past it, and never on your thread.">
+    <div class="bd-diagram" role="img" aria-label="A write goes from your component to the in-memory row store and indexes, into the transaction buffer, then on a background loop to the log, snapshot and manifest files, through the four-method storage interface to OPFS, a directory or memory.">
+        <div class="bd-dg-row">
+            <div class="bd-dg-box">
+                <div class="bd-dg-title"><Icon Name="code" Size="14" /> Your component</div>
+                <div class="bd-dg-note">todos.Insert(row)</div>
+            </div>
+        </div>
+        <div class="bd-dg-arrow">synchronous</div>
+        <div class="bd-dg-row">
+            <div class="bd-dg-box bd-dg-mem">
+                <div class="bd-dg-title"><Icon Name="database" Size="14" /> Row store</div>
+                <div class="bd-dg-note">Dictionary&lt;TKey, TRow&gt; of live objects</div>
+            </div>
+            <div class="bd-dg-box bd-dg-mem">
+                <div class="bd-dg-title"><Icon Name="index" Size="14" /> Hash indexes</div>
+                <div class="bd-dg-note">O(1) equality buckets</div>
+            </div>
+            <div class="bd-dg-box bd-dg-mem">
+                <div class="bd-dg-title"><Icon Name="sort" Size="14" /> Ordered indexes</div>
+                <div class="bd-dg-note">O(log n) range scans</div>
+            </div>
+        </div>
+        <div class="bd-dg-arrow">recorded, still synchronous</div>
+        <div class="bd-dg-row">
+            <div class="bd-dg-box">
+                <div class="bd-dg-title"><Icon Name="txn" Size="14" /> Transaction buffer</div>
+                <div class="bd-dg-note">Undo log + WAL records, atomic on Commit()</div>
+            </div>
+        </div>
+        <div class="bd-dg-arrow">background loop, every FlushInterval</div>
+        <div class="bd-dg-row">
+            <div class="bd-dg-box bd-dg-io">
+                <div class="bd-dg-title"><Icon Name="file" Size="14" /> wal-N.blz</div>
+                <div class="bd-dg-note">Append-only, CRC per record</div>
+            </div>
+            <div class="bd-dg-box bd-dg-io">
+                <div class="bd-dg-title"><Icon Name="layers" Size="14" /> snapshot-N.blz</div>
+                <div class="bd-dg-note">Full image written at checkpoint</div>
+            </div>
+            <div class="bd-dg-box bd-dg-io">
+                <div class="bd-dg-title"><Icon Name="key" Size="14" /> manifest.blz</div>
+                <div class="bd-dg-note">Points at the newest valid snapshot</div>
+            </div>
+        </div>
+        <div class="bd-dg-arrow">IBlazeDbStorage - four async methods</div>
+        <div class="bd-dg-row">
+            <div class="bd-dg-box bd-dg-io">
+                <div class="bd-dg-title"><Icon Name="disk" Size="14" /> BlazeDbOpfsStorage</div>
+                <div class="bd-dg-note">Browser, private origin file system</div>
+            </div>
+            <div class="bd-dg-box bd-dg-io">
+                <div class="bd-dg-title"><Icon Name="disk" Size="14" /> BlazeDbFileStorage</div>
+                <div class="bd-dg-note">Desktop and server hosts</div>
+            </div>
+            <div class="bd-dg-box bd-dg-io">
+                <div class="bd-dg-title"><Icon Name="cpu" Size="14" /> BlazeDbInMemoryStorage</div>
+                <div class="bd-dg-note">Tests and crash simulation</div>
+            </div>
+        </div>
+    </div>
+    <div class="bb-try">
+        <a href="durability" class="btn btn-outline">Crash it on purpose →</a>
+        <a href="storage" class="btn btn-outline">Trace the engine's I/O →</a>
+    </div>
+</Section>
+
+<Section Title="Where to go next">
+    <div class="bb-grid">
+        @foreach (var section in DocsCatalog.Sections.Skip(1))
+        {
+            <div class="bb-card">
+                <p class="bb-overline">@section.Title</p>
+                <ul class="bb-link-list">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li><a href="@entry.Url.TrimStart('/')" title="@entry.Description">@entry.Title</a></li>
+                    }
+                </ul>
+            </div>
+        }
+    </div>
+</Section>
+
+@code {
+    private const string InstallSnippet = """
+        # the engine, the source generator and the browser backends
+        dotnet add package Bit.BlazeDb
+
+        # the EF Core provider - UseBlazeDb()
+        dotnet add package Bit.BlazeDb.EntityFrameworkCore
+        """;
+
+    private const string UsingsSnippet = """
+        global using Bit.BlazeDb;
+        global using Bit.BlazeDb.Browser;   // the browser backends
+        global using Bit.BlazeDb.Storage;   // IBlazeDbStorage, the file and in-memory backends, encryption
+        global using Bit.BlazeDb.Querying;  // BlazeDbQuery, BlazeDbBound
+        """;
+
+    private const string QuickStartSnippet = """
+        [BlazeDbTable("todos")]
+        [BlazeDbCompoundIndex("CategoryDone", nameof(Category), nameof(Done))]
+        public partial class TodoItem
+        {
+            [BlazeDbKey] public Guid Id { get; set; }
+            [BlazeDbIndex(Unique = true)] public string Slug { get; set; } = "";
+            public string Title { get; set; } = "";
+            public string? Category { get; set; }
+            [BlazeDbIndex] public bool Done { get; set; }
+            [BlazeDbOrderedIndex] public DateTime CreatedAt { get; set; }
+        }
+
+        var db = await BlazeDbDatabase.OpenAsync(new BlazeDbDatabaseOptions
+        {
+            Storage = await BlazeDbOpfsStorage.CreateAsync("mydb"), // or BlazeDbFileStorage / BlazeDbInMemoryStorage / null
+        }.AddTable(TodoItem.Table));
+
+        var todos = db.GetTable(TodoItem.Table);
+
+        var id = Guid.NewGuid();
+        todos.Insert(new TodoItem { Id = id, Slug = "hello", Title = "hello", CreatedAt = DateTime.UtcNow });
+        var one = todos.Get(id);                                  // O(1), no I/O
+        var open = todos.Lookup(TodoItem.Indexes.Done, false);    // hash index
+        var latest = todos.OrderBy(TodoItem.Indexes.CreatedAt, descending: true);
+        var range = todos.Range(TodoItem.Indexes.CreatedAt, from, to);
+        var both = todos.Lookup(TodoItem.Indexes.CategoryDone, ("work", false)); // one compound lookup
+
+        using (var txn = db.BeginTransaction())
+        {
+            todos.Update(new TodoItem { Id = id, Slug = "hello", Title = "hello", Done = true, CreatedAt = one!.CreatedAt });
+            txn.Commit();
+        }
+
+        await db.FlushAsync(); // force durability now (otherwise flushed in the background)
+        """;
+
+    private const string ServiceSnippet = """
+        public sealed class AppDatabase : IAsyncDisposable
+        {
+            private Task<BlazeDbDatabase>? _opening;
+            private BlazeDbOpfsStorage? _storage;
+
+            public Task<BlazeDbDatabase> GetAsync() => _opening ??= OpenAsync();
+
+            private async Task<BlazeDbDatabase> OpenAsync()
+            {
+                _storage = await BlazeDbOpfsStorage.CreateAsync("app"); // takes this tab's writer lock
+                return await BlazeDbDatabase.OpenAsync(new BlazeDbDatabaseOptions { Storage = _storage }.AddTable(TodoItem.Table));
+            }
+
+            public async ValueTask DisposeAsync()
+            {
+                if (_opening is not null) await (await _opening).DisposeAsync(); // flushes what is still pending
+                _storage?.Dispose();                                             // and only then releases the lock
+            }
+        }
+
+        // Program.cs
+        builder.Services.AddSingleton<AppDatabase>();
+        """;
+}
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Home.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Home.razor
index f7bf2355530..c3f0263284d 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Home.razor
@@ -1,280 +1,381 @@
 @page "/"
+@layout MainLayout
 @inject DemoDbService Db
 
-<PageTitle>BlazeDb - a memory-first database for the browser</PageTitle>
+<PageTitle>BlazeDb - a memory-first database for Blazor</PageTitle>
 
-<div class="hero rise">
-    <div class="hero-inner">
-        <div class="eyebrow"><Icon Name="flame" Size="13" /> Embedded engine for .NET &amp; Blazor WebAssembly</div>
-        <h1>Your data lives in <span class="grad">memory</span>.<br />Durability is a background job.</h1>
-        <p>
-            BlazeDb is a SQL-free embedded database that keeps every row as a strongly-typed .NET
-            object in managed memory. Reads are plain method calls into hash and ordered indexes -
-            no query parsing, no JavaScript interop, no I/O. Writes commit to memory synchronously
-            and stream to a write-ahead log that reaches OPFS in the background.
-        </p>
-        <div class="hero-actions">
-            <a class="btn btn-primary btn-lg" href="todos"><Icon Name="play" /> Open the live app</a>
-            <a class="btn btn-outline btn-lg" href="schema"><Icon Name="code" /> Tour the API</a>
-        </div>
-        <div class="hero-chips">
-            <span class="chip"><Icon Name="bolt" /> 2.6 ns point reads</span>
-            <span class="chip"><Icon Name="shield" /> WAL + snapshots</span>
-            <span class="chip"><Icon Name="cpu" /> Zero runtime reflection</span>
-            <span class="chip"><Icon Name="disk" /> OPFS persistence</span>
-        </div>
-    </div>
-</div>
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with
+   sqlite-wasm → persona tiles → FAQ → final call to action. Everything else on the site is a
+   documentation page under DocsLayout. The hero's sample is this tab's real database rather than a
+   picture of one: the row it inserts is a row on every other page too. *@
 
-<Section Title="This page is running on the engine" IconName="database"
-         Lead="Everything below is read from the live database this tab opened when the app started.">
-    <div class="stats">
-        <StatTile Label="Rows in memory" IconName="database" Tone="accent"
-                  Value="@(Db.IsOpen ? Db.Todos.Count.ToString("N0") : "-")"
-                  Note="todos table" />
-        <StatTile Label="Secondary indexes" IconName="index"
-                  Value="@TodoEntry.Table.Indexes.Count.ToString()"
-                  Note="3 hash · 2 ordered" />
-        <StatTile Label="Tables registered" IconName="layers" Value="3"
-                  Note="todos · settings · metrics" />
-        <StatTile Label="Storage backend" IconName="disk" Tone="@(Db.IsPersistent ? "ok" : "")"
-                  Value="@(Db.IsPersistent ? "OPFS" : "Memory")"
-                  Note="@(Db.IsPersistent ? "survives reload" : "this session only")" />
-        <StatTile Label="Engine I/O calls" IconName="history"
-                  Value="@((Db.Trace?.CallCount ?? 0).ToString("N0"))"
-                  Note="@($"{DemoSandbox.Bytes(Db.Trace?.BytesWritten ?? 0)} written")" />
-    </div>
+<div class="bb-landing">
 
-    @if (!Db.IsPersistent && Db.StorageNote is not null)
-    {
-        <Callout Tone="warn" Title="Running without persistence." Class="mt-2">
-            @Db.StorageNote Every feature still works; data simply disappears when you close the tab.
-        </Callout>
-    }
-</Section>
+    @* ============================== Hero ============================== *@
 
-<Section Title="Three costs BlazeDb removes" IconName="bolt">
-    <div class="grid grid-3">
-        <div class="card">
-            <div class="card-icon"><Icon Name="cpu" /></div>
-            <h3>No interop on the read path</h3>
-            <p>
-                sqlite-wasm bridges and IndexedDB wrappers cross into JavaScript for every
-                operation. BlazeDb keeps rows as managed objects, so a lookup is a dictionary
-                probe inside the same wasm heap.
-            </p>
-        </div>
-        <div class="card">
-            <div class="card-icon"><Icon Name="query" /></div>
-            <h3>No query language</h3>
-            <p>
-                Nothing to parse, plan or bind. You call typed primitives - <code>Get</code>,
-                <code>Lookup</code>, <code>Range</code>, <code>Scan</code> - or compose them
-                through <code>BlazeDbQuery&lt;TKey, TRow&gt;</code>.
-            </p>
-        </div>
-        <div class="card">
-            <div class="card-icon"><Icon Name="shield" /></div>
-            <h3>No synchronous I/O</h3>
-            <p>
-                Commits apply to memory immediately and append to a write-ahead log that a
-                background loop flushes to storage. Your UI never awaits the disk.
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Your data lives in memory.<br /><span class="bb-hero-accent">Durability is a background job.</span></h1>
+            <p class="bb-hero-sub">
+                BlazeDb is a SQL-free embedded database for .NET and Blazor WebAssembly that keeps every row as a
+                strongly typed object in managed memory. Reads are plain method calls into hash and ordered indexes -
+                no query parsing, no JavaScript interop, no I/O. Writes commit to memory and stream to a write-ahead
+                log that reaches OPFS in the background.
             </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.BlazeDb</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="todos" class="btn btn-secondary bb-btn-lg">Open the live app</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
         </div>
-    </div>
-</Section>
 
-<Section Title="How a write travels" IconName="layers"
-         Lead="Reads stop at the first layer. Only writes continue past it, and never on your thread.">
-    <Panel>
-        <div class="diagram">
-            <div class="dg-row">
-                <div class="dg-box">
-                    <div class="dg-title"><Icon Name="code" /> Your component</div>
-                    <div class="dg-note">todos.Insert(row)</div>
-                </div>
-            </div>
-            <div class="dg-arrow"><Icon Name="arrow-down" /> synchronous</div>
-            <div class="dg-row">
-                <div class="dg-box mem">
-                    <div class="dg-title"><Icon Name="database" /> Row store</div>
-                    <div class="dg-note">Dictionary&lt;TKey, TRow&gt; of live objects</div>
-                </div>
-                <div class="dg-box mem">
-                    <div class="dg-title"><Icon Name="index" /> Hash indexes</div>
-                    <div class="dg-note">O(1) equality buckets</div>
+        @* The sample, framed as a window: the calls on top, and what they return underneath - against
+           the database this tab opened when the app started. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Todos.razor · <strong>@(Db.IsOpen ? Db.StorageLabel : "opening…")</strong></span>
                 </div>
-                <div class="dg-box mem">
-                    <div class="dg-title"><Icon Name="sort" /> Ordered indexes</div>
-                    <div class="dg-note">O(log n) range scans</div>
+                <pre class="bb-code"><span class="k">var</span> todos = db.GetTable(TodoEntry.Table);
+
+todos.Insert(<span class="k">new</span> TodoEntry
+{
+    Id = Guid.NewGuid(), Title = title, CreatedAt = DateTime.UtcNow,
+});
+
+<span class="k">var</span> open = todos.CountBy(TodoEntry.Indexes.Done, <span class="k">false</span>); <span class="c">// a bucket size</span>
+<span class="k">var</span> newest = todos.OrderBy(TodoEntry.Indexes.CreatedAt, descending: <span class="k">true</span>);</pre>
+                <div class="bd-hero-live">
+                    @if (_error is not null)
+                    {
+                        <p class="bd-err">@_error</p>
+                    }
+                    else if (!Db.IsOpen)
+                    {
+                        <p class="bb-muted"><span class="bb-spinner"></span> Opening this tab's database…</p>
+                    }
+                    else
+                    {
+                        <div class="bd-hero-add">
+                            <input id="hero-title" aria-label="Title of a new todo" placeholder="Add a todo to this tab's database"
+                                   @bind="_title" @bind:event="oninput" @onkeydown="OnKey" />
+                            <button type="button" class="btn btn-primary" disabled="@string.IsNullOrWhiteSpace(_title)" @onclick="Insert">Insert</button>
+                        </div>
+                        <dl class="bd-hero-stats">
+                            <div><dt>todos.Count</dt><dd>@Db.Todos.Count.ToString("N0")</dd></div>
+                            <div><dt>open</dt><dd>@Db.Todos.CountBy(TodoEntry.Indexes.Done, false).ToString("N0")</dd></div>
+                            <div><dt>last Insert</dt><dd>@_lastInsert</dd></div>
+                        </dl>
+                        <ol class="bd-hero-rows" aria-label="Newest todos">
+                            @foreach (var row in Db.Todos.OrderBy(TodoEntry.Indexes.CreatedAt, descending: true).Take(3))
+                            {
+                                <li @key="row.Id"><span>@row.Title</span><span class="bb-mono">@row.CreatedAt.ToLocalTime().ToString("HH:mm:ss")</span></li>
+                            }
+                        </ol>
+                    }
                 </div>
             </div>
-            <div class="dg-arrow"><Icon Name="arrow-down" /> recorded, still synchronous</div>
-            <div class="dg-row">
-                <div class="dg-box">
-                    <div class="dg-title"><Icon Name="txn" /> Transaction buffer</div>
-                    <div class="dg-note">Undo log + WAL records, atomic on Commit()</div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>2.6 ns point reads</strong><span>a dictionary probe, zero allocations, no statement to bind</span></div>
+        <div><strong>No SQL, no interop</strong><span>typed <code>Get</code>, <code>Lookup</code>, <code>Range</code> and <code>Scan</code> on the read path</span></div>
+        <div><strong>WAL + snapshots</strong><span>atomic commits, crash recovery, persisted to OPFS</span></div>
+        <div><strong>Zero runtime reflection</strong><span>a source generator emits the schema - trimming and AOT safe</span></div>
+    </section>
+
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>A database that is just objects and indexes</h2>
+        <p class="bb-section-sub">
+            Rows are the objects your code already uses, and every query is a call into an index you declared - the
+            engine around them adds atomic transactions, durability and an EF Core provider, and nothing you would have
+            to parse.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Schema from your types</h3>
+                <p class="bb-card-desc">
+                    <code>[BlazeDbTable]</code>, <code>[BlazeDbKey]</code> and the index attributes on a partial class -
+                    the generator emits the serializers, the key extractor and a typed handle for every index.
+                </p>
+                <a href="schema" class="btn btn-outline">Schema &amp; codegen →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Hash and ordered indexes</h3>
+                <p class="bb-card-desc">
+                    Equality in O(1), ranges and sort order in O(log n), compound and unique indexes - maintained on
+                    every insert, update, delete and rollback.
+                </p>
+                <a href="indexes" class="btn btn-outline">Indexes →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Queries without a language</h3>
+                <p class="bb-card-desc">
+                    <code>BlazeDbQuery</code> composes one index source, residual predicates, ordering and paging - and
+                    <code>ExecuteAsync</code> streams a large result without freezing the browser's only thread.
+                </p>
+                <a href="queries" class="btn btn-outline">Query primitives →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> An EF Core provider</h3>
+                <p class="bb-card-desc">
+                    <code>AddDbContext</code> plus <code>UseBlazeDb</code>: LINQ is translated onto the same index plan,
+                    and <code>SaveChanges</code> is one engine transaction over the live rows.
+                </p>
+                <a href="efcore" class="btn btn-outline">EF Core →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Crash-safe durability</h3>
+                <p class="bb-card-desc">
+                    Group-committed log records with a CRC each, snapshot checkpoints and an atomic manifest - a torn
+                    tail is truncated on replay, real corruption is reported rather than hidden.
+                </p>
+                <a href="durability" class="btn btn-outline">Durability &amp; recovery →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Built for the browser</h3>
+                <p class="bb-card-desc">
+                    OPFS and IndexedDB backends, a Web Lock so one tab writes, read-only replica tabs, quota awareness
+                    and encryption at rest through WebCrypto.
+                </p>
+                <a href="storage" class="btn btn-outline">Storage backends →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Declare a table</h3>
+                    <p>
+                        A partial class with one key and the indexes you query by. The generator turns it into
+                        <code>TodoItem.Table</code> and <code>TodoItem.Indexes</code> at compile time.
+                    </p>
+                    <a href="schema">Schema &amp; codegen →</a>
                 </div>
+                <pre class="bb-code">[<span class="p">BlazeDbTable</span>(<span class="s">"todos"</span>)]
+<span class="k">public partial class</span> TodoItem
+{
+    [<span class="p">BlazeDbKey</span>] <span class="k">public</span> Guid Id { <span class="k">get</span>; <span class="k">set</span>; }
+    <span class="k">public string</span> Title { <span class="k">get</span>; <span class="k">set</span>; } = <span class="s">""</span>;
+    [<span class="p">BlazeDbIndex</span>] <span class="k">public bool</span> Done { <span class="k">get</span>; <span class="k">set</span>; }
+}</pre>
             </div>
-            <div class="dg-arrow"><Icon Name="arrow-down" /> background loop, every FlushInterval</div>
-            <div class="dg-row">
-                <div class="dg-box io">
-                    <div class="dg-title"><Icon Name="file" /> wal-N.blz</div>
-                    <div class="dg-note">Append-only, CRC per record</div>
-                </div>
-                <div class="dg-box io">
-                    <div class="dg-title"><Icon Name="layers" /> snapshot-N.blz</div>
-                    <div class="dg-note">Full image written at checkpoint</div>
-                </div>
-                <div class="dg-box io">
-                    <div class="dg-title"><Icon Name="key" /> manifest.blz</div>
-                    <div class="dg-note">Points at the newest valid snapshot</div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Open it over OPFS</h3>
+                    <p>
+                        The storage is the only thing that says where the bytes go - the origin private file system in
+                        the browser, a directory on the desktop, a dictionary in a test.
+                    </p>
+                    <a href="storage">Storage backends →</a>
                 </div>
+                <pre class="bb-code"><span class="k">var</span> options = <span class="k">new</span> BlazeDbDatabaseOptions
+{
+    Storage = <span class="k">await</span> BlazeDbOpfsStorage.CreateAsync(<span class="s">"mydb"</span>),
+}.AddTable(TodoItem.Table);
+
+<span class="k">await using var</span> db = <span class="k">await</span> BlazeDbDatabase.OpenAsync(options);</pre>
             </div>
-            <div class="dg-arrow"><Icon Name="arrow-down" /> IBlazeDbStorage - four async methods</div>
-            <div class="dg-row">
-                <div class="dg-box io">
-                    <div class="dg-title"><Icon Name="disk" /> BlazeDbOpfsStorage</div>
-                    <div class="dg-note">Browser, private origin file system</div>
-                </div>
-                <div class="dg-box io">
-                    <div class="dg-title"><Icon Name="disk" /> BlazeDbFileStorage</div>
-                    <div class="dg-note">Desktop and server hosts</div>
-                </div>
-                <div class="dg-box io">
-                    <div class="dg-title"><Icon Name="cpu" /> BlazeDbInMemoryStorage</div>
-                    <div class="dg-note">Tests and crash simulation</div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Read from memory, write in batches</h3>
+                    <p>
+                        A lookup is an index probe with no I/O. A transaction makes a batch of writes one atomic log
+                        record, flushed in the background - or now, with <code>FlushAsync</code>.
+                    </p>
+                    <a href="transactions">Transactions →</a>
                 </div>
+                <pre class="bb-code"><span class="k">var</span> todos = db.GetTable(TodoItem.Table);
+<span class="k">var</span> open = todos.Lookup(TodoItem.Indexes.Done, <span class="k">false</span>); <span class="c">// no I/O, no SQL, no interop</span>
+
+<span class="k">using</span> (<span class="k">var</span> txn = db.BeginTransaction())
+{
+    todos.Insert(<span class="k">new</span> TodoItem { Id = Guid.NewGuid(), Title = <span class="s">"hello"</span> });
+    txn.Commit();
+}</pre>
             </div>
         </div>
-    </Panel>
-</Section>
+    </section>
 
-<Section Title="Quick start" IconName="code"
-         Lead="Declare a table, open a database, query it. That is the whole surface for typical use.">
-    <div class="grid grid-2">
-        <CodeBlock Title="Model.cs" Code="@ModelSnippet" />
-        <CodeBlock Title="Usage.cs" Code="@UsageSnippet" />
-    </div>
-    <Callout Tone="accent" Title="Nothing is reflected at runtime.">
-        The Roslyn generator emits the serializers, key extractor and index definitions at compile
-        time, which is what makes the engine trimming- and AOT-safe.
-        <a href="schema">See exactly what it generates →</a>
-    </Callout>
-</Section>
+    @* ============================== Comparison ============================== *@
 
-<Section Title="Measured performance" IconName="gauge"
-         Lead="BenchmarkDotNet on .NET 10, 10,000-row table, against native in-memory SQLite with prepared statements.">
-    <Panel Flush="true">
-        <div class="table-wrap">
-            <table class="data">
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not sqlite-wasm or an IndexedDB wrapper?</h2>
+        <p class="bb-section-sub">
+            Client-side databases for Blazor pay on every operation: JavaScript interop marshalling, worker round-trips
+            and SQL parsing. BlazeDb removes all three. BenchmarkDotNet on .NET 10, a 10,000-row table, against native
+            in-memory SQLite with prepared statements - a favourable stand-in for sqlite-wasm, which pays the interop on
+            top.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="BlazeDb compared with SQLite">
+            <table class="bb-table bb-compare">
                 <thead>
-                    <tr>
-                        <th>Operation</th>
-                        <th class="num">BlazeDb</th>
-                        <th class="num">SQLite</th>
-                        <th>Why</th>
-                    </tr>
+                    <tr><th>Operation</th><th>SQLite</th><th>BlazeDb</th></tr>
                 </thead>
                 <tbody>
-                    <tr>
-                        <td class="strong">Point get by key</td>
-                        <td class="num mono">2.6 ns</td>
-                        <td class="num mono">876 ns</td>
-                        <td>Dictionary probe, zero allocation, no statement binding</td>
-                    </tr>
-                    <tr>
-                        <td class="strong">Count by hash index</td>
-                        <td class="num mono">2.7 ns</td>
-                        <td class="num mono">67,649 ns</td>
-                        <td>Bucket size lookup versus a table scan</td>
-                    </tr>
-                    <tr>
-                        <td class="strong">Ordered range scan (~5,100 rows)</td>
-                        <td class="num mono">55.6 µs</td>
-                        <td class="num mono">69.3 µs</td>
-                        <td>Comparable - both are index-driven</td>
-                    </tr>
-                    <tr>
-                        <td class="strong">Upsert, autocommit</td>
-                        <td class="num mono">462 ns</td>
-                        <td class="num mono">752 ns</td>
-                        <td>With WAL journaling; 328 ns memory-only</td>
-                    </tr>
-                    <tr>
-                        <td class="strong">Upsert in a 1,000-op transaction</td>
-                        <td class="num mono">487 ns</td>
-                        <td class="num mono">682 ns</td>
-                        <td>Per operation, still journaled</td>
-                    </tr>
+                    <tr><td>Point get by key</td><td>876 ns</td><td>2.6 ns, zero allocations</td></tr>
+                    <tr><td>Count by hash index</td><td>67,649 ns - a table scan</td><td>2.7 ns - a bucket size</td></tr>
+                    <tr><td>Ordered range scan (~5,100 rows)</td><td>69.3 µs</td><td>55.6 µs - both index-driven</td></tr>
+                    <tr><td>Upsert, autocommit</td><td>752 ns</td><td>462 ns with the WAL, 328 ns memory-only</td></tr>
+                    <tr><td>Upsert in a 1,000-op transaction</td><td>682 ns per op</td><td>487 ns per op, journaled</td></tr>
+                    <tr><td>Query language</td><td>SQL, parsed and planned</td><td>Typed calls into your indexes, or LINQ through EF Core</td></tr>
                 </tbody>
             </table>
         </div>
-    </Panel>
-    <Callout Tone="info" Title="Native SQLite is a favourable comparison.">
-        A real sqlite-wasm deployment additionally pays JavaScript interop, worker round-trips and
-        wasm execution overhead on every query. <a href="bench">Run the benchmark in this browser →</a>
-    </Callout>
-</Section>
+        <div class="bb-try">
+            <a href="bench" class="btn btn-outline">Measure it in this browser →</a>
+        </div>
+    </section>
 
-<Section Title="Everything this demo covers" IconName="map">
-    <div class="grid grid-2">
-        @foreach (var item in SiteMap.Items.Where(i => i.Path.Length > 0))
-        {
-            <a class="card" href="@item.Path">
-                <div class="card-icon"><Icon Name="@item.Icon" /></div>
-                <h3>@item.Title</h3>
-                <p>@item.Blurb</p>
-                <span class="card-arrow">Open <Icon Name="arrow-right" /></span>
-            </a>
-        }
-    </div>
-</Section>
+    @* ============================== Persona CTAs ============================== *@
 
-@code {
-    protected override async Task OnInitializedAsync() => await Db.GetDatabaseAsync();
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to BlazeDb?</h3>
+                <p class="bb-card-desc">Install the package, declare a table, open a database and query it - the whole surface for typical use.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Coming from EF Core?</h3>
+                <p class="bb-card-desc">Keep your DbContext: <code>UseBlazeDb</code> maps it onto the engine, and LINQ lands on the indexes.</p>
+                <a href="efcore" class="btn btn-outline">EF Core →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Want to break it first?</h3>
+                <p class="bb-card-desc">Crash a database mid-flight, tear the log, corrupt a checksum - and watch what recovery keeps.</p>
+                <a href="durability" class="btn btn-outline">Crash it on purpose →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
 
-    private const string ModelSnippet = """
-        [BlazeDbTable("todos")]
-        public partial class TodoEntry
-        {
-            [BlazeDbKey] public Guid Id { get; set; }
+    @* ============================== FAQ ============================== *@
 
-            public string Title { get; set; } = "";
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is the whole database held in memory?</summary>
+                <p>
+                    Yes, by design. Everything is loaded on open and every read is served from managed memory, which is
+                    what keeps I/O off the read path. That is the right trade for a client-side application working with
+                    its own user's data, and the wrong one for a shared multi-tenant database.
+                </p>
+            </details>
+            <details>
+                <summary>What happens to my data if the tab closes mid-write?</summary>
+                <p>
+                    Commits reach the write-ahead log within the flush interval - 100 ms by default - and
+                    <code>FlushAsync</code> closes that window to zero. On the next open the log is replayed up to the last
+                    record whose checksum verifies; a torn tail is truncated, and a corrupt manifest or snapshot throws
+                    <code>BlazeDbCorruptDatabaseException</code> instead of silently losing data.
+                </p>
+            </details>
+            <details>
+                <summary>What if the app is open in two tabs?</summary>
+                <p>
+                    One tab wins a Web Lock and writes; <code>CreateAsync</code> throws
+                    <code>BlazeDbDatabaseLockedException</code> in the others, which can open the same database read-only
+                    and reload whenever the writer checkpoints. This site falls back to an in-memory database instead -
+                    open it in a second tab and the storage badge says so.
+                </p>
+            </details>
+            <details>
+                <summary>Does it run outside the browser?</summary>
+                <p>
+                    The engine has no browser dependency: on Blazor Server, ASP.NET Core, MAUI, WPF or a console tool it
+                    persists through <code>BlazeDbFileStorage</code>. It assumes one logical writer with no concurrent
+                    readers, so a multi-threaded server has to serialize access itself.
+                </p>
+            </details>
+            <details>
+                <summary>Is it trimming and AOT safe?</summary>
+                <p>
+                    Yes. The serializers, the key extractor and the index definitions are generated at compile time, so
+                    nothing is reflected at runtime and the WebAssembly linker can trim everything unused.
+                </p>
+            </details>
+        </div>
+    </section>
 
-            [BlazeDbIndex] public bool Done { get; set; }
+    @* ============================== Final CTA ============================== *@
 
-            [BlazeDbIndex] public string? Category { get; set; }
+    <section class="bb-final-cta">
+        <h2>Put a database in the tab</h2>
+        <p class="bb-section-sub">One package, one partial class, one <code>OpenAsync</code> - and your reads stop waiting on anything.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.BlazeDb</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="todos" class="btn btn-secondary bb-btn-lg">Open the live app</a>
+        </div>
+    </section>
+</div>
 
-            [BlazeDbOrderedIndex] public DateTime CreatedAt { get; set; }
-        }
-        """;
+@code {
+    private string _title = "";
+    private string _lastInsert = "-";
+    private string? _error;
 
-    private const string UsageSnippet = """
-        var db = await BlazeDbDatabase.OpenAsync(new BlazeDbDatabaseOptions
+    protected override async Task OnInitializedAsync()
+    {
+        try
         {
-            Storage = await BlazeDbOpfsStorage.CreateAsync("mydb"),
-            FlushInterval = TimeSpan.FromMilliseconds(100),
-        }.AddTable(TodoEntry.Table));
-
-        var todos = db.GetTable(TodoEntry.Table);
+            await Db.GetDatabaseAsync();
+        }
+        catch (Exception ex)
+        {
+            _error = $"The database could not be opened: {ex.Message}";
+        }
+    }
 
-        todos.Insert(new TodoEntry { Id = id, Title = "hello", CreatedAt = DateTime.UtcNow });
+    private void Insert()
+    {
+        if (!Db.IsOpen || string.IsNullOrWhiteSpace(_title))
+        {
+            return;
+        }
 
-        var one = todos.Get(id);                                  // O(1), no I/O
-        var open = todos.Lookup(TodoEntry.Indexes.Done, false);   // hash index
-        var newest = todos.OrderBy(TodoEntry.Indexes.CreatedAt, descending: true);
+        var sw = System.Diagnostics.Stopwatch.StartNew();
+        Db.Todos.Insert(new TodoEntry { Id = Guid.NewGuid(), Title = _title.Trim(), CreatedAt = DateTime.UtcNow });
+        _lastInsert = DemoSandbox.Duration(sw.Elapsed.TotalMilliseconds);
+        _title = "";
+    }
 
-        using (var txn = db.BeginTransaction())
+    private void OnKey(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter")
         {
-            // Rows are live objects: hand Update a copy, so the table can still see the
-            // values its indexes were built from (or use UpdateInPlace with those values).
-            var changed = one!.Clone();
-            changed.Done = true;
-            todos.Update(changed);
-            txn.Commit();
+            Insert();
         }
-
-        await db.FlushAsync();   // force durability now
-        """;
+    }
 }
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Indexes.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Indexes.razor
index ded68748d7c..2e81b640728 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Indexes.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Indexes.razor
@@ -2,46 +2,46 @@
 @implements IAsyncDisposable
 @inject DemoDbService Db
 
-<PageTitle>Indexes - BlazeDb</PageTitle>
+<PageTitle>Indexes · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Engine" IconName="index" Title="Two index kinds, both maintained for you"
+<PageHeader Eyebrow="Indexes" Title="Two index kinds, both maintained for you"
             Lead="A hash index answers equality in constant time. An ordered index answers range and sort questions in logarithmic time. Every insert, update and delete keeps both in step - there is no reindex step and no stale index.">
-    <span class="chip on"><Icon Name="index" /> 3 hash</span>
-    <span class="chip on"><Icon Name="sort" /> 2 ordered</span>
-    <span class="chip"><Icon Name="database" /> @(_todos?.Count ?? 0) rows</span>
+    <span class="bb-badge">3 hash</span>
+    <span class="bb-badge">2 ordered</span>
+    <span class="bb-badge bd-badge-neutral">@(_todos?.Count ?? 0) rows</span>
 </PageHeader>
 
 @if (_todos is null)
 {
-    <Panel><div class="empty">Opening the database…</div></Panel>
+    <div class="bb-empty"><span class="bb-spinner"></span> Opening the database…</div>
 }
 else
 {
-    <Section Title="Hash indexes - equality in O(1)" IconName="index"
+    <Section Title="Hash indexes - equality in O(1)"
              Lead="Lookup returns every row whose indexed value equals the key. CountBy answers the same question without materialising anything.">
-        <div class="grid grid-sidebar">
+        <div class="bd-main-side">
             <Panel Title="Try a lookup" IconName="search">
-                <div class="form-row">
-                    <div class="field">
-                        <label class="field-label" for="hash-index">Index</label>
-                        <select id="hash-index" class="select" @bind="_hashIndex" @bind:after="RunHash">
+                <div class="bb-fields">
+                    <div class="bb-field">
+                        <label for="hash-index">Index</label>
+                        <select id="hash-index" @bind="_hashIndex" @bind:after="RunHash">
                             <option value="Done">Indexes.Done - bool</option>
                             <option value="Category">Indexes.Category - string?</option>
                             <option value="ByPriority">Indexes.ByPriority - Priority enum</option>
                         </select>
                     </div>
-                    <div class="field">
-                        <label class="field-label" for="hash-value">Key</label>
+                    <div class="bb-field">
+                        <label for="hash-value">Key</label>
                         @if (_hashIndex == "Done")
                         {
-                            <select id="hash-value" class="select" @bind="_doneKey" @bind:after="RunHash">
+                            <select id="hash-value" @bind="_doneKey" @bind:after="RunHash">
                                 <option value="false">false</option>
                                 <option value="true">true</option>
                             </select>
                         }
                         else if (_hashIndex == "Category")
                         {
-                            <select id="hash-value" class="select" @bind="_categoryKey" @bind:after="RunHash">
+                            <select id="hash-value" @bind="_categoryKey" @bind:after="RunHash">
                                 @foreach (var c in DemoData.Categories)
                                 {
                                     <option value="@c">@c</option>
@@ -52,7 +52,7 @@ else
                         }
                         else
                         {
-                            <select id="hash-value" class="select" @bind="_priorityKey" @bind:after="RunHash">
+                            <select id="hash-value" @bind="_priorityKey" @bind:after="RunHash">
                                 @foreach (var p in Enum.GetValues<Priority>())
                                 {
                                     <option value="@p">Priority.@p</option>
@@ -62,26 +62,26 @@ else
                     </div>
                 </div>
 
-                <div class="api-call mt-2">@_hashCode</div>
+                <div class="bb-log bd-out">@_hashCode</div>
 
-                <div class="stats mt-2">
-                    <StatTile Label="Lookup rows" IconName="database" Value="@_hashRows.Count.ToString("N0")" Tone="accent" />
-                    <StatTile Label="CountBy" IconName="index" Value="@_hashCount.ToString("N0")" Note="no rows materialised" />
-                    <StatTile Label="Elapsed" IconName="clock" Value="@_hashTime" Note="both calls" />
+                <div class="bb-stats">
+                    <StatTile Label="Lookup rows" Value="@_hashRows.Count.ToString("N0")" Tone="accent" />
+                    <StatTile Label="CountBy" Value="@_hashCount.ToString("N0")" Note="no rows materialised" />
+                    <StatTile Label="Elapsed" Value="@_hashTime" Note="both calls" />
                 </div>
 
                 @if (_hashRows.Count > 0)
                 {
-                    <div class="rows mt-2" style="border:1px solid var(--border); border-radius:var(--r-sm)">
+                    <div class="bd-rows bd-rows-framed">
                         @foreach (var row in _hashRows.Take(6))
                         {
-                            <div class="row-item">
-                                <div class="row-main">
-                                    <div class="row-title">@row.Title</div>
-                                    <div class="row-meta">
-                                        <span class="prio @row.Priority">@row.Priority</span>
-                                        <span class="badge @(row.Category is null ? "" : "accent")">@(row.Category ?? "null")</span>
-                                        <span class="mono">@(row.Done ? "done" : "open")</span>
+                            <div class="bd-row">
+                                <div class="bd-row-main">
+                                    <div class="bd-row-title">@row.Title</div>
+                                    <div class="bd-row-meta">
+                                        <span class="bd-prio bd-prio-@row.Priority">@row.Priority</span>
+                                        <span class="@Tones.Badge(row.Category is null ? "" : "accent")">@(row.Category ?? "null")</span>
+                                        <span class="bb-mono">@(row.Done ? "done" : "open")</span>
                                     </div>
                                 </div>
                             </div>
@@ -89,25 +89,25 @@ else
                     </div>
                     @if (_hashRows.Count > 6)
                     {
-                        <p class="tiny muted mt-1 mb-0">…and @(_hashRows.Count - 6) more.</p>
+                        <p class="bd-foot">…and @(_hashRows.Count - 6) more.</p>
                     }
                 }
                 else
                 {
-                    <div class="empty"><Icon Name="search" /><div>@_hashEmptyNote</div></div>
+                    <div class="bb-empty">@_hashEmptyNote</div>
                 }
             </Panel>
 
-            <div class="flex-col gap-lg">
+            <div class="bb-flex">
                 <Panel Title="Null keys are indexed like any other" IconName="alert">
-                    <p class="small">
+                    <p>
                         A row whose indexed property is <code>null</code> is recorded in that index
                         under null, so <code>Lookup(Category, null)</code> finds the uncategorised rows
                         in one probe and an ordered index lists them first. Only a bounded
                         <code>Range</code> leaves them out - null is inside no interval - and a unique
                         index never counts them as duplicates.
                     </p>
-                    <dl class="kv">
+                    <dl class="bb-params">
                         <dt>Rows in table</dt>
                         <dd>@_todos.Count</dd>
                         <dt>Sum over categories</dt>
@@ -117,38 +117,38 @@ else
                         <dt>Lookup(Category, null)</dt>
                         <dd>@_nullLookupCount rows</dd>
                     </dl>
-                    <p class="tiny muted mb-0">
+                    <p class="bd-foot">
                         <code>CountBy</code> over the named categories plus the null bucket adds up to
                         <code>table.Count</code>.
                     </p>
                 </Panel>
 
                 <Panel Title="Index versus scan" IconName="gauge">
-                    <p class="small">
+                    <p>
                         Both of these compute the same number. One reads a bucket count; the other
                         walks every row.
                     </p>
-                    <button class="btn btn-sm btn-block" @onclick="CompareCounting">
+                    <button type="button" class="btn btn-secondary" @onclick="CompareCounting">
                         <Icon Name="play" /> Measure @CompareIterations iterations of each
                     </button>
                     @if (_compareDone)
                     {
-                        <div class="table-wrap mt-2">
-                            <table class="data">
-                                <thead><tr><th>Call</th><th class="num">Per op</th></tr></thead>
+                        <div class="bb-scroll">
+                            <table class="bb-table">
+                                <thead><tr><th>Call</th><th class="bd-num">Per op</th></tr></thead>
                                 <tbody>
                                     <tr>
-                                        <td class="mono">CountBy(Done, true)</td>
-                                        <td class="num mono ok-text">@_countByTime</td>
+                                        <td class="bb-mono">CountBy(Done, true)</td>
+                                        <td class="bd-num bd-ok">@_countByTime</td>
                                     </tr>
                                     <tr>
-                                        <td class="mono">Scan().Count(t =&gt; t.Done)</td>
-                                        <td class="num mono">@_scanTime</td>
+                                        <td class="bb-mono">Scan().Count(t =&gt; t.Done)</td>
+                                        <td class="bd-num">@_scanTime</td>
                                     </tr>
                                 </tbody>
                             </table>
                         </div>
-                        <p class="tiny muted mt-1 mb-0">
+                        <p class="bd-foot">
                             Same answer (@_compareResult rows) - @_compareFactor.
                         </p>
                     }
@@ -157,44 +157,44 @@ else
         </div>
     </Section>
 
-    <Section Title="Ordered indexes - ranges and sort order" IconName="sort"
+    <Section Title="Ordered indexes - ranges and sort order"
              Lead="Range takes two inclusive bounds and walks the index in either direction. An unbounded end leaves the range open, and an implicit conversion means a bare value is accepted wherever a bound is expected.">
-        <div class="grid grid-sidebar">
+        <div class="bd-main-side">
             <Panel Title="Compose a range" IconName="filter">
-                <div class="form-row">
-                    <div class="field">
-                        <label class="field-label" for="ord-index">Index</label>
-                        <select id="ord-index" class="select" @bind="_orderedIndex" @bind:after="RunOrdered">
+                <div class="bb-fields">
+                    <div class="bb-field">
+                        <label for="ord-index">Index</label>
+                        <select id="ord-index" @bind="_orderedIndex" @bind:after="RunOrdered">
                             <option value="Effort">Indexes.Effort - int</option>
                             <option value="CreatedAt">Indexes.CreatedAt - DateTime</option>
                         </select>
                     </div>
-                    <div class="field" style="flex:0 0 auto">
-                        <label class="field-label">Direction</label>
-                        <div class="seg">
-                            <button class="@(!_descending ? "on" : null)" @onclick="() => SetDirection(false)">Ascending</button>
-                            <button class="@(_descending ? "on" : null)" @onclick="() => SetDirection(true)">Descending</button>
+                    <div class="bb-field">
+                        <span id="ord-direction">Direction</span>
+                        <div class="bb-segmented" role="group" aria-labelledby="ord-direction">
+                            <button type="button" aria-pressed="@(!_descending ? "true" : "false")" @onclick="() => SetDirection(false)">Ascending</button>
+                            <button type="button" aria-pressed="@(_descending ? "true" : "false")" @onclick="() => SetDirection(true)">Descending</button>
                         </div>
                     </div>
                 </div>
 
                 @if (_orderedIndex == "Effort")
                 {
-                    <div class="form-row mt-2">
-                        <div class="field">
-                            <label class="field-label" for="eff-from">From (inclusive)</label>
-                            <input id="eff-from" class="input mono" type="number" min="0" max="600" disabled="@_fromUnbounded"
+                    <div class="bb-fields">
+                        <div class="bb-field">
+                            <label for="eff-from">From (inclusive)</label>
+                            <input id="eff-from" class="bb-mono" type="number" min="0" max="600" disabled="@_fromUnbounded"
                                    @bind="_effortFrom" @bind:after="RunOrdered" />
-                            <label class="check mt-1">
+                            <label class="bb-check">
                                 <input type="checkbox" @bind="_fromUnbounded" @bind:after="RunOrdered" />
                                 BlazeDbBound&lt;int&gt;.Unbounded
                             </label>
                         </div>
-                        <div class="field">
-                            <label class="field-label" for="eff-to">To (inclusive)</label>
-                            <input id="eff-to" class="input mono" type="number" min="0" max="600" disabled="@_toUnbounded"
+                        <div class="bb-field">
+                            <label for="eff-to">To (inclusive)</label>
+                            <input id="eff-to" class="bb-mono" type="number" min="0" max="600" disabled="@_toUnbounded"
                                    @bind="_effortTo" @bind:after="RunOrdered" />
-                            <label class="check mt-1">
+                            <label class="bb-check">
                                 <input type="checkbox" @bind="_toUnbounded" @bind:after="RunOrdered" />
                                 BlazeDbBound&lt;int&gt;.Unbounded
                             </label>
@@ -203,21 +203,21 @@ else
                 }
                 else
                 {
-                    <div class="form-row mt-2">
-                        <div class="field">
-                            <label class="field-label" for="date-from">From (inclusive)</label>
-                            <input id="date-from" class="input mono" type="date" disabled="@_fromUnbounded"
+                    <div class="bb-fields">
+                        <div class="bb-field">
+                            <label for="date-from">From (inclusive)</label>
+                            <input id="date-from" class="bb-mono" type="date" disabled="@_fromUnbounded"
                                    @bind="_dateFrom" @bind:after="RunOrdered" />
-                            <label class="check mt-1">
+                            <label class="bb-check">
                                 <input type="checkbox" @bind="_fromUnbounded" @bind:after="RunOrdered" />
                                 BlazeDbBound&lt;DateTime&gt;.Unbounded
                             </label>
                         </div>
-                        <div class="field">
-                            <label class="field-label" for="date-to">To (inclusive)</label>
-                            <input id="date-to" class="input mono" type="date" disabled="@_toUnbounded"
+                        <div class="bb-field">
+                            <label for="date-to">To (inclusive)</label>
+                            <input id="date-to" class="bb-mono" type="date" disabled="@_toUnbounded"
                                    @bind="_dateTo" @bind:after="RunOrdered" />
-                            <label class="check mt-1">
+                            <label class="bb-check">
                                 <input type="checkbox" @bind="_toUnbounded" @bind:after="RunOrdered" />
                                 BlazeDbBound&lt;DateTime&gt;.Unbounded
                             </label>
@@ -225,23 +225,23 @@ else
                     </div>
                 }
 
-                <div class="api-call mt-2">@_orderedCode</div>
+                <div class="bb-log bd-out">@_orderedCode</div>
 
-                <div class="stats mt-2">
-                    <StatTile Label="Rows in range" IconName="database" Tone="accent" Value="@_orderedRows.Count.ToString("N0")" />
-                    <StatTile Label="Elapsed" IconName="clock" Value="@_orderedTime" />
-                    <StatTile Label="Full traversal" IconName="sort" Value="@_orderByCount.ToString("N0")"
+                <div class="bb-stats">
+                    <StatTile Label="Rows in range" Tone="accent" Value="@_orderedRows.Count.ToString("N0")" />
+                    <StatTile Label="Elapsed" Value="@_orderedTime" />
+                    <StatTile Label="Full traversal" Value="@_orderByCount.ToString("N0")"
                               Note="OrderBy(index) - every row" />
                 </div>
 
                 @if (_orderedRows.Count > 0)
                 {
-                    <div class="table-wrap mt-2">
-                        <table class="data">
+                    <div class="bb-scroll">
+                        <table class="bb-table bb-compare">
                             <thead>
                                 <tr>
                                     <th>Title</th>
-                                    <th class="num">Effort</th>
+                                    <th class="bd-num">Effort</th>
                                     <th>Created</th>
                                 </tr>
                             </thead>
@@ -249,9 +249,9 @@ else
                                 @foreach (var row in _orderedRows.Take(10))
                                 {
                                     <tr>
-                                        <td class="strong">@row.Title</td>
-                                        <td class="num mono">@row.Effort</td>
-                                        <td class="mono tiny">@row.CreatedAt.ToLocalTime().ToString("MMM d HH:mm")</td>
+                                        <td class="bd-strong">@row.Title</td>
+                                        <td class="bd-num">@row.Effort</td>
+                                        <td class="bb-mono bd-small">@row.CreatedAt.ToLocalTime().ToString("MMM d HH:mm")</td>
                                     </tr>
                                 }
                             </tbody>
@@ -259,95 +259,95 @@ else
                     </div>
                     @if (_orderedRows.Count > 10)
                     {
-                        <p class="tiny muted mt-1 mb-0">First 10 of @_orderedRows.Count in index order.</p>
+                        <p class="bd-foot">First 10 of @_orderedRows.Count in index order.</p>
                     }
                 }
                 else
                 {
-                    <div class="empty"><Icon Name="filter" /><div>Nothing in that range.</div></div>
+                    <div class="bb-empty">Nothing in that range.</div>
                 }
             </Panel>
 
-            <div class="flex-col gap-lg">
+            <div class="bb-flex">
                 <Panel Title="Every form of a range bound" IconName="code">
-                    <CodeBlock ShowHeader="false" Code="@BoundSnippet" />
+                    <CodeBlock Code="@BoundSnippet" />
                 </Panel>
 
                 <Panel Title="An inverted range is empty" IconName="info">
-                    <p class="small mb-1">
+                    <p>
                         Bounds are not reordered for you. When <code>from</code> is greater than
                         <code>to</code> the result is empty rather than an error.
                     </p>
-                    <button class="btn btn-sm btn-block" @onclick="RunInverted">
+                    <button type="button" class="btn btn-secondary" @onclick="RunInverted">
                         <Icon Name="play" /> Range(Effort, 200, 10)
                     </button>
                     @if (_invertedNote is not null)
                     {
-                        <div class="api-call mt-2">@_invertedNote</div>
+                        <div class="bb-log bd-out">@_invertedNote</div>
                     }
                 </Panel>
             </div>
         </div>
     </Section>
 
-    <Section Title="Indexes follow every mutation" IconName="refresh"
+    <Section Title="Indexes follow every mutation"
              Lead="This runs against a private in-memory database so you can watch bucket counts move without touching your own rows.">
-        <div class="grid grid-sidebar">
+        <div class="bd-main-side">
             <Panel Title="Index state" IconName="layers" Flush="true">
-                <div class="table-wrap">
-                    <table class="data">
+                <div class="bb-scroll">
+                    <table class="bb-table">
                         <thead>
-                            <tr><th>Index</th><th>Key</th><th class="num">CountBy</th></tr>
+                            <tr><th>Index</th><th>Key</th><th class="bd-num">CountBy</th></tr>
                         </thead>
                         <tbody>
                             <tr>
-                                <td class="mono">Done</td><td class="mono">false</td>
-                                <td class="num mono">@_sandboxOpen</td>
+                                <td class="bb-mono">Done</td><td class="bb-mono">false</td>
+                                <td class="bd-num">@_sandboxOpen</td>
                             </tr>
                             <tr>
-                                <td class="mono">Done</td><td class="mono">true</td>
-                                <td class="num mono">@_sandboxDone</td>
+                                <td class="bb-mono">Done</td><td class="bb-mono">true</td>
+                                <td class="bd-num">@_sandboxDone</td>
                             </tr>
                             <tr>
-                                <td class="mono">Category</td><td class="mono">"engine"</td>
-                                <td class="num mono">@_sandboxEngine</td>
+                                <td class="bb-mono">Category</td><td class="bb-mono">"engine"</td>
+                                <td class="bd-num">@_sandboxEngine</td>
                             </tr>
                             <tr>
-                                <td class="mono">Category</td><td class="mono">"docs"</td>
-                                <td class="num mono">@_sandboxDocs</td>
+                                <td class="bb-mono">Category</td><td class="bb-mono">"docs"</td>
+                                <td class="bd-num">@_sandboxDocs</td>
                             </tr>
                             <tr>
-                                <td class="mono">ByPriority</td><td class="mono">Critical</td>
-                                <td class="num mono">@_sandboxCritical</td>
+                                <td class="bb-mono">ByPriority</td><td class="bb-mono">Critical</td>
+                                <td class="bd-num">@_sandboxCritical</td>
                             </tr>
                             <tr>
-                                <td class="mono strong">table.Count</td><td></td>
-                                <td class="num mono strong">@_sandboxCount</td>
+                                <td class="bb-mono bd-strong">table.Count</td><td></td>
+                                <td class="bd-num bd-strong">@_sandboxCount</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </Panel>
 
-            <div class="flex-col gap-lg">
+            <div class="bb-flex">
                 <Panel Title="Mutate" IconName="play">
-                    <div class="flex-col">
-                        <button class="btn btn-sm btn-block" @onclick="SandboxInsert">
+                    <div class="bd-actions">
+                        <button type="button" class="btn btn-secondary" @onclick="SandboxInsert">
                             <Icon Name="plus" /> Insert an open "engine" row
                         </button>
-                        <button class="btn btn-sm btn-block" @onclick="SandboxFlipDone" disabled="@(_sandboxCount == 0)">
+                        <button type="button" class="btn btn-secondary" @onclick="SandboxFlipDone" disabled="@(_sandboxCount == 0)">
                             <Icon Name="refresh" /> Update - flip Done on the first row
                         </button>
-                        <button class="btn btn-sm btn-block" @onclick="SandboxRecategorise" disabled="@(_sandboxCount == 0)">
+                        <button type="button" class="btn btn-secondary" @onclick="SandboxRecategorise" disabled="@(_sandboxCount == 0)">
                             <Icon Name="tag" /> Update - move a row to "docs"
                         </button>
-                        <button class="btn btn-sm btn-block" @onclick="SandboxPromote" disabled="@(_sandboxCount == 0)">
+                        <button type="button" class="btn btn-secondary" @onclick="SandboxPromote" disabled="@(_sandboxCount == 0)">
                             <Icon Name="bolt" /> Update - raise priority to Critical
                         </button>
-                        <button class="btn btn-sm btn-block" @onclick="SandboxSetNull" disabled="@(_sandboxCount == 0)">
+                        <button type="button" class="btn btn-secondary" @onclick="SandboxSetNull" disabled="@(_sandboxCount == 0)">
                             <Icon Name="close" /> Update - set Category to null
                         </button>
-                        <button class="btn btn-sm btn-block btn-danger" @onclick="SandboxDelete" disabled="@(_sandboxCount == 0)">
+                        <button type="button" class="btn bd-btn-danger" @onclick="SandboxDelete" disabled="@(_sandboxCount == 0)">
                             <Icon Name="trash" /> Delete the first row
                         </button>
                     </div>
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/McpServer.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/McpServer.razor
index 9a31ae81d61..a86a093df12 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/McpServer.razor
@@ -3,52 +3,55 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - BlazeDb</PageTitle>
+<PageTitle>MCP server · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Reference" IconName="cpu" Title="An MCP server for AI agents"
+<PageHeader Eyebrow="MCP server" Title="An MCP server for AI agents"
             Lead="This site hosts a Model Context Protocol server at /mcp, so an AI agent writing database code with Bit.BlazeDb reads the library itself - its compiled API documentation, its guide, its source generator and these demo pages - instead of guessing at an API it half remembers. Every tool is read-only." />
 
-<Section Title="Connect a client" IconName="code"
-         Lead="The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools are also served, version by version, through the bit platform's own server at https://bitplatform.dev/mcp, next to the other bit libraries.">
-    <CodeBlock Title=".mcp.json" Language="text" Code="@ClientConfig" />
+<Section Title="Connect a client">
+    <p>
+        The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
+        are also served, version by version, through the bit platform's own server at
+        <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
+    </p>
+    <CodeBlock Title=".mcp.json (Claude Code, VS Code, and anything else reading this shape)" Language="json" Code="@ClientConfig" />
 </Section>
 
-<Section Title="Tools" IconName="list">
-    <Panel Flush="true">
-        <div class="table-wrap">
-            <table class="data">
-                <thead>
-                    <tr><th>Tool</th><th>What it answers</th></tr>
-                </thead>
-                <tbody>
-                    @foreach (var (tool, answer) in Tools)
-                    {
-                        <tr>
-                            <td class="mono strong">@tool</td>
-                            <td>@answer</td>
-                        </tr>
-                    }
-                </tbody>
-            </table>
-        </div>
-    </Panel>
-    <Callout Tone="info" Title="Resources and prompts too.">
+<Section Title="Tools">
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var (tool, answer) in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool</code></td>
+                        <td>@answer</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+    <p>
         The guide, the API, the diagnostics and the sources are also exposed as <code>blazedb://</code>
         resources, and three prompts - <code>add-blazedb-to-app</code>, <code>implement-blazedb-feature</code>
         and <code>debug-blazedb-database</code> - walk an agent through the common jobs in the right order.
-    </Callout>
+    </p>
 </Section>
 
-<Section Title="The same tools over plain HTTP" IconName="query"
-         Lead="Every tool is also a GET under /api/mcp/...: open one in a browser tab to read exactly what an agent is handed.">
-    <Panel>
-        <ul class="ticks">
-            @foreach (var (label, href) in Links)
-            {
-                <li><a href="@href" target="_blank" rel="noopener">@label</a></li>
-            }
-        </ul>
-    </Panel>
+<Section Title="The same tools over plain HTTP">
+    <p>
+        Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
+        exactly what an agent is handed.
+    </p>
+    <ul class="bb-detail-list">
+        @foreach (var (label, href) in Links)
+        {
+            <li><a href="@href" target="_blank" rel="noopener">@label</a></li>
+        }
+    </ul>
 </Section>
 
 @code {
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/NotFound.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/NotFound.razor
index fd59364ef2c..2edc3a393a1 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/NotFound.razor
@@ -1,19 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<PageTitle>Not found - BlazeDb</PageTitle>
+<PageTitle>Not found · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="404" IconName="alert" Title="That page does not exist"
-            Lead="The link may be out of date. Everything the demo covers is listed below." />
-
-<div class="grid grid-2">
-    @foreach (var item in SiteMap.Items)
-    {
-        <a class="card" href="@item.Path">
-            <div class="card-icon"><Icon Name="@item.Icon" /></div>
-            <h3>@item.Title</h3>
-            <p>@item.Blurb</p>
-            <span class="card-arrow">Open <Icon Name="arrow-right" /></span>
-        </a>
-    }
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>That page does not exist. The link may be out of date, or the address may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
 </div>
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Queries.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Queries.razor
index aaebc4e20de..18ffa55832a 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Queries.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Queries.razor
@@ -1,71 +1,75 @@
 @page "/queries"
 @inject DemoDbService Db
 
-<PageTitle>Query primitives - BlazeDb</PageTitle>
+<PageTitle>Query primitives · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Engine" IconName="query" Title="Querying without a query language"
+<PageHeader Eyebrow="Query primitives" Title="Querying without a query language"
             Lead="Query is a tiny composable pipeline: pick at most one index as the source, add residual predicates, optionally sort, then page. Build one below and watch the code, the plan and the timing update as you go.">
-    <span class="chip"><Icon Name="bolt" /> No parser, no planner cache</span>
-    <span class="chip"><Icon Name="cpu" /> Delegates, not expression trees</span>
+    <span class="bb-badge bd-badge-neutral">No parser, no planner cache</span>
+    <span class="bb-badge bd-badge-neutral">Delegates, not expression trees</span>
 </PageHeader>
 
 @if (_todos is null)
 {
-    <Panel><div class="empty">Opening the database…</div></Panel>
+    <div class="bb-empty"><span class="bb-spinner"></span> Opening the database…</div>
 }
 else
 {
-    <div class="grid grid-sidebar">
-        <div class="flex-col gap-lg">
+    @* A composer rather than a document: it gives up the "on this page" rail for the width its two
+       columns need. *@
+    <div class="bd-main-side bb-page-wide">
+        <div class="bb-flex">
             <Panel Title="1 · Source" IconName="database"
                    Sub="at most one index source per query">
-                <div class="chip-row">
-                    @foreach (var option in SourceOptions)
-                    {
-                        var value = option.Kind;
-                        <button class="chip @(_source == value ? "on" : null)" @onclick="() => SetSource(value)">
-                            @option.Label
-                        </button>
-                    }
+                <div class="bb-toolbar">
+                    <div class="bb-segmented bb-mono" role="group" aria-label="Source">
+                        @foreach (var option in SourceOptions)
+                        {
+                            var value = option.Kind;
+                            <button type="button" aria-pressed="@(_source == value ? "true" : "false")" @onclick="() => SetSource(value)">
+                                @option.Label
+                            </button>
+                        }
+                    </div>
                 </div>
 
                 @if (_source is SourceKind.OrderedCreatedAt or SourceKind.OrderedEffort)
                 {
-                    <div class="form-row mt-2">
+                    <div class="bb-fields">
                         @if (_source == SourceKind.OrderedEffort)
                         {
-                            <div class="field">
-                                <label class="field-label" for="q-from">From</label>
-                                <input id="q-from" class="input mono" type="number" disabled="@_fromUnbounded"
+                            <div class="bb-field">
+                                <label for="q-from">From</label>
+                                <input id="q-from" class="bb-mono" type="number" disabled="@_fromUnbounded"
                                        @bind="_effortFrom" @bind:after="Run" />
                             </div>
-                            <div class="field">
-                                <label class="field-label" for="q-to">To</label>
-                                <input id="q-to" class="input mono" type="number" disabled="@_toUnbounded"
+                            <div class="bb-field">
+                                <label for="q-to">To</label>
+                                <input id="q-to" class="bb-mono" type="number" disabled="@_toUnbounded"
                                        @bind="_effortTo" @bind:after="Run" />
                             </div>
                         }
                         else
                         {
-                            <div class="field">
-                                <label class="field-label" for="q-days">Created within the last</label>
-                                <input id="q-days" class="input mono" type="number" min="1" max="365" disabled="@_fromUnbounded"
+                            <div class="bb-field">
+                                <label for="q-days">Created within the last</label>
+                                <input id="q-days" class="bb-mono" type="number" min="1" max="365" disabled="@_fromUnbounded"
                                        @bind="_days" @bind:after="Run" />
-                                <span class="field-hint">days</span>
+                                <span class="bb-field-hint">days</span>
                             </div>
                         }
-                        <div class="field" style="flex:0 0 auto">
-                            <label class="field-label">Bounds</label>
-                            <label class="check">
+                        <div class="bb-field">
+                            <span>Bounds</span>
+                            <label class="bb-check">
                                 <input type="checkbox" @bind="_fromUnbounded" @bind:after="Run" /> from unbounded
                             </label>
-                            <label class="check">
+                            <label class="bb-check">
                                 <input type="checkbox" @bind="_toUnbounded" @bind:after="Run" /> to unbounded
                             </label>
                         </div>
-                        <div class="field" style="flex:0 0 auto">
-                            <label class="field-label">Direction</label>
-                            <label class="check">
+                        <div class="bb-field">
+                            <span>Direction</span>
+                            <label class="bb-check">
                                 <input type="checkbox" @bind="_sourceDescending" @bind:after="Run" /> descending
                             </label>
                         </div>
@@ -73,10 +77,10 @@ else
                 }
                 else if (_source == SourceKind.HashCategory)
                 {
-                    <div class="form-row mt-2">
-                        <div class="field">
-                            <label class="field-label" for="q-cat">Category key</label>
-                            <select id="q-cat" class="select" @bind="_category" @bind:after="Run">
+                    <div class="bb-fields">
+                        <div class="bb-field">
+                            <label for="q-cat">Category key</label>
+                            <select id="q-cat" @bind="_category" @bind:after="Run">
                                 @foreach (var c in DemoData.Categories)
                                 {
                                     <option value="@c">@c</option>
@@ -87,10 +91,10 @@ else
                 }
                 else if (_source == SourceKind.HashPriority)
                 {
-                    <div class="form-row mt-2">
-                        <div class="field">
-                            <label class="field-label" for="q-prio">Priority key</label>
-                            <select id="q-prio" class="select" @bind="_priority" @bind:after="Run">
+                    <div class="bb-fields">
+                        <div class="bb-field">
+                            <label for="q-prio">Priority key</label>
+                            <select id="q-prio" @bind="_priority" @bind:after="Run">
                                 @foreach (var p in Enum.GetValues<Priority>())
                                 {
                                     <option value="@p">@p</option>
@@ -101,10 +105,10 @@ else
                 }
                 else if (_source == SourceKind.HashDone)
                 {
-                    <div class="form-row mt-2">
-                        <div class="field">
-                            <label class="field-label" for="q-done">Done key</label>
-                            <select id="q-done" class="select" @bind="_doneKey" @bind:after="Run">
+                    <div class="bb-fields">
+                        <div class="bb-field">
+                            <label for="q-done">Done key</label>
+                            <select id="q-done" @bind="_doneKey" @bind:after="Run">
                                 <option value="false">false</option>
                                 <option value="true">true</option>
                             </select>
@@ -115,56 +119,58 @@ else
 
             <Panel Title="2 · Residual predicates" IconName="filter"
                    Sub="every Where is ANDed with the others">
-                <div class="chip-row">
-                    <button class="chip @(_whereOpen ? "on" : null)" @onclick="() => Toggle(ref _whereOpen)">
-                        t =&gt; !t.Done
-                    </button>
-                    <button class="chip @(_whereRated ? "on" : null)" @onclick="() => Toggle(ref _whereRated)">
-                        t =&gt; t.Rating is not null
-                    </button>
-                    <button class="chip @(_whereTagged ? "on" : null)" @onclick="() => Toggle(ref _whereTagged)">
-                        t =&gt; t.Tags.Count &gt; 0
-                    </button>
-                    <button class="chip @(_whereEffort ? "on" : null)" @onclick="() => Toggle(ref _whereEffort)">
-                        t =&gt; t.Effort &gt;= @_minEffort
-                    </button>
+                <div class="bb-toolbar">
+                    <div class="bb-segmented bb-mono" role="group" aria-label="Predicates">
+                        <button type="button" aria-pressed="@(_whereOpen ? "true" : "false")" @onclick="() => Toggle(ref _whereOpen)">
+                            t =&gt; !t.Done
+                        </button>
+                        <button type="button" aria-pressed="@(_whereRated ? "true" : "false")" @onclick="() => Toggle(ref _whereRated)">
+                            t =&gt; t.Rating is not null
+                        </button>
+                        <button type="button" aria-pressed="@(_whereTagged ? "true" : "false")" @onclick="() => Toggle(ref _whereTagged)">
+                            t =&gt; t.Tags.Count &gt; 0
+                        </button>
+                        <button type="button" aria-pressed="@(_whereEffort ? "true" : "false")" @onclick="() => Toggle(ref _whereEffort)">
+                            t =&gt; t.Effort &gt;= @_minEffort
+                        </button>
+                    </div>
                 </div>
-                <div class="form-row mt-2">
-                    <div class="field">
-                        <label class="field-label" for="q-min">Minimum effort</label>
-                        <input id="q-min" class="slider" type="range" min="0" max="140" step="5"
+                <div class="bb-fields">
+                    <div class="bb-field">
+                        <label for="q-min">Minimum effort</label>
+                        <input id="q-min" type="range" min="0" max="140" step="5"
                                @bind="_minEffort" @bind:after="Run" />
                     </div>
-                    <div class="field" style="flex:2 1 200px">
-                        <label class="field-label" for="q-text">Title contains</label>
-                        <input id="q-text" class="input" placeholder="(no text predicate)" @bind="_text"
+                    <div class="bb-field" style="flex:2 1 200px">
+                        <label for="q-text">Title contains</label>
+                        <input id="q-text" placeholder="(no text predicate)" @bind="_text"
                                @bind:event="oninput" @bind:after="Run" />
                     </div>
                 </div>
             </Panel>
 
             <Panel Title="3 · Order, page and execute" IconName="sort">
-                <div class="form-row">
-                    <div class="field">
-                        <label class="field-label" for="q-order">OrderBy</label>
-                        <select id="q-order" class="select" @bind="_order" @bind:after="Run">
+                <div class="bb-fields">
+                    <div class="bb-field">
+                        <label for="q-order">OrderBy</label>
+                        <select id="q-order" @bind="_order" @bind:after="Run">
                             <option value="@OrderKind.None">none - keep source order</option>
                             <option value="@OrderKind.Title">t =&gt; t.Title</option>
                             <option value="@OrderKind.EffortDesc">t =&gt; t.Effort, descending</option>
                             <option value="@OrderKind.CreatedDesc">t =&gt; t.CreatedAt, descending</option>
                         </select>
                     </div>
-                    <div class="field" style="flex:0 1 110px">
-                        <label class="field-label" for="q-skip">Skip</label>
-                        <input id="q-skip" class="input mono" type="number" min="0" @bind="_skip" @bind:after="Run" />
+                    <div class="bb-field" style="flex:0 1 110px">
+                        <label for="q-skip">Skip</label>
+                        <input id="q-skip" class="bb-mono" type="number" min="0" @bind="_skip" @bind:after="Run" />
                     </div>
-                    <div class="field" style="flex:0 1 110px">
-                        <label class="field-label" for="q-take">Take</label>
-                        <input id="q-take" class="input mono" type="number" min="1" max="50" @bind="_take" @bind:after="Run" />
+                    <div class="bb-field" style="flex:0 1 110px">
+                        <label for="q-take">Take</label>
+                        <input id="q-take" class="bb-mono" type="number" min="1" max="50" @bind="_take" @bind:after="Run" />
                     </div>
-                    <div class="field">
-                        <label class="field-label" for="q-exec">Terminal call</label>
-                        <select id="q-exec" class="select" @bind="_execute" @bind:after="Run">
+                    <div class="bb-field">
+                        <label for="q-exec">Terminal call</label>
+                        <select id="q-exec" @bind="_execute" @bind:after="Run">
                             <option value="@ExecuteKind.ToList">ToList()</option>
                             <option value="@ExecuteKind.Projection">Execute(t =&gt; …)</option>
                             <option value="@ExecuteKind.First">FirstOrDefault()</option>
@@ -176,14 +182,14 @@ else
 
             <Panel Title="Result" IconName="play" Flush="true">
                 <Actions>
-                    <span class="panel-sub mono">@_resultSummary</span>
+                    <span class="bd-panel-sub">@_resultSummary</span>
                 </Actions>
                 <ChildContent>
                     @if (_execute == ExecuteKind.Count)
                     {
-                        <div class="panel-body">
-                            <div class="stat-value" style="font-size:2.2rem">@_count.ToString("N0")</div>
-                            <p class="small muted mb-0">
+                        <div class="bd-panel-pad">
+                            <div class="bd-count">@_count.ToString("N0")</div>
+                            <p class="bb-muted">
                                 <code>Count()</code> runs the whole pipeline and counts what comes out -
                                 it is not a shortcut around the predicates.
                             </p>
@@ -193,33 +199,33 @@ else
                     {
                         @if (_projected.Count == 0)
                         {
-                            <div class="empty"><Icon Name="search" /><div>No rows matched.</div></div>
+                            <div class="bb-empty">No rows matched.</div>
                         }
                         else
                         {
-                            <div class="log">
+                            <div class="bb-log">
                                 @foreach (var line in _projected)
                                 {
-                                    <div class="log-row"><span class="log-name">@line</span></div>
+                                    <div class="bb-log-line">@line</div>
                                 }
                             </div>
                         }
                     }
                     else if (_rows.Count == 0)
                     {
-                        <div class="empty"><Icon Name="search" /><div>No rows matched.</div></div>
+                        <div class="bb-empty">No rows matched.</div>
                     }
                     else
                     {
-                        <div class="table-wrap">
-                            <table class="data">
+                        <div class="bb-scroll">
+                            <table class="bb-table bb-compare">
                                 <thead>
                                     <tr>
                                         <th>Title</th>
                                         <th>Category</th>
                                         <th>Priority</th>
-                                        <th class="num">Effort</th>
-                                        <th class="num">Rating</th>
+                                        <th class="bd-num">Effort</th>
+                                        <th class="bd-num">Rating</th>
                                         <th>Created</th>
                                     </tr>
                                 </thead>
@@ -227,12 +233,12 @@ else
                                     @foreach (var row in _rows)
                                     {
                                         <tr>
-                                            <td class="strong">@row.Title</td>
-                                            <td class="mono">@(row.Category ?? "null")</td>
-                                            <td><span class="prio @row.Priority">@row.Priority</span></td>
-                                            <td class="num mono">@row.Effort</td>
-                                            <td class="num mono">@(row.Rating?.ToString() ?? "-")</td>
-                                            <td class="mono tiny">@row.CreatedAt.ToLocalTime().ToString("MMM d HH:mm")</td>
+                                            <td class="bd-strong">@row.Title</td>
+                                            <td class="bb-mono">@(row.Category ?? "null")</td>
+                                            <td><span class="bd-prio bd-prio-@row.Priority">@row.Priority</span></td>
+                                            <td class="bd-num">@row.Effort</td>
+                                            <td class="bd-num">@(row.Rating?.ToString() ?? "-")</td>
+                                            <td class="bb-mono bd-small">@row.CreatedAt.ToLocalTime().ToString("MMM d HH:mm")</td>
                                         </tr>
                                     }
                                 </tbody>
@@ -243,19 +249,19 @@ else
             </Panel>
         </div>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Generated call" IconName="code">
-                <CodeBlock Code="@_code" ShowHeader="false" Wrap="true" />
+                <CodeBlock Code="@_code" Wrap="true" />
             </Panel>
 
             <Panel Title="Plan" IconName="layers">
-                <dl class="kv">
+                <dl class="bb-params">
                     <dt>Source</dt>
                     <dd>@_sourceLabel</dd>
                     <dt>Predicates</dt>
                     <dd>@_predicateCount</dd>
                     <dt>IsIndexOrdered</dt>
-                    <dd class="@(_isIndexOrdered ? "ok-text" : "")">@_isIndexOrdered.ToString().ToLowerInvariant()</dd>
+                    <dd class="@(_isIndexOrdered ? "bd-ok" : null)">@_isIndexOrdered.ToString().ToLowerInvariant()</dd>
                     <dt>Matched</dt>
                     <dd>@_matched.ToString("N0")</dd>
                     <dt>Returned</dt>
@@ -265,7 +271,7 @@ else
                 </dl>
                 @if (!_isIndexOrdered && _order != OrderKind.None)
                 {
-                    <Callout Tone="info" Class="mt-2">
+                    <Callout Tone="info">
                         <code>OrderBy</code> sorts in memory. When an ordered index already produces the
                         order you want, dropping the sort makes the query allocation-free.
                     </Callout>
@@ -273,7 +279,7 @@ else
             </Panel>
 
             <Panel Title="Execution order" IconName="arrow-down">
-                <ol class="small mb-0">
+                <ol class="bb-detail-list">
                     <li><strong>Source</strong> - index lookup, index range, or a full <code>Scan</code>.</li>
                     <li><strong>Predicates</strong> - each <code>Where</code> in the order added.</li>
                     <li><strong>Order</strong> - only if <code>OrderBy</code> was called.</li>
@@ -282,20 +288,20 @@ else
             </Panel>
 
             <Panel Title="One source per query" IconName="alert">
-                <p class="small mb-1">
+                <p>
                     Calling <code>UseIndex</code> twice is rejected rather than silently intersecting.
                 </p>
-                <button class="btn btn-sm btn-block" @onclick="TryTwoSources">
+                <button type="button" class="btn btn-secondary" @onclick="TryTwoSources">
                     <Icon Name="play" /> Call UseIndex twice
                 </button>
                 @if (_twoSourceError is not null)
                 {
-                    <div class="api-call mt-2">@_twoSourceError</div>
+                    <div class="bb-log bd-out">@_twoSourceError</div>
                 }
             </Panel>
 
             <Panel Title="Beyond these primitives" IconName="map">
-                <p class="small mb-0">
+                <p>
                     There is no join, no grouping and no aggregate beyond counting. Compose the
                     primitives in ordinary C#, or use LINQ over <code>Scan()</code> when a query is
                     genuinely ad hoc - a scan over in-memory objects is already fast. The
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Roadmap.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Roadmap.razor
index 8704e173459..bc547635826 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Roadmap.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Roadmap.razor
@@ -1,45 +1,43 @@
 @page "/roadmap"
 
-<PageTitle>Roadmap - BlazeDb</PageTitle>
+<PageTitle>Roadmap · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Reference" IconName="map" Title="What ships, what is next, and what never will"
+<PageHeader Eyebrow="Roadmap" Title="What ships, what is next, and what never will"
             Lead="BlazeDb is a memory-first engine with a deliberately small surface. This page is the honest inventory: everything it does, and the things it will not try to be.">
-    <span class="chip ok"><Icon Name="check" /> @Shipped.Length shipped</span>
-    <span class="chip info"><Icon Name="clock" /> nothing outstanding</span>
-    <span class="chip"><Icon Name="close" /> @NonGoals.Length explicit non-goals</span>
+    <span class="bb-badge bb-badge-success">@Shipped.Length shipped</span>
+    <span class="bb-badge">nothing outstanding</span>
+    <span class="bb-badge bd-badge-neutral">@NonGoals.Length explicit non-goals</span>
 </PageHeader>
 
-<Section Title="Shipped" IconName="check"
+<Section Title="Shipped"
          Lead="Where an item has a page on this site, the link drives it against a real database rather than describing it. The rest are covered by the test suite.">
-    <div class="grid grid-2">
+    <div class="bb-grid">
         @foreach (var item in Shipped)
         {
-            <Panel Title="@item.Title" IconName="@item.Icon" Sub="@item.Sub">
-                <p class="small mb-2">@item.Body</p>
+            <div class="bb-card">
+                <p class="bb-overline bb-mono">@item.Sub</p>
+                <h4 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> @item.Title</h4>
+                <p class="bb-card-desc">@item.Body</p>
                 @if (item.Proof is not null)
                 {
-                    <a class="btn btn-sm" href="@item.Proof">
-                        <Icon Name="arrow-right" /> @item.ProofLabel
-                    </a>
+                    <a class="btn btn-outline" href="@item.Proof">@item.ProofLabel →</a>
                 }
-            </Panel>
+            </div>
         }
     </div>
 </Section>
 
-<Section Title="The EF Core provider" IconName="layers"
+<Section Title="The EF Core provider"
          Lead="A translation layer, not a second database: AddDbContext plus UseBlazeDb is the whole setup, LINQ becomes a query plan, and SaveChanges is one transaction.">
-    <div class="grid grid-2">
+    <div class="bb-split">
         <Panel Title="What it is" IconName="schema">
-            <p class="small mb-2">
+            <p>
                 Entity types are the same <code>[BlazeDbTable]</code> classes the rest of the engine
                 uses. <code>AddDbContext</code> and <code>UseBlazeDb</code> are the setup; queries
                 hand back the live row, so tracking needs no materialisation step, and a mutation is
                 visible in memory before <code>SaveChanges</code> journals it.
             </p>
-            <a class="btn btn-sm" href="efcore">
-                <Icon Name="arrow-right" /> Open the EF Core page
-            </a>
+            <a class="btn btn-outline" href="efcore">Open the EF Core page →</a>
         </Panel>
         <Callout Tone="warn" Title="A query returns the row, not a copy:">
             mutating a tracked entity changes the database in memory straight away. SaveChanges
@@ -49,7 +47,7 @@
     </div>
 </Section>
 
-<Section Title="Planned" IconName="clock"
+<Section Title="Planned"
          Lead="Nothing. Every item this roadmap has ever listed is now in the shipped table above, and the list below is what the engine will not grow into instead.">
     <Callout Tone="ok" Title="The roadmap is empty on purpose:">
         the surface was scoped up front and is now complete. New work should have to argue for
@@ -57,31 +55,33 @@
     </Callout>
 </Section>
 
-<Section Title="Deliberately not doing this" IconName="close"
+<Section Title="Deliberately not doing this"
          Lead="A client-side engine earns its speed by refusing work. These omissions are the reason the numbers on the benchmarks page look the way they do.">
-    <div class="grid grid-2">
+    <div class="bb-grid">
         @foreach (var item in NonGoals)
         {
-            <Panel Title="@item.Title" IconName="close" Sub="@item.Area">
-                <p class="small mb-0">@item.Body</p>
-            </Panel>
+            <div class="bb-card">
+                <p class="bb-overline">@item.Area</p>
+                <h4 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> @item.Title</h4>
+                <p class="bb-card-desc">@item.Body</p>
+            </div>
         }
     </div>
 </Section>
 
-<Section Title="The repository" IconName="layers">
-    <div class="grid grid-sidebar">
+<Section Title="The repository">
+    <div class="bd-main-side">
         <Panel Title="Projects" IconName="file" Flush="true">
-            <div class="table-wrap">
-                <table class="data">
-                    <thead><tr><th>Project</th><th>Purpose</th><th class="num">State</th></tr></thead>
+            <div class="bb-scroll">
+                <table class="bb-table">
+                    <thead><tr><th>Project</th><th>Purpose</th><th class="bd-num">State</th></tr></thead>
                     <tbody>
                         @foreach (var project in Projects)
                         {
                             <tr>
-                                <td class="mono small">@project.Name</td>
-                                <td class="small">@project.Purpose</td>
-                                <td class="num"><span class="badge @(project.State == "scaffold" ? "warn" : "ok")">@project.State</span></td>
+                                <td class="bb-mono">@project.Name</td>
+                                <td>@project.Purpose</td>
+                                <td class="bd-num"><span class="@Tones.Badge(project.State == "scaffold" ? "warn" : "ok")">@project.State</span></td>
                             </tr>
                         }
                     </tbody>
@@ -89,12 +89,12 @@
             </div>
         </Panel>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Build and test" IconName="cpu">
-                <CodeBlock ShowHeader="false" Language="bash" Code="@BuildSnippet" />
+                <CodeBlock Language="bash" Code="@BuildSnippet" />
             </Panel>
             <Panel Title="Design rules" IconName="shield">
-                <ul class="ticks">
+                <ul class="bd-ticks">
                     <li>Reads never touch storage and never allocate a copy.</li>
                     <li>Durability is asynchronous, explicit when you need it to be.</li>
                     <li>No reflection at runtime - a generator emits everything.</li>
@@ -108,7 +108,7 @@
 </Section>
 
 @code {
-    private sealed record Feature(string Title, string Icon, string Sub, string Body, string? Proof, string ProofLabel);
+    private sealed record Feature(string Title, string Sub, string Body, string? Proof, string ProofLabel);
 
     private sealed record Item(string Title, string Area, string Body, string Effort = "");
 
@@ -116,75 +116,75 @@
 
     private static readonly Feature[] Shipped =
     [
-        new("Tables over live objects", "database", "Bit.BlazeDb",
+        new("Tables over live objects", "Bit.BlazeDb",
             "A primary-key hash index over the row objects themselves, with Insert, Update, Upsert, Delete, Get, TryGet, Contains and Scan. Reads are synchronous method calls with no I/O and no deserialization.",
             "todos", "See it driving a real app"),
 
-        new("Source-generated schema", "schema", "Bit.BlazeDb.Generators",
+        new("Source-generated schema", "Bit.BlazeDb.Generators",
             "An incremental Roslyn generator turns [BlazeDbTable], [BlazeDbKey], [BlazeDbIndex], [BlazeDbOrderedIndex], [BlazeDbField] and [BlazeDbIgnore] into a descriptor with binary serializers, a key extractor and index definitions. No runtime reflection, so trimming and AOT are safe.",
             "schema", "Inspect the generated descriptor"),
 
-        new("Hash and ordered indexes", "index", "Bit.BlazeDb",
+        new("Hash and ordered indexes", "Bit.BlazeDb",
             "Equality lookups in O(1) and range scans in O(log n) with inclusive or open bounds, maintained automatically on every mutation including rollback.",
             "indexes", "Try the lookups live"),
 
-        new("Composable query plans", "query", "Bit.BlazeDb.Querying",
+        new("Composable query plans", "Bit.BlazeDb.Querying",
             "One index source, any number of residual predicates, ordering, paging and projection - the primitive the EF Core provider translates LINQ onto, usable directly too.",
             "queries", "Build a query"),
 
-        new("Atomic transactions", "txn", "Bit.BlazeDb",
+        new("Atomic transactions", "Bit.BlazeDb",
             "An ambient single-writer transaction with commit, rollback and reverse-order undo of both rows and index entries. A committed batch is one log record.",
             "transactions", "Watch commit and rollback"),
 
-        new("Write-ahead log and snapshots", "shield", "Bit.BlazeDb.Wal",
+        new("Write-ahead log and snapshots", "Bit.BlazeDb.Wal",
             "Group-committed WAL records with per-record CRC32, atomic manifest updates, snapshot compaction, torn-tail truncation and replay on open.",
             "durability", "Crash it on purpose"),
 
-        new("Pluggable storage", "disk", "Bit.BlazeDb.Storage",
+        new("Pluggable storage", "Bit.BlazeDb.Storage",
             "A four-method contract with in-memory and file backends in the core, and an OPFS backend plus Web Locks single-writer election for the browser.",
             "storage", "Trace the engine's I/O"),
 
-        new("Compact binary format", "binary", "Bit.BlazeDb.Serialization",
+        new("Compact binary format", "Bit.BlazeDb.Serialization",
             "Tagged, length-delimited encoding with varints, absent-means-null fields and unknown-field skipping, so old readers survive new writers.",
             "serialization", "Read the actual bytes"),
 
-        new("Predictable failure", "alert", "Bit.BlazeDb",
+        new("Predictable failure", "Bit.BlazeDb",
             "A small exception hierarchy under BlazeDbException, with checksum validation on everything persisted and clear rules about what throws versus what returns false.",
             "errors", "Trigger every one"),
 
-        new("Browser integration", "cpu", "Bit.BlazeDb.Browser",
+        new("Browser integration", "Bit.BlazeDb.Browser",
             "OPFS access through a [JSImport] ES module - atomic writes through createWritable's swap file - plus Web Locks so a second tab cannot corrupt the first one's files.",
             "storage", "See the browser notes"),
 
-        new("Unique constraints", "shield", "Bit.BlazeDb",
+        new("Unique constraints", "Bit.BlazeDb",
             "A uniqueness flag on hash and ordered indexes, checked before anything is mutated so a rejected write leaves the table and its indexes untouched. Null values are exempt, as everywhere else in the indexing layer.",
             null, ""),
 
-        new("Compound indexes", "index", "Bit.BlazeDb",
+        new("Compound indexes", "Bit.BlazeDb",
             "[BlazeDbCompoundIndex] and [BlazeDbCompoundOrderedIndex] build an index keyed by a value tuple, so a filter on several members resolves to one lookup. Ordered ones sort lexicographically, which keeps a leading-key prefix a single contiguous scan.",
             null, ""),
 
-        new("Streaming query results", "query", "Bit.BlazeDb.Querying",
+        new("Streaming query results", "Bit.BlazeDb.Querying",
             "ExecuteAsync hands control back to the browser every N rows, so scanning a large table cannot freeze rendering on WebAssembly's single thread. Filters, ordering and paging apply exactly as in the synchronous path.",
             null, ""),
 
-        new("Encryption at rest", "lock", "Bit.BlazeDb.Storage",
+        new("Encryption at rest", "Bit.BlazeDb.Storage",
             "An IBlazeDbStorage decorator that seals every write into an AES-GCM frame, keeping appends genuine appends. The file name is bound in as associated data, and a torn trailing frame is ignored while a tampered one is reported as corruption.",
             null, ""),
 
-        new("Quota-aware persistence", "disk", "Bit.BlazeDb",
+        new("Quota-aware persistence", "Bit.BlazeDb",
             "The engine consults navigator.storage estimates before flushing, compacts when space runs short, and refuses deliberately rather than discovering the limit as a failed append. Data stays intact in memory and the flush can be retried.",
             null, ""),
 
-        new("IndexedDB fallback", "database", "Bit.BlazeDb.Browser",
+        new("IndexedDB fallback", "Bit.BlazeDb.Browser",
             "A second browser backend for contexts without OPFS, such as Firefox private windows. Same four-method contract, same single-writer lock, so nothing above it changes.",
             null, ""),
 
-        new("Cross-tab read replicas", "refresh", "Bit.BlazeDb.Browser",
+        new("Cross-tab read replicas", "Bit.BlazeDb.Browser",
             "Read-only tabs recover from storage and reload when the writer announces a checkpoint over a BroadcastChannel. Only the signal crosses tabs - the data always travels through storage, so a replica cannot observe an uncommitted state.",
             null, ""),
 
-        new("EF Core provider", "layers", "Bit.BlazeDb.EntityFrameworkCore",
+        new("EF Core provider", "Bit.BlazeDb.EntityFrameworkCore",
             "AddDbContext / UseBlazeDb over the generated descriptors, SaveChanges as one transaction, and LINQ translated onto the query plan with index selection. Queries hand back the live row, so tracking needs no materialization step.",
             "efcore", "Run it against this database"),
     ];
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Schema.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Schema.razor
index bf488e843d0..69f0d773df2 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Schema.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Schema.razor
@@ -1,20 +1,20 @@
 @page "/schema"
 @inject DemoDbService Db
 
-<PageTitle>Schema &amp; codegen - BlazeDb</PageTitle>
+<PageTitle>Schema &amp; codegen · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Engine" IconName="schema" Title="Schema comes from your types"
+<PageHeader Eyebrow="Schema & codegen" Title="Schema comes from your types"
             Lead="A Roslyn incremental generator turns an annotated partial class into a table descriptor, binary serializers, a key extractor and index definitions - all at compile time, so nothing is reflected at runtime.">
-    <span class="chip"><Icon Name="cpu" /> Trimming &amp; AOT safe</span>
-    <span class="chip"><Icon Name="index" /> @TodoEntry.Table.Indexes.Count index definitions generated</span>
-    <span class="chip"><Icon Name="code" /> 10 compile-time diagnostics</span>
+    <span class="bb-badge bd-badge-neutral">Trimming &amp; AOT safe</span>
+    <span class="bb-badge bd-badge-neutral">@TodoEntry.Table.Indexes.Count index definitions generated</span>
+    <span class="bb-badge bd-badge-neutral">@DiagnosticsCatalog.All.Count compile-time diagnostics</span>
 </PageHeader>
 
-<Section Title="The model this whole site runs on" IconName="code"
+<Section Title="The model this whole site runs on"
          Lead="One class covers every property kind the generator supports, both index kinds, a custom index name and an ignored property.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <CodeBlock Title="Data/DemoModels.cs" Code="@ModelSource" />
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <CodeBlock Title="Generated: TodoEntry.BlazeDb.g.cs (shape)" Code="@GeneratedSource" />
             <Callout Tone="accent" Title="Why a generator rather than reflection?">
                 Emitting the reader, writer and key extractor as ordinary C# means the wasm linker can
@@ -24,11 +24,11 @@
     </div>
 </Section>
 
-<Section Title="The generated descriptor, inspected live" IconName="database"
+<Section Title="The generated descriptor, inspected live"
          Lead="These values are read from the actual static members the generator produced for this build.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <Panel Title="TodoEntry.Table" IconName="layers" Sub="the generated descriptor">
-            <dl class="kv">
+            <dl class="bb-params">
                 <dt>Name</dt>
                 <dd>"@TodoEntry.Table.Name"</dd>
                 <dt>Key type</dt>
@@ -45,8 +45,8 @@
         </Panel>
 
         <Panel Title="TodoEntry.Indexes" IconName="index" Sub="one static field per indexed property">
-            <div class="table-wrap">
-                <table class="data">
+            <div class="bb-scroll">
+                <table class="bb-table">
                     <thead>
                         <tr><th>Member</th><th>Kind</th><th>Runtime type</th></tr>
                     </thead>
@@ -55,78 +55,78 @@
                         {
                             var name = index.GetType().Name.StartsWith("Hash") ? "hash" : "ordered";
                             <tr>
-                                <td class="mono strong">@index.Name</td>
-                                <td><span class="badge @(name == "hash" ? "info" : "accent")">@name</span></td>
-                                <td class="mono">@TypeName(index.GetType())</td>
+                                <td class="bd-strong">@index.Name</td>
+                                <td><span class="@Tones.Badge(name == "hash" ? "info" : "accent")">@name</span></td>
+                                <td class="bb-mono">@TypeName(index.GetType())</td>
                             </tr>
                         }
                     </tbody>
                 </table>
             </div>
-            <p class="small muted mt-2">
+            <p class="bb-muted">
                 <code>ByPriority</code> is named through <code>[BlazeDbIndex(Name = "ByPriority")]</code>; the
                 others default to their property name.
             </p>
         </Panel>
     </div>
 
-    <div class="grid grid-3 mt-2">
-        <StatTile Label="todos rows" IconName="database" Value="@RowCount(TodoEntry.Table.Name)" Note="live table" />
-        <StatTile Label="settings rows" IconName="key" Value="@(Db.IsOpen ? Db.Settings.Count.ToString() : "-")" Note="string keys, explicit field numbers" />
-        <StatTile Label="metrics rows" IconName="gauge" Value="@(_metrics?.Count.ToString() ?? "-")" Note="hand-written descriptor" />
+    <div class="bb-stats">
+        <StatTile Label="todos rows" Value="@RowCount(TodoEntry.Table.Name)" Note="live table" />
+        <StatTile Label="settings rows" Value="@(Db.IsOpen ? Db.Settings.Count.ToString() : "-")" Note="string keys, explicit field numbers" />
+        <StatTile Label="metrics rows" Value="@(_metrics?.Count.ToString() ?? "-")" Note="hand-written descriptor" />
     </div>
 </Section>
 
-<Section Title="Attributes" IconName="tag" Lead="Eight attributes describe everything the engine needs.">
+<Section Title="Attributes" Lead="Eight attributes describe everything the engine needs.">
     <Panel Flush="true">
-        <div class="table-wrap">
-            <table class="data">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th>Attribute</th><th>Target</th><th>Effect</th></tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td class="mono strong">[BlazeDbTable(name?)]</td>
+                        <td class="bd-strong">[BlazeDbTable(name?)]</td>
                         <td>class · struct</td>
                         <td>Marks a <code>partial</code> type as a table. The name defaults to the type name and becomes the persisted table identity.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbKey]</td>
+                        <td class="bd-strong">[BlazeDbKey]</td>
                         <td>property</td>
                         <td>Exactly one per table. Must be a non-nullable scalar - <code>int?</code>, <code>string?</code> and <code>byte[]</code> are rejected.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbIndex]</td>
+                        <td class="bd-strong">[BlazeDbIndex]</td>
                         <td>property</td>
                         <td>Hash equality index for O(1) <code>Lookup</code> and <code>CountBy</code>. Optional <code>Name</code>.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbOrderedIndex]</td>
+                        <td class="bd-strong">[BlazeDbOrderedIndex]</td>
                         <td>property</td>
                         <td>Ordered index for <code>OrderBy</code> and <code>Range</code>. A property may carry both index attributes.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbField(n)]</td>
+                        <td class="bd-strong">[BlazeDbField(n)]</td>
                         <td>property</td>
                         <td>Pins the wire field number. Without it numbers follow declaration order, so reordering properties would break existing data.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbIgnore]</td>
+                        <td class="bd-strong">[BlazeDbIgnore]</td>
                         <td>property</td>
                         <td>Excluded from serialization entirely. Still a normal property in memory.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbIndex(Unique = true)]</td>
+                        <td class="bd-strong">[BlazeDbIndex(Unique = true)]</td>
                         <td>property</td>
                         <td>Either index attribute can be unique: a write that would duplicate a non-null value throws <code>BlazeDbUniqueConstraintViolationException</code> before anything is changed.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbCompoundIndex(name, props…)]</td>
+                        <td class="bd-strong">[BlazeDbCompoundIndex(name, props…)]</td>
                         <td>class · struct</td>
                         <td>One hash index over several properties, keyed by their value tuple, so a filter on all of them is a single lookup. Repeatable; optional <code>Unique</code>.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">[BlazeDbCompoundOrderedIndex(name, props…)]</td>
+                        <td class="bd-strong">[BlazeDbCompoundOrderedIndex(name, props…)]</td>
                         <td>class · struct</td>
                         <td>The ordered equivalent: rows sort by the tuple, so a range over a leading-property prefix is one contiguous scan.</td>
                     </tr>
@@ -142,35 +142,35 @@
     </Callout>
 </Section>
 
-<Section Title="Supported property types" IconName="binary"
+<Section Title="Supported property types"
          Lead="Anything in this table can be a column. Index keys may be any supported scalar; collections cannot be indexed.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <Panel Title="Scalars" IconName="check" Flush="true">
-            <div class="table-wrap">
-                <table class="data">
+            <div class="bb-scroll">
+                <table class="bb-table">
                     <thead><tr><th>C# type</th><th>Encoding</th></tr></thead>
                     <tbody>
-                        <tr><td class="mono">bool</td><td class="mono">varint</td></tr>
-                        <tr><td class="mono">sbyte · short · int · long</td><td class="mono">zig-zag varint</td></tr>
-                        <tr><td class="mono">byte · ushort · uint · ulong · char</td><td class="mono">varint</td></tr>
-                        <tr><td class="mono">float</td><td class="mono">fixed32</td></tr>
-                        <tr><td class="mono">double</td><td class="mono">fixed64</td></tr>
-                        <tr><td class="mono">decimal</td><td class="mono">length-delimited</td></tr>
-                        <tr><td class="mono">string</td><td class="mono">length-delimited UTF-8</td></tr>
-                        <tr><td class="mono">Guid</td><td class="mono">length-delimited, 16 bytes</td></tr>
-                        <tr><td class="mono">DateTime</td><td class="mono">fixed64, Kind preserved</td></tr>
-                        <tr><td class="mono">DateTimeOffset</td><td class="mono">length-delimited, 16 bytes</td></tr>
-                        <tr><td class="mono">TimeSpan</td><td class="mono">fixed64 ticks</td></tr>
-                        <tr><td class="mono">any enum</td><td class="mono">varint</td></tr>
-                        <tr><td class="mono">byte[]</td><td class="mono">length-delimited blob</td></tr>
+                        <tr><td class="bb-mono">bool</td><td class="bb-mono">varint</td></tr>
+                        <tr><td class="bb-mono">sbyte · short · int · long</td><td class="bb-mono">zig-zag varint</td></tr>
+                        <tr><td class="bb-mono">byte · ushort · uint · ulong · char</td><td class="bb-mono">varint</td></tr>
+                        <tr><td class="bb-mono">float</td><td class="bb-mono">fixed32</td></tr>
+                        <tr><td class="bb-mono">double</td><td class="bb-mono">fixed64</td></tr>
+                        <tr><td class="bb-mono">decimal</td><td class="bb-mono">length-delimited</td></tr>
+                        <tr><td class="bb-mono">string</td><td class="bb-mono">length-delimited UTF-8</td></tr>
+                        <tr><td class="bb-mono">Guid</td><td class="bb-mono">length-delimited, 16 bytes</td></tr>
+                        <tr><td class="bb-mono">DateTime</td><td class="bb-mono">fixed64, Kind preserved</td></tr>
+                        <tr><td class="bb-mono">DateTimeOffset</td><td class="bb-mono">length-delimited, 16 bytes</td></tr>
+                        <tr><td class="bb-mono">TimeSpan</td><td class="bb-mono">fixed64 ticks</td></tr>
+                        <tr><td class="bb-mono">any enum</td><td class="bb-mono">varint</td></tr>
+                        <tr><td class="bb-mono">byte[]</td><td class="bb-mono">length-delimited blob</td></tr>
                     </tbody>
                 </table>
             </div>
         </Panel>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Nullable and repeated" IconName="layers">
-                <ul class="small">
+                <ul class="bb-detail-list">
                     <li><code>T?</code> for any supported value scalar - omitted from the wire when null.</li>
                     <li><code>string?</code> - omitted when null.</li>
                     <li><code>T[]</code> and <code>List&lt;T&gt;</code> of any supported scalar - written as repeated tags.</li>
@@ -184,7 +184,7 @@
             </Panel>
 
             <Panel Title="Not supported" IconName="alert">
-                <ul class="small">
+                <ul class="bb-detail-list">
                     <li>Nested or complex property types (another class, struct or record).</li>
                     <li><code>Dictionary&lt;,&gt;</code>, <code>HashSet&lt;T&gt;</code>, <code>IEnumerable&lt;T&gt;</code>.</li>
                     <li><code>byte[]</code> as a collection element - <code>List&lt;byte[]&gt;</code> is out.</li>
@@ -193,7 +193,7 @@
                     <li>Properties without both a getter and a setter - silently skipped.</li>
                     <li>Indexing a collection property.</li>
                 </ul>
-                <p class="small muted mb-0">
+                <p class="bb-muted">
                     Everything in this list is a compile error or a deliberate omission, never a
                     silent runtime failure.
                 </p>
@@ -202,11 +202,11 @@
     </div>
 </Section>
 
-<Section Title="Generator diagnostics" IconName="alert"
+<Section Title="Generator diagnostics"
          Lead="Misuse is caught at build time, on the attribute or property at fault. These are the diagnostics the generator can report.">
     <Panel Flush="true">
-        <div class="table-wrap">
-            <table class="data">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th>ID</th><th>Meaning</th><th>Triggered by</th></tr>
                 </thead>
@@ -214,9 +214,9 @@
                     @foreach (var diagnostic in DiagnosticsCatalog.All)
                     {
                         <tr>
-                            <td class="mono strong">@diagnostic.Code @(diagnostic.IsError ? null : "(warning)")</td>
+                            <td class="bd-strong">@diagnostic.Code @(diagnostic.IsError ? null : "(warning)")</td>
                             <td>@diagnostic.Title</td>
-                            <td class="mono">@diagnostic.Trigger</td>
+                            <td class="bb-mono">@diagnostic.Trigger</td>
                         </tr>
                     }
                 </tbody>
@@ -230,43 +230,43 @@
     </Callout>
 </Section>
 
-<Section Title="The generator is optional" IconName="key"
+<Section Title="The generator is optional"
          Lead="A BlazeDbTableDescriptor is a plain object. Write one by hand and positional records, custom comparers and computed keys all become available.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <CodeBlock Title="Hand-written descriptor" Code="@ManualSource" />
 
         <Panel Title="metrics - live, hand-written" IconName="gauge">
             <Actions>
-                <button class="btn btn-sm" @onclick="AddMetric"><Icon Name="plus" /> Insert</button>
+                <button type="button" class="btn btn-secondary" @onclick="AddMetric"><Icon Name="plus" /> Insert</button>
             </Actions>
             <ChildContent>
                 @if (_metrics is null)
                 {
-                    <div class="empty">Opening…</div>
+                    <div class="bb-empty">Opening…</div>
                 }
                 else if (_metricRows.Count == 0)
                 {
-                    <div class="empty"><Icon Name="gauge" /><div>No metrics yet - insert one.</div></div>
+                    <div class="bb-empty">No metrics yet - insert one.</div>
                 }
                 else
                 {
-                    <div class="table-wrap">
-                        <table class="data">
-                            <thead><tr><th>Id</th><th>Name</th><th class="num">Value</th><th>At</th></tr></thead>
+                    <div class="bb-scroll">
+                        <table class="bb-table">
+                            <thead><tr><th>Id</th><th>Name</th><th class="bd-num">Value</th><th>At</th></tr></thead>
                             <tbody>
                                 @foreach (var metric in _metricRows)
                                 {
                                     <tr>
-                                        <td class="mono">@metric.Id</td>
-                                        <td class="mono strong">@metric.Name</td>
-                                        <td class="num mono">@metric.Value.ToString("0.000")</td>
-                                        <td class="mono tiny">@metric.At.ToLocalTime().ToString("HH:mm:ss")</td>
+                                        <td class="bb-mono">@metric.Id</td>
+                                        <td class="bd-strong">@metric.Name</td>
+                                        <td class="bd-num">@metric.Value.ToString("0.000")</td>
+                                        <td class="bb-mono bd-small">@metric.At.ToLocalTime().ToString("HH:mm:ss")</td>
                                     </tr>
                                 }
                             </tbody>
                         </table>
                     </div>
-                    <div class="api-call mt-2">@_metricNote</div>
+                    <div class="bb-log bd-out">@_metricNote</div>
                 }
             </ChildContent>
         </Panel>
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/StorageBackends.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/StorageBackends.razor
index 9a4a357a2e0..de24fd8c05d 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/StorageBackends.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/StorageBackends.razor
@@ -2,32 +2,32 @@
 @implements IDisposable
 @inject DemoDbService Db
 
-<PageTitle>Storage backends - BlazeDb</PageTitle>
+<PageTitle>Storage backends · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Persistence" IconName="disk" Title="Four methods are the entire storage contract"
+<PageHeader Eyebrow="Storage backends" Title="Four methods are the entire storage contract"
             Lead="The engine never assumes a file system. It asks for bytes by name, replaces them atomically, appends to them and deletes them. Everything else - OPFS, a directory on disk, a dictionary in a test - is an implementation detail.">
-    <span class="chip @(Db.IsPersistent ? "on" : null)"><Icon Name="disk" /> @Db.StorageLabel</span>
-    <span class="chip"><Icon Name="history" /> @(Db.Trace?.CallCount ?? 0) calls traced</span>
+    <span class="@(Db.IsPersistent ? "bb-badge bb-badge-success" : "bb-badge bd-badge-neutral")">@Db.StorageLabel</span>
+    <span class="bb-badge bd-badge-neutral">@(Db.Trace?.CallCount ?? 0) calls traced</span>
     @if (_quota > 0)
     {
-        <span class="chip"><Icon Name="database" /> @DemoSandbox.Bytes(_usage) of @DemoSandbox.Bytes(_quota) origin storage used</span>
+        <span class="bb-badge bd-badge-neutral">@DemoSandbox.Bytes(_usage) of @DemoSandbox.Bytes(_quota) origin storage used</span>
     }
 </PageHeader>
 
-<Section Title="The interface" IconName="code">
-    <div class="grid grid-2">
+<Section Title="The interface">
+    <div class="bb-flex">
         <CodeBlock Title="Bit.BlazeDb.Storage.IBlazeDbStorage" Code="@InterfaceSnippet" />
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Contract notes" IconName="info">
-                <dl class="kv">
+                <dl class="bb-params bd-params-prose">
                     <dt>ReadAsync</dt>
-                    <dd class="small">Returns the whole file, or <code>null</code> when it does not exist. Never throws for a missing name.</dd>
+                    <dd>Returns the whole file, or <code>null</code> when it does not exist. Never throws for a missing name.</dd>
                     <dt>WriteAtomicAsync</dt>
-                    <dd class="small">After a crash the reader must see either the old bytes or the new bytes, never a mixture. Used for the manifest and snapshots.</dd>
+                    <dd>After a crash the reader must see either the old bytes or the new bytes, never a mixture. Used for the manifest and snapshots.</dd>
                     <dt>AppendAsync</dt>
-                    <dd class="small">Appends to the end, creating the file if needed. Used for the log, where a torn tail is acceptable.</dd>
+                    <dd>Appends to the end, creating the file if needed. Used for the log, where a torn tail is acceptable.</dd>
                     <dt>DeleteAsync</dt>
-                    <dd class="small">Removes the file if present. Used to retire superseded logs and snapshots.</dd>
+                    <dd>Removes the file if present. Used to retire superseded logs and snapshots.</dd>
                 </dl>
             </Panel>
             <Callout Tone="accent" Title="Atomicity is the only hard requirement.">
@@ -39,42 +39,42 @@
     </div>
 </Section>
 
-<Section Title="Backends that ship" IconName="layers">
+<Section Title="Backends that ship">
     <Panel Flush="true">
-        <div class="table-wrap">
-            <table class="data">
+        <div class="bb-scroll">
+            <table class="bb-table">
                 <thead>
                     <tr><th>Type</th><th>Namespace</th><th>Construction</th><th>Where it fits</th></tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td class="mono strong">BlazeDbOpfsStorage</td>
-                        <td class="mono">Bit.BlazeDb.Browser</td>
-                        <td class="mono">await BlazeDbOpfsStorage.CreateAsync("name")</td>
+                        <td class="bd-strong">BlazeDbOpfsStorage</td>
+                        <td class="bb-mono">Bit.BlazeDb.Browser</td>
+                        <td class="bb-mono">await BlazeDbOpfsStorage.CreateAsync("name")</td>
                         <td>Blazor WebAssembly. Private per-origin files, no user prompt, no quota dialog for reasonable sizes.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">BlazeDbFileStorage</td>
-                        <td class="mono">Bit.BlazeDb.Storage</td>
-                        <td class="mono">new BlazeDbFileStorage(directory)</td>
+                        <td class="bd-strong">BlazeDbFileStorage</td>
+                        <td class="bb-mono">Bit.BlazeDb.Storage</td>
+                        <td class="bb-mono">new BlazeDbFileStorage(directory)</td>
                         <td>Desktop, server and integration tests. Atomic writes via temp file plus rename.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">BlazeDbInMemoryStorage</td>
-                        <td class="mono">Bit.BlazeDb.Storage</td>
-                        <td class="mono">new BlazeDbInMemoryStorage()</td>
+                        <td class="bd-strong">BlazeDbInMemoryStorage</td>
+                        <td class="bb-mono">Bit.BlazeDb.Storage</td>
+                        <td class="bb-mono">new BlazeDbInMemoryStorage()</td>
                         <td>Unit tests and the failure injection on the durability page. Exposes <code>GetFile</code>/<code>SetFile</code> so you can corrupt bytes deliberately.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">null</td>
-                        <td class="mono">-</td>
-                        <td class="mono">Storage = null</td>
+                        <td class="bd-strong">null</td>
+                        <td class="bb-mono">-</td>
+                        <td class="bb-mono">Storage = null</td>
                         <td>No persistence at all. Nothing is serialized, so this is the fastest configuration.</td>
                     </tr>
                     <tr>
-                        <td class="mono strong">your own</td>
-                        <td class="mono">-</td>
-                        <td class="mono">class X : IBlazeDbStorage</td>
+                        <td class="bd-strong">your own</td>
+                        <td class="bb-mono">-</td>
+                        <td class="bb-mono">class X : IBlazeDbStorage</td>
                         <td>Anything addressable by name: a remote blob store, an encrypting wrapper, a tracing decorator like the one below.</td>
                     </tr>
                 </tbody>
@@ -83,39 +83,36 @@
     </Panel>
 </Section>
 
-<Section Title="Live engine I/O" IconName="history"
+<Section Title="Live engine I/O"
          Lead="Every call in this trace was made by the engine against this tab's real storage. The demo wraps its backend in a decorator that records what passes through.">
-    <div class="grid grid-sidebar">
+    <div class="bd-main-side">
         <Panel Title="Trace" IconName="file" Flush="true">
             <Actions>
-                <button class="btn btn-sm" @onclick="ClearTrace"><Icon Name="close" /> Clear</button>
+                <button type="button" class="btn btn-secondary" @onclick="ClearTrace"><Icon Name="close" /> Clear</button>
             </Actions>
             <ChildContent>
-                <div class="stats" style="padding:1rem; padding-bottom:0">
-                    <StatTile Label="Calls" IconName="history" Value="@((Db.Trace?.CallCount ?? 0).ToString("N0"))" />
-                    <StatTile Label="Bytes written" IconName="download" Tone="accent"
+                <div class="bb-stats bd-panel-stats">
+                    <StatTile Label="Calls" Value="@((Db.Trace?.CallCount ?? 0).ToString("N0"))" />
+                    <StatTile Label="Bytes written" Tone="accent"
                               Value="@DemoSandbox.Bytes(Db.Trace?.BytesWritten ?? 0)" />
-                    <StatTile Label="Bytes read" IconName="file" Value="@DemoSandbox.Bytes(Db.Trace?.BytesRead ?? 0)" />
+                    <StatTile Label="Bytes read" Value="@DemoSandbox.Bytes(Db.Trace?.BytesRead ?? 0)" />
                 </div>
 
                 @if (Db.Trace is null || Db.Trace.Ops.Count == 0)
                 {
-                    <div class="empty">
-                        <Icon Name="history" />
-                        <div>No I/O recorded yet. Generate some with the buttons on the right.</div>
-                    </div>
+                    <div class="bb-empty">No I/O recorded yet. Generate some with the buttons under “Generate I/O”.</div>
                 }
                 else
                 {
-                    <div class="log" style="max-height:420px">
+                    <div class="bd-trace">
                         @foreach (var op in Db.Trace.Ops)
                         {
-                            <div class="log-row">
-                                <span class="log-seq">@op.Seq</span>
-                                <span class="log-op @OpClass(op.Operation)">@op.Operation</span>
-                                <span class="log-name">@op.File</span>
-                                <span class="log-meta">@(op.Bytes > 0 ? DemoSandbox.Bytes(op.Bytes) : "-")</span>
-                                <span class="log-meta">@DemoSandbox.Duration(op.Ms)</span>
+                            <div class="bd-trace-row">
+                                <span class="bd-trace-seq">@op.Seq</span>
+                                <span class="bd-trace-op @OpClass(op.Operation)">@op.Operation</span>
+                                <span class="bd-trace-name">@op.File</span>
+                                <span class="bd-trace-meta">@(op.Bytes > 0 ? DemoSandbox.Bytes(op.Bytes) : "-")</span>
+                                <span class="bd-trace-meta">@DemoSandbox.Duration(op.Ms)</span>
                             </div>
                         }
                     </div>
@@ -123,27 +120,27 @@
             </ChildContent>
         </Panel>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Generate I/O" IconName="play">
-                <div class="flex-col">
-                    <button class="btn btn-sm btn-block" disabled="@_busy" @onclick="WriteAndFlushAsync">
+                <div class="bd-actions">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="WriteAndFlushAsync">
                         <Icon Name="plus" /> Insert a row, then FlushAsync
                     </button>
-                    <button class="btn btn-sm btn-block" disabled="@_busy" @onclick="CheckpointAsync">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="CheckpointAsync">
                         <Icon Name="layers" /> CheckpointAsync
                     </button>
-                    <button class="btn btn-sm btn-block" disabled="@_busy" @onclick="ReadRawAsync">
+                    <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="ReadRawAsync">
                         <Icon Name="file" /> Read manifest.blz directly
                     </button>
                 </div>
                 @if (_note is not null)
                 {
-                    <div class="api-call mt-2">@_note</div>
+                    <div class="bb-log bd-out">@_note</div>
                 }
             </Panel>
 
             <Panel Title="Reads never appear here" IconName="bolt">
-                <p class="small mb-0">
+                <p>
                     Query the <a href="todos">live data</a> page as much as you like and this trace will
                     not grow. Reads are served from memory, so the storage layer is only ever touched by
                     the flush loop, checkpoints and recovery.
@@ -155,13 +152,13 @@
     </div>
 </Section>
 
-<Section Title="OPFS and the single-writer rule" IconName="lock"
+<Section Title="OPFS and the single-writer rule"
          Lead="The browser backend adds one constraint the others do not have: exactly one tab may own a database at a time.">
-    <div class="grid grid-2">
-        <div class="flex-col gap-lg">
+    <div class="bb-flex">
+        <div class="bb-flex">
             <CodeBlock Title="Opening the browser backend" Code="@OpfsSnippet" />
             <Panel Title="How the election works" IconName="key">
-                <ol class="small mb-0">
+                <ol class="bb-detail-list">
                     <li><code>CreateAsync</code> requests a Web Lock named <code>blazedb:&lt;database&gt;</code> with <code>ifAvailable: true</code>.</li>
                     <li>If the lock is already held, the request resolves immediately as unavailable and <code>BlazeDbDatabaseLockedException</code> is thrown.</li>
                     <li>Otherwise the lock is held for the lifetime of the <code>BlazeDbOpfsStorage</code> instance and released by <code>Dispose</code> or when the tab closes.</li>
@@ -170,9 +167,9 @@
             </Panel>
         </div>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="This tab" IconName="info">
-                <dl class="kv">
+                <dl class="bb-params">
                     <dt>Backend</dt>
                     <dd>@Db.StorageLabel</dd>
                     <dt>Database name</dt>
@@ -189,25 +186,25 @@
                 </dl>
                 @if (Db.StorageNote is not null)
                 {
-                    <Callout Tone="warn" Class="mt-2">@Db.StorageNote</Callout>
+                    <Callout Tone="warn">@Db.StorageNote</Callout>
                 }
             </Panel>
 
             <Panel Title="Try to take the lock twice" IconName="lock">
-                <p class="small mb-1">
+                <p>
                     Asking for the same database again from this tab exercises the same path a second tab
                     would take.
                 </p>
-                <button class="btn btn-sm btn-block" disabled="@_busy" @onclick="TryLockAsync">
+                <button type="button" class="btn btn-secondary" disabled="@_busy" @onclick="TryLockAsync">
                     <Icon Name="play" /> await BlazeDbOpfsStorage.CreateAsync("@DemoDbService.DatabaseName")
                 </button>
                 @if (_lockResult is not null)
                 {
-                    <div class="api-call mt-2">@_lockResult</div>
+                    <div class="bb-log bd-out">@_lockResult</div>
                 }
-                <p class="tiny muted mt-2 mb-0">
+                <p class="bd-foot">
                     Open this page in a second tab for the real thing: the newcomer falls back to
-                    in-memory storage and says so in the sidebar.
+                    in-memory storage and says so in the storage badge in the corner of the window.
                 </p>
             </Panel>
 
@@ -222,24 +219,24 @@
     </div>
 </Section>
 
-<Section Title="The JavaScript surface" IconName="code"
+<Section Title="The JavaScript surface"
          Lead="One small ES module per concern - OPFS, IndexedDB, WebCrypto, BroadcastChannel - shipped as static web assets inside the package. This is the OPFS one.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <CodeBlock Title="_content/Bit.BlazeDb/bit-blazedb-opfs.js" Code="@JsSnippet" Language="text" />
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Why so little JavaScript" IconName="bolt">
-                <p class="small">
+                <p>
                     OPFS handles cannot be marshalled into .NET, so the module exists purely to hold them
                     and to move byte arrays across the boundary. No querying, no serialization and no
                     application logic happens in JavaScript.
                 </p>
-                <p class="small mb-0">
+                <p>
                     The interop cost is therefore proportional to how often you flush, not to how often
                     you read or write rows.
                 </p>
             </Panel>
             <Panel Title="Interop bindings" IconName="cpu">
-                <CodeBlock ShowHeader="false" Code="@InteropSnippet" />
+                <CodeBlock Code="@InteropSnippet" />
             </Panel>
         </div>
     </div>
@@ -279,10 +276,10 @@
 
     private static string OpClass(string operation) => operation switch
     {
-        "ReadAsync" => "read",
-        "AppendAsync" => "append",
-        "WriteAtomicAsync" => "write",
-        "DeleteAsync" => "delete",
+        "ReadAsync" => "bd-op-read",
+        "AppendAsync" => "bd-op-append",
+        "WriteAtomicAsync" => "bd-op-write",
+        "DeleteAsync" => "bd-op-delete",
         _ => "",
     };
 
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Todos.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Todos.razor
index e90463a2b6e..df8bee9f09e 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Todos.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Todos.razor
@@ -1,129 +1,131 @@
 @page "/todos"
 @inject DemoDbService Db
 
-<PageTitle>Live data - BlazeDb</PageTitle>
-
-<PageHeader Eyebrow="Start" IconName="list" Title="A working app on the real engine"
-            Lead="Every list, count and filter below is served by BlazeDb primitives against rows held in this tab's memory. The panel on the right shows the exact code producing what you see.">
-    <span class="chip"><Icon Name="database" /> @(_todos?.Count ?? 0) rows</span>
-    <span class="chip"><Icon Name="disk" /> @Db.StorageLabel</span>
+<PageTitle>Live data · BlazeDb</PageTitle>
+
+@* A dashboard rather than a document: it gives up the "on this page" rail for the width its two
+   columns need. *@
+<PageHeader Eyebrow="Live data" Title="A working app on the real engine"
+            Lead="Every list, count and filter below is served by BlazeDb primitives against rows held in this tab's memory. The query panel beside the rows shows the exact code producing what you see.">
+    <span class="bb-badge bd-badge-neutral">@(_todos?.Count ?? 0) rows</span>
+    <span class="bb-badge bd-badge-neutral">@Db.StorageLabel</span>
     @if (Db.IsPersistent)
     {
-        <span class="chip on"><Icon Name="shield" /> Survives reload</span>
+        <span class="bb-badge bb-badge-success">Survives reload</span>
     }
 </PageHeader>
 
-@if (_error is not null)
-{
-    <Callout Tone="err" Title="The database could not be opened.">@_error</Callout>
-}
-else if (_todos is null)
-{
-    <Panel><div class="empty"><div class="spinner" style="margin:0 auto 0.6rem"></div>Opening the database…</div></Panel>
-}
-else
-{
-    <div class="stats mb-3">
-        <StatTile Label="Total" IconName="database" Value="@_todos.Count.ToString("N0")" Note="table.Count" />
-        <StatTile Label="Open" IconName="clock" Tone="accent" Value="@_openCount.ToString("N0")"
-                  Note="CountBy(Done, false)" />
-        <StatTile Label="Done" IconName="check" Tone="ok" Value="@_doneCount.ToString("N0")"
-                  Note="CountBy(Done, true)" />
-        <StatTile Label="Matching filters" IconName="filter" Value="@_matchTotal.ToString("N0")"
-                  Note="@($"page {_page + 1} of {Math.Max(1, (_matchTotal + PageSize - 1) / PageSize)}")" />
-        <StatTile Label="Last operation" IconName="bolt" Value="@_lastOpTime" Note="@_lastOp" />
-    </div>
-
-    <Panel Title="Add a row" IconName="plus" Sub="table.Insert(row)">
-        <div class="form-row">
-            <div class="field" style="flex: 3 1 240px">
-                <label class="field-label" for="new-title">Title</label>
-                <input id="new-title" class="input" placeholder="What needs doing?" @bind="_newTitle"
-                       @bind:event="oninput" @onkeydown="OnAddKey" />
-            </div>
-            <div class="field">
-                <label class="field-label" for="new-cat">Category</label>
-                <select id="new-cat" class="select" @bind="_newCategory">
-                    <option value="">(null - not indexed)</option>
-                    @foreach (var c in DemoData.Categories)
-                    {
-                        <option value="@c">@c</option>
-                    }
-                </select>
-            </div>
-            <div class="field">
-                <label class="field-label" for="new-prio">Priority</label>
-                <select id="new-prio" class="select" @bind="_newPriority">
-                    @foreach (var p in Enum.GetValues<Priority>())
-                    {
-                        <option value="@p">@p</option>
-                    }
-                </select>
-            </div>
-            <div class="field" style="flex: 0 1 110px">
-                <label class="field-label" for="new-effort">Effort</label>
-                <input id="new-effort" class="input mono" type="number" min="0" max="600" @bind="_newEffort" />
-            </div>
-            <button class="btn btn-primary" disabled="@string.IsNullOrWhiteSpace(_newTitle)" @onclick="Add">
-                <Icon Name="plus" /> Insert
-            </button>
+<div class="bb-page-wide">
+    @if (_error is not null)
+    {
+        <Callout Tone="err" Title="The database could not be opened.">@_error</Callout>
+    }
+    else if (_todos is null)
+    {
+        <div class="bb-empty"><span class="bb-spinner"></span> Opening the database…</div>
+    }
+    else
+    {
+        <div class="bb-stats">
+            <StatTile Label="Total" Value="@_todos.Count.ToString("N0")" Note="table.Count" />
+            <StatTile Label="Open" Tone="accent" Value="@_openCount.ToString("N0")"
+                      Note="CountBy(Done, false)" />
+            <StatTile Label="Done" Tone="ok" Value="@_doneCount.ToString("N0")"
+                      Note="CountBy(Done, true)" />
+            <StatTile Label="Matching filters" Value="@_matchTotal.ToString("N0")"
+                      Note="@($"page {_page + 1} of {Math.Max(1, (_matchTotal + PageSize - 1) / PageSize)}")" />
+            <StatTile Label="Last operation" Value="@_lastOpTime" Note="@_lastOp" />
         </div>
 
-        @if (_showMore)
-        {
-            <div class="form-row mt-2">
-                <div class="field" style="flex: 0 1 120px">
-                    <label class="field-label" for="new-rating">Rating</label>
-                    <input id="new-rating" class="input mono" type="number" min="1" max="5" @bind="_newRating" />
-                    <span class="field-hint">int? - null when blank</span>
+        <Panel Title="Add a row" IconName="plus" Sub="table.Insert(row)">
+            <div class="bb-fields">
+                <div class="bb-field" style="flex: 3 1 240px">
+                    <label for="new-title">Title</label>
+                    <input id="new-title" placeholder="What needs doing?" @bind="_newTitle"
+                           @bind:event="oninput" @onkeydown="OnAddKey" />
                 </div>
-                <div class="field" style="flex: 0 1 160px">
-                    <label class="field-label" for="new-due">Due</label>
-                    <input id="new-due" class="input mono" type="date" @bind="_newDue" />
-                    <span class="field-hint">DateTimeOffset?</span>
+                <div class="bb-field">
+                    <label for="new-cat">Category</label>
+                    <select id="new-cat" @bind="_newCategory">
+                        <option value="">(null)</option>
+                        @foreach (var c in DemoData.Categories)
+                        {
+                            <option value="@c">@c</option>
+                        }
+                    </select>
                 </div>
-                <div class="field" style="flex: 2 1 200px">
-                    <label class="field-label" for="new-tags">Tags</label>
-                    <input id="new-tags" class="input" placeholder="wal, format" @bind="_newTags" />
-                    <span class="field-hint">List&lt;string&gt;, comma separated</span>
+                <div class="bb-field">
+                    <label for="new-prio">Priority</label>
+                    <select id="new-prio" @bind="_newPriority">
+                        @foreach (var p in Enum.GetValues<Priority>())
+                        {
+                            <option value="@p">@p</option>
+                        }
+                    </select>
                 </div>
-                <div class="field" style="flex: 0 1 130px">
-                    <label class="field-label" for="new-cost">Cost</label>
-                    <input id="new-cost" class="input mono" type="number" step="0.01" @bind="_newCost" />
-                    <span class="field-hint">decimal</span>
+                <div class="bb-field" style="flex: 0 1 110px">
+                    <label for="new-effort">Effort</label>
+                    <input id="new-effort" class="bb-mono" type="number" min="0" max="600" @bind="_newEffort" />
                 </div>
+                <button type="button" class="btn btn-primary" disabled="@string.IsNullOrWhiteSpace(_newTitle)" @onclick="Add">
+                    <Icon Name="plus" /> Insert
+                </button>
             </div>
-        }
 
-        <div class="toolbar mt-2">
-            <button class="btn btn-ghost btn-sm" @onclick="() => _showMore = !_showMore">
-                <Icon Name="@(_showMore ? "close" : "layers")" />
-                @(_showMore ? "Fewer fields" : "More fields (nullable, collections, decimal)")
-            </button>
-            @if (_addError is not null)
+            @if (_showMore)
             {
-                <span class="badge err">@_addError</span>
+                <div class="bb-fields">
+                    <div class="bb-field" style="flex: 0 1 120px">
+                        <label for="new-rating">Rating</label>
+                        <input id="new-rating" class="bb-mono" type="number" min="1" max="5" @bind="_newRating" />
+                        <span class="bb-field-hint">int? - null when blank</span>
+                    </div>
+                    <div class="bb-field" style="flex: 0 1 160px">
+                        <label for="new-due">Due</label>
+                        <input id="new-due" class="bb-mono" type="date" @bind="_newDue" />
+                        <span class="bb-field-hint">DateTimeOffset?</span>
+                    </div>
+                    <div class="bb-field" style="flex: 2 1 200px">
+                        <label for="new-tags">Tags</label>
+                        <input id="new-tags" placeholder="wal, format" @bind="_newTags" />
+                        <span class="bb-field-hint">List&lt;string&gt;, comma separated</span>
+                    </div>
+                    <div class="bb-field" style="flex: 0 1 130px">
+                        <label for="new-cost">Cost</label>
+                        <input id="new-cost" class="bb-mono" type="number" step="0.01" @bind="_newCost" />
+                        <span class="bb-field-hint">decimal</span>
+                    </div>
+                </div>
             }
-        </div>
-    </Panel>
 
-    <div class="grid grid-sidebar mt-3">
-        <div>
+            <div class="bb-toolbar">
+                <button type="button" class="btn" @onclick="() => _showMore = !_showMore">
+                    <Icon Name="@(_showMore ? "close" : "layers")" />
+                    @(_showMore ? "Fewer fields" : "More fields (nullable, collections, decimal)")
+                </button>
+                @if (_addError is not null)
+                {
+                    <span class="bb-badge bb-badge-danger">@_addError</span>
+                }
+            </div>
+        </Panel>
+
+        <div class="bd-main-side">
             <Panel Flush="true" Title="Rows" IconName="list">
                 <Actions>
-                    <span class="panel-sub mono">@_matchTotal matched</span>
+                    <span class="bd-panel-sub">@_matchTotal matched</span>
                 </Actions>
                 <ChildContent>
-                    <div class="panel-head" style="border-bottom:1px solid var(--border); background:transparent; flex-wrap:wrap; gap:0.5rem">
-                        <div class="seg">
+                    <div class="bd-filterbar">
+                        <div class="bb-segmented" role="group" aria-label="Status">
                             @foreach (var s in new[] { StatusFilter.All, StatusFilter.Open, StatusFilter.Done })
                             {
                                 var value = s;
-                                <button class="@(_status == value ? "on" : null)" @onclick="() => SetStatus(value)">@value</button>
+                                <button type="button" aria-pressed="@(_status == value ? "true" : "false")" @onclick="() => SetStatus(value)">@value</button>
                             }
                         </div>
 
-                        <select class="select" style="width:auto" @bind="_category" @bind:after="OnFilterChanged">
+                        <select aria-label="Category" @bind="_category" @bind:after="OnFilterChanged">
                             <option value="">All categories</option>
                             @foreach (var c in DemoData.Categories)
                             {
@@ -131,7 +133,7 @@ else
                             }
                         </select>
 
-                        <select class="select" style="width:auto" @bind="_priorityText" @bind:after="OnFilterChanged">
+                        <select aria-label="Priority" @bind="_priorityText" @bind:after="OnFilterChanged">
                             <option value="">Any priority</option>
                             @foreach (var p in Enum.GetValues<Priority>())
                             {
@@ -139,75 +141,63 @@ else
                             }
                         </select>
 
-                        <select class="select" style="width:auto" @bind="_sort" @bind:after="OnFilterChanged">
+                        <select aria-label="Sort order" @bind="_sort" @bind:after="OnFilterChanged">
                             <option value="@SortMode.Newest">Newest first</option>
                             <option value="@SortMode.Oldest">Oldest first</option>
                             <option value="@SortMode.Effort">Highest effort</option>
                             <option value="@SortMode.Title">Title A→Z</option>
                         </select>
 
-                        <div class="field" style="flex:1 1 150px; min-width:140px">
-                            <input class="input" placeholder="Filter titles…" @bind="_search"
-                                   @bind:event="oninput" @bind:after="OnFilterChanged" />
-                        </div>
+                        <input type="search" class="bd-grow" aria-label="Filter titles" placeholder="Filter titles…" @bind="_search"
+                               @bind:event="oninput" @bind:after="OnFilterChanged" />
                     </div>
 
                     @if (_uncategorized > 0)
                     {
-                        <div class="panel-body" style="padding-bottom:0">
+                        <div class="bd-panel-pad">
                             <Callout Tone="info" Title="@($"{_uncategorized} rows have a null Category.")">
-                                Null index values are never added to a secondary index, so those rows
-                                appear under “All categories” but never in a category lookup.
+                                Null is an index key like any other - <code>Lookup(Category, null)</code> finds
+                                them in one probe - but the category filter above lists only the named
+                                categories, so those rows show up under “All categories” alone.
                             </Callout>
                         </div>
                     }
 
                     @if (_visible.Count == 0)
                     {
-                        <div class="empty">
-                            <Icon Name="search" />
-                            <div>No rows match this combination of filters.</div>
-                        </div>
+                        <div class="bb-empty">No rows match this combination of filters.</div>
                     }
                     else
                     {
-                        <div class="rows">
+                        <div class="bd-rows">
                             @foreach (var todo in _visible)
                             {
                                 @if (_editing == todo.Id)
                                 {
-                                    <div class="row-item" style="align-items:flex-start; flex-wrap:wrap">
-                                        <div class="row-main">
-                                            <div class="form-row">
-                                                <div class="field" style="flex:3 1 200px">
-                                                    <input class="input" @bind="_editTitle" />
-                                                </div>
-                                                <div class="field" style="flex:0 1 130px">
-                                                    <select class="select" @bind="_editCategory">
-                                                        <option value="">(null)</option>
-                                                        @foreach (var c in DemoData.Categories)
-                                                        {
-                                                            <option value="@c">@c</option>
-                                                        }
-                                                    </select>
-                                                </div>
-                                                <div class="field" style="flex:0 1 120px">
-                                                    <select class="select" @bind="_editPriority">
-                                                        @foreach (var p in Enum.GetValues<Priority>())
-                                                        {
-                                                            <option value="@p">@p</option>
-                                                        }
-                                                    </select>
-                                                </div>
-                                                <div class="field" style="flex:0 1 90px">
-                                                    <input class="input mono" type="number" @bind="_editEffort" />
-                                                </div>
-                                                <button class="btn btn-primary btn-sm" @onclick="() => SaveEdit(todo)">
+                                    <div class="bd-row bd-row-editing">
+                                        <div class="bd-row-main">
+                                            <div class="bb-fields">
+                                                <input style="flex: 3 1 200px" aria-label="Title" @bind="_editTitle" />
+                                                <select aria-label="Category" @bind="_editCategory">
+                                                    <option value="">(null)</option>
+                                                    @foreach (var c in DemoData.Categories)
+                                                    {
+                                                        <option value="@c">@c</option>
+                                                    }
+                                                </select>
+                                                <select aria-label="Priority" @bind="_editPriority">
+                                                    @foreach (var p in Enum.GetValues<Priority>())
+                                                    {
+                                                        <option value="@p">@p</option>
+                                                    }
+                                                </select>
+                                                <input class="bb-mono" style="flex: 0 1 90px" type="number" aria-label="Effort" @bind="_editEffort" />
+                                                <button type="button" class="btn btn-primary" @onclick="() => SaveEdit(todo)">
                                                     <Icon Name="check" /> Update
                                                 </button>
-                                                <button class="btn btn-ghost btn-sm" @onclick="() => _editing = null">Cancel</button>
+                                                <button type="button" class="btn" @onclick="() => _editing = null">Cancel</button>
                                             </div>
-                                            <div class="tiny muted mt-1 mono">
+                                            <div class="bd-foot bb-mono">
                                                 table.Update(row) - rewrites the row and every index entry that changed
                                             </div>
                                         </div>
@@ -215,23 +205,22 @@ else
                                 }
                                 else
                                 {
-                                    <div class="row-item @(todo.Done ? "done" : null)">
-                                        <label class="check" title="Toggle Done - table.Update(row)">
-                                            <input type="checkbox" checked="@todo.Done" @onchange="() => Toggle(todo)" />
-                                        </label>
-                                        <div class="row-main">
-                                            <div class="row-title">@todo.Title</div>
-                                            <div class="row-meta">
-                                                <span class="prio @todo.Priority">@todo.Priority</span>
+                                    <div class="bd-row @(todo.Done ? "bd-done" : null)">
+                                        <input type="checkbox" checked="@todo.Done" title="Toggle Done - table.Update(row)"
+                                               aria-label="@($"Done: {todo.Title}")" @onchange="() => Toggle(todo)" />
+                                        <div class="bd-row-main">
+                                            <div class="bd-row-title">@todo.Title</div>
+                                            <div class="bd-row-meta">
+                                                <span class="bd-prio bd-prio-@todo.Priority">@todo.Priority</span>
                                                 @if (todo.Category is null)
                                                 {
-                                                    <span class="badge">null category</span>
+                                                    <span class="bb-badge bd-badge-neutral">null category</span>
                                                 }
                                                 else
                                                 {
-                                                    <span class="badge accent">@todo.Category</span>
+                                                    <span class="bb-badge bd-badge-accent">@todo.Category</span>
                                                 }
-                                                <span class="mono">@todo.Effort min</span>
+                                                <span class="bb-mono">@todo.Effort min</span>
                                                 @if (todo.Rating is { } rating)
                                                 {
                                                     <span title="Rating">@Stars(rating)</span>
@@ -239,18 +228,18 @@ else
                                                 <span>@todo.CreatedAt.ToLocalTime().ToString("MMM d, HH:mm")</span>
                                                 @foreach (var tag in todo.Tags)
                                                 {
-                                                    <span class="badge mono">#@tag</span>
+                                                    <span class="bb-badge bd-badge-neutral bb-mono">#@tag</span>
                                                 }
                                             </div>
                                         </div>
-                                        <div class="row-actions">
-                                            <button class="icon-btn" title="Edit" @onclick="() => BeginEdit(todo)">
+                                        <div class="bd-row-actions">
+                                            <button type="button" class="bb-icon-btn" title="Edit" aria-label="Edit" @onclick="() => BeginEdit(todo)">
                                                 <Icon Name="code" />
                                             </button>
-                                            <button class="icon-btn" title="Copy key" @onclick="() => _keyInput = todo.Id.ToString()">
+                                            <button type="button" class="bb-icon-btn" title="Copy key" aria-label="Copy key" @onclick="() => _keyInput = todo.Id.ToString()">
                                                 <Icon Name="key" />
                                             </button>
-                                            <button class="icon-btn" title="Delete" @onclick="() => Delete(todo)">
+                                            <button type="button" class="bb-icon-btn" title="Delete" aria-label="Delete" @onclick="() => Delete(todo)">
                                                 <Icon Name="trash" />
                                             </button>
                                         </div>
@@ -261,97 +250,98 @@ else
 
                         @if (_matchTotal > PageSize)
                         {
-                            <div class="panel-head" style="border-bottom:0; border-top:1px solid var(--border); background:transparent">
-                                <span class="panel-sub mono">
-                                    Skip(@(_page * PageSize)).Take(@PageSize)
-                                </span>
-                                <div class="panel-actions">
-                                    <button class="btn btn-sm" disabled="@(_page == 0)" @onclick="() => SetPage(_page - 1)">Previous</button>
-                                    <span class="tiny muted mono">@(_page + 1) / @PageCount</span>
-                                    <button class="btn btn-sm" disabled="@(_page + 1 >= PageCount)" @onclick="() => SetPage(_page + 1)">Next</button>
+                            <div class="bd-pagerbar">
+                                <span class="bd-panel-sub">Skip(@(_page * PageSize)).Take(@PageSize)</span>
+                                <div class="bd-panel-actions">
+                                    <button type="button" class="btn btn-secondary" disabled="@(_page == 0)" @onclick="() => SetPage(_page - 1)">Previous</button>
+                                    <span class="bd-foot bb-mono">@(_page + 1) / @PageCount</span>
+                                    <button type="button" class="btn btn-secondary" disabled="@(_page + 1 >= PageCount)" @onclick="() => SetPage(_page + 1)">Next</button>
                                 </div>
                             </div>
                         }
                     }
                 </ChildContent>
             </Panel>
-        </div>
-
-        <div class="flex-col gap-lg">
-            <Panel Title="The query behind this view" IconName="query" Sub="@(_isIndexOrdered ? "index-ordered" : "sorted in memory")">
-                <CodeBlock Code="@_queryCode" ShowHeader="false" Wrap="true" />
-                <dl class="kv mt-2">
-                    <dt>Source</dt>
-                    <dd>@_sourceLabel</dd>
-                    <dt>IsIndexOrdered</dt>
-                    <dd>@_isIndexOrdered.ToString().ToLowerInvariant()</dd>
-                    <dt>Matched</dt>
-                    <dd>@_matchTotal.ToString("N0") of @_todos.Count.ToString("N0")</dd>
-                    <dt>Elapsed</dt>
-                    <dd>@_lastQueryTime</dd>
-                </dl>
-            </Panel>
-
-            <Panel Title="Key lookups" IconName="key" Sub="Get · TryGet · Contains">
-                <div class="field">
-                    <input class="input mono" placeholder="paste a row key (Guid)" @bind="_keyInput" />
-                    <span class="field-hint">Use the key button on any row to fill this in.</span>
-                </div>
-                <div class="toolbar mt-2">
-                    <button class="btn btn-sm" @onclick="RunGet">Get</button>
-                    <button class="btn btn-sm" @onclick="RunTryGet">TryGet</button>
-                    <button class="btn btn-sm" @onclick="RunContains">Contains</button>
-                </div>
-                @if (_keyResult is not null)
-                {
-                    <div class="api-call mt-2">@_keyResult</div>
-                }
-            </Panel>
-
-            <Panel Title="Bulk and durability" IconName="shield" Sub="transactions, flush, checkpoint">
-                <div class="flex-col">
-                    <button class="btn btn-sm btn-block" @onclick="SeedMore">
-                        <Icon Name="plus" /> Insert 25 rows in one transaction
-                    </button>
-                    <button class="btn btn-sm btn-block" @onclick="UpsertPinned">
-                        <Icon Name="refresh" /> Upsert a fixed row (idempotent)
-                    </button>
-                    <button class="btn btn-sm btn-block" @onclick="DeleteDone">
-                        <Icon Name="trash" /> Delete every done row
-                    </button>
-                    <button class="btn btn-sm btn-block" @onclick="FlushNow">
-                        <Icon Name="download" /> FlushAsync - force durability
-                    </button>
-                    <button class="btn btn-sm btn-block" @onclick="CheckpointNow">
-                        <Icon Name="layers" /> CheckpointAsync - snapshot &amp; truncate WAL
-                    </button>
-                    <button class="btn btn-sm btn-block btn-danger" @onclick="ClearAll">
-                        <Icon Name="close" /> Delete all rows
-                    </button>
-                </div>
-                @if (_maintenance is not null)
-                {
-                    <div class="api-call mt-2">@_maintenance</div>
-                }
-            </Panel>
 
-            <Panel Title="View preferences" IconName="database" Sub="a second table, string keys">
-                <p class="small">
-                    The status filter and sort order you pick are written to the
-                    <code>settings</code> table with <code>Upsert</code> and read back with
-                    <code>Get</code> on load - so they survive a reload alongside your rows.
-                </p>
-                <dl class="kv">
-                    @foreach (var setting in _todosSettings)
+            <div class="bb-flex">
+                <Panel Title="The query behind this view" IconName="query" Sub="@(_isIndexOrdered ? "index-ordered" : "sorted in memory")">
+                    <CodeBlock Code="@_queryCode" Wrap="true" />
+                    <dl class="bb-params">
+                        <dt>Source</dt>
+                        <dd>@_sourceLabel</dd>
+                        <dt>IsIndexOrdered</dt>
+                        <dd>@_isIndexOrdered.ToString().ToLowerInvariant()</dd>
+                        <dt>Matched</dt>
+                        <dd>@_matchTotal.ToString("N0") of @_todos.Count.ToString("N0")</dd>
+                        <dt>Elapsed</dt>
+                        <dd>@_lastQueryTime</dd>
+                    </dl>
+                </Panel>
+
+                <Panel Title="Key lookups" IconName="key" Sub="Get · TryGet · Contains">
+                    <div class="bb-fields">
+                        <div class="bb-field bd-grow">
+                            <label for="key-input">Row key</label>
+                            <input id="key-input" class="bb-mono" placeholder="paste a row key (Guid)" @bind="_keyInput" />
+                            <span class="bb-field-hint">Use the key button on any row to fill this in.</span>
+                        </div>
+                    </div>
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-secondary" @onclick="RunGet">Get</button>
+                        <button type="button" class="btn btn-secondary" @onclick="RunTryGet">TryGet</button>
+                        <button type="button" class="btn btn-secondary" @onclick="RunContains">Contains</button>
+                    </div>
+                    @if (_keyResult is not null)
                     {
-                        <dt>@setting.Name</dt>
-                        <dd>@setting.Value</dd>
+                        <div class="bb-log bd-out">@_keyResult</div>
                     }
-                </dl>
-            </Panel>
+                </Panel>
+
+                <Panel Title="Bulk and durability" IconName="shield" Sub="transactions, flush, checkpoint">
+                    <div class="bd-actions">
+                        <button type="button" class="btn btn-secondary" @onclick="SeedMore">
+                            <Icon Name="plus" /> Insert 25 rows in one transaction
+                        </button>
+                        <button type="button" class="btn btn-secondary" @onclick="UpsertPinned">
+                            <Icon Name="refresh" /> Upsert a fixed row (idempotent)
+                        </button>
+                        <button type="button" class="btn btn-secondary" @onclick="DeleteDone">
+                            <Icon Name="trash" /> Delete every done row
+                        </button>
+                        <button type="button" class="btn btn-secondary" @onclick="FlushNow">
+                            <Icon Name="download" /> FlushAsync - force durability
+                        </button>
+                        <button type="button" class="btn btn-secondary" @onclick="CheckpointNow">
+                            <Icon Name="layers" /> CheckpointAsync - snapshot &amp; truncate WAL
+                        </button>
+                        <button type="button" class="btn bd-btn-danger" @onclick="ClearAll">
+                            <Icon Name="close" /> Delete all rows
+                        </button>
+                    </div>
+                    @if (_maintenance is not null)
+                    {
+                        <div class="bb-log bd-out">@_maintenance</div>
+                    }
+                </Panel>
+
+                <Panel Title="View preferences" IconName="database" Sub="a second table, string keys">
+                    <p>
+                        The status filter and sort order you pick are written to the
+                        <code>settings</code> table with <code>Upsert</code> and read back with
+                        <code>Get</code> on load - so they survive a reload alongside your rows.
+                    </p>
+                    <dl class="bb-params">
+                        @foreach (var setting in _todosSettings)
+                        {
+                            <dt>@setting.Name</dt>
+                            <dd>@setting.Value</dd>
+                        }
+                    </dl>
+                </Panel>
+            </div>
         </div>
-    </div>
-}
+    }
+</div>
 
 @code {
     private const int PageSize = 8;
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/Transactions.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/Transactions.razor
index 6d9d391d2e1..f90d02d501b 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/Transactions.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/Transactions.razor
@@ -1,26 +1,25 @@
 @page "/transactions"
 @implements IAsyncDisposable
 
-<PageTitle>Transactions - BlazeDb</PageTitle>
+<PageTitle>Transactions · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Engine" IconName="txn" Title="One writer, one ambient batch"
+<PageHeader Eyebrow="Transactions" Title="One writer, one ambient batch"
             Lead="A transaction makes a group of writes atomic in the log. Writes still land in memory immediately, so reads inside the batch see them - but nothing is durable until commit, and a rollback reverts every change through an undo log.">
-    <span class="chip"><Icon Name="lock" /> Single writer</span>
-    <span class="chip"><Icon Name="layers" /> Ambient enrolment</span>
-    <span class="chip"><Icon Name="close" /> No nesting, no savepoints</span>
+    <span class="bb-badge bd-badge-neutral">Single writer</span>
+    <span class="bb-badge bd-badge-neutral">Ambient enrolment</span>
+    <span class="bb-badge bd-badge-neutral">No nesting, no savepoints</span>
 </PageHeader>
 
-<Section Title="Run a scenario" IconName="play"
+<Section Title="Run a scenario"
          Lead="Each run starts a fresh private database seeded with three rows, so results are always reproducible.">
-    <div class="grid grid-sidebar">
-        <div class="flex-col gap-lg">
+    <div class="bd-main-side">
+        <div class="bb-flex">
             <Panel Title="Scenarios" IconName="list">
-                <div class="flex-col">
+                <div class="bd-actions">
                     @foreach (var scenario in Scenarios)
                     {
                         var key = scenario.Key;
-                        <button class="btn btn-sm btn-block @(_selected == key ? "btn-primary" : null)"
-                                style="justify-content:flex-start"
+                        <button type="button" class="btn @(_selected == key ? "btn-primary" : "btn-secondary")"
                                 disabled="@_running"
                                 @onclick="() => RunAsync(key)">
                             <Icon Name="@scenario.Icon" />
@@ -37,16 +36,16 @@
             }
         </div>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Trace" IconName="history" Flush="true">
                 <Actions>
                     @if (_running)
                     {
-                        <span class="spinner"></span>
+                        <span class="bb-spinner"></span>
                     }
                 </Actions>
                 <ChildContent>
-                    <ScenarioSteps Steps="_log.Steps" EmptyText="Pick a scenario on the left." />
+                    <ScenarioSteps Steps="_log.Steps" EmptyText="Pick a scenario to run it." />
                 </ChildContent>
             </Panel>
 
@@ -54,35 +53,35 @@
             {
                 <Panel Title="Resulting table" IconName="database" Flush="true">
                     <Actions>
-                        <span class="panel-sub mono">Count = @_table.Count</span>
+                        <span class="bd-panel-sub">Count = @_table.Count</span>
                     </Actions>
                     <ChildContent>
                         @if (_table.Count == 0)
                         {
-                            <div class="empty">Empty.</div>
+                            <div class="bb-empty">Empty.</div>
                         }
                         else
                         {
-                            <div class="rows">
+                            <div class="bd-rows">
                                 @foreach (var row in _table.OrderBy(TodoEntry.Indexes.Effort))
                                 {
-                                    <div class="row-item @(row.Done ? "done" : null)">
-                                        <div class="row-main">
-                                            <div class="row-title">@row.Title</div>
-                                            <div class="row-meta">
-                                                <span class="mono">effort @row.Effort</span>
-                                                <span class="mono">@(row.Done ? "done" : "open")</span>
+                                    <div class="bd-row @(row.Done ? "bd-done" : null)">
+                                        <div class="bd-row-main">
+                                            <div class="bd-row-title">@row.Title</div>
+                                            <div class="bd-row-meta">
+                                                <span class="bb-mono">effort @row.Effort</span>
+                                                <span class="bb-mono">@(row.Done ? "done" : "open")</span>
                                             </div>
                                         </div>
-                                </div>
-                            }
-                        </div>
+                                    </div>
+                                }
+                            </div>
                         }
 
                         @if (_storage is not null)
                         {
-                            <div class="panel-body" style="border-top:1px solid var(--border)">
-                                <div class="tiny muted mono">
+                            <div class="bd-panel-pad bd-panel-foot">
+                                <div class="bd-foot bb-mono">
                                     storage:
                                     @(_storage.FileNames.Count == 0
                                         ? "nothing written yet - commits are buffered until a flush"
@@ -97,50 +96,50 @@
     </div>
 </Section>
 
-<Section Title="Batching is also the fast path" IconName="gauge"
+<Section Title="Batching is also the fast path"
          Lead="Outside a transaction every write is its own log record. Inside one, they share a single commit.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <Panel Title="Measure it" IconName="bolt">
-            <div class="form-row">
-                <div class="field">
-                    <label class="field-label" for="batch-rows">Rows per run</label>
-                    <select id="batch-rows" class="select" @bind="_batchRows">
+            <div class="bb-fields">
+                <div class="bb-field">
+                    <label for="batch-rows">Rows per run</label>
+                    <select id="batch-rows" @bind="_batchRows">
                         <option value="500">500</option>
                         <option value="2000">2,000</option>
                         <option value="10000">10,000</option>
                     </select>
                 </div>
-                <button class="btn btn-primary" disabled="@_benchRunning" @onclick="RunBatchBenchAsync">
+                <button type="button" class="btn btn-primary" disabled="@_benchRunning" @onclick="RunBatchBenchAsync">
                     <Icon Name="play" /> Run
                 </button>
             </div>
 
             @if (_batchResult is not null)
             {
-                <div class="table-wrap mt-2">
-                    <table class="data">
+                <div class="bb-scroll">
+                    <table class="bb-table">
                         <thead>
-                            <tr><th>Mode</th><th class="num">Total</th><th class="num">Per row</th></tr>
+                            <tr><th>Mode</th><th class="bd-num">Total</th><th class="bd-num">Per row</th></tr>
                         </thead>
                         <tbody>
                             <tr>
-                                <td class="mono">autocommit - one record each</td>
-                                <td class="num mono">@_autoTotal</td>
-                                <td class="num mono">@_autoPer</td>
+                                <td class="bb-mono">autocommit - one record each</td>
+                                <td class="bd-num">@_autoTotal</td>
+                                <td class="bd-num">@_autoPer</td>
                             </tr>
                             <tr>
-                                <td class="mono">one transaction</td>
-                                <td class="num mono ok-text">@_txnTotal</td>
-                                <td class="num mono ok-text">@_txnPer</td>
+                                <td class="bb-mono">one transaction</td>
+                                <td class="bd-num bd-ok">@_txnTotal</td>
+                                <td class="bd-num bd-ok">@_txnPer</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
-                <p class="small muted mt-2 mb-0">@_batchResult</p>
+                <p class="bb-muted">@_batchResult</p>
             }
         </Panel>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <CodeBlock Title="Bulk loading" Code="@BatchSnippet" />
             <Callout Tone="info" Title="Both paths are durable.">
                 Autocommit is not “unsafe” - each write still becomes a log record. A transaction
@@ -150,52 +149,52 @@
     </div>
 </Section>
 
-<Section Title="What a transaction guarantees across a crash" IconName="shield"
+<Section Title="What a transaction guarantees across a crash"
          Lead="A committed batch is replayed in full. An uncommitted one leaves no trace, even if its writes were already visible in memory.">
-    <div class="grid grid-2">
+    <div class="bb-split">
         <Panel Title="Committed batch" IconName="check">
-            <p class="small">
+            <p>
                 Three rows inserted in a transaction, committed, flushed, then the database instance is
                 abandoned without disposing it - the same thing a closed tab does.
             </p>
-            <button class="btn btn-sm btn-block" disabled="@_crashRunning" @onclick="() => RunCrashAsync(true)">
+            <button type="button" class="btn btn-secondary" disabled="@_crashRunning" @onclick="() => RunCrashAsync(true)">
                 <Icon Name="play" /> Commit, crash, reopen
             </button>
             @if (_commitCrashResult is not null)
             {
-                <div class="api-call mt-2">@_commitCrashResult</div>
+                <div class="bb-log bd-out">@_commitCrashResult</div>
             }
         </Panel>
 
         <Panel Title="Abandoned batch" IconName="close">
-            <p class="small">
+            <p>
                 The same three inserts, but the transaction is disposed without committing. Memory saw
                 them; the log never did.
             </p>
-            <button class="btn btn-sm btn-block" disabled="@_crashRunning" @onclick="() => RunCrashAsync(false)">
+            <button type="button" class="btn btn-secondary" disabled="@_crashRunning" @onclick="() => RunCrashAsync(false)">
                 <Icon Name="play" /> Roll back, crash, reopen
             </button>
             @if (_rollbackCrashResult is not null)
             {
-                <div class="api-call mt-2">@_rollbackCrashResult</div>
+                <div class="bb-log bd-out">@_rollbackCrashResult</div>
             }
         </Panel>
     </div>
 </Section>
 
-<Section Title="The rules" IconName="info">
-    <div class="grid grid-2">
+<Section Title="The rules">
+    <div class="bb-flex">
         <Panel Title="Ambient by design" IconName="layers">
-            <p class="small">
+            <p>
                 <code>BeginTransaction</code> does not hand you a scoped writer. While a transaction is
                 active, <em>every</em> write against <em>any</em> table on that database is enrolled -
                 including writes made deep inside code that never saw the transaction object.
             </p>
-            <CodeBlock ShowHeader="false" Code="@AmbientSnippet" />
+            <CodeBlock Code="@AmbientSnippet" />
         </Panel>
 
         <Panel Title="Deliberate omissions" IconName="close">
-            <ul class="small mb-0">
+            <ul class="bb-detail-list">
                 <li><strong>No nesting.</strong> A second <code>BeginTransaction</code> throws.</li>
                 <li><strong>No savepoints.</strong> Rollback is all or nothing.</li>
                 <li><strong>No isolation levels.</strong> There is one writer, so there is nothing to isolate from.</li>
diff --git a/src/Utilities/BlazeDb/Demo/Client/Pages/WireFormat.razor b/src/Utilities/BlazeDb/Demo/Client/Pages/WireFormat.razor
index 8809e70320f..50213dbc215 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Pages/WireFormat.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Pages/WireFormat.razor
@@ -1,87 +1,87 @@
 @page "/serialization"
 
-<PageTitle>Wire format - BlazeDb</PageTitle>
+<PageTitle>Wire format · BlazeDb</PageTitle>
 
-<PageHeader Eyebrow="Persistence" IconName="binary" Title="See the bytes a row becomes"
+<PageHeader Eyebrow="Wire format" Title="See the bytes a row becomes"
             Lead="Rows are encoded with a tagged, self-describing binary format: a varint tag carrying a field number and a wire type, then the payload. Property names never appear, unknown fields can be skipped, and nulls cost nothing at all.">
-    <span class="chip"><Icon Name="file" /> @_bytes.Length bytes for the row below</span>
-    <span class="chip"><Icon Name="layers" /> @_fields.Count fields on the wire</span>
-    <span class="chip"><Icon Name="check" /> Round-trip verified</span>
+    <span class="bb-badge bd-badge-neutral">@_bytes.Length bytes for the row below</span>
+    <span class="bb-badge bd-badge-neutral">@_fields.Count fields on the wire</span>
+    <span class="bb-badge bd-badge-neutral">Round-trip verified</span>
 </PageHeader>
 
-<Section Title="Build a row, watch it encode" IconName="play"
+<Section Title="Build a row, watch it encode"
          Lead="Every control here changes the row that is serialized with the generated writer. Nothing is simulated - the bytes below come from TodoEntry.Table.RowWriter.">
-    <div class="grid grid-sidebar">
-        <div class="flex-col gap-lg">
+    <div class="bd-main-side">
+        <div class="bb-flex">
             <Panel Title="The row" IconName="code">
-                <div class="form-row">
-                    <div class="field" style="flex:3 1 220px">
-                        <label class="field-label" for="w-title">Title - string</label>
-                        <input id="w-title" class="input" @bind="_title" @bind:event="oninput" @bind:after="Encode" />
+                <div class="bb-fields">
+                    <div class="bb-field" style="flex:3 1 220px">
+                        <label for="w-title">Title - string</label>
+                        <input id="w-title" @bind="_title" @bind:event="oninput" @bind:after="Encode" />
                     </div>
-                    <div class="field" style="flex:0 1 120px">
-                        <label class="field-label" for="w-effort">Effort - int</label>
-                        <input id="w-effort" class="input mono" type="number" @bind="_effort" @bind:after="Encode" />
+                    <div class="bb-field" style="flex:0 1 120px">
+                        <label for="w-effort">Effort - int</label>
+                        <input id="w-effort" class="bb-mono" type="number" @bind="_effort" @bind:after="Encode" />
                     </div>
                 </div>
 
-                <div class="form-row mt-2">
-                    <div class="field" style="flex:2 1 200px">
-                        <label class="field-label" for="w-notes">Notes - string?</label>
-                        <input id="w-notes" class="input" disabled="@_notesNull" placeholder="(null)"
+                <div class="bb-fields">
+                    <div class="bb-field" style="flex:2 1 200px">
+                        <label for="w-notes">Notes - string?</label>
+                        <input id="w-notes" disabled="@_notesNull" placeholder="(null)"
                                @bind="_notes" @bind:event="oninput" @bind:after="Encode" />
-                        <label class="check mt-1">
+                        <label class="bb-check">
                             <input type="checkbox" @bind="_notesNull" @bind:after="Encode" /> null
                         </label>
                     </div>
-                    <div class="field" style="flex:0 1 130px">
-                        <label class="field-label" for="w-rating">Rating - int?</label>
-                        <input id="w-rating" class="input mono" type="number" min="1" max="5" disabled="@_ratingNull"
+                    <div class="bb-field" style="flex:0 1 130px">
+                        <label for="w-rating">Rating - int?</label>
+                        <input id="w-rating" class="bb-mono" type="number" min="1" max="5" disabled="@_ratingNull"
                                @bind="_rating" @bind:after="Encode" />
-                        <label class="check mt-1">
+                        <label class="bb-check">
                             <input type="checkbox" @bind="_ratingNull" @bind:after="Encode" /> null
                         </label>
                     </div>
-                    <div class="field" style="flex:0 1 140px">
-                        <label class="field-label" for="w-tags">Tags - List&lt;string&gt;</label>
-                        <input id="w-tags" class="input mono" type="number" min="0" max="6" @bind="_tagCount" @bind:after="Encode" />
-                        <span class="field-hint">repeated field 14</span>
+                    <div class="bb-field" style="flex:0 1 140px">
+                        <label for="w-tags">Tags - List&lt;string&gt;</label>
+                        <input id="w-tags" class="bb-mono" type="number" min="0" max="6" @bind="_tagCount" @bind:after="Encode" />
+                        <span class="bb-field-hint">repeated field 14</span>
                     </div>
-                    <div class="field" style="flex:0 1 140px">
-                        <label class="field-label" for="w-payload">Payload - byte[]</label>
-                        <input id="w-payload" class="input mono" type="number" min="0" max="16" @bind="_payloadSize" @bind:after="Encode" />
-                        <span class="field-hint">length-delimited blob</span>
+                    <div class="bb-field" style="flex:0 1 140px">
+                        <label for="w-payload">Payload - byte[]</label>
+                        <input id="w-payload" class="bb-mono" type="number" min="0" max="16" @bind="_payloadSize" @bind:after="Encode" />
+                        <span class="bb-field-hint">length-delimited blob</span>
                     </div>
                 </div>
             </Panel>
 
             <Panel Title="Fields on the wire" IconName="layers" Flush="true">
                 <Actions>
-                    <span class="panel-sub mono">@_bytes.Length bytes total</span>
+                    <span class="bd-panel-sub">@_bytes.Length bytes total</span>
                 </Actions>
                 <ChildContent>
-                    <div class="table-wrap">
-                        <table class="data">
+                    <div class="bb-scroll">
+                        <table class="bb-table">
                             <thead>
                                 <tr>
-                                    <th class="num">#</th>
+                                    <th class="bd-num">#</th>
                                     <th>Property</th>
                                     <th>Wire type</th>
-                                    <th class="num">Tag</th>
-                                    <th class="num">Payload</th>
-                                    <th class="num">Offset</th>
+                                    <th class="bd-num">Tag</th>
+                                    <th class="bd-num">Payload</th>
+                                    <th class="bd-num">Offset</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 @foreach (var field in _fields)
                                 {
                                     <tr>
-                                        <td class="num mono strong">@field.Number</td>
-                                        <td class="mono">@PropertyName(field.Number)</td>
-                                        <td><span class="badge @WireTone(field.Wire)">@field.Wire</span></td>
-                                        <td class="num mono">@field.TagBytes B</td>
-                                        <td class="num mono">@field.PayloadBytes B</td>
-                                        <td class="num mono">@field.Offset</td>
+                                        <td class="bd-num bd-strong">@field.Number</td>
+                                        <td class="bb-mono">@PropertyName(field.Number)</td>
+                                        <td><span class="@Tones.Badge(WireTone(field.Wire))">@field.Wire</span></td>
+                                        <td class="bd-num">@field.TagBytes B</td>
+                                        <td class="bd-num">@field.PayloadBytes B</td>
+                                        <td class="bd-num">@field.Offset</td>
                                     </tr>
                                 }
                             </tbody>
@@ -92,16 +92,16 @@
 
             <Panel Title="Hex dump" IconName="binary" Flush="true">
                 <Actions>
-                    <span class="panel-sub mono">@_bytes.Length bytes</span>
+                    <span class="bd-panel-sub">@_bytes.Length bytes</span>
                 </Actions>
                 <ChildContent>
-                    <div class="hex">
+                    <div class="bd-hex">
                         @foreach (var line in _hex)
                         {
-                            <div class="hex-row">
-                                <span class="hex-off">@line.Offset</span>
-                                <span class="hex-bytes">@line.Bytes</span>
-                                <span class="hex-ascii">@line.Ascii</span>
+                            <div class="bd-hex-row">
+                                <span class="bd-hex-off">@line.Offset</span>
+                                <span class="bd-hex-bytes">@line.Bytes</span>
+                                <span class="bd-hex-ascii">@line.Ascii</span>
                             </div>
                         }
                     </div>
@@ -109,12 +109,12 @@
             </Panel>
         </div>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Round trip" IconName="refresh">
-                <p class="small mb-2">
+                <p>
                     The same bytes read back through the generated reader.
                 </p>
-                <dl class="kv">
+                <dl class="bb-params">
                     <dt>Title</dt>
                     <dd>@_decoded.Title</dd>
                     <dt>Notes</dt>
@@ -130,39 +130,39 @@
                     <dt>Duration</dt>
                     <dd>@_decoded.Duration</dd>
                     <dt>Transient</dt>
-                    <dd class="@(_decoded.Transient == "computed at runtime" ? "ok-text" : "err-text")">@_decoded.Transient</dd>
+                    <dd class="@(_decoded.Transient == "computed at runtime" ? "bd-ok" : "bd-err")">@_decoded.Transient</dd>
                 </dl>
-                <p class="tiny muted mt-2 mb-0">
+                <p class="bd-foot">
                     <code>Transient</code> carries <code>[BlazeDbIgnore]</code>, so it comes back as its field
                     initialiser rather than the value that was written.
                 </p>
             </Panel>
 
             <Panel Title="Nulls are free" IconName="bolt">
-                <p class="small mb-2">
+                <p>
                     A null value is not a marker byte - the field is simply absent.
                 </p>
-                <div class="table-wrap">
-                    <table class="data">
-                        <thead><tr><th>Row</th><th class="num">Bytes</th></tr></thead>
+                <div class="bb-scroll">
+                    <table class="bb-table bb-compare">
+                        <thead><tr><th>Row</th><th class="bd-num">Bytes</th></tr></thead>
                         <tbody>
-                            <tr><td>everything populated</td><td class="num mono">@_sizeFull B</td></tr>
-                            <tr><td>Notes and Rating null</td><td class="num mono">@_sizeNulls B</td></tr>
-                            <tr><td>no tags, no payload</td><td class="num mono">@_sizeMinimal B</td></tr>
+                            <tr><td>everything populated</td><td class="bd-num">@_sizeFull B</td></tr>
+                            <tr><td>Notes and Rating null</td><td class="bd-num">@_sizeNulls B</td></tr>
+                            <tr><td>no tags, no payload</td><td class="bd-num">@_sizeMinimal B</td></tr>
                         </tbody>
                     </table>
                 </div>
             </Panel>
 
             <Panel Title="Wire types" IconName="info" Flush="true">
-                <div class="table-wrap">
-                    <table class="data">
-                        <thead><tr><th>Name</th><th class="num">Id</th><th>Payload</th></tr></thead>
+                <div class="bb-scroll">
+                    <table class="bb-table">
+                        <thead><tr><th>Name</th><th class="bd-num">Id</th><th>Payload</th></tr></thead>
                         <tbody>
-                            <tr><td class="mono">VarInt</td><td class="num mono">0</td><td>1–10 bytes, 7 bits each</td></tr>
-                            <tr><td class="mono">Fixed64</td><td class="num mono">1</td><td>exactly 8 bytes</td></tr>
-                            <tr><td class="mono">LengthDelimited</td><td class="num mono">2</td><td>varint length, then bytes</td></tr>
-                            <tr><td class="mono">Fixed32</td><td class="num mono">5</td><td>exactly 4 bytes</td></tr>
+                            <tr><td class="bb-mono">VarInt</td><td class="bd-num">0</td><td>1–10 bytes, 7 bits each</td></tr>
+                            <tr><td class="bb-mono">Fixed64</td><td class="bd-num">1</td><td>exactly 8 bytes</td></tr>
+                            <tr><td class="bb-mono">LengthDelimited</td><td class="bd-num">2</td><td>varint length, then bytes</td></tr>
+                            <tr><td class="bb-mono">Fixed32</td><td class="bd-num">5</td><td>exactly 4 bytes</td></tr>
                         </tbody>
                     </table>
                 </div>
@@ -171,17 +171,17 @@
     </div>
 </Section>
 
-<Section Title="How a tag is built" IconName="code">
-    <div class="grid grid-2">
+<Section Title="How a tag is built">
+    <div class="bb-flex">
         <CodeBlock Title="Tag encoding" Code="@TagSnippet" Language="text" />
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Why field numbers, not names" IconName="key">
-                <p class="small">
+                <p>
                     Names would cost bytes in every row and would tie the format to your identifiers.
                     Numbers keep rows compact and let you rename a property freely - the persisted data
                     does not notice.
                 </p>
-                <p class="small mb-0">
+                <p>
                     The trade-off is that numbers are the contract. Without <code>[BlazeDbField]</code> they are
                     assigned by declaration order, so inserting a property in the middle shifts every
                     number after it and silently reinterprets existing data.
@@ -195,27 +195,27 @@
     </div>
 </Section>
 
-<Section Title="Schema evolution" IconName="history"
+<Section Title="Schema evolution"
          Lead="The reader loop skips any field number it does not recognise, which is what makes rolling upgrades survivable in both directions.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <Panel Title="An older reader meets a newer writer" IconName="play">
-            <p class="small mb-2">
+            <p>
                 This appends a field number the current model has never heard of, then decodes with the
                 generated reader.
             </p>
-            <button class="btn btn-sm btn-block" @onclick="RunForwardCompat">
+            <button type="button" class="btn btn-secondary" @onclick="RunForwardCompat">
                 <Icon Name="play" /> Append field 999 and decode
             </button>
             @if (_forwardResult is not null)
             {
-                <div class="api-call mt-2">@_forwardResult</div>
+                <div class="bb-log bd-out">@_forwardResult</div>
             }
-            <CodeBlock Class="mt-2" ShowHeader="false" Code="@ForwardSnippet" />
+            <CodeBlock Code="@ForwardSnippet" />
         </Panel>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="A newer reader meets an older writer" IconName="info">
-                <p class="small mb-0">
+                <p>
                     The reverse case needs no machinery: a field that is absent leaves its local
                     variable at its default, so a property added later reads back as
                     <code>null</code>, <code>0</code> or an empty collection. Adding a property is
@@ -224,42 +224,42 @@
             </Panel>
 
             <Panel Title="Truncated input is rejected" IconName="alert">
-                <p class="small mb-2">
+                <p>
                     Skipping unknown fields is not the same as tolerating damage. A length prefix that
                     overruns the buffer throws.
                 </p>
-                <button class="btn btn-sm btn-block" @onclick="RunTruncated">
+                <button type="button" class="btn btn-secondary" @onclick="RunTruncated">
                     <Icon Name="play" /> Decode a truncated buffer
                 </button>
                 @if (_truncatedResult is not null)
                 {
-                    <div class="api-call mt-2">@_truncatedResult</div>
+                    <div class="bb-log bd-out">@_truncatedResult</div>
                 }
             </Panel>
         </div>
     </div>
 </Section>
 
-<Section Title="Keys and explicit numbering" IconName="key"
+<Section Title="Keys and explicit numbering"
          Lead="Keys are serialized separately from rows - the log needs a key on its own to record a delete.">
-    <div class="grid grid-2">
+    <div class="bb-flex">
         <Panel Title="Setting - [BlazeDbField(1)], [BlazeDbField(2)], [BlazeDbField(3)]" IconName="file" Flush="true">
             <Actions>
-                <span class="panel-sub mono">@_settingBytes.Length bytes</span>
+                <span class="bd-panel-sub">@_settingBytes.Length bytes</span>
             </Actions>
             <ChildContent>
-                <div class="hex">
+                <div class="bd-hex">
                     @foreach (var line in _settingHex)
                     {
-                        <div class="hex-row">
-                            <span class="hex-off">@line.Offset</span>
-                            <span class="hex-bytes">@line.Bytes</span>
-                            <span class="hex-ascii">@line.Ascii</span>
+                        <div class="bd-hex-row">
+                            <span class="bd-hex-off">@line.Offset</span>
+                            <span class="bd-hex-bytes">@line.Bytes</span>
+                            <span class="bd-hex-ascii">@line.Ascii</span>
                         </div>
                     }
                 </div>
-                <div class="panel-body" style="border-top:1px solid var(--border)">
-                    <p class="small mb-0">
+                <div class="bd-panel-pad bd-panel-foot">
+                    <p>
                         The two strings are visible in the ASCII column because UTF-8 text is stored
                         verbatim. Note what is <em>not</em> there: no <code>"Name"</code>, no
                         <code>"Value"</code>, no type information.
@@ -268,25 +268,25 @@
             </ChildContent>
         </Panel>
 
-        <div class="flex-col gap-lg">
+        <div class="bb-flex">
             <Panel Title="Key round trip" IconName="refresh">
-                <CodeBlock ShowHeader="false" Code="@KeySnippet" />
-                <dl class="kv mt-2">
+                <CodeBlock Code="@KeySnippet" />
+                <dl class="bb-params">
                     <dt>Guid key</dt>
                     <dd>@_keyBytes bytes</dd>
                     <dt>Round-tripped</dt>
-                    <dd class="@(_keyMatched ? "ok-text" : "err-text")">@(_keyMatched ? "identical" : "mismatch")</dd>
+                    <dd class="@(_keyMatched ? "bd-ok" : "bd-err")">@(_keyMatched ? "identical" : "mismatch")</dd>
                     <dt>string key</dt>
                     <dd>@_stringKeyBytes bytes for "todos.sort"</dd>
                 </dl>
             </Panel>
 
             <Panel Title="The primitives" IconName="code">
-                <p class="small mb-2">
+                <p>
                     <code>BlazeDbBufferWriter</code> and <code>BlazeDbBufferReader</code> are public, so a hand-written
                     descriptor has exactly the same tools the generator uses.
                 </p>
-                <CodeBlock ShowHeader="false" Code="@PrimitivesSnippet" />
+                <CodeBlock Code="@PrimitivesSnippet" />
             </Panel>
         </div>
     </div>
diff --git a/src/Utilities/BlazeDb/Demo/Client/Routes.razor b/src/Utilities/BlazeDb/Demo/Client/Routes.razor
index e241145f08a..9f72d3a33f7 100644
--- a/src/Utilities/BlazeDb/Demo/Client/Routes.razor
+++ b/src/Utilities/BlazeDb/Demo/Client/Routes.razor
@@ -1,6 +1,15 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page.
+
+   StorageStatus sits beside the router rather than inside a layout: it opens the tab's demo
+   database once, whichever page the visitor lands on, and stays mounted across navigations. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
+
+<StorageStatus />
diff --git a/src/Utilities/BlazeDb/Demo/Client/wwwroot/js/app.js b/src/Utilities/BlazeDb/Demo/Client/wwwroot/js/app.js
deleted file mode 100644
index b974858e629..00000000000
--- a/src/Utilities/BlazeDb/Demo/Client/wwwroot/js/app.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// First-party helpers for the BlazeDb demo. No third-party code.
-
-const THEME_KEY = 'blazedb-theme';
-
-export function getTheme() {
-    return document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
-}
-
-export function setTheme(theme) {
-    const value = theme === 'light' ? 'light' : 'dark';
-    document.documentElement.dataset.theme = value;
-    const meta = document.querySelector('meta[name="theme-color"]');
-    if (meta) {
-        meta.setAttribute('content', value === 'light' ? '#f7f8fa' : '#08090d');
-    }
-    try {
-        localStorage.setItem(THEME_KEY, value);
-    } catch (e) {
-        // Storage can be blocked; the theme still applies for this session.
-    }
-    return value;
-}
-
-export async function copyText(text) {
-    try {
-        if (navigator.clipboard && window.isSecureContext) {
-            await navigator.clipboard.writeText(text);
-            return true;
-        }
-    } catch (e) {
-        // Fall through to the textarea approach below.
-    }
-    try {
-        const area = document.createElement('textarea');
-        area.value = text;
-        area.setAttribute('readonly', '');
-        area.style.position = 'fixed';
-        area.style.opacity = '0';
-        document.body.appendChild(area);
-        area.select();
-        const ok = document.execCommand('copy');
-        document.body.removeChild(area);
-        return ok;
-    } catch (e) {
-        return false;
-    }
-}
-
-export function scrollToTop() {
-    window.scrollTo({ top: 0, behavior: 'auto' });
-}
diff --git a/src/Utilities/BlazeDb/Demo/Server/Bit.BlazeDb.Demo.Server.csproj b/src/Utilities/BlazeDb/Demo/Server/Bit.BlazeDb.Demo.Server.csproj
index 2f7a4a946fe..b676f66ee68 100644
--- a/src/Utilities/BlazeDb/Demo/Server/Bit.BlazeDb.Demo.Server.csproj
+++ b/src/Utilities/BlazeDb/Demo/Server/Bit.BlazeDb.Demo.Server.csproj
@@ -47,11 +47,13 @@
 
     <!-- What this site can teach about the engine, and nothing else of it: the pages - each one drives a
          real database - the models, the database service and the instrumented storage, the diagnostics
-         catalog and the client half of the hosting. The site chrome in Components\ (the icon set, the code
-         highlighter, the panels, the theme toggle, the site map) answers no question about BlazeDb; the MCP
-         page describes this server rather than the library, and the not-found page teaches nothing. -->
+         catalog and the client half of the hosting. The site chrome answers no question about BlazeDb:
+         Components\ (the icon set, the code highlighter, the panels, the storage badge), and Layout\ with
+         DocsCatalog.cs - the header, docs shell, search palette and footer every Utilities demo shares, and
+         the page list they are built from. The MCP page describes this server rather than the library, and
+         the not-found page teaches nothing. -->
     <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Components\**;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
+                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Components\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
       <LogicalName>BlazeDbSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
     </EmbeddedResource>
 
diff --git a/src/Utilities/BlazeDb/Demo/Server/Components/App.razor b/src/Utilities/BlazeDb/Demo/Server/Components/App.razor
index bac54889aba..39ad1ee2a9f 100644
--- a/src/Utilities/BlazeDb/Demo/Server/Components/App.razor
+++ b/src/Utilities/BlazeDb/Demo/Server/Components/App.razor
@@ -1,42 +1,50 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en">
 
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="bit BlazeDb (Bit.BlazeDb) - a SQL-free, memory-first embedded database engine for .NET and Blazor WebAssembly, with source-generated schemas, transactions, an EF Core provider and OPFS-backed durability. Every page drives the real engine in your browser." />
-    <meta name="theme-color" content="#08090d" />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
-    <script>
-        // Applied before first paint so the theme never flashes.
-        (function () {
-            try {
-                var saved = localStorage.getItem('blazedb-theme');
-                var dark = saved ? saved === 'dark' : !window.matchMedia('(prefers-color-scheme: light)').matches;
-                document.documentElement.dataset.theme = dark ? 'dark' : 'light';
-            } catch (e) { /* storage blocked - keep the default */ }
-        })();
-    </script>
+    @* No static <title> here: every page supplies its own through <PageTitle>, which the HeadOutlet
+       writes into this head once the app is running. *@
+    <meta name="description" content="bit BlazeDb (Bit.BlazeDb) - a SQL-free, memory-first embedded database engine for .NET and Blazor WebAssembly, with source-generated schemas, transactions, an EF Core provider and OPFS-backed durability. Every page drives the real engine in your browser." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.BlazeDb" />
+    <meta property="og:title" content="BlazeDb - a memory-first database for Blazor" />
+    <meta property="og:description" content="Live rows in managed memory, typed index lookups with no SQL and no interop, atomic transactions, an EF Core provider and a write-ahead log persisted to OPFS." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.BlazeDb.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint - the boot screen
+       below included. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-    <link rel="mask-icon" href="favicon.svg" color="#f2610c" />
     <HeadOutlet @rendermode="RenderMode" />
 </head>
 
 <body>
-    @* Shown until the app's shell replaces it (app.css hides it once a .shell exists): nothing is
+    @* Shown until the app's shell replaces it (demo.css hides it once a .page exists): nothing is
        prerendered, so this is what the first response carries while the runtime downloads. *@
-    <div class="boot">
-        <div class="boot-mark">
-            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <div class="bd-boot">
+        <div class="bd-boot-mark">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                 <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-.5-2-1-3-1.1-2.1-.2-4 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.2.4-2.3 1-3a2.5 2.5 0 0 0 2.5 2.5Z" />
             </svg>
         </div>
-        <div class="boot-name">BlazeDb</div>
-        <div class="boot-track"></div>
-        <div class="boot-text"></div>
+        <div class="bd-boot-name">BlazeDb</div>
+        <div class="bd-boot-track"></div>
+        <div class="bd-boot-text"></div>
     </div>
 
     <Routes @rendermode="RenderMode" />
@@ -44,10 +52,11 @@
     <div id="blazor-error-ui" data-nosnippet>
         An unhandled error has occurred.
         <a href="." class="reload">Reload</a>
-        <span class="dismiss">&times;</span>
+        <span class="dismiss">&#128473;</span>
     </div>
 
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/app.css b/src/Utilities/BlazeDb/Demo/Server/wwwroot/app.css
index 88562edbae8..7b51a42ea90 100644
--- a/src/Utilities/BlazeDb/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/app.css
@@ -1,1802 +1,2820 @@
-/* ==========================================================================
-   BlazeDb demo - design system
-   No external stylesheets, fonts, or icon packs. Everything is defined here.
-   ========================================================================== */
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
 
-/* --------------------------------------------------------------- 1. Tokens */
-
-:root {
-    --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-    --r-xs: 5px;
-    --r-sm: 8px;
-    --r-md: 12px;
-    --r-lg: 18px;
-    --r-xl: 26px;
-    --r-pill: 999px;
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
 
-    --sidebar-w: 272px;
-    --topbar-h: 60px;
-    --content-max: 1140px;
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
 
-    --dur-fast: 120ms;
-    --dur: 200ms;
-    --dur-slow: 420ms;
-    --ease: cubic-bezier(0.22, 0.72, 0.2, 1);
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
 
-    --ember-1: #ff9038;
-    --ember-2: #ff5a3c;
-    --ember-3: #f43f6e;
-    --grad-ember: linear-gradient(115deg, var(--ember-1), var(--ember-2) 48%, var(--ember-3));
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
 }
 
-:root,
-[data-theme="dark"] {
-    color-scheme: dark;
-
-    --bg: #08090d;
-    --bg-deep: #05060a;
-    --surface: #0e1016;
-    --surface-2: #14171f;
-    --surface-3: #1b1f29;
-    --surface-hover: rgba(255, 255, 255, 0.045);
-
-    --border: rgba(255, 255, 255, 0.085);
-    --border-strong: rgba(255, 255, 255, 0.16);
-
-    --text: #e9ebf0;
-    --text-dim: #a8b0be;
-    --text-mute: #737d8d;
-
-    --accent: #ff8a3d;
-    --accent-hover: #ffa15f;
-    --accent-ink: #1a0d04;
-    --accent-soft: rgba(255, 138, 61, 0.13);
-    --accent-line: rgba(255, 138, 61, 0.32);
-
-    --ok: #3ddc97;
-    --ok-soft: rgba(61, 220, 151, 0.13);
-    --warn: #ffc861;
-    --warn-soft: rgba(255, 200, 97, 0.13);
-    --err: #ff6b81;
-    --err-soft: rgba(255, 107, 129, 0.13);
-    --info: #63b3ff;
-    --info-soft: rgba(99, 179, 255, 0.13);
-
-    --code-bg: #0a0c11;
-    --code-border: rgba(255, 255, 255, 0.07);
-
-    --tok-comment: #5f6b7d;
-    --tok-keyword: #ff8fb1;
-    --tok-type: #6fd3c6;
-    --tok-string: #f2c98a;
-    --tok-number: #b39dff;
-    --tok-attr: #ffc861;
-    --tok-func: #7fb4ff;
-    --tok-punct: #8b93a3;
-
-    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
-    --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
-    --shadow-3: 0 24px 64px -20px rgba(0, 0, 0, 0.85);
-    --glow: 0 0 0 1px var(--accent-line), 0 12px 40px -12px rgba(255, 90, 60, 0.45);
-}
-
-[data-theme="light"] {
-    color-scheme: light;
-
-    --bg: #f7f8fa;
-    --bg-deep: #eef0f4;
-    --surface: #ffffff;
-    --surface-2: #f4f6f9;
-    --surface-3: #e9edf3;
-    --surface-hover: rgba(15, 20, 30, 0.04);
-
-    --border: rgba(15, 22, 36, 0.1);
-    --border-strong: rgba(15, 22, 36, 0.2);
-
-    --text: #10141c;
-    --text-dim: #4d5666;
-    --text-mute: #737d8d;
-
-    --accent: #d94f14;
-    --accent-hover: #bf4310;
-    --accent-ink: #fff6f0;
-    --accent-soft: rgba(217, 79, 20, 0.09);
-    --accent-line: rgba(217, 79, 20, 0.26);
-
-    --ok: #0f8a5f;
-    --ok-soft: rgba(15, 138, 95, 0.1);
-    --warn: #9a6300;
-    --warn-soft: rgba(154, 99, 0, 0.1);
-    --err: #cf2b46;
-    --err-soft: rgba(207, 43, 70, 0.1);
-    --info: #1a6fc4;
-    --info-soft: rgba(26, 111, 196, 0.1);
-
-    --code-bg: #fbfcfe;
-    --code-border: rgba(15, 22, 36, 0.09);
-
-    --tok-comment: #7b8494;
-    --tok-keyword: #b3247a;
-    --tok-type: #0d7c74;
-    --tok-string: #9a5300;
-    --tok-number: #5b3fd6;
-    --tok-attr: #8a6100;
-    --tok-func: #1f5fbd;
-    --tok-punct: #5b6472;
-
-    --shadow-1: 0 1px 2px rgba(15, 22, 36, 0.07);
-    --shadow-2: 0 8px 24px -10px rgba(15, 22, 36, 0.18);
-    --shadow-3: 0 24px 60px -22px rgba(15, 22, 36, 0.28);
-    --glow: 0 0 0 1px var(--accent-line), 0 12px 36px -14px rgba(217, 79, 20, 0.3);
-}
-
-/* ----------------------------------------------------------- 2. Base reset */
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
 
 *,
 *::before,
 *::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
 html {
-    -webkit-text-size-adjust: 100%;
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
     scroll-behavior: smooth;
-    scroll-padding-top: calc(var(--topbar-h) + 16px);
 }
 
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
 body {
     margin: 0;
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--font-sans);
-    font-size: 15px;
-    line-height: 1.62;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
 }
 
-h1, h2, h3, h4, h5 {
-    margin: 0;
-    font-weight: 640;
-    letter-spacing: -0.021em;
-    line-height: 1.22;
-    color: var(--text);
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
 }
 
-h1 { font-size: 2.15rem; }
-h2 { font-size: 1.4rem; }
-h3 { font-size: 1.075rem; }
-h4 { font-size: 0.94rem; }
-
-p { margin: 0 0 0.85rem; }
-p:last-child { margin-bottom: 0; }
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
 
 a {
-    color: var(--accent);
+    color: var(--bb-primary);
     text-decoration: none;
-    transition: color var(--dur-fast) var(--ease);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-a:hover { color: var(--accent-hover); }
-
-ul, ol { margin: 0 0 0.9rem; padding-left: 1.25rem; }
-li { margin-bottom: 0.3rem; }
-li:last-child { margin-bottom: 0; }
-
-hr {
-    border: 0;
-    border-top: 1px solid var(--border);
-    margin: 2rem 0;
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
 }
 
-button { font-family: inherit; }
+img,
+svg {
+    max-width: 100%;
+}
 
-svg { display: block; flex: none; }
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
 
-::selection {
-    background: var(--accent-soft);
-    color: var(--text);
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
 }
 
-:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-    border-radius: var(--r-xs);
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
 }
 
-* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
-*::-webkit-scrollbar { width: 10px; height: 10px; }
-*::-webkit-scrollbar-track { background: transparent; }
-*::-webkit-scrollbar-thumb {
-    background: var(--border-strong);
-    border-radius: var(--r-pill);
-    border: 3px solid transparent;
-    background-clip: content-box;
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
 }
-*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--text-mute); }
 
-code, kbd, pre, samp { font-family: var(--font-mono); }
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
 
-/* Inline code */
-:not(pre) > code {
-    font-size: 0.855em;
-    padding: 0.12em 0.4em;
-    border-radius: var(--r-xs);
-    background: var(--surface-3);
-    border: 1px solid var(--border);
-    color: var(--text);
-    white-space: nowrap;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
 }
 
-kbd {
-    font-size: 0.78em;
-    padding: 0.15em 0.42em;
-    border-radius: var(--r-xs);
-    background: var(--surface-3);
-    border: 1px solid var(--border-strong);
-    border-bottom-width: 2px;
-    color: var(--text-dim);
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
 }
 
-/* -------------------------------------------------------------- 3. Shell */
-
-.shell {
-    display: flex;
-    min-height: 100vh;
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
 }
 
-.sidebar {
-    position: fixed;
-    inset: 0 auto 0 0;
-    width: var(--sidebar-w);
-    display: flex;
-    flex-direction: column;
-    background: var(--bg-deep);
-    border-right: 1px solid var(--border);
-    z-index: 60;
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
 }
 
-.sidebar::after {
-    content: "";
-    position: absolute;
-    inset: 0 0 auto 0;
-    height: 240px;
-    background: radial-gradient(120% 80% at 0% 0%, var(--accent-soft), transparent 70%);
-    pointer-events: none;
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
 }
 
-.brand {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0.65rem;
-    padding: 0 1.1rem;
-    height: var(--topbar-h);
-    flex: none;
-    color: var(--text);
-    z-index: 1;
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
 }
 
-.brand:hover { color: var(--text); }
-
-.brand-mark {
-    width: 30px;
-    height: 30px;
-    flex: none;
-    border-radius: 9px;
-    background: var(--grad-ember);
-    display: grid;
-    place-items: center;
-    color: #fff;
-    box-shadow: 0 4px 14px -4px rgba(255, 90, 60, 0.7);
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
 }
 
-.brand-name {
-    font-weight: 660;
-    font-size: 1.02rem;
-    letter-spacing: -0.02em;
+p {
+    margin: 0 0 .75rem;
 }
 
-.brand-tag {
-    display: block;
-    font-size: 0.66rem;
-    font-weight: 550;
-    letter-spacing: 0.09em;
-    text-transform: uppercase;
-    color: var(--text-mute);
-    line-height: 1.2;
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
 }
 
-.nav {
-    position: relative;
-    z-index: 1;
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.4rem 0.7rem 1.5rem;
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
 }
 
-.nav-group + .nav-group { margin-top: 1.1rem; }
-
-.nav-group-label {
-    font-size: 0.665rem;
-    font-weight: 620;
-    letter-spacing: 0.11em;
-    text-transform: uppercase;
-    color: var(--text-mute);
-    padding: 0 0.55rem 0.4rem;
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
 }
 
-.nav-link {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    padding: 0.44rem 0.6rem;
-    border-radius: var(--r-sm);
-    color: var(--text-dim);
-    font-size: 0.885rem;
-    font-weight: 500;
-    line-height: 1.35;
-    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
 }
 
-.nav-link svg { width: 16px; height: 16px; opacity: 0.72; }
-
-.nav-link:hover {
-    background: var(--surface-hover);
-    color: var(--text);
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
 }
 
-.nav-link.active {
-    background: var(--accent-soft);
-    color: var(--accent);
-    font-weight: 590;
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
 }
 
-.nav-link.active svg { opacity: 1; }
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
 
-.sidebar-foot {
-    position: relative;
-    z-index: 1;
-    flex: none;
-    padding: 0.75rem 1.1rem 1rem;
-    border-top: 1px solid var(--border);
-    font-size: 0.74rem;
-    color: var(--text-mute);
+.page {
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
-}
-
-.storage-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.72rem;
-    font-weight: 560;
-    letter-spacing: 0.01em;
-}
-
-.dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    flex: none;
-    background: var(--text-mute);
 }
 
-.dot.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
-.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
-.dot.err { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
-
-.main {
+.bb-site-content {
     flex: 1;
-    min-width: 0;
-    margin-left: var(--sidebar-w);
-    display: flex;
-    flex-direction: column;
+    width: 100%;
+    background: var(--bb-bg);
 }
 
-.topbar {
-    position: sticky;
-    top: 0;
-    z-index: 50;
-    height: var(--topbar-h);
-    flex: none;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0 1.5rem;
-    background: color-mix(in srgb, var(--bg) 82%, transparent);
-    backdrop-filter: blur(14px) saturate(160%);
-    border-bottom: 1px solid var(--border);
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
 }
 
-.crumbs {
-    display: flex;
-    align-items: center;
-    gap: 0.45rem;
-    font-size: 0.82rem;
-    color: var(--text-mute);
-    min-width: 0;
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
 }
 
-.crumbs svg { width: 13px; height: 13px; opacity: 0.6; }
-.crumbs .here { color: var(--text); font-weight: 560; }
-
-.topbar-spacer { flex: 1; }
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
 
-.content {
-    flex: 1;
+article {
     width: 100%;
-    max-width: var(--content-max);
-    margin: 0 auto;
-    padding: 2.2rem 1.5rem 5rem;
     min-width: 0;
 }
 
-.nav-toggle { display: none; }
-
-.scrim {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.55);
-    z-index: 55;
-    animation: fade-in var(--dur) var(--ease);
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
 }
 
-/* -------------------------------------------------------- 4. Page headers */
-
-.page-head { margin-bottom: 2.2rem; }
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
 
-.eyebrow {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.7rem;
-    font-weight: 620;
-    letter-spacing: 0.11em;
-    text-transform: uppercase;
-    color: var(--accent);
-    margin-bottom: 0.7rem;
+.bb-intro {
+    margin-bottom: 2.5rem;
 }
 
-.page-head h1 { margin-bottom: 0.6rem; }
-
-.lead {
-    font-size: 1.045rem;
-    color: var(--text-dim);
-    max-width: 68ch;
-    margin: 0;
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
 }
 
-.section { margin-top: 3rem; }
-.section:first-child { margin-top: 0; }
-
-.section-head { margin-bottom: 1.15rem; }
-
-.section-head h2 {
-    display: flex;
-    align-items: center;
-    gap: 0.55rem;
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
 }
 
-.section-head h2 svg { width: 17px; height: 17px; color: var(--accent); }
-
-.section-head .lead {
-    font-size: 0.95rem;
-    margin-top: 0.45rem;
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
 }
 
-/* ------------------------------------------------------------ 5. Buttons */
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
 
-.btn {
-    --btn-bg: var(--surface-2);
-    --btn-fg: var(--text);
-    --btn-bd: var(--border);
+.btn,
+button.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.42rem;
-    padding: 0.44rem 0.85rem;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
     font-family: inherit;
-    font-size: 0.855rem;
-    font-weight: 560;
-    line-height: 1.4;
-    border-radius: var(--r-sm);
-    border: 1px solid var(--btn-bd);
-    background: var(--btn-bg);
-    color: var(--btn-fg);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
     cursor: pointer;
+    text-decoration: none;
     white-space: nowrap;
-    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
-                color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
-                box-shadow var(--dur-fast) var(--ease);
-    user-select: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.btn svg { width: 15px; height: 15px; }
+.btn:hover {
+    text-decoration: none;
+}
 
-.btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); }
-.btn:active:not(:disabled) { transform: translateY(1px); }
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
 
+.btn[disabled],
 .btn:disabled {
-    opacity: 0.45;
     cursor: not-allowed;
+    opacity: .45;
 }
 
-.btn-primary {
-    --btn-bg: var(--accent);
-    --btn-fg: var(--accent-ink);
-    --btn-bd: transparent;
-    font-weight: 600;
-    box-shadow: 0 4px 14px -6px rgba(255, 90, 60, 0.6);
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
 }
 
-.btn-primary:hover:not(:disabled) {
-    background: var(--accent-hover);
-    border-color: transparent;
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
 }
 
-.btn-ghost {
-    --btn-bg: transparent;
-    --btn-fg: var(--text-dim);
-    --btn-bd: transparent;
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
 }
 
-.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); border-color: transparent; }
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
 
-.btn-outline {
-    --btn-bg: transparent;
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-.btn-danger {
-    --btn-fg: var(--err);
-    --btn-bg: var(--err-soft);
-    --btn-bd: transparent;
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
 }
 
-.btn-danger:hover:not(:disabled) { background: var(--err-soft); border-color: var(--err); }
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
 
-.btn-sm { padding: 0.28rem 0.6rem; font-size: 0.79rem; }
-.btn-sm svg { width: 13px; height: 13px; }
-.btn-lg { padding: 0.62rem 1.25rem; font-size: 0.95rem; }
-.btn-icon { padding: 0.42rem; }
-.btn-block { width: 100%; }
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
 
-.icon-btn {
-    display: inline-grid;
-    place-items: center;
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: 32px;
     height: 32px;
-    border-radius: var(--r-sm);
+    padding: 0;
+    flex: none;
     border: 1px solid transparent;
+    border-radius: var(--bb-radius);
     background: transparent;
-    color: var(--text-dim);
+    color: var(--bb-text-muted);
     cursor: pointer;
-    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-.icon-btn svg { width: 16px; height: 16px; }
-.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
 
-.toolbar {
+/* A row of "try it" links under a paragraph. */
+.bb-try {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
 }
 
-.toolbar-spacer { flex: 1; min-width: 0.5rem; }
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
 
-/* ------------------------------------------------- 6. Chips, badges, tags */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
 
-.chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.2rem 0.6rem;
-    border-radius: var(--r-pill);
-    border: 1px solid var(--border);
-    background: var(--surface-2);
-    color: var(--text-dim);
-    font-size: 0.77rem;
-    font-weight: 540;
-    line-height: 1.5;
-    white-space: nowrap;
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
 }
 
-.chip svg { width: 13px; height: 13px; }
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
 
-button.chip { cursor: pointer; transition: all var(--dur-fast) var(--ease); }
-button.chip:hover { border-color: var(--border-strong); color: var(--text); }
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
 
-button.chip.on,
-.chip.on {
-    background: var(--accent-soft);
-    border-color: var(--accent-line);
-    color: var(--accent);
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
 }
 
-.chip.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
-.chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
-.chip.err { background: var(--err-soft); border-color: transparent; color: var(--err); }
-.chip.info { background: var(--info-soft); border-color: transparent; color: var(--info); }
+/* ============================================================================================
+   8. Cards and sections
 
-.chip-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
 }
 
-.badge {
-    display: inline-flex;
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
     align-items: center;
-    gap: 0.3rem;
-    padding: 0.1rem 0.45rem;
-    border-radius: var(--r-xs);
-    font-size: 0.7rem;
-    font-weight: 620;
-    letter-spacing: 0.02em;
-    line-height: 1.6;
-    background: var(--surface-3);
-    color: var(--text-dim);
-    white-space: nowrap;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
 }
 
-.badge.ok { background: var(--ok-soft); color: var(--ok); }
-.badge.warn { background: var(--warn-soft); color: var(--warn); }
-.badge.err { background: var(--err-soft); color: var(--err); }
-.badge.info { background: var(--info-soft); color: var(--info); }
-.badge.accent { background: var(--accent-soft); color: var(--accent); }
-.badge.mono { font-family: var(--font-mono); font-weight: 520; }
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
 
-/* -------------------------------------------------- 7. Panels, cards, grid */
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
 
-.panel {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r-md);
-    box-shadow: var(--shadow-1);
-    overflow: hidden;
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.panel + .panel { margin-top: 1rem; }
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
 
-.panel-head {
-    display: flex;
-    align-items: center;
-    gap: 0.65rem;
-    padding: 0.7rem 1rem;
-    border-bottom: 1px solid var(--border);
-    background: var(--surface-2);
-    min-height: 46px;
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.panel-title {
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.855rem;
-    font-weight: 600;
-    color: var(--text);
-    min-width: 0;
+    flex-direction: column;
+    margin-bottom: 0;
 }
 
-.panel-title svg { width: 15px; height: 15px; color: var(--accent); }
-
-.panel-sub {
-    font-size: 0.78rem;
-    font-weight: 450;
-    color: var(--text-mute);
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
-.panel-actions {
-    margin-left: auto;
+.bb-flex {
     display: flex;
-    align-items: center;
-    gap: 0.4rem;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
 }
 
-.panel-body { padding: 1rem; }
-.panel-body.flush { padding: 0; }
-.panel-body > *:last-child { margin-bottom: 0; }
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
 
-.grid { display: grid; gap: 1rem; }
-.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.grid-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
 
-.card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r-md);
-    padding: 1.1rem;
-    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
 }
 
-.card h3 { margin-bottom: 0.4rem; }
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
 
-.card p {
-    font-size: 0.885rem;
-    color: var(--text-dim);
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
     margin-bottom: 0;
 }
 
-a.card { color: inherit; display: block; }
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
 
-a.card:hover {
-    border-color: var(--accent-line);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-2);
-    color: inherit;
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
 }
 
-.card-icon {
-    width: 34px;
-    height: 34px;
-    border-radius: var(--r-sm);
-    display: grid;
-    place-items: center;
-    background: var(--accent-soft);
-    color: var(--accent);
-    margin-bottom: 0.8rem;
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
 }
 
-.card-icon svg { width: 17px; height: 17px; }
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
 
-.card-arrow {
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
     display: inline-flex;
     align-items: center;
-    gap: 0.3rem;
-    margin-top: 0.7rem;
-    font-size: 0.8rem;
-    font-weight: 580;
-    color: var(--accent);
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.card-arrow svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
-a.card:hover .card-arrow svg { transform: translateX(3px); }
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
 
-/* ---------------------------------------------------------- 8. Stat tiles */
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
 
-.stats {
-    display: grid;
-    gap: 0.75rem;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
 }
 
-.stat {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r-md);
-    padding: 0.85rem 0.95rem;
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
-.stat-label {
+.bb-link-list li {
     display: flex;
     align-items: center;
-    gap: 0.35rem;
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.07em;
-    text-transform: uppercase;
-    color: var(--text-mute);
-    margin-bottom: 0.3rem;
 }
 
-.stat-label svg { width: 12px; height: 12px; }
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
 
-.stat-value {
-    font-family: var(--font-mono);
-    font-size: 1.32rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    color: var(--text);
-    line-height: 1.2;
-    font-variant-numeric: tabular-nums;
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
 }
 
-.stat-value .unit {
-    font-size: 0.72rem;
-    font-weight: 520;
-    color: var(--text-mute);
-    margin-left: 0.15rem;
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
 }
 
-.stat-note {
-    font-size: 0.745rem;
-    color: var(--text-mute);
-    margin-top: 0.15rem;
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
 }
 
-.stat.accent .stat-value { color: var(--accent); }
-.stat.ok .stat-value { color: var(--ok); }
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
 
-/* -------------------------------------------------------------- 9. Tables */
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
 
-.table-wrap {
-    overflow-x: auto;
-    border-radius: var(--r-md);
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
 }
 
-table.data {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.855rem;
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
 }
 
-table.data th {
-    text-align: left;
-    font-size: 0.7rem;
-    font-weight: 620;
-    letter-spacing: 0.07em;
-    text-transform: uppercase;
-    color: var(--text-mute);
-    padding: 0.55rem 0.85rem;
-    border-bottom: 1px solid var(--border);
-    background: var(--surface-2);
-    white-space: nowrap;
-    position: sticky;
-    top: 0;
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
 }
 
-table.data td {
-    padding: 0.55rem 0.85rem;
-    border-bottom: 1px solid var(--border);
-    color: var(--text-dim);
-    vertical-align: top;
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
 }
 
-table.data tbody tr:last-child td { border-bottom: 0; }
-table.data tbody tr:hover td { background: var(--surface-hover); }
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
 
-table.data td.mono,
-table.data th.mono {
-    font-family: var(--font-mono);
-    font-size: 0.8rem;
-    font-variant-numeric: tabular-nums;
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
 }
 
-table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
-table.data td.strong { color: var(--text); font-weight: 560; }
-table.data td.nowrap { white-space: nowrap; }
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
 
-/* ---------------------------------------------------------- 10. Form bits */
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
 
-.field {
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
     display: flex;
     flex-direction: column;
-    gap: 0.3rem;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
     min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.field-label {
-    font-size: 0.735rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
     text-transform: uppercase;
-    color: var(--text-mute);
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
 }
 
-.field-hint { font-size: 0.755rem; color: var(--text-mute); }
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
 
-.input,
-.select,
-textarea.input {
-    width: 100%;
-    padding: 0.42rem 0.65rem;
-    font-family: inherit;
-    font-size: 0.875rem;
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
     line-height: 1.5;
-    color: var(--text);
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    border-radius: var(--r-sm);
-    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.input::placeholder { color: var(--text-mute); }
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
 
-.input:focus,
-.select:focus {
-    outline: none;
-    border-color: var(--accent-line);
-    background: var(--surface);
-    box-shadow: 0 0 0 3px var(--accent-soft);
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
 }
 
-.input.mono { font-family: var(--font-mono); font-size: 0.83rem; }
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
 
-.select {
-    appearance: none;
-    padding-right: 1.9rem;
-    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-                      linear-gradient(135deg, currentColor 50%, transparent 50%);
-    background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
-    background-size: 5px 5px, 5px 5px;
-    background-repeat: no-repeat;
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
     cursor: pointer;
 }
 
-.form-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.65rem;
-    align-items: flex-end;
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
 }
 
-.form-row > .field { flex: 1 1 150px; }
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
 
-.check {
+.bb-theme-toggle {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
-    font-size: 0.855rem;
-    color: var(--text-dim);
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
     cursor: pointer;
-    user-select: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.check input[type="checkbox"] {
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    flex: none;
-    margin: 0;
-    border-radius: var(--r-xs);
-    border: 1.5px solid var(--border-strong);
-    background: var(--surface-2);
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
     cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
     position: relative;
-    transition: all var(--dur-fast) var(--ease);
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
 }
 
-.check input[type="checkbox"]:checked {
-    background: var(--accent);
-    border-color: var(--accent);
+.bb-demo > :last-child {
+    margin-bottom: 0;
 }
 
-.check input[type="checkbox"]:checked::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--accent-ink);
-    clip-path: polygon(19% 47%, 34% 62%, 79% 20%, 88% 30%, 35% 82%, 10% 57%);
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
 }
 
-.check:hover input[type="checkbox"] { border-color: var(--accent-line); }
-.check input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
 
-.slider {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 100%;
-    height: 4px;
-    border-radius: var(--r-pill);
-    background: var(--surface-3);
-    outline: none;
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
     cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    background: var(--accent);
-    border: 0;
-    cursor: pointer;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
 }
 
-.slider::-moz-range-thumb {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    background: var(--accent);
-    border: 0;
-    cursor: pointer;
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
 }
 
-.seg {
-    display: inline-flex;
-    padding: 2px;
-    gap: 2px;
-    border-radius: var(--r-sm);
-    background: var(--surface-2);
-    border: 1px solid var(--border);
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
 }
 
-.seg button {
-    padding: 0.26rem 0.7rem;
-    font-size: 0.81rem;
-    font-weight: 560;
-    font-family: inherit;
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
     border: 0;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--text-mute);
-    cursor: pointer;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
     white-space: nowrap;
-    transition: all var(--dur-fast) var(--ease);
+    text-decoration: none;
+    cursor: pointer;
 }
 
-.seg button:hover { color: var(--text); }
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
 
-.seg button.on {
-    background: var(--surface);
-    color: var(--text);
-    box-shadow: var(--shadow-1);
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
 }
 
-/* ---------------------------------------------------------- 11. Code block */
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
 
-.code {
-    background: var(--code-bg);
-    border: 1px solid var(--code-border);
-    border-radius: var(--r-md);
-    overflow: hidden;
-    margin-bottom: 0.9rem;
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
 }
 
-.code:last-child { margin-bottom: 0; }
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
 
-.code-head {
+.bb-stat {
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
-    border-bottom: 1px solid var(--code-border);
-    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
-}
-
-.code-title {
-    font-family: var(--font-mono);
-    font-size: 0.755rem;
-    font-weight: 550;
-    color: var(--text-mute);
-    letter-spacing: 0.01em;
+    flex-direction: column;
+    gap: .125rem;
     min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
 }
 
-.code-lang {
-    margin-left: auto;
-    font-size: 0.665rem;
-    font-weight: 620;
-    letter-spacing: 0.09em;
-    text-transform: uppercase;
-    color: var(--text-mute);
-    padding-right: 0.15rem;
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
 }
 
-.code pre {
-    margin: 0;
-    padding: 0.9rem 1rem;
-    overflow-x: auto;
-    font-size: 0.815rem;
-    line-height: 1.62;
-    tab-size: 4;
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
 }
 
-.code pre code {
-    font-family: var(--font-mono);
-    color: var(--text);
-    white-space: pre;
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
 }
 
-.code.wrap pre code { white-space: pre-wrap; word-break: break-word; }
-
-.tok-c { color: var(--tok-comment); font-style: italic; }
-.tok-k { color: var(--tok-keyword); }
-.tok-t { color: var(--tok-type); }
-.tok-s { color: var(--tok-string); }
-.tok-n { color: var(--tok-number); }
-.tok-a { color: var(--tok-attr); }
-.tok-f { color: var(--tok-func); }
-.tok-p { color: var(--tok-punct); }
-.tok-x { color: var(--text); }
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
 
-/* live API expression readout */
-.api-call {
-    display: block;
-    font-family: var(--font-mono);
-    font-size: 0.8rem;
-    line-height: 1.65;
-    padding: 0.6rem 0.8rem;
-    border-radius: var(--r-sm);
-    background: var(--code-bg);
-    border: 1px solid var(--code-border);
-    border-left: 2px solid var(--accent);
-    color: var(--text);
-    overflow-x: auto;
-    white-space: pre;
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
 }
 
-/* ------------------------------------------------------- 12. Callouts/logs */
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
 
-.callout {
-    display: flex;
-    gap: 0.7rem;
-    padding: 0.8rem 0.95rem;
-    border-radius: var(--r-md);
-    border: 1px solid var(--border);
-    background: var(--surface-2);
-    font-size: 0.875rem;
-    color: var(--text-dim);
-    margin-bottom: 0.9rem;
-}
-
-.callout:last-child { margin-bottom: 0; }
-.callout svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
-.callout strong { color: var(--text); font-weight: 600; }
-.callout-body > *:last-child { margin-bottom: 0; }
-
-.callout.info { background: var(--info-soft); border-color: transparent; }
-.callout.info svg { color: var(--info); }
-.callout.ok { background: var(--ok-soft); border-color: transparent; }
-.callout.ok svg { color: var(--ok); }
-.callout.warn { background: var(--warn-soft); border-color: transparent; }
-.callout.warn svg { color: var(--warn); }
-.callout.err { background: var(--err-soft); border-color: transparent; }
-.callout.err svg { color: var(--err); }
-.callout.accent { background: var(--accent-soft); border-color: transparent; }
-.callout.accent svg { color: var(--accent); }
-
-.log {
-    font-family: var(--font-mono);
-    font-size: 0.785rem;
-    line-height: 1.65;
-    max-height: 320px;
-    overflow-y: auto;
-    background: var(--code-bg);
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
 }
 
-.log-row {
-    display: flex;
-    gap: 0.65rem;
-    padding: 0.28rem 0.85rem;
-    border-bottom: 1px solid var(--code-border);
-    animation: slide-in var(--dur) var(--ease);
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
 }
 
-.log-row:last-child { border-bottom: 0; }
-.log-seq { color: var(--text-mute); min-width: 2.4rem; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
-.log-op { flex: none; min-width: 6.4rem; font-weight: 600; }
-.log-op.read { color: var(--info); }
-.log-op.append { color: var(--accent); }
-.log-op.write { color: var(--warn); }
-.log-op.delete { color: var(--err); }
-.log-name { color: var(--text); min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
-.log-meta { color: var(--text-mute); flex: none; font-variant-numeric: tabular-nums; }
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
 
-.log-row.step-ok .log-op { color: var(--ok); }
-.log-row.step-err .log-op { color: var(--err); }
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
 
-/* step-by-step scenario trace */
-.steps { display: flex; flex-direction: column; }
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
 
-.step {
+.bb-landing {
     display: flex;
-    gap: 0.75rem;
-    padding: 0.6rem 1rem;
-    border-bottom: 1px solid var(--border);
-    font-size: 0.855rem;
-    animation: slide-in var(--dur) var(--ease);
+    flex-direction: column;
 }
 
-.step:last-child { border-bottom: 0; }
-
-.step-num {
-    width: 20px;
-    height: 20px;
-    flex: none;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-size: 0.68rem;
-    font-weight: 660;
-    font-family: var(--font-mono);
-    background: var(--surface-3);
-    color: var(--text-mute);
-    margin-top: 2px;
-}
-
-.step.ok .step-num { background: var(--ok-soft); color: var(--ok); }
-.step.err .step-num { background: var(--err-soft); color: var(--err); }
-.step.run .step-num { background: var(--accent-soft); color: var(--accent); }
-
-.step-body { min-width: 0; flex: 1; }
-.step-title { color: var(--text); font-weight: 550; }
-.step-code {
-    font-family: var(--font-mono);
-    font-size: 0.79rem;
-    color: var(--text-dim);
-    margin-top: 0.15rem;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-.step-note { font-size: 0.8rem; color: var(--text-mute); margin-top: 0.1rem; }
-.step.err .step-note { color: var(--err); }
-
-/* key/value list */
-.kv {
-    display: grid;
-    grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
-    gap: 0.1rem 1rem;
-    font-size: 0.855rem;
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
 }
 
-.kv dt {
-    color: var(--text-mute);
-    font-size: 0.79rem;
-    padding: 0.22rem 0;
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
 }
 
-.kv dd {
-    margin: 0;
-    padding: 0.22rem 0;
-    color: var(--text);
-    font-family: var(--font-mono);
-    font-size: 0.815rem;
-    min-width: 0;
-    overflow-wrap: anywhere;
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
 }
 
-/* hex dump */
-.hex {
-    font-family: var(--font-mono);
-    font-size: 0.78rem;
-    line-height: 1.75;
-    background: var(--code-bg);
-    overflow-x: auto;
-    padding: 0.7rem 0.9rem;
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
 }
 
-.hex-row { display: flex; gap: 1.1rem; white-space: pre; }
-.hex-off { color: var(--tok-comment); flex: none; }
-.hex-bytes { color: var(--tok-number); flex: none; letter-spacing: 0.02em; }
-.hex-ascii { color: var(--text-dim); flex: none; }
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
 
-/* bars */
-.bar-track {
-    height: 6px;
-    border-radius: var(--r-pill);
-    background: var(--surface-3);
-    overflow: hidden;
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }
 
-.bar-fill {
-    height: 100%;
-    border-radius: var(--r-pill);
-    background: var(--grad-ember);
-    transition: width var(--dur-slow) var(--ease);
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
 }
 
-.bar-fill.alt { background: linear-gradient(115deg, #63b3ff, #8b7cff); }
-.bar-fill.ok { background: linear-gradient(115deg, var(--ok), #6ee7b7); }
-.bar-fill.accent { background: var(--grad-ember); }
-.bar-fill.info { background: linear-gradient(115deg, #63b3ff, #8b7cff); }
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
 
-/* empty state */
-.empty {
-    padding: 2.2rem 1rem;
-    text-align: center;
-    color: var(--text-mute);
-    font-size: 0.885rem;
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
 }
 
-.empty svg {
-    width: 26px;
-    height: 26px;
-    margin: 0 auto 0.6rem;
-    opacity: 0.4;
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
 }
 
-.spinner {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    border: 2px solid var(--border-strong);
-    border-top-color: var(--accent);
-    animation: spin 700ms linear infinite;
+.bb-hero-code {
+    min-width: 0;
 }
 
-/* ------------------------------------------------------- 13. Row lists */
+/* ---------- The window frame around the hero sample ----------
 
-.rows { display: flex; flex-direction: column; }
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
 
-.row-item {
+.bb-browser-bar {
     display: flex;
     align-items: center;
-    gap: 0.7rem;
-    padding: 0.6rem 1rem;
-    border-bottom: 1px solid var(--border);
-    transition: background var(--dur-fast) var(--ease);
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
 }
 
-.row-item:last-child { border-bottom: 0; }
-.row-item:hover { background: var(--surface-hover); }
-
-.row-main { flex: 1; min-width: 0; }
-
-.row-title {
-    font-size: 0.9rem;
-    color: var(--text);
-    font-weight: 520;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
 }
 
-.row-item.done .row-title { color: var(--text-mute); text-decoration: line-through; }
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
 
-.row-meta {
+.bb-browser-url {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    gap: 0.4rem;
-    margin-top: 0.2rem;
-    font-size: 0.745rem;
-    color: var(--text-mute);
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.row-actions { display: flex; gap: 0.25rem; flex: none; }
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
 
-.prio {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    font-size: 0.7rem;
-    font-weight: 620;
-    padding: 0.05rem 0.4rem;
-    border-radius: var(--r-xs);
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
 }
 
-.prio.Low { background: var(--surface-3); color: var(--text-mute); }
-.prio.Normal { background: var(--info-soft); color: var(--info); }
-.prio.High { background: var(--warn-soft); color: var(--warn); }
-.prio.Critical { background: var(--err-soft); color: var(--err); }
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
 
-/* ------------------------------------------------------------- 14. Hero */
+/* ---------- Proof strip ----------
 
-.hero {
-    position: relative;
-    border-radius: var(--r-xl);
-    border: 1px solid var(--border);
-    background: var(--surface);
-    padding: 3rem 2.4rem 2.6rem;
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
     overflow: hidden;
-    margin-bottom: 2.5rem;
 }
 
-.hero::before {
-    content: "";
-    position: absolute;
-    inset: -40% 30% 40% -10%;
-    background: radial-gradient(closest-side, rgba(255, 138, 61, 0.22), transparent);
-    filter: blur(20px);
-    pointer-events: none;
-    animation: drift 18s var(--ease) infinite alternate;
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
 }
 
-.hero::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-image: linear-gradient(var(--border) 1px, transparent 1px),
-                      linear-gradient(90deg, var(--border) 1px, transparent 1px);
-    background-size: 44px 44px;
-    mask-image: radial-gradient(120% 90% at 80% 0%, #000 10%, transparent 65%);
-    -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 10%, transparent 65%);
-    opacity: 0.6;
-    pointer-events: none;
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
 }
 
-.hero-inner { position: relative; z-index: 1; max-width: 70ch; }
+/* ---------- Sections ---------- */
 
-.hero h1 {
-    font-size: 2.9rem;
-    letter-spacing: -0.035em;
-    margin-bottom: 0.9rem;
+.bb-section {
+    margin-bottom: 0;
 }
 
-.hero h1 .grad {
-    background: var(--grad-ember);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    color: transparent;
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
 }
 
-.hero p {
-    font-size: 1.09rem;
-    color: var(--text-dim);
-    margin-bottom: 1.5rem;
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
 }
 
-.hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.6rem; }
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
 
-.hero-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
+/* ---------- Walkthrough ---------- */
 
-/* architecture diagram */
-.diagram {
+.bb-walkthrough {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    font-size: 0.83rem;
-}
-
-.dg-row { display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap; }
-
-.dg-box {
-    flex: 1 1 130px;
-    min-width: 0;
-    padding: 0.6rem 0.75rem;
-    border-radius: var(--r-sm);
-    border: 1px solid var(--border);
-    background: var(--surface-2);
+    gap: 3rem;
+    margin-top: 2rem;
 }
 
-.dg-box .dg-title {
-    display: flex;
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
     align-items: center;
-    gap: 0.35rem;
-    font-weight: 600;
-    color: var(--text);
-    font-size: 0.83rem;
 }
 
-.dg-box .dg-title svg { width: 14px; height: 14px; color: var(--accent); }
-.dg-box .dg-note { font-size: 0.745rem; color: var(--text-mute); margin-top: 0.15rem; }
-
-.dg-box.mem { border-color: var(--accent-line); background: var(--accent-soft); }
-.dg-box.io { border-style: dashed; }
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
 
-.dg-arrow {
-    display: flex;
+.bb-step {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.4rem;
-    color: var(--text-mute);
-    font-size: 0.72rem;
-    font-weight: 560;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    padding: 0.1rem 0;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
 }
 
-.dg-arrow svg { width: 14px; height: 14px; }
-.dg-arrow::before, .dg-arrow::after {
-    content: "";
-    height: 1px;
-    flex: 1;
-    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
 }
 
-/* checklist */
-.ticks {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
 }
 
-.ticks li {
-    position: relative;
-    padding-left: 1.4rem;
-    font-size: 0.83rem;
-    line-height: 1.6;
-    color: var(--text-dim);
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
 }
 
-.ticks li::before {
-    content: "";
-    position: absolute;
-    left: 0.15rem;
-    top: 0.42rem;
-    width: 0.55rem;
-    height: 0.3rem;
-    border-left: 1.7px solid var(--ok);
-    border-bottom: 1.7px solid var(--ok);
-    transform: rotate(-45deg);
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
 }
 
-/* -------------------------------------------- 14b. Failure-mode case cards */
+/* ---------- Comparison ---------- */
 
-.case-list { display: flex; flex-direction: column; }
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
 
-.case {
-    padding: 0.85rem 1rem;
-    border-bottom: 1px solid var(--border);
+.bb-compare td:last-child {
+    color: var(--bb-text);
 }
 
-.case:last-child { border-bottom: none; }
-.case:hover { background: var(--surface-2); }
+/* ---------- FAQ ---------- */
 
-.case-head {
+.bb-faq {
     display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
 }
 
-.case-what { min-width: 0; }
-
-.case-title {
-    font-size: 0.875rem;
-    font-weight: 560;
-    color: var(--text);
-    line-height: 1.4;
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.case-api {
-    display: inline-block;
-    margin-top: 0.2rem;
-    font-family: var(--font-mono);
-    font-size: 0.755rem;
-    color: var(--text-mute);
-    background: none;
-    padding: 0;
-    overflow-wrap: anywhere;
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
 }
 
-.case-side {
+.bb-faq summary {
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex: none;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
 }
 
-.case-note {
-    margin: 0.45rem 0 0;
-    font-size: 0.8rem;
-    line-height: 1.6;
-    color: var(--text-dim);
-    max-width: 78ch;
+.bb-faq summary::-webkit-details-marker {
+    display: none;
 }
 
-.case-result {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 0.6rem;
-    padding: 0.5rem 0.7rem;
-    border-radius: var(--r-sm);
-    font-family: var(--font-mono);
-    font-size: 0.775rem;
-    line-height: 1.6;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    animation: slide-in var(--dur-fast) var(--ease);
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
 }
 
-.case-result svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
-.case-result.ok { background: var(--ok-soft); color: var(--ok); }
-.case-result.err { background: var(--err-soft); color: var(--err); }
-
-@media (max-width: 640px) {
-    .case-head { flex-direction: column; }
-    .case-side { width: 100%; justify-content: space-between; }
+.bb-faq summary:hover {
+    color: var(--bb-primary);
 }
 
-/* ----------------------------------------------------------- 15. Utilities */
-
-.mono { font-family: var(--font-mono); }
-.muted { color: var(--text-mute); }
-.dim { color: var(--text-dim); }
-.accent-text { color: var(--accent); }
-.ok-text { color: var(--ok); }
-.err-text { color: var(--err); }
-.small { font-size: 0.815rem; }
-.tiny { font-size: 0.745rem; }
-.nowrap { white-space: nowrap; }
-.center { text-align: center; }
-.right { text-align: right; }
-.tabnum { font-variant-numeric: tabular-nums; }
-.flex { display: flex; gap: 0.5rem; align-items: center; }
-.flex-col { display: flex; flex-direction: column; gap: 0.5rem; }
-.wrap { flex-wrap: wrap; }
-.between { justify-content: space-between; }
-.gap-lg { gap: 1rem; }
-.mt-0 { margin-top: 0; }
-.mt-1 { margin-top: 0.5rem; }
-.mt-2 { margin-top: 1rem; }
-.mt-3 { margin-top: 1.5rem; }
-.mb-0 { margin-bottom: 0; }
-.mb-1 { margin-bottom: 0.5rem; }
-.mb-2 { margin-bottom: 1rem; }
-.mb-3 { margin-bottom: 1.5rem; }
-.full { width: 100%; }
-.scroll-y { overflow-y: auto; }
-.max-320 { max-height: 320px; }
-.max-420 { max-height: 420px; }
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
 
-/* --------------------------------------------------------- 16. Animations */
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
 
-@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
 
-@keyframes slide-in {
-    from { opacity: 0; transform: translateY(-3px); }
-    to { opacity: 1; transform: none; }
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
 }
 
-@keyframes rise {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: none; }
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
 }
 
-@keyframes spin { to { transform: rotate(360deg); } }
+/* ---------- Final CTA ---------- */
 
-@keyframes drift {
-    from { transform: translate3d(0, 0, 0) scale(1); }
-    to { transform: translate3d(6%, 4%, 0) scale(1.12); }
+.bb-final-cta {
+    text-align: center;
 }
 
-@keyframes pulse-ring {
-    0% { box-shadow: 0 0 0 0 var(--accent-soft); }
-    70% { box-shadow: 0 0 0 10px transparent; }
-    100% { box-shadow: 0 0 0 0 transparent; }
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
 }
 
-.rise { animation: rise var(--dur-slow) var(--ease) both; }
-.pulse { animation: pulse-ring 1.6s var(--ease) infinite; }
-
-@media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
 }
 
-/* -------------------------------------------------------- 17. Responsive */
-
-@media (max-width: 1100px) {
-    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .grid-sidebar { grid-template-columns: minmax(0, 1fr); }
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
 }
 
-@media (max-width: 900px) {
-    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
 }
 
-@media (max-width: 760px) {
-    :root { --topbar-h: 54px; }
+/* ---------- Responsive ---------- */
 
-    .sidebar {
-        transform: translateX(-100%);
-        transition: transform var(--dur) var(--ease);
-        box-shadow: var(--shadow-3);
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
     }
 
-    .shell.nav-open .sidebar { transform: none; }
-    .shell.nav-open .scrim { display: block; }
-
-    .main { margin-left: 0; }
-    .nav-toggle { display: inline-grid; }
-    .content { padding: 1.5rem 1.1rem 4rem; }
-
-    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
-
-    .hero { padding: 2.2rem 1.3rem 1.9rem; border-radius: var(--r-lg); }
-    .hero h1 { font-size: 2.1rem; }
-    .hero p { font-size: 1rem; }
-
-    h1 { font-size: 1.75rem; }
-    .kv { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
-    .kv dt { padding-bottom: 0; }
-    .kv dd { padding-top: 0; margin-bottom: 0.35rem; }
-}
-
-/* ------------------------------------------- 18. Blazor framework surfaces */
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
 
-#blazor-error-ui {
-    position: fixed;
-    inset: auto 0 0 0;
-    z-index: 1000;
-    display: none;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.7rem 1.25rem;
-    background: var(--err-soft);
-    border-top: 1px solid var(--err);
-    color: var(--text);
-    font-size: 0.875rem;
-    backdrop-filter: blur(10px);
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
 }
 
-#blazor-error-ui .reload { font-weight: 600; }
-
-#blazor-error-ui .dismiss {
-    margin-left: auto;
-    cursor: pointer;
-    color: var(--text-mute);
-    font-size: 1.05rem;
-    line-height: 1;
-}
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
 
-.blazor-error-boundary {
-    padding: 0.9rem 1.1rem;
-    border-radius: var(--r-md);
-    background: var(--err-soft);
-    border: 1px solid var(--err);
-    color: var(--text);
-    font-size: 0.885rem;
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
 }
 
-.blazor-error-boundary::after {
-    content: "Something went wrong in this section. Reload the page to continue.";
-}
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
 
-/* boot splash - in the host page until the app's shell takes its place (nothing is prerendered) */
-body:has(.shell) .boot {
-    display: none;
-}
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
 
-.boot {
-    position: fixed;
-    inset: 0;
-    display: grid;
-    place-content: center;
-    justify-items: center;
-    gap: 1.1rem;
-    background: var(--bg);
-    color: var(--text-mute);
-}
-
-.boot-mark {
-    width: 52px;
-    height: 52px;
-    border-radius: 15px;
-    background: var(--grad-ember);
-    display: grid;
-    place-items: center;
-    color: #fff;
-    box-shadow: 0 12px 40px -12px rgba(255, 90, 60, 0.8);
-    animation: pulse-ring 1.8s var(--ease) infinite;
-}
+    .bb-hero {
+        padding-block: 3rem;
+    }
 
-.boot-name {
-    font-family: var(--font-sans);
-    font-weight: 660;
-    font-size: 1.05rem;
-    letter-spacing: -0.02em;
-    color: var(--text);
-}
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
 
-.boot-track {
-    width: 190px;
-    height: 3px;
-    border-radius: var(--r-pill);
-    background: var(--surface-3);
-    overflow: hidden;
-}
+    .bb-section-sub {
+        font-size: 1rem;
+    }
 
-.boot-track::after {
-    content: "";
-    display: block;
-    height: 100%;
-    width: calc(var(--blazor-load-percentage, 12%));
-    min-width: 8%;
-    border-radius: var(--r-pill);
-    background: var(--grad-ember);
-    transition: width 120ms linear;
-}
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
 
-.boot-text {
-    font-size: 0.775rem;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    font-weight: 560;
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
 }
-
-.boot-text::after { content: var(--blazor-load-percentage-text, "Loading"); }
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/demo.css b/src/Utilities/BlazeDb/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..0325ea7f30b
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,1065 @@
+/* ============================================================================================
+   BlazeDb demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is BlazeDb's own - the panels the pages drive the engine from,
+   the row lists, the scenario traces, the I/O trace, the hex dumps, the benchmark bars, the storage
+   badge and the boot screen - and it is written against the kit's --bb-* names, so it follows the
+   light/dark theme with no rules of its own for either. Its own names start with bd-.
+   ============================================================================================ */
+
+/* ---------- Code colours ----------
+
+   CodeHighlighter.cs tokenizes more kinds than the kit colours, so the two it adds - functions and
+   numbers - get a light and a dark value here, in the same GitHub palette the kit's are taken from. */
+:root {
+    --bd-code-func: #8250DF;
+    --bd-code-number: #0A3069;
+}
+
+:root[bit-theme="dark"] {
+    --bd-code-func: #D2A8FF;
+    --bd-code-number: #A5D6FF;
+}
+
+.bb-code .tok-c { color: var(--bb-code-comment); font-style: italic; }
+.bb-code .tok-k { color: var(--bb-code-keyword); }
+.bb-code .tok-s { color: var(--bb-code-string); }
+.bb-code .tok-t,
+.bb-code .tok-a { color: var(--bb-code-param); }
+.bb-code .tok-f { color: var(--bd-code-func); }
+.bb-code .tok-n { color: var(--bd-code-number); }
+.bb-code .tok-p { color: var(--bb-code-fg); }
+
+/* A generated call whose length changes as the reader clicks wraps instead of scrolling. */
+.bb-code.bd-wrap {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+/* CodeBlock: the file name over the block, both in one grid cell. */
+.bd-code {
+    min-width: 0;
+    margin: 0 0 1.25rem;
+}
+
+.bd-code > .bb-code {
+    margin: 0;
+}
+
+.bd-code > .bb-source-file {
+    margin: 0 0 .375rem;
+}
+
+/* ---------- Layout of a page's samples ---------- */
+
+/* A main column and a narrower side column of panels; they stack when the docs column is too
+   narrow for both, which on a page that keeps its "on this page" rail is most of the time. */
+.bd-main-side {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bd-main-side > * {
+    min-width: 0;
+}
+
+.bd-main-side > :first-child {
+    flex: 2 1 420px;
+}
+
+.bd-main-side > :last-child {
+    flex: 1 1 280px;
+}
+
+/* Inside a grid or a stack the gap is the spacing, so the pieces drop their own bottom margins. */
+:is(.bb-split, .bb-grid, .bb-flex, .bd-main-side) > :is(.bd-panel, .bd-code, .bb-note, .bb-stats, .bb-flex, .bb-scroll, .bb-empty) {
+    margin-bottom: 0;
+}
+
+/* A column of actions in a side panel, and a grid of them in a wider one. */
+.bd-actions {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bd-btn-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+:is(.bd-actions, .bd-btn-grid) > .btn {
+    justify-content: flex-start;
+    white-space: normal;
+    text-align: start;
+}
+
+.bd-grow {
+    flex: 1 1 160px;
+    min-width: 0;
+}
+
+/* The live facts under a page's title. */
+.bd-facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+    margin-top: 1rem;
+}
+
+/* ---------- Panels (Components/Panel.razor) - a .bb-demo with a title bar ---------- */
+
+.bd-panel-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .25rem .5rem;
+    min-width: 0;
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.bd-panel-title > svg {
+    flex: none;
+    color: var(--bb-primary);
+}
+
+.bd-panel-title > strong {
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bd-panel-sub {
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+    overflow-wrap: anywhere;
+}
+
+.bd-panel-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+}
+
+/* A panel is a sample, not a passage: its prose is the size of the controls around it. */
+.bd-panel :where(p, li) {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    color: var(--bb-text-muted);
+}
+
+.bb-docs-content .bd-panel .bb-detail-list,
+.bb-docs-content .bd-panel .bb-note {
+    font-size: var(--fl-font-size-200);
+}
+
+.bd-panel > .btn:not(:last-child) {
+    margin-bottom: .75rem;
+}
+
+/* A label that is a call - await BlazeDbOpfsStorage.CreateAsync("...") - wraps on a phone rather
+   than pushing the page sideways. */
+.bd-panel > .btn {
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    text-align: start;
+}
+
+/* A text field in a panel fills the width its field was given. */
+.bd-panel .bb-field > :is(input:not([type="checkbox"]):not([type="radio"]), select) {
+    width: 100%;
+}
+
+.bb-field .bb-check {
+    font-weight: var(--fl-weight-regular);
+}
+
+/* Flush: the content brings its own rows, so the panel loses its padding and they run edge to
+   edge - the table's own frame included. */
+.bd-flush {
+    padding: 0;
+    overflow: hidden;
+}
+
+.bd-flush > .bb-demo-bar {
+    margin: 0;
+}
+
+.bd-flush > .bb-scroll,
+.bd-flush > .bb-stats {
+    margin: 0;
+}
+
+.bd-flush > .bb-scroll > .bb-table {
+    border: 0;
+    border-radius: 0;
+}
+
+.bd-flush > .bb-empty {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+}
+
+.bd-flush > .bb-log {
+    max-height: 26rem;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+}
+
+.bd-panel-pad {
+    padding: 1rem 1.25rem;
+}
+
+.bd-panel-pad > :last-child {
+    margin-bottom: 0;
+}
+
+.bd-panel-foot {
+    border-top: 1px solid var(--bb-border);
+}
+
+.bd-flush > .bb-stats.bd-panel-stats {
+    margin: 1rem;
+}
+
+/* A filter row over a list, and the pager under it. */
+.bd-filterbar,
+.bd-pagerbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    padding: .75rem 1rem;
+}
+
+.bd-filterbar {
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bd-pagerbar {
+    justify-content: space-between;
+    padding-block: .625rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+/* ---------- Readouts ---------- */
+
+/* What a call returned - the code surface, with the brand rule a result carries. */
+.bb-log.bd-out {
+    max-height: 14rem;
+    white-space: pre-wrap;
+    border-inline-start: 3px solid var(--bb-primary);
+}
+
+.bd-count {
+    margin-bottom: .5rem;
+    font-size: 2.25rem;
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.1;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+}
+
+.bb-table :is(th, td).bd-num {
+    text-align: end;
+    white-space: nowrap;
+    font-family: var(--bb-mono);
+    font-variant-numeric: tabular-nums;
+}
+
+.bb-table td:has(> .bd-bar) {
+    vertical-align: middle;
+}
+
+.bd-strong,
+.bb-table td.bd-strong {
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bd-ok,
+.bb-table td.bd-ok,
+.bb-params dd.bd-ok {
+    color: var(--bb-success-text);
+}
+
+.bd-err,
+.bb-table td.bd-err,
+.bb-params dd.bd-err {
+    color: var(--bb-danger-text);
+}
+
+.bd-small {
+    font-size: .8125rem;
+}
+
+/* A footnote under a sample. */
+.bd-foot,
+.bd-panel .bd-foot {
+    margin: .5rem 0 0;
+    font-size: var(--fl-font-size-100);
+    line-height: 1.5;
+    color: var(--bb-text-soft);
+}
+
+/* A definition list whose values are sentences rather than identifiers. */
+.bb-params.bd-params-prose dd {
+    display: block;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+/* ---------- Badges, buttons, stats ---------- */
+
+.bb-badge.bd-badge-neutral {
+    background: var(--bb-surface-2);
+    color: var(--bb-text-muted);
+}
+
+.bb-badge.bd-badge-accent {
+    background: color-mix(in srgb, var(--bb-accent) 18%, transparent);
+    color: var(--bb-accent-text);
+}
+
+/* A destructive action: the secondary button, stroked and lettered in the danger color. */
+.btn.bd-btn-danger {
+    background: var(--bb-surface);
+    color: var(--bb-danger-text);
+    border-color: color-mix(in srgb, var(--bb-danger) 45%, transparent);
+}
+
+.btn.bd-btn-danger:hover:not(:disabled) {
+    background: var(--bb-danger-soft);
+    border-color: var(--bb-danger);
+    color: var(--bb-danger-text);
+}
+
+/* Where a measured number came from - usually the call that produced it. */
+.bd-stat-note {
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+    overflow-wrap: anywhere;
+}
+
+.bd-stat-accent .bb-stat-value { color: var(--bb-primary); }
+.bd-stat-ok .bb-stat-value { color: var(--bb-success-text); }
+
+/* ---------- Scenario trace (Components/ScenarioSteps.razor) ---------- */
+
+.bd-steps {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.bd-step {
+    display: flex;
+    gap: .75rem;
+    padding: .625rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: var(--fl-font-size-200);
+}
+
+.bd-step:first-child {
+    border-top: 0;
+}
+
+.bd-step-num {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 1.375rem;
+    height: 1.375rem;
+    margin-top: .0625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface-2);
+    color: var(--bb-text-muted);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bd-step-ok .bd-step-num { background: var(--bb-success-soft); color: var(--bb-success-text); }
+.bd-step-err .bd-step-num { background: var(--bb-danger-soft); color: var(--bb-danger-text); }
+.bd-step-run .bd-step-num { background: var(--bb-primary-soft); color: var(--bb-primary-hover); }
+
+.bd-step-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.bd-step-title {
+    font-weight: var(--fl-weight-medium);
+    color: var(--bb-text);
+}
+
+.bd-step-code {
+    margin-top: .125rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.bd-step-note {
+    margin-top: .125rem;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+.bd-step-err .bd-step-note {
+    color: var(--bb-danger-text);
+}
+
+/* ---------- Row lists ---------- */
+
+.bd-rows {
+    display: flex;
+    flex-direction: column;
+}
+
+.bd-rows-framed {
+    margin: 0 0 .75rem;
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.bd-row {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .625rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bd-row:first-child {
+    border-top: 0;
+}
+
+.bd-row:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bd-row-editing,
+.bd-row-editing:hover {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    background: var(--bb-surface-sunken);
+}
+
+.bd-row-editing .bb-fields {
+    margin-bottom: .375rem;
+}
+
+.bd-row-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.bd-row-title {
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    color: var(--bb-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bd-done .bd-row-title {
+    color: var(--bb-text-soft);
+    text-decoration: line-through;
+}
+
+.bd-row-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .375rem;
+    margin-top: .25rem;
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+}
+
+.bd-row-actions {
+    display: flex;
+    flex: none;
+    gap: .125rem;
+}
+
+/* A todo's priority. */
+.bd-prio {
+    display: inline-flex;
+    align-items: center;
+    padding: .0625rem .4375rem;
+    border-radius: var(--bb-radius-sm);
+    font-size: .6875rem;
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.45;
+}
+
+.bd-prio-Low { background: var(--bb-surface-2); color: var(--bb-text-muted); }
+.bd-prio-Normal { background: var(--bb-primary-soft); color: var(--bb-primary-hover); }
+.bd-prio-High { background: var(--bb-warning-soft); color: var(--bb-warning-text); }
+.bd-prio-Critical { background: var(--bb-danger-soft); color: var(--bb-danger-text); }
+
+/* A checklist. */
+.bd-ticks {
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    list-style: none;
+    margin: 0 0 1rem;
+    padding: 0;
+}
+
+.bd-ticks li {
+    position: relative;
+    padding-inline-start: 1.5rem;
+}
+
+.bd-ticks li::before {
+    content: "";
+    position: absolute;
+    top: .45rem;
+    inset-inline-start: .25rem;
+    width: .55rem;
+    height: .3rem;
+    border-bottom: 2px solid var(--bb-success);
+    border-inline-start: 2px solid var(--bb-success);
+    transform: rotate(-45deg);
+}
+
+/* ---------- Bytes: the hex dump and the engine's I/O trace ---------- */
+
+.bd-hex {
+    overflow-x: auto;
+    padding: .75rem 1rem;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.75;
+}
+
+.bd-hex-row {
+    display: flex;
+    gap: 1.25rem;
+    white-space: pre;
+}
+
+.bd-hex-off { flex: none; color: var(--bb-code-comment); }
+.bd-hex-bytes { flex: none; color: var(--bd-code-number); }
+.bd-hex-ascii { flex: none; color: var(--bb-code-string); }
+
+.bd-trace {
+    max-height: 26rem;
+    overflow-y: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+.bd-trace-row {
+    display: flex;
+    gap: .75rem;
+    padding: .25rem 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bd-trace-row:first-child {
+    border-top: 0;
+}
+
+.bd-trace-seq {
+    flex: none;
+    min-width: 2.5rem;
+    text-align: end;
+    color: var(--bb-code-comment);
+    font-variant-numeric: tabular-nums;
+}
+
+.bd-trace-op {
+    flex: none;
+    min-width: 8.5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bd-op-read { color: var(--bb-code-keyword); }
+.bd-op-append { color: var(--bb-code-param); }
+.bd-op-write { color: var(--bb-code-string); }
+.bd-op-delete { color: var(--bb-danger-text); }
+
+.bd-trace-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bd-trace-meta {
+    flex: none;
+    color: var(--bb-code-comment);
+    font-variant-numeric: tabular-nums;
+}
+
+/* ---------- Benchmark bars ---------- */
+
+.bd-bar {
+    min-width: 80px;
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface-2);
+}
+
+.bd-bar-fill {
+    height: 100%;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+    transition: width var(--fl-duration-slow) var(--bb-motion-easing);
+}
+
+.bd-bar-ok { background: var(--bb-success); }
+.bd-bar-accent { background: var(--bb-accent); }
+.bd-bar-info { background: var(--bb-primary); }
+
+.bb-table th.bd-bar-col {
+    width: 180px;
+}
+
+.bd-progress {
+    margin: 0 0 .5rem;
+}
+
+.bd-progress > .bd-foot {
+    margin-top: .375rem;
+}
+
+/* ---------- Failure-mode cases (Errors) ---------- */
+
+.bd-cases {
+    display: flex;
+    flex-direction: column;
+}
+
+.bd-case {
+    padding: .875rem 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bd-case:first-child {
+    border-top: 0;
+}
+
+.bd-case-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.bd-case-what {
+    min-width: 0;
+}
+
+.bd-case-title {
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.4;
+    color: var(--bb-text);
+}
+
+code.bd-case-api {
+    display: inline-block;
+    margin-top: .25rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+}
+
+.bd-case-side {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: .5rem;
+}
+
+.bd-panel .bd-case-note {
+    max-width: 78ch;
+    margin: .5rem 0 0;
+    font-size: .8125rem;
+}
+
+.bd-case-result {
+    display: flex;
+    gap: .5rem;
+    margin-top: .625rem;
+    padding: .5rem .75rem;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.bd-case-result > svg {
+    flex: none;
+    margin-top: .1875rem;
+}
+
+.bd-case-ok {
+    background: var(--bb-success-soft);
+    border-color: color-mix(in srgb, var(--bb-success) 35%, transparent);
+    color: var(--bb-success-text);
+}
+
+.bd-case-err {
+    background: var(--bb-danger-soft);
+    border-color: color-mix(in srgb, var(--bb-danger) 35%, transparent);
+    color: var(--bb-danger-text);
+}
+
+@media (max-width: 640px) {
+    .bd-case-head {
+        flex-direction: column;
+    }
+
+    .bd-case-side {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+/* ---------- The architecture diagram (Getting started) ---------- */
+
+.bd-diagram {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bd-dg-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+}
+
+.bd-dg-box {
+    flex: 1 1 150px;
+    min-width: 0;
+    padding: .625rem .75rem;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.bd-dg-mem {
+    background: var(--bb-primary-soft);
+    border-color: color-mix(in srgb, var(--bb-primary) 35%, transparent);
+}
+
+.bd-dg-io {
+    border-style: dashed;
+    border-color: var(--bb-border-strong);
+}
+
+.bd-dg-title {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bd-dg-title > svg {
+    flex: none;
+    color: var(--bb-primary);
+}
+
+.bd-dg-note {
+    margin-top: .125rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-muted);
+    overflow-wrap: anywhere;
+}
+
+.bd-dg-arrow {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .6875rem;
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+.bd-dg-arrow::before,
+.bd-dg-arrow::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--bb-border-strong);
+}
+
+/* ---------- The landing page's live sample ---------- */
+
+.bd-hero-live {
+    padding: 1rem 1.25rem 1.25rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.bd-hero-live > p {
+    margin: 0;
+}
+
+.bd-hero-add {
+    display: flex;
+    gap: .5rem;
+    margin-bottom: 1rem;
+}
+
+.bd-hero-add > input {
+    flex: 1;
+    min-width: 0;
+}
+
+.bd-hero-stats {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1px;
+    margin: 0 0 1rem;
+    overflow: hidden;
+    background: var(--bb-border);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.bd-hero-stats > div {
+    min-width: 0;
+    padding: .5rem .75rem;
+    background: var(--bb-surface);
+}
+
+.bd-hero-stats dt {
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+}
+
+.bd-hero-stats dd {
+    margin: 0;
+    font-size: var(--fl-font-size-400);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bd-hero-rows {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.bd-hero-rows > li {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: .375rem .625rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.bd-hero-rows > li > span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bd-hero-rows .bb-mono {
+    flex: none;
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+}
+
+/* ---------- The storage badge (Components/StorageStatus.razor) ----------
+
+   Where this tab's database lives, on every page: fixed to the bottom corner, under every overlay
+   the chrome opens. The docs nav panel gets the room at its foot that the badge covers. */
+.bd-status {
+    position: fixed;
+    bottom: 1rem;
+    inset-inline-start: 1rem;
+    z-index: 900;
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    max-width: calc(100vw - 2rem);
+    padding: .3125rem .75rem;
+    background: color-mix(in srgb, var(--bb-surface) 92%, transparent);
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-raised);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+.bd-status-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bd-status-rows {
+    flex: none;
+    font-family: var(--bb-mono);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bd-status-rows::before {
+    content: "·";
+    margin-inline-end: .5rem;
+}
+
+.bb-docs > aside.bb-docs-sidebar {
+    padding-bottom: 4rem;
+}
+
+/* It sits in the docs shell's gutter, under the nav panel; the pages without the shell - the landing
+   page, whose hero names the storage in its window's title bar, and the not-found page - would have
+   it floating over their content instead. */
+body:not(:has(.bb-docs)) .bd-status {
+    display: none;
+}
+
+/* ---------- The boot screen (Server/Components/App.razor) ----------
+
+   Nothing is prerendered, so this is what the first response shows while the runtime downloads;
+   it goes as soon as the app's shell exists. */
+body:has(.page) .bd-boot {
+    display: none;
+}
+
+.bd-boot {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-content: center;
+    justify-items: center;
+    gap: 1rem;
+    background: var(--bb-bg);
+    color: var(--bb-text-muted);
+}
+
+.bd-boot-mark {
+    display: grid;
+    place-items: center;
+    width: 52px;
+    height: 52px;
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bd-boot-name {
+    font-family: var(--bb-font-display);
+    font-size: var(--fl-font-size-400);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.01em;
+    color: var(--bb-text);
+}
+
+.bd-boot-track {
+    width: 190px;
+    height: 3px;
+    overflow: hidden;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface-2);
+}
+
+.bd-boot-track::after {
+    content: "";
+    display: block;
+    width: var(--blazor-load-percentage, 12%);
+    min-width: 8%;
+    height: 100%;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+    transition: width 120ms linear;
+}
+
+.bd-boot-text {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+.bd-boot-text::after {
+    content: var(--blazor-load-percentage-text, "Loading");
+}
+
+@media print {
+    .bd-status,
+    .bd-boot {
+        display: none !important;
+    }
+}
+
+@media (forced-colors: active) {
+    .bd-status,
+    .bd-dg-box,
+    .bd-case-result {
+        border: 1px solid CanvasText;
+    }
+}
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/site.js b/src/Utilities/BlazeDb/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/BlazeDb/Demo/Server/wwwroot/theme.js b/src/Utilities/BlazeDb/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/BlazeDb/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/BlazeDb/README.md b/src/Utilities/BlazeDb/README.md
index 06487caae79..3c3e5a22509 100644
--- a/src/Utilities/BlazeDb/README.md
+++ b/src/Utilities/BlazeDb/README.md
@@ -95,7 +95,8 @@ fonts. Every page drives the real engine in your browser rather than describing
 
 | Page | What it demonstrates |
 | --- | --- |
-| `/` | Architecture, benchmarks and a quick start, with live stats from the demo database. |
+| `/` | The landing page: what the engine is, a live insert into the tab's database, and how it compares with SQLite. |
+| `/getting-started` | Install, declare a table, open a database once per tab, and how a read and a write travel. |
 | `/todos` | A working CRUD app: index-backed filters, sorting, paging and persisted preferences. |
 | `/schema` | Attributes, the generated descriptor inspected at runtime, supported types, diagnostics. |
 | `/indexes` | Hash lookups, ordered ranges, `BlazeDbBound<T>`, and indexed versus scanned counting. |
diff --git a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/DemoPageTests.cs b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/DemoPageTests.cs
index a88a6c1e3b5..e409b678ac8 100644
--- a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/DemoPageTests.cs
+++ b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/DemoPageTests.cs
@@ -12,9 +12,10 @@ namespace Bit.BlazeDb.Tests.E2E;
 [TestClass]
 public class DemoPageTests : BlazeDbTest
 {
-    /// <summary>The site map, page by page: the route, and a heading the page renders once it is running.</summary>
+    /// <summary>The docs, page by page: the route, and the heading the page renders once it is running.</summary>
     private static readonly (string Path, string Heading)[] _pages =
     [
+        ("getting-started", "From package to query in five minutes"),
         ("todos", "A working app on the real engine"),
         ("schema", "Schema comes from your types"),
         ("indexes", "Two index kinds, both maintained for you"),
@@ -33,13 +34,18 @@ private static readonly (string Path, string Heading)[] _pages =
     [TestMethod]
     public async Task Every_page_renders_through_the_navigation_without_an_error()
     {
+        // The landing page has no docs panel; the header's Docs link is the way into it.
         var page = await OpenAsync("/");
         var errors = CollectErrors(page);
         var misses = new List<string>();
 
+        await Assertions.Expect(page.Locator("h1")).ToContainTextAsync("Your data lives in memory.");
+        await page.Locator(".bb-nav a", new() { HasText = "Docs" }).ClickAsync();
+        await page.WaitForURLAsync("**/getting-started");
+
         foreach (var (path, heading) in _pages)
         {
-            await page.Locator($"a.nav-link[href='{path}']").First.ClickAsync();
+            await page.Locator($".bb-docs-sidebar a[href='/{path}']").First.ClickAsync();
             await page.WaitForURLAsync($"**/{path}");
 
             try
@@ -64,7 +70,7 @@ public async Task A_deep_link_opens_its_page_directly()
         var page = await OpenAsync("/efcore");
 
         await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("The same engine, reached through LINQ");
-        await Assertions.Expect(page.Locator(".crumbs .here")).ToHaveTextAsync("EF Core");
+        await Assertions.Expect(page.Locator(".bb-crumbs [aria-current='page']")).ToHaveTextAsync("EF Core");
     }
 
     [TestMethod]
@@ -76,7 +82,8 @@ public async Task An_unknown_route_answers_404_with_the_site_s_own_page()
         await WaitForDatabaseAsync(page);
 
         Assert.AreEqual((int)HttpStatusCode.NotFound, response!.Status);
-        await Assertions.Expect(page.Locator("h1")).ToContainTextAsync("That page does not exist");
+        await Assertions.Expect(page.Locator(".bb-error-404 h1")).ToHaveTextAsync("404");
+        await Assertions.Expect(page.Locator(".bb-error-404")).ToContainTextAsync("That page does not exist");
     }
 
     [TestMethod]
@@ -86,9 +93,10 @@ public async Task The_host_page_carries_the_boot_screen_and_no_prerendered_page(
 
         var html = await http.GetStringAsync(BaseUrl + "/todos");
 
-        Assert.Contains("class=\"boot\"", html);
+        Assert.Contains("class=\"bd-boot\"", html);
         Assert.Contains("_framework/blazor.web.js", html);
-        Assert.DoesNotContain("class=\"shell", html, "Nothing is prerendered: the database a page shows lives only in the browser.");
+        Assert.DoesNotContain("class=\"page\"", html, "Nothing is prerendered: the database a page shows lives only in the browser.");
+        Assert.DoesNotContain("data-storage", html, "Nothing is prerendered: the database a page shows lives only in the browser.");
     }
 
     [TestMethod]
diff --git a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/Infrastructure/BlazeDbTest.cs b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/Infrastructure/BlazeDbTest.cs
index 1fe600cd1db..159de2d137e 100644
--- a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/Infrastructure/BlazeDbTest.cs
+++ b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/Infrastructure/BlazeDbTest.cs
@@ -72,15 +72,16 @@ protected async Task GotoAsync(IPage page, string path)
     /// <summary>
     /// Waits until the WebAssembly app has replaced the host page's boot screen and the demo database is
     /// open, and returns where it ended up: Opfs, or one of the in-memory fallbacks. Nothing is prerendered,
-    /// so the shell's arrival is the app running; its data-storage attribute is the database being ready.
+    /// so the storage badge's arrival is the app running - it is mounted beside the router, on every page -
+    /// and its data-storage attribute is the database being ready.
     /// </summary>
     protected static async Task<string> WaitForDatabaseAsync(IPage page)
     {
         await page.WaitForFunctionAsync(
-            "() => { const shell = document.querySelector('.shell'); return shell && shell.dataset.storage && shell.dataset.storage !== 'Opening'; }",
+            "() => { const status = document.querySelector('.bd-status'); return status && status.dataset.storage && status.dataset.storage !== 'Opening'; }",
             null, new PageWaitForFunctionOptions { Timeout = 90_000 });
 
-        return await page.Locator(".shell").GetAttributeAsync("data-storage") ?? string.Empty;
+        return await page.Locator(".bd-status").GetAttributeAsync("data-storage") ?? string.Empty;
     }
 
     /// <summary>Collects every uncaught error and console error a page reports, for a test to assert there were none.</summary>
diff --git a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/PersistenceTests.cs b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/PersistenceTests.cs
index 321db327f43..8ea4f7726d5 100644
--- a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/PersistenceTests.cs
+++ b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/PersistenceTests.cs
@@ -21,7 +21,7 @@ public async Task A_todo_added_on_opfs_survives_a_reload()
 
         await page.Locator("#new-title").FillAsync(title);
         await page.Locator("button.btn-primary").Filter(new() { HasText = "Insert" }).ClickAsync();
-        await Assertions.Expect(page.Locator(".row-title", new() { HasText = title })).ToBeVisibleAsync();
+        await Assertions.Expect(page.Locator(".bd-row-title", new() { HasText = title })).ToBeVisibleAsync();
 
         // The demo flushes every 100 ms; the write-ahead log has reached OPFS well within this.
         await page.WaitForTimeoutAsync(1_500);
@@ -33,7 +33,7 @@ public async Task A_todo_added_on_opfs_survives_a_reload()
         Assert.AreEqual("Opfs", await WaitForDatabaseAsync(page));
 
         await page.Locator("input[placeholder='Filter titles…']").FillAsync(title);
-        await Assertions.Expect(page.Locator(".row-title", new() { HasText = title })).ToBeVisibleAsync();
+        await Assertions.Expect(page.Locator(".bd-row-title", new() { HasText = title })).ToBeVisibleAsync();
     }
 
     [TestMethod]
@@ -50,7 +50,9 @@ public async Task A_second_tab_falls_back_to_memory_while_the_first_holds_the_wr
 
         Assert.AreEqual("LockedFallback", await WaitForDatabaseAsync(second),
             "Two tabs of one origin must not both write the same OPFS files: the second one has to lose the Web Lock election.");
-        await Assertions.Expect(second.Locator(".storage-pill")).ToContainTextAsync("another tab owns OPFS");
+        await Assertions.Expect(second.Locator(".bd-status")).ToContainTextAsync("another tab owns OPFS");
+        // The landing page tells the visitor in its hero, where the database it is showing is named.
+        await Assertions.Expect(second.Locator(".bb-browser-url")).ToContainTextAsync("another tab owns OPFS");
     }
 
     [TestMethod]
diff --git a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/README.md b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/README.md
index 41357cfbc0b..f4487e3a7b1 100644
--- a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/README.md
+++ b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.E2E/README.md
@@ -22,9 +22,10 @@ WebAssembly without prerendering) and drives it in Chromium with Playwright.
 | `BrowserModuleTests` | The four modules the package ships, called the way the `[JSImport]` bindings call them: IndexedDB and OPFS writes, appends, reads and deletes, and their no-create opens; the Web Lock won once and handed over on release; AES-GCM sealing through WebCrypto, with a tampered frame and a frame moved to another file both refused; a BroadcastChannel announcement reaching the other tab and not echoing back. |
 | `DemoPageTests` | Every page of the site renders through the navigation without a console error or the error UI; a deep link opens its page; an unknown route answers 404 with the site's own page; the host page carries the boot screen and nothing prerendered; the modules are served as static web assets. |
 
-Nothing is prerendered, so the app's shell replacing the boot screen is the app running. Each test then waits
-until the demo database is open - `data-storage` on the shell turns from `Opening` to where it ended up
-(`Opfs`, or one of the in-memory fallbacks) - before it touches the page.
+Nothing is prerendered, so the app replacing the boot screen is the app running. Each test then waits
+until the demo database is open - `data-storage` on the storage badge (`.bd-status`, mounted beside the
+router on every page) turns from `Opening` to where it ended up (`Opfs`, or one of the in-memory
+fallbacks) - before it touches the page.
 
 ## Running locally
 
diff --git a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.Mcp/McpToolTests.cs b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.Mcp/McpToolTests.cs
index b824c7c0498..b6dd428f480 100644
--- a/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.Mcp/McpToolTests.cs
+++ b/src/Utilities/BlazeDb/Tests/Bit.BlazeDb.Tests.Mcp/McpToolTests.cs
@@ -272,6 +272,9 @@ public async Task The_source_index_lists_the_demo_pages_and_models_but_not_the_s
         Assert.DoesNotContain("Error.razor", index);
         Assert.DoesNotContain("CodeHighlighter.cs", index);
         Assert.DoesNotContain("Icon.razor", index);
+        Assert.DoesNotContain("Demo/Client/Layout/", index, "The header, docs shell, palette and footer are the shared site kit, not BlazeDb code.");
+        Assert.DoesNotContain("DocsCatalog.cs", index);
+        Assert.Contains("Demo/Client/Pages/GettingStarted.razor", index);
     }
 
     [TestMethod]
diff --git a/src/Utilities/Blex/Demo/Client/Components/ApiTable.razor b/src/Utilities/Blex/Demo/Client/Components/ApiTable.razor
index 397603359e2..a3e03927218 100644
--- a/src/Utilities/Blex/Demo/Client/Components/ApiTable.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/ApiTable.razor
@@ -1,27 +1,29 @@
-<div class="api-table">
-    @if (!string.IsNullOrEmpty(Title))
-    {
-        <h3 class="api-table__title">@Title</h3>
-    }
-    <div class="table-scroll">
-        <table>
-            <thead>
+@*
+    A member/description table in the site kit's bb-table, scrolling inside its own box on a narrow
+    screen. The member column wraps between the words of a signature, never inside one (demo.css).
+*@
+@if (!string.IsNullOrEmpty(Title))
+{
+    <h4 class="demo-api-title">@Title</h4>
+}
+<div class="bb-scroll">
+    <table class="bb-table demo-api-table">
+        <thead>
+            <tr>
+                <th>@MemberHeader</th>
+                <th>@DescriptionHeader</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var row in Rows)
+            {
                 <tr>
-                    <th class="api-table__member">@MemberHeader</th>
-                    <th>@DescriptionHeader</th>
+                    <td><code>@row.Member</code></td>
+                    <td>@((MarkupString)row.Description)</td>
                 </tr>
-            </thead>
-            <tbody>
-                @foreach (var row in Rows)
-                {
-                    <tr>
-                        <td><code>@row.Member</code></td>
-                        <td>@((MarkupString)row.Description)</td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    </div>
+            }
+        </tbody>
+    </table>
 </div>
 
 @code {
diff --git a/src/Utilities/Blex/Demo/Client/Components/Callout.razor b/src/Utilities/Blex/Demo/Client/Components/Callout.razor
index 42f9f658023..5c98e9d629c 100644
--- a/src/Utilities/Blex/Demo/Client/Components/Callout.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/Callout.razor
@@ -1,12 +1,13 @@
-<div class="callout callout--@Kind.ToString().ToLowerInvariant()">
-    <div class="callout__icon" aria-hidden="true">@Icon</div>
-    <div class="callout__body">
-        @if (!string.IsNullOrEmpty(Title))
-        {
-            <p class="callout__title">@Title</p>
-        }
-        @ChildContent
-    </div>
+@*
+    An aside in the prose, drawn as the site kit's bb-note (Fluent 2's MessageBar): the tone picks the
+    note's color, and the optional title is its bold lead-in.
+*@
+<div class="@NoteClass" role="note">
+    @if (!string.IsNullOrEmpty(Title))
+    {
+        <strong class="demo-note-title">@Title</strong>
+    }
+    @ChildContent
 </div>
 
 @code {
@@ -35,11 +36,11 @@
     /// <summary>The callout body.</summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
-    private string Icon => Kind switch
+    private string NoteClass => Kind switch
     {
-        CalloutKind.Tip => "★",
-        CalloutKind.Warning => "!",
-        CalloutKind.Gotcha => "⚠",
-        _ => "i",
+        CalloutKind.Tip => "bb-note bb-note-success",
+        CalloutKind.Warning => "bb-note bb-note-warn",
+        CalloutKind.Gotcha => "bb-note bb-note-danger",
+        _ => "bb-note",
     };
 }
diff --git a/src/Utilities/Blex/Demo/Client/Components/CodeBlock.razor b/src/Utilities/Blex/Demo/Client/Components/CodeBlock.razor
index 828f746358e..5dd55d9be18 100644
--- a/src/Utilities/Blex/Demo/Client/Components/CodeBlock.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/CodeBlock.razor
@@ -1,68 +1,38 @@
-@inject IJSRuntime Js
-
-<div class="code-block @(Compact ? "code-block--compact" : null)">
-    @if (!string.IsNullOrEmpty(Title) || ShowChrome)
-    {
-        <div class="code-block__bar">
-            <span class="code-block__title">@(Title ?? LanguageLabel)</span>
-            <div class="code-block__actions">
-                @if (!string.IsNullOrEmpty(FileName))
-                {
-                    <span class="code-block__file">@FileName</span>
-                }
-                <button type="button" class="code-block__copy" @onclick="CopyAsync" title="Copy to clipboard">
-                    @(_copied ? "Copied" : "Copy")
-                </button>
-            </div>
-        </div>
-    }
-    <pre class="code-block__pre"><code class="language-@Language">@CodeHighlighter.Highlight(Code.TrimEnd(), Language)</code></pre>
-</div>
+@*
+    A code sample: CodeHighlighter's tokens inside the site kit's pre.bb-code, which is what gives it
+    the site's code surface - and the copy button site.js adds to every pre.bb-code. A title or a
+    file name, when given, is the caption above it. The token colors are in demo.css.
+*@
+@if (!string.IsNullOrEmpty(Title) || !string.IsNullOrEmpty(FileName))
+{
+    <div class="demo-code-label">
+        @if (!string.IsNullOrEmpty(Title))
+        {
+            <span>@Title</span>
+        }
+        @if (!string.IsNullOrEmpty(FileName))
+        {
+            <span class="bb-mono">@FileName</span>
+        }
+    </div>
+}
+<pre class="bb-code"><code class="language-@Language">@CodeHighlighter.Highlight(Normalized, Language)</code></pre>
 
 @code {
-    private bool _copied;
-
     /// <summary>The snippet to render. Trailing whitespace is trimmed.</summary>
     [Parameter, EditorRequired] public string Code { get; set; } = "";
 
     /// <summary>Language token understood by <see cref="CodeHighlighter"/>.</summary>
     [Parameter] public string Language { get; set; } = "csharp";
 
-    /// <summary>Optional heading shown in the title bar.</summary>
+    /// <summary>Optional caption shown above the code.</summary>
     [Parameter] public string? Title { get; set; }
 
-    /// <summary>Optional file name shown on the right of the title bar.</summary>
+    /// <summary>Optional file name shown in the caption.</summary>
     [Parameter] public string? FileName { get; set; }
 
-    /// <summary>Whether to render the title bar even when no title is set.</summary>
-    [Parameter] public bool ShowChrome { get; set; } = true;
-
-    /// <summary>Tightens the padding, for snippets embedded inside demo cards.</summary>
-    [Parameter] public bool Compact { get; set; }
-
-    private string LanguageLabel => Language.ToLowerInvariant() switch
-    {
-        "csharp" or "cs" => "C#",
-        "razor" or "cshtml" => "Razor",
-        "xml" or "csproj" => "XML",
-        "json" => "JSON",
-        "bash" or "sh" or "shell" => "Shell",
-        _ => Language,
-    };
-
-    private async Task CopyAsync()
-    {
-        try
-        {
-            await Js.InvokeVoidAsync("blexDocs.copy", Code.TrimEnd());
-            _copied = true;
-            StateHasChanged();
-            await Task.Delay(1400);
-            _copied = false;
-        }
-        catch (JSException)
-        {
-            // Clipboard access can be denied; the snippet is still selectable by hand.
-        }
-    }
+    // The samples are raw string literals, so they carry the source file's line endings. A CR left
+    // inside a token's span (a // comment runs to the LF) is a line break of its own in a <pre>, which
+    // double-spaced every commented line - so the snippet is reduced to LF before it is scanned.
+    private string Normalized => Code.ReplaceLineEndings("\n").TrimEnd();
 }
diff --git a/src/Utilities/Blex/Demo/Client/Components/DemoCard.razor b/src/Utilities/Blex/Demo/Client/Components/DemoCard.razor
index 6ab5b2bd594..9bf7275dac5 100644
--- a/src/Utilities/Blex/Demo/Client/Components/DemoCard.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/DemoCard.razor
@@ -1,12 +1,16 @@
-<div class="demo">
-    <div class="demo__head">
-        <div>
-            <span class="demo__badge">Live demo</span>
-            <span class="demo__title">@Title</span>
-        </div>
+@*
+    A live sample, in the site kit's bb-demo frame: a title bar naming it (with the "Show code"
+    toggle at its end when the sample has a listing), a line on what to try, the sample itself and,
+    when asked for, its source. The content is rendered straight into the frame rather than into a
+    wrapper, so the frame's own spacing rules reach the sample's last element.
+*@
+<div class="bb-demo">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live<span class="demo-card-title">@Title</span></span>
         @if (!string.IsNullOrEmpty(Source))
         {
-            <button type="button" class="demo__toggle" @onclick="() => _showSource = !_showSource">
+            <button type="button" class="btn btn-secondary" aria-expanded="@(_showSource ? "true" : "false")"
+                    @onclick="() => _showSource = !_showSource">
                 @(_showSource ? "Hide code" : "Show code")
             </button>
         }
@@ -14,18 +18,14 @@
 
     @if (!string.IsNullOrEmpty(Description))
     {
-        <p class="demo__desc">@Description</p>
+        <p class="bb-card-desc">@Description</p>
     }
 
-    <div class="demo__stage">
-        @ChildContent
-    </div>
+    @ChildContent
 
     @if (_showSource && !string.IsNullOrEmpty(Source))
     {
-        <div class="demo__source">
-            <CodeBlock Code="@Source" Language="@SourceLanguage" ShowChrome="false" Compact="true" />
-        </div>
+        <CodeBlock Code="@Source" Language="@SourceLanguage" />
     }
 </div>
 
diff --git a/src/Utilities/Blex/Demo/Client/Components/DocPage.razor b/src/Utilities/Blex/Demo/Client/Components/DocPage.razor
index 4fdc94ec5e5..611878b6fa3 100644
--- a/src/Utilities/Blex/Demo/Client/Components/DocPage.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/DocPage.razor
@@ -1,49 +1,31 @@
 @*
-    Standard shell for every documentation page: title metadata, the heading block, the body,
-    and previous/next links derived from DocsNav so the reading order is never hand-maintained.
+    The title block every documentation page opens with: its <PageTitle>, the section it belongs to,
+    its one H1 and the lead under it, in the site kit's bb-intro markup. The body follows as the
+    page's own content, with no wrapper element of its own - the docs column styles its DIRECT
+    children (the bb-card sections, the prose), so a wrapper would hide them from those rules. The
+    shell around it - nav panel, breadcrumb, pager, rail - is Layout/DocsLayout.razor's, driven by
+    DocsCatalog.
 *@
-<PageTitle>@Title · Blex</PageTitle>
+<PageTitle>@Title · @SiteInfo.Name</PageTitle>
 
-<article class="doc">
-    <header class="doc__header">
-        @if (Section is not null)
-        {
-            <p class="doc__eyebrow">@Section.Title</p>
-        }
-        <h1>@Title</h1>
-        @if (!string.IsNullOrEmpty(Lead))
-        {
-            <p class="doc__lead">@Lead</p>
-        }
-    </header>
-
-    @ChildContent
-
-    <nav class="doc__pager">
-        @if (Previous is not null)
-        {
-            <a class="pager pager--prev" href="@Previous.Href">
-                <span class="pager__dir">Previous</span>
-                <span class="pager__title">@Previous.Title</span>
-            </a>
-        }
-        else
-        {
-            <span></span>
-        }
+<div class="bb-intro">
+    @if (_section is not null)
+    {
+        <p class="bb-overline">@_section</p>
+    }
+    <h1>@Title</h1>
+    @if (!string.IsNullOrEmpty(Lead))
+    {
+        <p class="bb-subtitle">@Lead</p>
+    }
+</div>
 
-        @if (Next is not null)
-        {
-            <a class="pager pager--next" href="@Next.Href">
-                <span class="pager__dir">Next</span>
-                <span class="pager__title">@Next.Title</span>
-            </a>
-        }
-    </nav>
-</article>
+@ChildContent
 
 @code {
-    /// <summary>Route of this page (without a leading slash) so the pager can locate it.</summary>
+    private string? _section;
+
+    /// <summary>Route of this page (without a leading slash), which locates it in <see cref="DocsCatalog"/>.</summary>
     [Parameter, EditorRequired] public string Href { get; set; } = "";
 
     /// <summary>Page heading.</summary>
@@ -52,16 +34,12 @@
     /// <summary>Introductory paragraph under the heading.</summary>
     [Parameter] public string? Lead { get; set; }
 
-    /// <summary>Page body.</summary>
+    /// <summary>Page body: its bb-card sections.</summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
-    private DocSection? Section { get; set; }
-    private DocEntry? Previous { get; set; }
-    private DocEntry? Next { get; set; }
-
     protected override void OnParametersSet()
     {
-        Section = DocsNav.SectionOf(Href);
-        (Previous, Next) = DocsNav.Neighbours(Href);
+        var page = DocsCatalog.FindByPath(Href);
+        _section = page is null ? null : DocsCatalog.SectionOf(page);
     }
 }
diff --git a/src/Utilities/Blex/Demo/Client/Components/InspectorDock.razor b/src/Utilities/Blex/Demo/Client/Components/InspectorDock.razor
index eea13e34493..932b7268c85 100644
--- a/src/Utilities/Blex/Demo/Client/Components/InspectorDock.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/InspectorDock.razor
@@ -9,41 +9,42 @@
 @*
     The docs site is itself a Blex app, so this dock shows the real pipeline: every action you
     dispatch anywhere on the site, the live global state tree, the undo stack and any isolated
-    pipeline error. Nothing here is mocked.
+    pipeline error. Nothing here is mocked. Routes.razor mounts it once, outside the page shell, so
+    it stays put across navigations; its styles are in demo.css.
 *@
-<aside class="dock @(_open ? "dock--open" : null)">
-    <button type="button" class="dock__handle" @onclick="() => _open = !_open">
+<aside class="dock @(_open ? "dock--open" : null)" aria-label="Blex inspector">
+    <button type="button" class="dock__handle" aria-expanded="@(_open ? "true" : "false")" @onclick="() => _open = !_open">
         <span class="dock__handle-label">Inspector</span>
-        <span class="dock__handle-count">@Feed.TotalSeen</span>
-        <span class="dock__handle-caret">@(_open ? "▾" : "▴")</span>
+        <span class="bb-badge">@Feed.TotalSeen</span>
+        <span class="dock__handle-caret" aria-hidden="true">@(_open ? "▾" : "▴")</span>
     </button>
 
     @if (_open)
     {
         <div class="dock__body">
-            <div class="dock__tabs" role="tablist">
+            <div class="bb-tabs dock__tabs" role="tablist">
                 @foreach (var tab in Tabs)
                 {
                     <button type="button"
                             role="tab"
-                            class="dock__tab @(_tab == tab ? "dock__tab--active" : null)"
+                            aria-selected="@(_tab == tab ? "true" : "false")"
                             @onclick="() => _tab = tab">
                         @tab
                         @if (tab == "Errors" && Errors.Errors.Count > 0)
                         {
-                            <span class="dock__tab-badge">@Errors.Errors.Count</span>
+                            <span class="bb-badge bb-badge-danger">@Errors.Errors.Count</span>
                         }
                     </button>
                 }
             </div>
 
-            <div class="dock__panel">
+            <div class="dock__panel" role="tabpanel">
                 @switch (_tab)
                 {
                     case "Actions":
-                        <div class="dock__toolbar">
-                            <span class="muted">@Feed.TotalSeen dispatched since load</span>
-                            <button type="button" class="btn btn-ghost btn-sm" @onclick="Feed.Clear">Clear</button>
+                        <div class="bb-toolbar dock__toolbar">
+                            <span class="bb-muted">@Feed.TotalSeen dispatched since load</span>
+                            <button type="button" class="btn btn-secondary" @onclick="Feed.Clear">Clear</button>
                         </div>
                         @if (Feed.Entries.Count == 0)
                         {
@@ -70,37 +71,37 @@
                         break;
 
                     case "State":
-                        <div class="dock__toolbar">
-                            <span class="muted">@Manager.Stores.Count stores · live global tree</span>
+                        <div class="bb-toolbar dock__toolbar">
+                            <span class="bb-muted">@Manager.Stores.Count stores · live global tree</span>
                         </div>
-                        <pre class="dock__json"><code>@CodeHighlighter.Highlight(StateJson, "json")</code></pre>
+                        <pre class="bb-code dock__json"><code>@CodeHighlighter.Highlight(StateJson, "json")</code></pre>
                         break;
 
                     case "History":
-                        <div class="dock__toolbar">
-                            <button type="button" class="btn btn-sm" disabled="@(!History.CanUndo)" @onclick="History.Undo">
+                        <div class="bb-toolbar dock__toolbar">
+                            <button type="button" class="btn btn-secondary" disabled="@(!History.CanUndo)" @onclick="History.Undo">
                                 Undo @History.NextUndoLabel
                             </button>
-                            <button type="button" class="btn btn-sm" disabled="@(!History.CanRedo)" @onclick="History.Redo">
+                            <button type="button" class="btn btn-secondary" disabled="@(!History.CanRedo)" @onclick="History.Redo">
                                 Redo @History.NextRedoLabel
                             </button>
-                            <button type="button" class="btn btn-ghost btn-sm" @onclick="History.Clear">Clear</button>
+                            <button type="button" class="btn btn-secondary" @onclick="History.Clear">Clear</button>
                         </div>
-                        <dl class="stat-grid">
-                            <div><dt>Undo depth</dt><dd>@History.UndoCount</dd></div>
-                            <div><dt>Redo depth</dt><dd>@History.RedoCount</dd></div>
-                            <div><dt>Max entries</dt><dd>@History.MaxEntries</dd></div>
-                        </dl>
-                        <p class="muted small">
+                        <div class="bb-stats dock__stats">
+                            <div class="bb-stat"><span class="bb-stat-label">Undo depth</span><span class="bb-stat-value">@History.UndoCount</span></div>
+                            <div class="bb-stat"><span class="bb-stat-label">Redo depth</span><span class="bb-stat-value">@History.RedoCount</span></div>
+                            <div class="bb-stat"><span class="bb-stat-label">Max entries</span><span class="bb-stat-value">@History.MaxEntries</span></div>
+                        </div>
+                        <p class="dock__note">
                             Undo and redo restore every store at once and never record a new action,
                             so stepping back does not pollute the history.
                         </p>
                         break;
 
                     case "Errors":
-                        <div class="dock__toolbar">
-                            <span class="muted">options.OnError sink</span>
-                            <button type="button" class="btn btn-ghost btn-sm" @onclick="Errors.Clear">Clear</button>
+                        <div class="bb-toolbar dock__toolbar">
+                            <span class="bb-muted">options.OnError sink</span>
+                            <button type="button" class="btn btn-secondary" @onclick="Errors.Clear">Clear</button>
                         </div>
                         @if (Errors.Errors.Count == 0)
                         {
@@ -128,7 +129,7 @@
                 <div class="dock__banner">
                     Read-only guard is ON - middleware is vetoing every action
                     (@Guard.BlockedCount blocked).
-                    <button type="button" class="btn btn-sm" @onclick="() => Guard.IsReadOnly = false">Turn off</button>
+                    <button type="button" class="btn btn-secondary" @onclick="() => Guard.IsReadOnly = false">Turn off</button>
                 </div>
             }
         </div>
diff --git a/src/Utilities/Blex/Demo/Client/Components/SelectorWatcher.razor b/src/Utilities/Blex/Demo/Client/Components/SelectorWatcher.razor
index ae149b3c382..2de1dac9fbd 100644
--- a/src/Utilities/Blex/Demo/Client/Components/SelectorWatcher.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/SelectorWatcher.razor
@@ -5,19 +5,17 @@
     Subscribe(store, selector): re-renders only when the projected value changes. Mutating an
     unrelated field on the same store leaves this component alone.
 *@
-<div class="card">
-    <p class="card__title">
-        <span class="card__num">Subscribe(Store, () =&gt; Store.Count)</span>
-    </p>
-    <p class="card__body">Renders only when <code>Count</code> changes.</p>
-    <div class="readout" style="margin-top:0.6rem">
-        <div class="readout__item">
-            <span class="readout__label">Count (displayed)</span>
-            <span class="readout__value">@Counter.Count</span>
+<div class="bb-card">
+    <p class="bb-card-title"><code>Subscribe(Store, () =&gt; Store.Count)</code></p>
+    <p class="bb-card-desc">Renders only when <code>Count</code> changes.</p>
+    <div class="bb-stats">
+        <div class="bb-stat">
+            <span class="bb-stat-label">Count (displayed)</span>
+            <span class="bb-stat-value">@Counter.Count</span>
         </div>
-        <div class="readout__item">
-            <span class="readout__label">Renders</span>
-            <span class="readout__value readout__value--accent">@_renders</span>
+        <div class="bb-stat">
+            <span class="bb-stat-label">Renders</span>
+            <span class="bb-stat-value demo-accent">@_renders</span>
         </div>
     </div>
 </div>
diff --git a/src/Utilities/Blex/Demo/Client/Components/WholeStoreWatcher.razor b/src/Utilities/Blex/Demo/Client/Components/WholeStoreWatcher.razor
index aff1f48a63b..143144b0ec9 100644
--- a/src/Utilities/Blex/Demo/Client/Components/WholeStoreWatcher.razor
+++ b/src/Utilities/Blex/Demo/Client/Components/WholeStoreWatcher.razor
@@ -5,19 +5,17 @@
     Subscribe(store): re-renders on ANY change to the store, including fields this component
     never displays.
 *@
-<div class="card">
-    <p class="card__title">
-        <span class="card__num">Subscribe(Store)</span>
-    </p>
-    <p class="card__body">Renders on any change to the store.</p>
-    <div class="readout" style="margin-top:0.6rem">
-        <div class="readout__item">
-            <span class="readout__label">Count (displayed)</span>
-            <span class="readout__value">@Counter.Count</span>
+<div class="bb-card">
+    <p class="bb-card-title"><code>Subscribe(Store)</code></p>
+    <p class="bb-card-desc">Renders on any change to the store.</p>
+    <div class="bb-stats">
+        <div class="bb-stat">
+            <span class="bb-stat-label">Count (displayed)</span>
+            <span class="bb-stat-value">@Counter.Count</span>
         </div>
-        <div class="readout__item">
-            <span class="readout__label">Renders</span>
-            <span class="readout__value readout__value--accent">@_renders</span>
+        <div class="bb-stat">
+            <span class="bb-stat-label">Renders</span>
+            <span class="bb-stat-value demo-accent">@_renders</span>
         </div>
     </div>
 </div>
diff --git a/src/Utilities/Blex/Demo/Client/DocsCatalog.cs b/src/Utilities/Blex/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..f77e2bd3942
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,227 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Blex.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Blex";
+
+    public const string PackageId = "Bit.Blex";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Blex";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Blex is source-generator-powered reactive state management for Blazor and .NET MAUI: one [BlexState] " +
+        "field and one [BlexAction] method, with effects, persistence, undo/redo and Redux DevTools time-travel " +
+        "built in. This site is itself a Blex app.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["effect", "persist", "selector", "undo", "devtools"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/introduction", "Docs", MatchesDocs: true),
+        new("/api", "API"),
+        new("/mcp", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry. The MCP server's docs tool
+/// (Server/Services/DocsPageRenderer.cs) reads the same list, so an agent sees the pages a reader does.
+/// </summary>
+public static class DocsCatalog
+{
+    // The page types are named through Pages. on purpose: Stores and Testing are also namespaces
+    // (Bit.Blex.Demo.Client.Stores, Bit.Blex.Testing), and a bare name would bind to those first.
+    public static readonly DocsSection[] Sections =
+    [
+        new("Getting started",
+        [
+            new("/introduction", "Introduction",
+                "What Blex is, the whole store a counter takes, and how it compares with Fluxor.",
+                "overview why fluxor redux flux comparison packages boilerplate generator",
+                typeof(Pages.Introduction)),
+            new("/installation", "Installation",
+                "The package, the DI registrations, the <BlexProvider> around the router, headless hosts and trimming.",
+                "install setup nuget package AddBitBlexServices AddBitBlexStore BlexProvider program.cs aot trimming json",
+                typeof(Pages.Installation)),
+            new("/quick-start", "Quick start",
+                "A complete, reactive, time-travelable counter in three files and about twenty lines.",
+                "quick start counter first store tutorial Subscribe BlexComponentBase",
+                typeof(Pages.QuickStart)),
+        ]),
+        new("Core concepts",
+        [
+            new("/stores", "Stores & state",
+                "[BlexStore] and [BlexState]: the reactive container, its fields, change detection and its JSON snapshot.",
+                "BlexStore BlexState store state field property SerializeState DeserializeState RestoreState BlexStoreBase equality immutable",
+                typeof(Pages.Stores)),
+            new("/computed", "Computed state",
+                "[BlexComputed]: memoized derived values that are recalculated only after the state changes.",
+                "BlexComputed computed derived memoized getter Compute Get invalidate",
+                typeof(Pages.Computed)),
+            new("/actions", "Actions",
+                "[BlexAction] methods, batching, direct assignment as a \"Set X\" action, Batch, ResetState and async actions.",
+                "BlexAction action dispatch batch ResetState ResetAll reducer mutation Set arguments payload async",
+                typeof(Pages.Actions)),
+            new("/effects", "Effects",
+                "[BlexEffect]: async work with a generated loading flag, error slot, cancellation, concurrency policy and debounce.",
+                "BlexEffect effect async loading error cancel CancellationToken Latest Drop Queue Parallel debounce side effect",
+                typeof(Pages.Effects)),
+        ]),
+        new("Reacting to state",
+        [
+            new("/subscriptions", "Components & selectors",
+                "BlexComponentBase and selector subscriptions, so a component re-renders on the state it actually uses.",
+                "subscribe subscription selector BlexComponentBase rerender re-render comparer fireImmediately BlexComparers",
+                typeof(Pages.Subscriptions)),
+            new("/cross-store", "Cross-store coordination",
+                "BlexManager: react to one store's actions from another, and derive values that span stores.",
+                "BlexManager cross store SubscribeTo CreateSelector global state coordination reactor",
+                typeof(Pages.CrossStore)),
+            new("/entities", "Entity adapter",
+                "BlexEntityState and BlexEntityAdapter: normalized collections with generated CRUD and automatic sorting.",
+                "BlexEntityAdapter BlexEntityState entity normalized collection crud AddOne UpdateOne RemoveOne SetAll sort",
+                typeof(Pages.Entities)),
+        ]),
+        new("The pipeline",
+        [
+            new("/middleware", "Middleware",
+                "IBlexMiddleware: observe every action after it applies, veto it before it runs, or report it when it throws.",
+                "IBlexMiddleware middleware veto filter UseMiddleware UseFilter BeforeAction OnAction OnActionError logger",
+                typeof(Pages.Middleware)),
+            new("/errors", "Error isolation",
+                "Where the failures Blex keeps out of the dispatch pipeline go: options.OnError and BlexError.",
+                "OnError BlexError error isolation exception subscriber failure sink",
+                typeof(Pages.Errors)),
+        ]),
+        new("State lifecycle",
+        [
+            new("/persistence", "Persistence",
+                "Persist = true: rehydration on startup, debounced writes, versioning, migrations and sync across tabs.",
+                "persistence persist localStorage sessionStorage rehydrate hydrate debounce version migrate SyncAcrossTabs IBlexStorage",
+                typeof(Pages.Persistence)),
+            new("/history", "Undo & redo",
+                "BlexHistory: in-app undo and redo over the whole state tree, with labels, jumps, grouping and filters.",
+                "BlexHistory undo redo history jump checkpoint groupBy filter",
+                typeof(Pages.History)),
+            new("/devtools", "DevTools & time travel",
+                "The Redux DevTools bridge: every action and state tree streamed to the extension, time travel, and redaction.",
+                "redux devtools time travel extension sanitizer redact RedactDevToolsKeys EnableDevTools jump",
+                typeof(Pages.DevTools)),
+        ]),
+        new("Quality",
+        [
+            new("/testing", "Testing",
+                "Bit.Blex.Testing: the test harness, the action log, payload assertions and waiting on async state.",
+                "testing unit test BlexTestHarness BlexActionLog WaitForAsync harness mstest xunit",
+                typeof(Pages.Testing)),
+            new("/diagnostics", "Compile-time diagnostics",
+                "Every BLEX diagnostic the generator can report, with the store it rejects and the fix.",
+                "diagnostics BLEX001 analyzer generator compile error warning build",
+                typeof(Pages.Diagnostics)),
+        ]),
+        new("Reference",
+        [
+            new("/api", "API reference",
+                "Every public type Blex ships, grouped by assembly and namespace, with the page that explains it.",
+                "api reference types members namespace Bit.Blex.Blazor Bit.Blex.Testing reserved json",
+                typeof(Pages.ApiReference)),
+            new("/mcp", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent works against Blex's real API, docs and generator.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server InspectBlexStore",
+                typeof(Pages.McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Blex/Demo/Client/DocsNav.cs b/src/Utilities/Blex/Demo/Client/DocsNav.cs
deleted file mode 100644
index 999c2ba5ab4..00000000000
--- a/src/Utilities/Blex/Demo/Client/DocsNav.cs
+++ /dev/null
@@ -1,102 +0,0 @@
-namespace Bit.Blex.Demo.Client;
-
-/// <summary>One page in the documentation.</summary>
-/// <param name="Href">Route, without a leading slash.</param>
-/// <param name="Title">Sidebar and heading title.</param>
-/// <param name="Summary">One-line description used by the "next up" cards and search.</param>
-public sealed record DocEntry(string Href, string Title, string Summary);
-
-/// <summary>A group of related pages in the sidebar.</summary>
-/// <param name="Title">Group heading.</param>
-/// <param name="Pages">Ordered pages.</param>
-public sealed record DocSection(string Title, IReadOnlyList<DocEntry> Pages);
-
-/// <summary>
-/// The single source of truth for the site map: the sidebar, the previous/next footer links and
-/// the introduction's contents grid all read from here, so adding a page in one place is enough.
-/// </summary>
-public static class DocsNav
-{
-    /// <summary>Every section in sidebar order.</summary>
-    public static IReadOnlyList<DocSection> Sections { get; } =
-    [
-        new("Getting started",
-        [
-            new("", "Introduction", "What Blex is, and how it compares to the alternatives."),
-            new("installation", "Installation", "Packages, DI registration and the provider component."),
-            new("quick-start", "Quick start", "A working counter in three files."),
-        ]),
-        new("Core concepts",
-        [
-            new("stores", "Stores & state", "[BlexStore] and [BlexState]: the reactive container and its fields."),
-            new("computed", "Computed state", "[BlexComputed]: memoized derived values that invalidate themselves."),
-            new("actions", "Actions", "[BlexAction], batching, direct assignment, Batch and ResetState."),
-            new("effects", "Effects", "[BlexEffect]: async work with generated loading, error and cancellation."),
-        ]),
-        new("Reacting to state",
-        [
-            new("subscriptions", "Components & selectors", "Re-render on the state you actually use."),
-            new("cross-store", "Cross-store coordination", "React to one store's actions from another."),
-            new("entities", "Entity adapter", "Normalized collections with generated CRUD."),
-        ]),
-        new("The pipeline",
-        [
-            new("middleware", "Middleware", "Observe every action, or veto it before it runs."),
-            new("errors", "Error isolation", "Where non-fatal pipeline failures go."),
-        ]),
-        new("State lifecycle",
-        [
-            new("persistence", "Persistence", "Rehydration, debouncing, versioning and migrations."),
-            new("history", "Undo & redo", "In-app history over the whole state tree."),
-            new("devtools", "DevTools & time travel", "The Redux DevTools bridge, and how to secure it."),
-        ]),
-        new("Quality",
-        [
-            new("testing", "Testing", "The harness, the action log and waiting on state."),
-            new("diagnostics", "Compile-time diagnostics", "Every BLEX#### the generator can report."),
-        ]),
-        new("Reference",
-        [
-            new("api", "API reference", "Every public type and member, grouped by area."),
-            new("mcp", "MCP server", "Let an AI agent work against Blex's real API, docs and generator."),
-        ]),
-    ];
-
-    /// <summary>All pages, flattened into reading order.</summary>
-    public static IReadOnlyList<DocEntry> Flat { get; } = [.. Sections.SelectMany(s => s.Pages)];
-
-    /// <summary>Finds the entry for a route, or <c>null</c> when the route is not in the site map.</summary>
-    public static DocEntry? Find(string href)
-    {
-        var normalized = href.Trim('/');
-        return Flat.FirstOrDefault(p => string.Equals(p.Href, normalized, StringComparison.OrdinalIgnoreCase));
-    }
-
-    /// <summary>The pages before and after <paramref name="href"/> in reading order.</summary>
-    public static (DocEntry? Previous, DocEntry? Next) Neighbours(string href)
-    {
-        var normalized = href.Trim('/');
-        var index = -1;
-        for (var i = 0; i < Flat.Count; i++)
-        {
-            if (string.Equals(Flat[i].Href, normalized, StringComparison.OrdinalIgnoreCase))
-            {
-                index = i;
-                break;
-            }
-        }
-
-        if (index < 0)
-            return (null, null);
-
-        return (index > 0 ? Flat[index - 1] : null,
-                index < Flat.Count - 1 ? Flat[index + 1] : null);
-    }
-
-    /// <summary>The section a page belongs to.</summary>
-    public static DocSection? SectionOf(string href)
-    {
-        var normalized = href.Trim('/');
-        return Sections.FirstOrDefault(s => s.Pages.Any(p => string.Equals(p.Href, normalized, StringComparison.OrdinalIgnoreCase)));
-    }
-}
diff --git a/src/Utilities/Blex/Demo/Client/Extensions/IServiceCollectionExtensions.cs b/src/Utilities/Blex/Demo/Client/Extensions/IServiceCollectionExtensions.cs
index 27141b75f13..0e3bed6bbc4 100644
--- a/src/Utilities/Blex/Demo/Client/Extensions/IServiceCollectionExtensions.cs
+++ b/src/Utilities/Blex/Demo/Client/Extensions/IServiceCollectionExtensions.cs
@@ -18,7 +18,6 @@ public static IServiceCollection AddDemoServices(this IServiceCollection service
         // --- Site services (not part of Blex; they power the live panels) ----------------------
         services.AddScoped<ActionFeed>();
         services.AddScoped<DemoGuard>();
-        services.AddScoped<ThemeService>();
 
         // OnError is captured on the singleton options object, so the sink it writes to must outlive
         // any single scope. In a Blazor Server app you would forward to ILogger instead.
@@ -81,7 +80,7 @@ public static IServiceCollection AddDemoServices(this IServiceCollection service
                 return null;
             };
 
-            // Open this site in two tabs and change the theme in one: without this, whichever tab acted
+            // Open this site in two tabs and change the accent in one: without this, whichever tab acted
             // last would silently win and the other would only catch up on its next reload.
             options.SyncAcrossTabs = true;
         });
diff --git a/src/Utilities/Blex/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Blex/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Blex/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Blex/Demo/Client/Layout/DocsLayout.razor
index 97411ace3ea..9dc838a4894 100644
--- a/src/Utilities/Blex/Demo/Client/Layout/DocsLayout.razor
+++ b/src/Utilities/Blex/Demo/Client/Layout/DocsLayout.razor
@@ -1,81 +1,161 @@
 @inherits LayoutComponentBase
-@implements IDisposable
-@inject ThemeService Theme
+@layout MainLayout
 @inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
 
-<div class="shell">
-    <header class="topbar">
-        <button type="button" class="topbar__burger" @onclick="() => _navOpen = !_navOpen" aria-label="Toggle navigation">
-            <span></span><span></span><span></span>
-        </button>
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
 
-        <a class="brand" href="">
-            <span class="brand__mark" aria-hidden="true">
-                <svg viewBox="0 0 32 32" width="26" height="26" role="img" aria-label="Blex">
-                    <path d="M7 26 L15 4 L19 4 L12 18 L21 18 L14 29 Z" fill="currentColor" />
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
                 </svg>
-            </span>
-            <span class="brand__text">
-                <strong>Blex</strong>
-                <span class="brand__tag">for Blazor</span>
-            </span>
-        </a>
-
-        <div class="topbar__spacer"></div>
-
-        <nav class="topbar__links">
-            <a href="quick-start">Quick start</a>
-            <a href="api">API</a>
-            <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Blex" target="_blank" rel="noopener">GitHub</a>
-        </nav>
-
-        <button type="button" class="topbar__theme" @onclick="ToggleThemeAsync" title="Toggle light / dark">
-            @(Theme.Theme == "dark" ? "☾" : "☀")
-        </button>
-    </header>
-
-    <div class="body">
-        <NavSidebar Open="_navOpen" OnNavigate="() => _navOpen = false" />
-
-        <main class="content" id="content">
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
             @Body
-        </main>
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
     </div>
 
-    <InspectorDock />
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
 </div>
 
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
 @code {
-    private bool _navOpen;
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
 
     protected override void OnInitialized()
     {
-        Theme.Changed += OnThemeChanged;
+        Recompute();
         Nav.LocationChanged += OnLocationChanged;
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
     {
-        if (firstRender)
-        {
-            await Theme.InitializeAsync();
-            StateHasChanged();
-        }
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
     }
 
-    private async Task ToggleThemeAsync() => await Theme.ToggleAsync();
-
-    private void OnThemeChanged() => _ = InvokeAsync(StateHasChanged);
-
-    private void OnLocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        _navOpen = false;
-        _ = InvokeAsync(StateHasChanged);
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
     }
 
-    public void Dispose()
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
     {
-        Theme.Changed -= OnThemeChanged;
-        Nav.LocationChanged -= OnLocationChanged;
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
     }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
 }
diff --git a/src/Utilities/Blex/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Blex/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Blex/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/Footer.razor b/src/Utilities/Blex/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Blex/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/Header.razor b/src/Utilities/Blex/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/Header.razor.css b/src/Utilities/Blex/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Blex/Demo/Client/Layout/MainLayout.razor
new file mode 100644
index 00000000000..44980dda101
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/MainLayout.razor
@@ -0,0 +1,30 @@
+@inherits LayoutComponentBase
+
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
+
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
+
+    <Footer />
+</div>
diff --git a/src/Utilities/Blex/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Blex/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Blex/Demo/Client/Layout/NavSidebar.razor b/src/Utilities/Blex/Demo/Client/Layout/NavSidebar.razor
deleted file mode 100644
index fa45bbd20ad..00000000000
--- a/src/Utilities/Blex/Demo/Client/Layout/NavSidebar.razor
+++ /dev/null
@@ -1,40 +0,0 @@
-@*
-    The sidebar renders straight from DocsNav, so the site map lives in exactly one place.
-*@
-<nav class="sidebar @(Open ? "sidebar--open" : null)">
-    <div class="sidebar__inner">
-        @foreach (var section in DocsNav.Sections)
-        {
-            <div class="sidebar__section">
-                <p class="sidebar__heading">@section.Title</p>
-                <ul>
-                    @* NB: the loop variable must not be called "page" -- Razor would parse @page as the directive. *@
-                    @foreach (var entry in section.Pages)
-                    {
-                        <li>
-                            <NavLink class="sidebar__link"
-                                     href="@entry.Href"
-                                     Match="@(entry.Href.Length == 0 ? NavLinkMatch.All : NavLinkMatch.Prefix)"
-                                     @onclick="OnNavigate">
-                                @entry.Title
-                            </NavLink>
-                        </li>
-                    }
-                </ul>
-            </div>
-        }
-
-        <div class="sidebar__foot">
-            <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Blex" target="_blank" rel="noopener">Source on GitHub</a>
-            <span>MIT licensed</span>
-        </div>
-    </div>
-</nav>
-
-@code {
-    /// <summary>Whether the mobile drawer is expanded.</summary>
-    [Parameter] public bool Open { get; set; }
-
-    /// <summary>Raised when a link is clicked, so the layout can close the drawer.</summary>
-    [Parameter] public EventCallback OnNavigate { get; set; }
-}
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Actions.razor b/src/Utilities/Blex/Demo/Client/Pages/Actions.razor
index 52443b3ec8b..4c6909dc8da 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Actions.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Actions.razor
@@ -5,180 +5,198 @@
 <DocPage Href="actions" Title="Actions"
          Lead="An action is a named, batched, recorded unit of change. Everything that mutates state becomes one - even a direct property assignment.">
 
-    <h2>The convention</h2>
-    <p>
-        Mark a method named <code>OnXxx</code> with <code>[BlexAction]</code>. The generator emits a
-        public <code>Xxx(...)</code> wrapper that runs your method inside a dispatch: all the
-        mutations it makes are folded into one notification and one time-travel entry.
-    </p>
-
-    <CodeBlock Code="@Basic" />
-    <CodeBlock Code="@BasicGenerated" Title="Generated" />
-
-    <h2>Naming</h2>
-    <p>
-        The wrapper name comes from the method name with the <code>On</code> prefix stripped, or from
-        <code>[BlexAction(Name = "…")]</code>. The <code>Name</code> is used in two different ways
-        depending on whether it is a valid C# identifier:
-    </p>
-
-    <div class="table-scroll">
-        <table>
-            <thead><tr><th>Declaration</th><th>Method you call</th><th>Label in DevTools / history</th></tr></thead>
-            <tbody>
-                <tr><td><code>[BlexAction] void OnIncrement()</code></td><td><code>Increment()</code></td><td><code>Increment</code></td></tr>
-                <tr><td><code>[BlexAction(Name = "Bump")] void OnIncrement()</code></td><td><code>Bump()</code></td><td><code>Bump</code></td></tr>
-                <tr><td><code>[BlexAction(Name = "Apply preset")] void OnApplyPreset()</code></td><td><code>ApplyPreset()</code></td><td><code>Apply preset</code></td></tr>
-            </tbody>
-        </table>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The convention</h3>
+        <p>
+            Mark a method named <code>OnXxx</code> with <code>[BlexAction]</code>. The generator emits a
+            public <code>Xxx(...)</code> wrapper that runs your method inside a dispatch: all the
+            mutations it makes are folded into one notification and one time-travel entry.
+        </p>
+
+        <CodeBlock Code="@Basic" />
+        <CodeBlock Code="@BasicGenerated" Title="Generated" />
     </div>
-    <p>
-        In other words: a name containing spaces (or anything else illegal in an identifier, or a C#
-        keyword) is treated purely as a display label, and the method name still comes from the
-        <code>On</code> prefix. A method that neither starts with <code>On</code> nor supplies a
-        usable name is <code>BLEX002</code>.
-    </p>
-
-    <h2>Arguments become the payload</h2>
-    <p>
-        Action parameters are captured as name/value pairs and travel with the action to middleware,
-        subscribers, the test harness and the DevTools monitor. Nothing to declare.
-    </p>
-
-    <CodeBlock Code="@Args" />
-
-    <p>
-        Capture is skipped entirely when nothing is observing - the generated wrapper checks
-        <code>IsObserved</code> first, so an app with no middleware, no DevTools and no subscribers
-        pays nothing for the payload.
-    </p>
-
-    <p>Parameter rules:</p>
-    <ul>
-        <li>Default values and <code>params</code> are preserved on the wrapper.</li>
-        <li><code>ref</code>, <code>out</code> and <code>in</code> parameters are rejected - the wrapper has to capture them by value (<code>BLEX013</code>).</li>
-        <li>Generic action methods are rejected; the wrapper cannot carry type parameters (<code>BLEX014</code>).</li>
-    </ul>
-
-    <h2>Batching</h2>
-    <p>
-        This is the point of actions. Assigning three fields directly produces three actions and
-        three renders; doing it inside one action produces one of each.
-    </p>
-
-    <DemoCard Title="Three ways to set the same two fields"
-              Description="Watch the notification counter - and the Inspector's action feed - after each button."
-              Source="@BatchSource">
-        <div class="readout">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Step</span>
-                <span class="readout__value">@Counter.Step</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Notifications from last click</span>
-                <span class="readout__value">@_lastBatchNotifications</span>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Naming</h3>
+        <p>
+            The wrapper name comes from the method name with the <code>On</code> prefix stripped, or from
+            <code>[BlexAction(Name = "…")]</code>. The <code>Name</code> is used in two different ways
+            depending on whether it is a valid C# identifier:
+        </p>
+
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>Declaration</th><th>Method you call</th><th>Label in DevTools / history</th></tr></thead>
+                <tbody>
+                    <tr><td><code>[BlexAction] void OnIncrement()</code></td><td><code>Increment()</code></td><td><code>Increment</code></td></tr>
+                    <tr><td><code>[BlexAction(Name = "Bump")] void OnIncrement()</code></td><td><code>Bump()</code></td><td><code>Bump</code></td></tr>
+                    <tr><td><code>[BlexAction(Name = "Apply preset")] void OnApplyPreset()</code></td><td><code>ApplyPreset()</code></td><td><code>Apply preset</code></td></tr>
+                </tbody>
+            </table>
+        </div>
+        <p>
+            In other words: a name containing spaces (or anything else illegal in an identifier, or a C#
+            keyword) is treated purely as a display label, and the method name still comes from the
+            <code>On</code> prefix. A method that neither starts with <code>On</code> nor supplies a
+            usable name is <code>BLEX002</code>.
+        </p>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Arguments become the payload</h3>
+        <p>
+            Action parameters are captured as name/value pairs and travel with the action to middleware,
+            subscribers, the test harness and the DevTools monitor. Nothing to declare.
+        </p>
+
+        <CodeBlock Code="@Args" />
+
+        <p>
+            Capture is skipped entirely when nothing is observing - the generated wrapper checks
+            <code>IsObserved</code> first, so an app with no middleware, no DevTools and no subscribers
+            pays nothing for the payload.
+        </p>
+
+        <p>Parameter rules:</p>
+        <ul class="bb-detail-list">
+            <li>Default values and <code>params</code> are preserved on the wrapper.</li>
+            <li><code>ref</code>, <code>out</code> and <code>in</code> parameters are rejected - the wrapper has to capture them by value (<code>BLEX013</code>).</li>
+            <li>Generic action methods are rejected; the wrapper cannot carry type parameters (<code>BLEX014</code>).</li>
+        </ul>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Batching</h3>
+        <p>
+            This is the point of actions. Assigning three fields directly produces three actions and
+            three renders; doing it inside one action produces one of each.
+        </p>
+
+        <DemoCard Title="Three ways to set the same two fields"
+                  Description="Watch the notification counter - and the Inspector's action feed - after each button."
+                  Source="@BatchSource">
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Step</span>
+                    <span class="bb-stat-value">@Counter.Step</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Notifications from last click</span>
+                    <span class="bb-stat-value">@_lastBatchNotifications</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Actions from last click</span>
+                    <span class="bb-stat-value">@_lastBatchActions</span>
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Actions from last click</span>
-                <span class="readout__value">@_lastBatchActions</span>
+            <div class="bb-toolbar">
+                <button class="btn demo-btn-danger" @onclick="DirectAssignment">Two direct assignments</button>
+                <button class="btn btn-primary" @onclick="ViaAction">One [BlexAction] method</button>
+                <button class="btn btn-primary" @onclick="ViaBatch">One Batch(…) call</button>
+                <button class="btn btn-secondary" @onclick="Counter.ResetState">ResetState()</button>
             </div>
-        </div>
-        <div class="row" style="margin-top:0.9rem">
-            <button class="btn btn-danger" @onclick="DirectAssignment">Two direct assignments</button>
-            <button class="btn btn-primary" @onclick="ViaAction">One [BlexAction] method</button>
-            <button class="btn btn-primary" @onclick="ViaBatch">One Batch(…) call</button>
-            <button class="btn btn-ghost" @onclick="Counter.ResetState">ResetState()</button>
-        </div>
-        <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">
-            The first button dispatches <code>Set Count</code> and <code>Set Step</code> separately.
-            The other two dispatch exactly one action and render once.
+            <p class="bb-card-desc">
+                The first button dispatches <code>Set Count</code> and <code>Set Step</code> separately.
+                The other two dispatch exactly one action and render once.
+            </p>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Direct assignment: the "Set X" action</h3>
+        <p>
+            Generated properties have public setters, and assigning one from outside any action is still
+            a first-class action named <code>Set X</code>, carrying the assigned value as its payload. It
+            is vetoable by middleware, recorded for undo/redo and visible in DevTools - so nothing can
+            change state behind the pipeline's back.
+        </p>
+        <CodeBlock Code="@SetX" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Batch: ad-hoc grouping</h3>
+        <p>
+            When the grouping is a caller's concern rather than the store's, <code>Batch</code> wraps any
+            set of mutations into one named action - Pinia's <code>$patch</code> or MobX's
+            <code>runInAction</code>.
+        </p>
+        <CodeBlock Code="@BatchApi" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> ResetState</h3>
+        <p>
+            Every store snapshots itself the first time it is registered with the manager.
+            <code>ResetState()</code> restores that snapshot as a normal <code>ResetState</code> action:
+            vetoable, observable, persisted and undoable. It is a no-op on a store that was never
+            registered, and equally a no-op on a store that is <em>already</em> holding its initial state -
+            resetting an untouched form notifies nobody, writes nothing and adds no undo step, the same
+            rule every other mutation in Blex follows.
         </p>
-    </DemoCard>
-
-    <h2>Direct assignment: the "Set X" action</h2>
-    <p>
-        Generated properties have public setters, and assigning one from outside any action is still
-        a first-class action named <code>Set X</code>, carrying the assigned value as its payload. It
-        is vetoable by middleware, recorded for undo/redo and visible in DevTools - so nothing can
-        change state behind the pipeline's back.
-    </p>
-    <CodeBlock Code="@SetX" />
-
-    <h2>Batch: ad-hoc grouping</h2>
-    <p>
-        When the grouping is a caller's concern rather than the store's, <code>Batch</code> wraps any
-        set of mutations into one named action - Pinia's <code>$patch</code> or MobX's
-        <code>runInAction</code>.
-    </p>
-    <CodeBlock Code="@BatchApi" />
-
-    <h2>ResetState</h2>
-    <p>
-        Every store snapshots itself the first time it is registered with the manager.
-        <code>ResetState()</code> restores that snapshot as a normal <code>ResetState</code> action:
-        vetoable, observable, persisted and undoable. It is a no-op on a store that was never
-        registered, and equally a no-op on a store that is <em>already</em> holding its initial state -
-        resetting an untouched form notifies nobody, writes nothing and adds no undo step, the same
-        rule every other mutation in Blex follows.
-    </p>
-    <CodeBlock Code="@Reset" />
-
-    <p>
-        <code>BlexManager.ResetAll()</code> does the same across every registered store - the usual
-        sign-out move. Each store resets as its own action, so middleware can exempt individual
-        stores and DevTools shows one entry per store rather than one opaque global wipe.
-    </p>
-    <CodeBlock Code="@ResetAll" Title="Application-wide reset" Compact="true" />
-
-    <h2>Async actions</h2>
-    <p>
-        An <code>[BlexAction]</code> may return <code>Task</code> or <code>ValueTask</code>. State changes
-        made before and after an <code>await</code> update the UI as they happen, but the whole
-        operation is recorded as a single action.
-    </p>
-    <CodeBlock Code="@AsyncAction" />
-
-    <p>
-        If what you are writing is a side-effect with a loading and error lifecycle, reach for
-        <a href="effects"><code>[BlexEffect]</code></a> instead - it generates all of that for you.
-    </p>
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="A store is owned by its in-flight async action">
-        <p style="margin-bottom:0">
-            Dispatch is single-threaded, matching Blazor's rendering model. While an async action is
-            awaiting, its store's record depth stays raised - so a mutation made from
-            <em>elsewhere</em> during that window is attributed to the in-flight action instead of
-            being recorded as its own. Treat a store as owned by its running async action until it
-            completes.
+        <CodeBlock Code="@Reset" />
+
+        <p>
+            <code>BlexManager.ResetAll()</code> does the same across every registered store - the usual
+            sign-out move. Each store resets as its own action, so middleware can exempt individual
+            stores and DevTools shows one entry per store rather than one opaque global wipe.
+        </p>
+        <CodeBlock Code="@ResetAll" Title="Application-wide reset" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Async actions</h3>
+        <p>
+            An <code>[BlexAction]</code> may return <code>Task</code> or <code>ValueTask</code>. State changes
+            made before and after an <code>await</code> update the UI as they happen, but the whole
+            operation is recorded as a single action.
+        </p>
+        <CodeBlock Code="@AsyncAction" />
+
+        <p>
+            If what you are writing is a side-effect with a loading and error lifecycle, reach for
+            <a href="effects"><code>[BlexEffect]</code></a> instead - it generates all of that for you.
         </p>
-    </Callout>
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Never async void">
-        <p style="margin-bottom:0">
-            An <code>async void</code> action cannot be awaited or recorded correctly, so it is a
-            hard error (<code>BLEX010</code>). Return <code>Task</code> or <code>ValueTask</code>.
-            Similarly, an action that returns a <em>value</em> gets warning <code>BLEX011</code>,
-            because the generated wrapper discards it - put the result in a <code>[BlexState]</code>
-            field instead.
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="A store is owned by its in-flight async action">
+            <p>
+                Dispatch is single-threaded, matching Blazor's rendering model. While an async action is
+                awaiting, its store's record depth stays raised - so a mutation made from
+                <em>elsewhere</em> during that window is attributed to the in-flight action instead of
+                being recorded as its own. Treat a store as owned by its running async action until it
+                completes.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Never async void">
+            <p>
+                An <code>async void</code> action cannot be awaited or recorded correctly, so it is a
+                hard error (<code>BLEX010</code>). Return <code>Task</code> or <code>ValueTask</code>.
+                Similarly, an action that returns a <em>value</em> gets warning <code>BLEX011</code>,
+                because the generated wrapper discards it - put the result in a <code>[BlexState]</code>
+                field instead.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What a dispatch actually does</h3>
+        <ol class="bb-detail-list">
+            <li>Runs every middleware's <code>BeforeAction</code>. If one calls <code>Cancel()</code>, the action stops here - nothing mutates.</li>
+            <li>Raises the record and notify depth, then runs your method body. Nested actions fold into the outermost one.</li>
+            <li>On completion, invalidates computed values and raises <code>StateChanged</code> once.</li>
+            <li>Records the action: middleware <code>OnAction</code> hooks run, then DevTools receives it, then subscribers.</li>
+        </ol>
+        <p>
+            The global state snapshot attached to an action is captured <em>lazily</em>, on first access.
+            Observers that never read it - persistence, for instance - never pay to serialize the whole
+            tree. When nothing at all is observing, the recording step is skipped outright.
         </p>
-    </Callout>
-
-    <h2>What a dispatch actually does</h2>
-    <ol>
-        <li>Runs every middleware's <code>BeforeAction</code>. If one calls <code>Cancel()</code>, the action stops here - nothing mutates.</li>
-        <li>Raises the record and notify depth, then runs your method body. Nested actions fold into the outermost one.</li>
-        <li>On completion, invalidates computed values and raises <code>StateChanged</code> once.</li>
-        <li>Records the action: middleware <code>OnAction</code> hooks run, then DevTools receives it, then subscribers.</li>
-    </ol>
-    <p>
-        The global state snapshot attached to an action is captured <em>lazily</em>, on first access.
-        Observers that never read it - persistence, for instance - never pay to serialize the whole
-        tree. When nothing at all is observing, the recording step is skipped outright.
-    </p>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/ApiReference.razor b/src/Utilities/Blex/Demo/Client/Pages/ApiReference.razor
index e7c63b27911..b87f8a7fa94 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/ApiReference.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/ApiReference.razor
@@ -4,110 +4,134 @@
          Lead="Every public type Blex ships, grouped by assembly and namespace, with a pointer to the page that explains it.">
 
     <Callout Kind="Callout.CalloutKind.Note">
-        <p style="margin-bottom:0">
+        <p>
             Members are documented in depth on the topic pages - this page is the index. Everything
             here is also XML-documented, so IntelliSense carries the same text.
         </p>
     </Callout>
 
-    <h2>Blex - attributes</h2>
-    <p>Namespace <code>Bit.Blex</code>. These are the entire authoring surface of a store.</p>
-    <ApiTable Rows="@Attributes" MemberHeader="Type" />
-
-    <CodeBlock Code="@AttributeSummary" Title="At a glance" />
-
-    <h2>Blex - core</h2>
-    <ApiTable Rows="@Core" MemberHeader="Type" />
-
-    <h2>Blex - middleware</h2>
-    <ApiTable Rows="@MiddlewareTypes" MemberHeader="Type" />
-
-    <h2>Blex - collections</h2>
-    <ApiTable Rows="@Collections" MemberHeader="Type" />
-
-    <h2>Blex - persistence</h2>
-    <ApiTable Rows="@PersistenceTypes" MemberHeader="Type" />
-
-    <h2>Blex - history</h2>
-    <ApiTable Rows="@HistoryTypes" MemberHeader="Type" />
-
-    <h2>Blex - extension methods</h2>
-    <ApiTable Rows="@Extensions" MemberHeader="Type" />
-
-    <h2>Blex - Blazor</h2>
-    <p>Namespace <code>Bit.Blex.Blazor</code>, in the same <code>Bit.Blex</code> package. Everything that touches JavaScript or the Blazor render tree lives here; the rest of Blex never does.</p>
-    <ApiTable Rows="@BlazorTypes" MemberHeader="Type" />
-
-    <h2>Bit.Blex.Testing</h2>
-    <p>Namespace <code>Bit.Blex.Testing</code>.</p>
-    <ApiTable Rows="@TestingTypes" MemberHeader="Type" />
-
-    <h2>Generated members, by declaration</h2>
-    <p>What the generator adds to your partial class, for each thing you declare.</p>
-    <div class="table-scroll">
-        <table>
-            <thead><tr><th>You declare</th><th>Generated</th></tr></thead>
-            <tbody>
-                <tr>
-                    <td><code>[BlexStore]</code> on <code>partial class Foo</code></td>
-                    <td>
-                        <code>partial class Foo : BlexStoreBase</code>,
-                        <code>override string Name</code>,
-                        <code>override JsonObject SerializeState()</code>,
-                        <code>override void DeserializeState(JsonObject)</code>
-                    </td>
-                </tr>
-                <tr>
-                    <td><code>[BlexStore(Persist = true)]</code></td>
-                    <td><code>override bool Persist =&gt; true</code></td>
-                </tr>
-                <tr>
-                    <td><code>[BlexState] private T _foo;</code></td>
-                    <td><code>public T Foo { get; set; }</code> - the setter routes through <code>SetState</code>; the field is included in both snapshot methods</td>
-                </tr>
-                <tr>
-                    <td><code>[BlexComputed] T ComputeFoo()</code></td>
-                    <td><code>public T Foo { get; }</code> plus <code>__FooValid</code> / <code>__FooValue</code>, and an entry in <code>InvalidateComputed()</code></td>
-                </tr>
-                <tr>
-                    <td><code>[BlexAction] void OnFoo(A a)</code></td>
-                    <td><code>public void Foo(A a)</code></td>
-                </tr>
-                <tr>
-                    <td><code>[BlexAction] Task OnFoo(A a)</code></td>
-                    <td><code>public Task Foo(A a)</code></td>
-                </tr>
-                <tr>
-                    <td><code>[BlexEffect] Task OnFoo(A a)</code></td>
-                    <td>
-                        <code>public Task Foo(A a)</code>,
-                        <code>public bool FooIsLoading</code>,
-                        <code>public Exception? FooError</code>
-                    </td>
-                </tr>
-                <tr>
-                    <td><code>[BlexEffect] Task OnFoo(A a, CancellationToken ct)</code></td>
-                    <td>the above, plus <code>public void CancelFoo()</code> - and note the token is <em>not</em> on the public signature</td>
-                </tr>
-            </tbody>
-        </table>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Blex - attributes</h3>
+        <p>Namespace <code>Bit.Blex</code>. These are the entire authoring surface of a store.</p>
+        <ApiTable Rows="@Attributes" MemberHeader="Type" />
+
+        <CodeBlock Code="@AttributeSummary" Title="At a glance" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Blex - core</h3>
+        <ApiTable Rows="@Core" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Blex - middleware</h3>
+        <ApiTable Rows="@MiddlewareTypes" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Blex - collections</h3>
+        <ApiTable Rows="@Collections" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Blex - persistence</h3>
+        <ApiTable Rows="@PersistenceTypes" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Blex - history</h3>
+        <ApiTable Rows="@HistoryTypes" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Blex - extension methods</h3>
+        <ApiTable Rows="@Extensions" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Blex - Blazor</h3>
+        <p>Namespace <code>Bit.Blex.Blazor</code>, in the same <code>Bit.Blex</code> package. Everything that touches JavaScript or the Blazor render tree lives here; the rest of Blex never does.</p>
+        <ApiTable Rows="@BlazorTypes" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Bit.Blex.Testing</h3>
+        <p>Namespace <code>Bit.Blex.Testing</code>.</p>
+        <ApiTable Rows="@TestingTypes" MemberHeader="Type" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Generated members, by declaration</h3>
+        <p>What the generator adds to your partial class, for each thing you declare.</p>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>You declare</th><th>Generated</th></tr></thead>
+                <tbody>
+                    <tr>
+                        <td><code>[BlexStore]</code> on <code>partial class Foo</code></td>
+                        <td>
+                            <code>partial class Foo : BlexStoreBase</code>,
+                            <code>override string Name</code>,
+                            <code>override JsonObject SerializeState()</code>,
+                            <code>override void DeserializeState(JsonObject)</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><code>[BlexStore(Persist = true)]</code></td>
+                        <td><code>override bool Persist =&gt; true</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>[BlexState] private T _foo;</code></td>
+                        <td><code>public T Foo { get; set; }</code> - the setter routes through <code>SetState</code>; the field is included in both snapshot methods</td>
+                    </tr>
+                    <tr>
+                        <td><code>[BlexComputed] T ComputeFoo()</code></td>
+                        <td><code>public T Foo { get; }</code> plus <code>__FooValid</code> / <code>__FooValue</code>, and an entry in <code>InvalidateComputed()</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>[BlexAction] void OnFoo(A a)</code></td>
+                        <td><code>public void Foo(A a)</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>[BlexAction] Task OnFoo(A a)</code></td>
+                        <td><code>public Task Foo(A a)</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>[BlexEffect] Task OnFoo(A a)</code></td>
+                        <td>
+                            <code>public Task Foo(A a)</code>,
+                            <code>public bool FooIsLoading</code>,
+                            <code>public Exception? FooError</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><code>[BlexEffect] Task OnFoo(A a, CancellationToken ct)</code></td>
+                        <td>the above, plus <code>public void CancelFoo()</code> - and note the token is <em>not</em> on the public signature</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Reserved names</h3>
+        <p>
+            A generated member may not take one of these - they are inherited from <code>BlexStoreBase</code>
+            or emitted by the generator itself. Collisions are reported as <code>BLEX005</code>.
+        </p>
+        <CodeBlock Code="@Reserved" Language="text" Title="Reserved" />
     </div>
 
-    <h2>Reserved names</h2>
-    <p>
-        A generated member may not take one of these - they are inherited from <code>BlexStoreBase</code>
-        or emitted by the generator itself. Collisions are reported as <code>BLEX005</code>.
-    </p>
-    <CodeBlock Code="@Reserved" Language="text" Title="Reserved" Compact="true" />
-
-    <h2>JSON conventions</h2>
-    <p>
-        Snapshots use <code>BlexJson.Options</code>: <code>JsonSerializerDefaults.Web</code>,
-        case-insensitive property matching and enums written as strings. Slices are keyed by the
-        generated <em>property</em> name (<code>Count</code>, not <code>_count</code>), and the global
-        tree is keyed by store name.
-    </p>
-    <CodeBlock Code="@JsonShape" Language="json" />
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> JSON conventions</h3>
+        <p>
+            Snapshots use <code>BlexJson.Options</code>: <code>JsonSerializerDefaults.Web</code>,
+            case-insensitive property matching and enums written as strings. Slices are keyed by the
+            generated <em>property</em> name (<code>Count</code>, not <code>_count</code>), and the global
+            tree is keyed by store name.
+        </p>
+        <CodeBlock Code="@JsonShape" Language="json" />
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Computed.razor b/src/Utilities/Blex/Demo/Client/Pages/Computed.razor
index 63614add83a..3dfe788f87b 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Computed.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Computed.razor
@@ -5,121 +5,131 @@
 <DocPage Href="computed" Title="Computed state"
          Lead="Derived values that recompute only when they have to, and invalidate themselves whenever state changes.">
 
-    <h2>The convention</h2>
-    <p>
-        Mark a parameterless method named <code>ComputeXxx()</code> or <code>GetXxx()</code> with
-        <code>[BlexComputed]</code> and the generator emits a memoized public property <code>Xxx</code>.
-        The value is calculated on first read, cached, and thrown away the moment any
-        <code>[BlexState]</code> field on that store changes.
-    </p>
-
-    <CodeBlock Code="@Basic" />
-
-    <p>Which becomes, in the generated partial:</p>
-    <CodeBlock Code="@Generated" Title="Generated" />
-
-    <h2>Memoization in practice</h2>
-    <p>
-        Reading a computed property ten times evaluates it once. Only a state change makes it stale.
-        The counters below are incremented <em>inside</em> the compute methods, so they show exactly
-        how often each one actually ran.
-    </p>
-
-    <DemoCard Title="Count the evaluations"
-              Description="Read the values repeatedly - the counters stay put. Change the state and they tick over exactly once."
-              Source="@DemoSource">
-        <div class="readout">
-            <div class="readout__item">
-                <span class="readout__label">Subtotal</span>
-                <span class="readout__value">@Cart.Subtotal.ToString("C")</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Total</span>
-                <span class="readout__value readout__value--accent">@Cart.Total.ToString("C")</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Items</span>
-                <span class="readout__value">@Cart.ItemCount</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Subtotal evaluated</span>
-                <span class="readout__value">@Cart.SubtotalEvaluations×</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Total evaluated</span>
-                <span class="readout__value">@Cart.TotalEvaluations×</span>
-            </div>
-        </div>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The convention</h3>
+        <p>
+            Mark a parameterless method named <code>ComputeXxx()</code> or <code>GetXxx()</code> with
+            <code>[BlexComputed]</code> and the generator emits a memoized public property <code>Xxx</code>.
+            The value is calculated on first read, cached, and thrown away the moment any
+            <code>[BlexState]</code> field on that store changes.
+        </p>
 
-        <div class="row" style="margin-top:0.9rem">
-            <button class="btn" @onclick="ReadTenTimes">Read both 10× (no state change)</button>
-            <button class="btn btn-primary" @onclick="() => Cart.SetDiscount(Cart.DiscountRate == 0m ? 0.15m : 0m)">
-                Toggle 15% discount
-            </button>
-            <button class="btn btn-ghost" @onclick="ResetCounters">Reset counters</button>
-        </div>
+        <CodeBlock Code="@Basic" />
 
-        @if (_lastRead is not null)
-        {
-            <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">@_lastRead</p>
-        }
+        <p>Which becomes, in the generated partial:</p>
+        <CodeBlock Code="@Generated" Title="Generated" />
+    </div>
 
-        <ul class="list" style="margin-top:0.9rem">
-            @foreach (var line in Cart.Lines)
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Memoization in practice</h3>
+        <p>
+            Reading a computed property ten times evaluates it once. Only a state change makes it stale.
+            The counters below are incremented <em>inside</em> the compute methods, so they show exactly
+            how often each one actually ran.
+        </p>
+
+        <DemoCard Title="Count the evaluations"
+                  Description="Read the values repeatedly - the counters stay put. Change the state and they tick over exactly once."
+                  Source="@DemoSource">
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Subtotal</span>
+                    <span class="bb-stat-value">@Cart.Subtotal.ToString("C")</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Total</span>
+                    <span class="bb-stat-value demo-accent">@Cart.Total.ToString("C")</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Items</span>
+                    <span class="bb-stat-value">@Cart.ItemCount</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Subtotal evaluated</span>
+                    <span class="bb-stat-value">@Cart.SubtotalEvaluations×</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Total evaluated</span>
+                    <span class="bb-stat-value">@Cart.TotalEvaluations×</span>
+                </div>
+            </div>
+
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" @onclick="ReadTenTimes">Read both 10× (no state change)</button>
+                <button class="btn btn-primary" @onclick="() => Cart.SetDiscount(Cart.DiscountRate == 0m ? 0.15m : 0m)">
+                    Toggle 15% discount
+                </button>
+                <button class="btn btn-secondary" @onclick="ResetCounters">Reset counters</button>
+            </div>
+
+            @if (_lastRead is not null)
             {
-                <li>
-                    <span class="list__name">@line.Name</span>
-                    <span class="list__meta">@line.UnitPrice.ToString("C") each</span>
-                    <button class="btn btn-sm" @onclick="() => Cart.SetQuantity(line.Sku, line.Quantity - 1)">−</button>
-                    <span style="min-width:1.5rem;text-align:center">@line.Quantity</span>
-                    <button class="btn btn-sm" @onclick="() => Cart.SetQuantity(line.Sku, line.Quantity + 1)">+</button>
-                </li>
+                <p class="bb-card-desc">@_lastRead</p>
             }
-        </ul>
-    </DemoCard>
-
-    <h2>Composing computed values</h2>
-    <p>
-        A computed method may read other computed properties. <code>ComputeTotal()</code> above reads
-        <code>Subtotal</code>, so the first read of <code>Total</code> after a change evaluates both,
-        in dependency order, with no wiring on your part.
-    </p>
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="Invalidation is store-wide, not per-dependency">
-        <p style="margin-bottom:0">
-            Blex does not track which fields a computed method touched. <em>Any</em> state change
-            on the store invalidates <em>every</em> computed value on it. That keeps invalidation
-            correct and free of bookkeeping, but it means an expensive computation on a busy store
-            recomputes more often than strictly necessary. If that matters, split the store, or cache
-            inside the method against the specific inputs.
+
+            <ul class="demo-list">
+                @foreach (var line in Cart.Lines)
+                {
+                    <li>
+                        <span class="demo-list-name">@line.Name</span>
+                        <span class="demo-list-meta">@line.UnitPrice.ToString("C") each</span>
+                        <button class="btn btn-secondary" @onclick="() => Cart.SetQuantity(line.Sku, line.Quantity - 1)">−</button>
+                        <span class="demo-qty">@line.Quantity</span>
+                        <button class="btn btn-secondary" @onclick="() => Cart.SetQuantity(line.Sku, line.Quantity + 1)">+</button>
+                    </li>
+                }
+            </ul>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Composing computed values</h3>
+        <p>
+            A computed method may read other computed properties. <code>ComputeTotal()</code> above reads
+            <code>Subtotal</code>, so the first read of <code>Total</code> after a change evaluates both,
+            in dependency order, with no wiring on your part.
         </p>
-    </Callout>
-
-    <h2>Rules</h2>
-    <ul>
-        <li>The method must be <strong>parameterless</strong> - a computed value backs a property, so there is nowhere to pass arguments (<code>BLEX004</code>).</li>
-        <li>The name must start with <code>Compute</code> or <code>Get</code> and have something after it (<code>BLEX003</code>).</li>
-        <li>It must be an instance method, not <code>static</code> (<code>BLEX008</code>).</li>
-        <li>The generated property name must not collide with anything else on the store (<code>BLEX005</code>).</li>
-        <li>Any return type is allowed, including collections and records.</li>
-    </ul>
-
-    <h2>Computed values are not serialized</h2>
-    <p>
-        Only <code>[BlexState]</code> fields go into <code>SerializeState()</code>. Computed values are
-        derived, so they are recalculated after a restore rather than stored - which means a
-        time-travel jump or a rehydrate can never leave a derived value out of sync with the state it
-        came from.
-    </p>
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Keep compute methods pure">
-        <p style="margin-bottom:0">
-            A compute method should read state and return a value. Do not mutate state or start async
-            work in one: it runs lazily, at unpredictable times, from inside a property getter.
-            (The evaluation counters in the demo above break that rule deliberately, to make the
-            memoization visible.)
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="Invalidation is store-wide, not per-dependency">
+            <p>
+                Blex does not track which fields a computed method touched. <em>Any</em> state change
+                on the store invalidates <em>every</em> computed value on it. That keeps invalidation
+                correct and free of bookkeeping, but it means an expensive computation on a busy store
+                recomputes more often than strictly necessary. If that matters, split the store, or cache
+                inside the method against the specific inputs.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Rules</h3>
+        <ul class="bb-detail-list">
+            <li>The method must be <strong>parameterless</strong> - a computed value backs a property, so there is nowhere to pass arguments (<code>BLEX004</code>).</li>
+            <li>The name must start with <code>Compute</code> or <code>Get</code> and have something after it (<code>BLEX003</code>).</li>
+            <li>It must be an instance method, not <code>static</code> (<code>BLEX008</code>).</li>
+            <li>The generated property name must not collide with anything else on the store (<code>BLEX005</code>).</li>
+            <li>Any return type is allowed, including collections and records.</li>
+        </ul>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Computed values are not serialized</h3>
+        <p>
+            Only <code>[BlexState]</code> fields go into <code>SerializeState()</code>. Computed values are
+            derived, so they are recalculated after a restore rather than stored - which means a
+            time-travel jump or a rehydrate can never leave a derived value out of sync with the state it
+            came from.
         </p>
-    </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Keep compute methods pure">
+            <p>
+                A compute method should read state and return a value. Do not mutate state or start async
+                work in one: it runs lazily, at unpredictable times, from inside a property getter.
+                (The evaluation counters in the demo above break that rule deliberately, to make the
+                memoization visible.)
+            </p>
+        </Callout>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/CrossStore.razor b/src/Utilities/Blex/Demo/Client/Pages/CrossStore.razor
index a900d77e418..49005eac56b 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/CrossStore.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/CrossStore.razor
@@ -7,200 +7,217 @@
 <DocPage Href="cross-store" Title="Cross-store coordination"
          Lead="Let one store react to another's actions without either of them knowing the other exists.">
 
-    <h2>BlexManager</h2>
-    <p>
-        The manager aggregates every registered store into one global state tree, runs the middleware
-        pipeline, feeds the DevTools bridge and applies time-travel snapshots. Most application code
-        never touches it - you inject stores. You reach for the manager when you need coordination,
-        a global snapshot, or dynamic registration.
-    </p>
-
-    <ApiTable Title="Registry" Rows="@RegistryRows" />
-    <ApiTable Title="Observation" Rows="@ObservationRows" />
-    <ApiTable Title="Global state" Rows="@StateRows" />
-
-    <h2>Subscribing to actions</h2>
-    <p>
-        <code>Subscribe</code> and its filtered variants are the building block for coordination:
-        react to one store's action and drive another. Handler exceptions are isolated and routed to
-        <a href="errors"><code>OnError</code></a>, so a misbehaving reactor cannot break dispatch for
-        everyone else.
-    </p>
-
-    <CodeBlock Code="@SubscribeSample" />
-
-    <DemoCard Title="Orders notify, without knowing about notifications"
-              Description="Placing an order dispatches only orders/Place. A manager subscription - registered by this page - turns it into a notification."
-              Source="@WiringSource">
-        <div class="row">
-            <input type="text" placeholder="Item" value="@_item" @oninput="OnItemInput" style="min-width:150px" />
-            <input type="number" min="1" max="99" value="@_qty" @oninput="OnQtyInput" style="width:80px" />
-            <button class="btn btn-primary" @onclick="Place" disabled="@string.IsNullOrWhiteSpace(_item)">Place order</button>
-            <button class="btn" @onclick="Orders.CancelLast" disabled="@(Orders.Count == 0)">Cancel last</button>
-            <button class="btn btn-ghost" @onclick="ClearBoth">Clear both</button>
-            <button class="btn btn-ghost" title="BlexManager.ResetAll()" @onclick="ResetEverything">ResetAll()</button>
-        </div>
-        <p class="small muted" style="margin-top:0.5rem;margin-bottom:0">@_resetNote</p>
-
-        <div class="grid grid--2" style="margin-top:0.9rem">
-            <div class="card">
-                <p class="card__title">orders <span class="card__num">@Orders.Count orders · @Orders.Units units</span></p>
-                @if (Orders.Orders.Count == 0)
-                {
-                    <p class="card__body">No orders yet.</p>
-                }
-                else
-                {
-                    <ul class="list">
-                        @foreach (var order in Orders.Orders)
-                        {
-                            <li><span class="list__name">#@order.Id @order.Item</span><span class="list__meta">×@order.Quantity</span></li>
-                        }
-                    </ul>
-                }
-            </div>
-            <div class="card">
-                <p class="card__title">notifications <span class="card__num">@Notifications.Unread unread</span></p>
-                @if (Notifications.Messages.Count == 0)
-                {
-                    <p class="card__body">Nothing yet.</p>
-                }
-                else
-                {
-                    <ul class="list">
-                        @foreach (var message in Notifications.Messages)
-                        {
-                            <li><span class="list__name">@message</span></li>
-                        }
-                    </ul>
-                }
-            </div>
-        </div>
-        <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">
-            The Inspector's feed shows both actions: <code>orders/Place</code> first, then
-            <code>notifications/Push</code> dispatched by the reactor.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> BlexManager</h3>
+        <p>
+            The manager aggregates every registered store into one global state tree, runs the middleware
+            pipeline, feeds the DevTools bridge and applies time-travel snapshots. Most application code
+            never touches it - you inject stores. You reach for the manager when you need coordination,
+            a global snapshot, or dynamic registration.
         </p>
-    </DemoCard>
-
-    <h2>The action context</h2>
-    <p>Every observer receives a <code>BlexActionContext</code> describing what just happened.</p>
-    <ApiTable Title="BlexActionContext" Rows="@ContextRows" />
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="Read GlobalState synchronously">
-        <p style="margin-bottom:0">
-            <code>GlobalState</code> is captured lazily on first access, because serializing every
-            store is expensive and most observers never need it. Read it <em>inside</em> your handler:
-            reading it later - after further actions have run - would capture their state instead.
-            Treat the returned tree as read-only; every observer of that action shares the instance.
-        </p>
-    </Callout>
-
-    <h2>Async reactors</h2>
-    <p>
-        <code>SubscribeAsync</code> lets a reactor start async work - typically an effect on another
-        store. The returned task is observed, so a failure is reported through <code>OnError</code>
-        rather than surfacing as an unobserved exception.
-    </p>
-    <CodeBlock Code="@AsyncSample" />
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Watch for reaction loops">
-        <p style="margin-bottom:0">
-            A reactor that dispatches an action which its own filter matches will recurse until the
-            stack gives out. Keep reactors one-directional, or guard them with a flag. Blex freezes
-            the in-flight snapshots of actions still being observed before a reactor's follow-up
-            action mutates state, so attribution stays correct - but it will not stop a genuine loop.
+
+        <ApiTable Title="Registry" Rows="@RegistryRows" />
+        <ApiTable Title="Observation" Rows="@ObservationRows" />
+        <ApiTable Title="Global state" Rows="@StateRows" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Subscribing to actions</h3>
+        <p>
+            <code>Subscribe</code> and its filtered variants are the building block for coordination:
+            react to one store's action and drive another. Handler exceptions are isolated and routed to
+            <a href="errors"><code>OnError</code></a>, so a misbehaving reactor cannot break dispatch for
+            everyone else.
         </p>
-    </Callout>
-
-    <h2>Derived values that span stores</h2>
-    <p>
-        A subscription answers "tell me when this changed". The other half of the problem is "give me
-        this value, cheaply, from several places at once" - and that is what
-        <code>[BlexComputed]</code> does inside one store. <code>CreateSelector</code> lifts it to
-        the manager: a lazy, memoized projection over the whole tree that recomputes at most once per
-        action, however many readers ask for it.
-    </p>
-    <CodeBlock Code="@SelectorSample" />
-
-    <DemoCard Title="One computation, three readers"
-              Description="Every card below reads the same selector. Place an order and watch the computation counter move once, not three times - and not at all until something reads it."
-              Source="@SelectorDemoSource">
-        <div class="row">
-            <button class="btn btn-primary" @onclick="PlaceOrder">Place an order</button>
-            <button class="btn" @onclick="Orders.CancelLast" disabled="@(Orders.Count == 0)">Cancel last</button>
-            <button class="btn btn-ghost" @onclick="ResetSelectorCounter">Reset counter</button>
-        </div>
-
-        <div class="grid grid--3" style="margin-top:0.9rem">
-            <div class="card">
-                <p class="card__title">Reader A <span class="card__num">@Summary.Value</span></p>
+
+        <CodeBlock Code="@SubscribeSample" />
+
+        <DemoCard Title="Orders notify, without knowing about notifications"
+                  Description="Placing an order dispatches only orders/Place. A manager subscription - registered by this page - turns it into a notification."
+                  Source="@WiringSource">
+            <div class="bb-toolbar">
+                <input type="text" placeholder="Item" value="@_item" @oninput="OnItemInput" class="demo-input-name" />
+                <input type="number" min="1" max="99" value="@_qty" @oninput="OnQtyInput" class="demo-input-qty" />
+                <button class="btn btn-primary" @onclick="Place" disabled="@string.IsNullOrWhiteSpace(_item)">Place order</button>
+                <button class="btn btn-secondary" @onclick="Orders.CancelLast" disabled="@(Orders.Count == 0)">Cancel last</button>
+                <button class="btn btn-secondary" @onclick="ClearBoth">Clear both</button>
+                <button class="btn btn-secondary" title="BlexManager.ResetAll()" @onclick="ResetEverything">ResetAll()</button>
             </div>
-            <div class="card">
-                <p class="card__title">Reader B <span class="card__num">@Summary.Value</span></p>
+            @if (_resetNote.Length > 0)
+            {
+                <p class="bb-card-desc">@_resetNote</p>
+            }
+
+            <div class="bb-grid">
+                <div class="bb-card">
+                    <p class="bb-card-title">orders <span class="bb-badge">@Orders.Count orders · @Orders.Units units</span></p>
+                    @if (Orders.Orders.Count == 0)
+                    {
+                        <p class="bb-card-desc">No orders yet.</p>
+                    }
+                    else
+                    {
+                        <ul class="demo-list">
+                            @foreach (var order in Orders.Orders)
+                            {
+                                <li><span class="demo-list-name">#@order.Id @order.Item</span><span class="demo-list-meta">×@order.Quantity</span></li>
+                            }
+                        </ul>
+                    }
+                </div>
+                <div class="bb-card">
+                    <p class="bb-card-title">notifications <span class="bb-badge">@Notifications.Unread unread</span></p>
+                    @if (Notifications.Messages.Count == 0)
+                    {
+                        <p class="bb-card-desc">Nothing yet.</p>
+                    }
+                    else
+                    {
+                        <ul class="demo-list">
+                            @foreach (var message in Notifications.Messages)
+                            {
+                                <li><span class="demo-list-name">@message</span></li>
+                            }
+                        </ul>
+                    }
+                </div>
             </div>
-            <div class="card">
-                <p class="card__title">Reader C <span class="card__num">@Summary.Value</span></p>
+            <p class="bb-card-desc">
+                The Inspector's feed shows both actions: <code>orders/Place</code> first, then
+                <code>notifications/Push</code> dispatched by the reactor.
+            </p>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The action context</h3>
+        <p>Every observer receives a <code>BlexActionContext</code> describing what just happened.</p>
+        <ApiTable Title="BlexActionContext" Rows="@ContextRows" />
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="Read GlobalState synchronously">
+            <p>
+                <code>GlobalState</code> is captured lazily on first access, because serializing every
+                store is expensive and most observers never need it. Read it <em>inside</em> your handler:
+                reading it later - after further actions have run - would capture their state instead.
+                Treat the returned tree as read-only; every observer of that action shares the instance.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Async reactors</h3>
+        <p>
+            <code>SubscribeAsync</code> lets a reactor start async work - typically an effect on another
+            store. The returned task is observed, so a failure is reported through <code>OnError</code>
+            rather than surfacing as an unobserved exception.
+        </p>
+        <CodeBlock Code="@AsyncSample" />
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Watch for reaction loops">
+            <p>
+                A reactor that dispatches an action which its own filter matches will recurse until the
+                stack gives out. Keep reactors one-directional, or guard them with a flag. Blex freezes
+                the in-flight snapshots of actions still being observed before a reactor's follow-up
+                action mutates state, so attribution stays correct - but it will not stop a genuine loop.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Derived values that span stores</h3>
+        <p>
+            A subscription answers "tell me when this changed". The other half of the problem is "give me
+            this value, cheaply, from several places at once" - and that is what
+            <code>[BlexComputed]</code> does inside one store. <code>CreateSelector</code> lifts it to
+            the manager: a lazy, memoized projection over the whole tree that recomputes at most once per
+            action, however many readers ask for it.
+        </p>
+        <CodeBlock Code="@SelectorSample" />
+
+        <DemoCard Title="One computation, three readers"
+                  Description="Every card below reads the same selector. Place an order and watch the computation counter move once, not three times - and not at all until something reads it."
+                  Source="@SelectorDemoSource">
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="PlaceOrder">Place an order</button>
+                <button class="btn btn-secondary" @onclick="Orders.CancelLast" disabled="@(Orders.Count == 0)">Cancel last</button>
+                <button class="btn btn-secondary" @onclick="ResetSelectorCounter">Reset counter</button>
             </div>
-        </div>
 
-        <div class="readout" style="margin-top:0.9rem">
-            <div class="readout__item">
-                <span class="readout__label">Projection ran</span>
-                <span class="readout__value readout__value--accent">@_selectorRuns time(s)</span>
+            <div class="bb-grid">
+                <div class="bb-card">
+                    <p class="bb-card-title">Reader A <span class="bb-badge">@Summary.Value</span></p>
+                </div>
+                <div class="bb-card">
+                    <p class="bb-card-title">Reader B <span class="bb-badge">@Summary.Value</span></p>
+                </div>
+                <div class="bb-card">
+                    <p class="bb-card-title">Reader C <span class="bb-badge">@Summary.Value</span></p>
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Renders of this page</span>
-                <span class="readout__value">@_renders</span>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Projection ran</span>
+                    <span class="bb-stat-value demo-accent">@_selectorRuns time(s)</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Renders of this page</span>
+                    <span class="bb-stat-value">@_renders</span>
+                </div>
             </div>
-        </div>
-    </DemoCard>
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Subscribe pushes, CreateSelector pulls">
-        <p style="margin-bottom:0">
-            <code>Subscribe(selector, …)</code> evaluates eagerly after every action so it can tell
-            one observer that the value moved - use it when something must <em>happen</em>.
-            <code>CreateSelector</code> evaluates lazily and shares the result - use it when
-            something must be <em>read</em>. An action whose result nobody reads costs a flag write.
-            Dispose the selector (or hand it to <code>OwnsSubscription</code>) to detach it.
-        </p>
-    </Callout>
-
-    <h2>Where to put the wiring</h2>
-    <p>Three practical options, in rough order of preference:</p>
-    <ul>
-        <li>
-            <strong>A component that owns the lifetime</strong> - <code>OwnsSubscription(...)</code>
-            in <code>OnInitialized</code>. Good when the coordination only matters while some part of
-            the UI is alive. This page does exactly that.
-        </li>
-        <li>
-            <strong>Middleware</strong> - register an <code>IBlexMiddleware</code> that reacts in
-            <code>OnAction</code>. Good for app-wide, always-on rules. See
-            <a href="middleware">Middleware</a>.
-        </li>
-        <li>
-            <strong>A coordinator service</strong> - a scoped service that subscribes in its
-            constructor and disposes its tokens. Resolve it once at startup so it exists.
-        </li>
-    </ul>
-
-    <h2>Dynamic registration</h2>
-    <p>
-        Stores register themselves when first resolved from DI, and
-        <code>&lt;BlexProvider&gt;</code> registers everything up front. For a lazily-loaded
-        feature you can register and unregister by hand. An unregistered store keeps working
-        standalone - its actions simply stop being observed.
-    </p>
-    <CodeBlock Code="@RegisterSample" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Single-threaded by design">
-        <p style="margin-bottom:0">
-            The manager is built for single-threaded dispatch, matching Blazor's rendering model. Its
-            internal lock protects the store registry and global-state capture only; the pipeline
-            itself - the sequence counter, middleware, DevTools - assumes actions are not dispatched
-            concurrently. If you dispatch from several threads, coordinate externally.
+        </DemoCard>
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Subscribe pushes, CreateSelector pulls">
+            <p>
+                <code>Subscribe(selector, …)</code> evaluates eagerly after every action so it can tell
+                one observer that the value moved - use it when something must <em>happen</em>.
+                <code>CreateSelector</code> evaluates lazily and shares the result - use it when
+                something must be <em>read</em>. An action whose result nobody reads costs a flag write.
+                Dispose the selector (or hand it to <code>OwnsSubscription</code>) to detach it.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Where to put the wiring</h3>
+        <p>Three practical options, in rough order of preference:</p>
+        <ul class="bb-detail-list">
+            <li>
+                <strong>A component that owns the lifetime</strong> - <code>OwnsSubscription(...)</code>
+                in <code>OnInitialized</code>. Good when the coordination only matters while some part of
+                the UI is alive. This page does exactly that.
+            </li>
+            <li>
+                <strong>Middleware</strong> - register an <code>IBlexMiddleware</code> that reacts in
+                <code>OnAction</code>. Good for app-wide, always-on rules. See
+                <a href="middleware">Middleware</a>.
+            </li>
+            <li>
+                <strong>A coordinator service</strong> - a scoped service that subscribes in its
+                constructor and disposes its tokens. Resolve it once at startup so it exists.
+            </li>
+        </ul>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Dynamic registration</h3>
+        <p>
+            Stores register themselves when first resolved from DI, and
+            <code>&lt;BlexProvider&gt;</code> registers everything up front. For a lazily-loaded
+            feature you can register and unregister by hand. An unregistered store keeps working
+            standalone - its actions simply stop being observed.
         </p>
-    </Callout>
+        <CodeBlock Code="@RegisterSample" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Single-threaded by design">
+            <p>
+                The manager is built for single-threaded dispatch, matching Blazor's rendering model. Its
+                internal lock protects the store registry and global-state capture only; the pipeline
+                itself - the sequence counter, middleware, DevTools - assumes actions are not dispatched
+                concurrently. If you dispatch from several threads, coordinate externally.
+            </p>
+        </Callout>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/DevTools.razor b/src/Utilities/Blex/Demo/Client/Pages/DevTools.razor
index cdbd5c8a15b..0e7827f3ff0 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/DevTools.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/DevTools.razor
@@ -7,228 +7,242 @@
 <DocPage Href="devtools" Title="DevTools & time travel"
          Lead="Every action streams into the Redux DevTools extension with its payload and the resulting state tree - and the slider rewinds your app.">
 
-    <h2>Getting connected</h2>
-    <ol>
-        <li>Install the <a href="https://github.com/reduxjs/redux-devtools" target="_blank" rel="noopener">Redux DevTools</a> browser extension.</li>
-        <li>Run the app with <code>&lt;BlexProvider&gt;</code> in place and <code>EnableDevTools</code> left at its default.</li>
-        <li>Open the browser devtools and switch to the <strong>Redux</strong> tab. The instance is named after <code>options.DevToolsName</code>.</li>
-        <li>Interact with the app. Every action arrives with its argument payload and the state that followed it.</li>
-        <li>Drag the slider, or use the jump buttons, to rewind the application live.</li>
-    </ol>
-
-    <CodeBlock Code="@Naming" FileName="Program.cs" />
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="This very page is connected">
-        <p style="margin-bottom:0">
-            If you have the extension installed, open it now and look for the instance named
-            <strong>Blex Docs</strong>. Then press the buttons below and jump around the timeline -
-            the demos on this site will rewind with it.
-        </p>
-    </Callout>
-
-    <DemoCard Title="Generate some history"
-              Description="Dispatch a few actions, then rewind them from the extension's timeline.">
-        <div class="row">
-            <button class="btn btn-primary" @onclick="Counter.Increment">counter/Increment</button>
-            <button class="btn" @onclick="() => Counter.SetStep(Counter.Step + 1)">counter/SetStep</button>
-            <button class="btn" @onclick="Settings.RotateToken">settings/RotateToken</button>
-            <button class="btn btn-ghost" @onclick="Counter.ResetState">counter/ResetState</button>
-        </div>
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Step</span>
-                <span class="readout__value">@Counter.Step</span>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Getting connected</h3>
+        <ol class="bb-detail-list">
+            <li>Install the <a href="https://github.com/reduxjs/redux-devtools" target="_blank" rel="noopener">Redux DevTools</a> browser extension.</li>
+            <li>Run the app with <code>&lt;BlexProvider&gt;</code> in place and <code>EnableDevTools</code> left at its default.</li>
+            <li>Open the browser devtools and switch to the <strong>Redux</strong> tab. The instance is named after <code>options.DevToolsName</code>.</li>
+            <li>Interact with the app. Every action arrives with its argument payload and the state that followed it.</li>
+            <li>Drag the slider, or use the jump buttons, to rewind the application live.</li>
+        </ol>
+
+        <CodeBlock Code="@Naming" FileName="Program.cs" />
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="This very page is connected">
+            <p>
+                If you have the extension installed, open it now and look for the instance named
+                <strong>Blex Docs</strong>. Then press the buttons below and jump around the timeline -
+                the demos on this site will rewind with it.
+            </p>
+        </Callout>
+
+        <DemoCard Title="Generate some history"
+                  Description="Dispatch a few actions, then rewind them from the extension's timeline.">
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="Counter.Increment">counter/Increment</button>
+                <button class="btn btn-secondary" @onclick="() => Counter.SetStep(Counter.Step + 1)">counter/SetStep</button>
+                <button class="btn btn-secondary" @onclick="Settings.RotateToken">settings/RotateToken</button>
+                <button class="btn btn-secondary" @onclick="Counter.ResetState">counter/ResetState</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">settings.Token (real value)</span>
-                <span class="readout__value" style="font-size:0.85rem">@Settings.Token</span>
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Step</span>
+                    <span class="bb-stat-value">@Counter.Step</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">settings.Token (real value)</span>
+                    <span class="bb-stat-value demo-stat-text">@Settings.Token</span>
+                </div>
             </div>
-        </div>
-        <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">
-            In the extension, that token reads <code>&lt;redacted&gt;</code> - this site registers
-            <code>options.RedactDevToolsKeys("Token")</code>.
+            <p class="bb-card-desc">
+                In the extension, that token reads <code>&lt;redacted&gt;</code> - this site registers
+                <code>options.RedactDevToolsKeys("Token")</code>.
+            </p>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What travels over the bridge</h3>
+        <p>
+            On connect, the manager sends the current tree as the initial state. After that, each
+            recorded action sends an action object and the resulting tree:
+        </p>
+        <CodeBlock Code="@Wire" Language="json" Title="What the extension receives" />
+        <p>
+            The state tree is keyed by store name - <code>counter</code>, <code>settings</code> and so on
+            - which is exactly what <code>BlexManager.CaptureGlobalState()</code> produces.
         </p>
-    </DemoCard>
-
-    <h2>What travels over the bridge</h2>
-    <p>
-        On connect, the manager sends the current tree as the initial state. After that, each
-        recorded action sends an action object and the resulting tree:
-    </p>
-    <CodeBlock Code="@Wire" Language="json" Title="What the extension receives" />
-    <p>
-        The state tree is keyed by store name - <code>counter</code>, <code>settings</code> and so on
-        - which is exactly what <code>BlexManager.CaptureGlobalState()</code> produces.
-    </p>
-
-    <h2>Messages Blex handles</h2>
-    <p>
-        Time-travel is driven by the extension sending messages back. <code>HandleDevToolsMessage</code>
-        interprets these:
-    </p>
-    <div class="table-scroll">
-        <table>
-            <thead><tr><th>Message</th><th>Effect</th></tr></thead>
-            <tbody>
-                <tr><td><code>JUMP_TO_STATE</code> / <code>JUMP_TO_ACTION</code></td><td>Applies the state the extension supplies - the slider and the jump buttons.</td></tr>
-                <tr><td><code>ROLLBACK</code></td><td>Reverts to the last committed snapshot, or to the state supplied with the message when nothing has been committed.</td></tr>
-                <tr><td><code>COMMIT</code></td><td>Takes the current state as the new baseline and re-initializes the monitor.</td></tr>
-                <tr><td><code>RESET</code></td><td>Restores the state captured when DevTools first connected, then re-initializes the monitor.</td></tr>
-                <tr><td><code>IMPORT_STATE</code></td><td>Applies the last computed state from an imported session.</td></tr>
-                <tr><td><code>PAUSE_RECORDING</code></td><td>Stops streaming actions to the monitor. The app keeps running: actions still apply, and still reach middleware and subscribers.</td></tr>
-                <tr><td><code>LOCK_CHANGES</code></td><td>Freezes the app - every action is vetoed until it is unlocked. Time-travel restores keep working, which is the point.</td></tr>
-            </tbody>
-        </table>
     </div>
-    <p>
-        Applying a snapshot goes through <code>RestoreGlobalState</code>, so it never records new
-        actions - the timeline you are scrubbing does not grow while you scrub it. A store whose
-        slice fails to deserialize is reported to <a href="errors"><code>OnError</code></a> and
-        skipped; the rest still restore.
-    </p>
-
-    <h3>Pause and lock</h3>
-    <p>
-        The monitor's two recording controls are different in kind, and the difference matters when
-        you are hunting a bug. <strong>Pause recording</strong> is about the <em>timeline</em>: the
-        app carries on exactly as before, it just stops filling the monitor with noise while you set
-        up the state you actually want to inspect. <strong>Lock changes</strong> is about the
-        <em>app</em>: every action is refused, so nothing can move underneath you while you scrub.
-    </p>
-    <p>
-        Both are readable from the manager, so the UI can tell the user why its buttons appear dead:
-    </p>
-    <CodeBlock Code="@PauseLock" />
-
-    <DemoCard Title="What the monitor's buttons do here"
-              Description="Open the Redux DevTools panel and press Pause recording or Lock changes, then use the counter. This card reads the manager's own flags."
-              Source="@PauseLockSource" SourceLanguage="razor">
-        <div class="row">
-            <button class="btn btn-primary" @onclick="Counter.Increment">Increment</button>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Messages Blex handles</h3>
+        <p>
+            Time-travel is driven by the extension sending messages back. <code>HandleDevToolsMessage</code>
+            interprets these:
+        </p>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>Message</th><th>Effect</th></tr></thead>
+                <tbody>
+                    <tr><td class="bb-table-key"><code>JUMP_TO_STATE</code> / <code>JUMP_TO_ACTION</code></td><td>Applies the state the extension supplies - the slider and the jump buttons.</td></tr>
+                    <tr><td class="bb-table-key"><code>ROLLBACK</code></td><td>Reverts to the last committed snapshot, or to the state supplied with the message when nothing has been committed.</td></tr>
+                    <tr><td class="bb-table-key"><code>COMMIT</code></td><td>Takes the current state as the new baseline and re-initializes the monitor.</td></tr>
+                    <tr><td class="bb-table-key"><code>RESET</code></td><td>Restores the state captured when DevTools first connected, then re-initializes the monitor.</td></tr>
+                    <tr><td class="bb-table-key"><code>IMPORT_STATE</code></td><td>Applies the last computed state from an imported session.</td></tr>
+                    <tr><td class="bb-table-key"><code>PAUSE_RECORDING</code></td><td>Stops streaming actions to the monitor. The app keeps running: actions still apply, and still reach middleware and subscribers.</td></tr>
+                    <tr><td class="bb-table-key"><code>LOCK_CHANGES</code></td><td>Freezes the app - every action is vetoed until it is unlocked. Time-travel restores keep working, which is the point.</td></tr>
+                </tbody>
+            </table>
         </div>
+        <p>
+            Applying a snapshot goes through <code>RestoreGlobalState</code>, so it never records new
+            actions - the timeline you are scrubbing does not grow while you scrub it. A store whose
+            slice fails to deserialize is reported to <a href="errors"><code>OnError</code></a> and
+            skipped; the rest still restore.
+        </p>
 
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">counter/Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">IsDevToolsPaused</span>
-                <span class="readout__value">@Manager.IsDevToolsPaused</span>
+        <h4>Pause and lock</h4>
+        <p>
+            The monitor's two recording controls are different in kind, and the difference matters when
+            you are hunting a bug. <strong>Pause recording</strong> is about the <em>timeline</em>: the
+            app carries on exactly as before, it just stops filling the monitor with noise while you set
+            up the state you actually want to inspect. <strong>Lock changes</strong> is about the
+            <em>app</em>: every action is refused, so nothing can move underneath you while you scrub.
+        </p>
+        <p>
+            Both are readable from the manager, so the UI can tell the user why its buttons appear dead:
+        </p>
+        <CodeBlock Code="@PauseLock" />
+
+        <DemoCard Title="What the monitor's buttons do here"
+                  Description="Open the Redux DevTools panel and press Pause recording or Lock changes, then use the counter. This card reads the manager's own flags."
+                  Source="@PauseLockSource" SourceLanguage="razor">
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="Counter.Increment">Increment</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">AreChangesLocked</span>
-                <span class="readout__value">@Manager.AreChangesLocked</span>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">counter/Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">IsDevToolsPaused</span>
+                    <span class="bb-stat-value">@Manager.IsDevToolsPaused</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">AreChangesLocked</span>
+                    <span class="bb-stat-value">@Manager.AreChangesLocked</span>
+                </div>
             </div>
-        </div>
 
-        <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">
-            Paused, the counter still moves but the monitor stays quiet. Locked, the counter stops
-            moving - and the slider still works.
+            <p class="bb-card-desc">
+                Paused, the counter still moves but the monitor stays quiet. Locked, the counter stops
+                moving - and the slider still works.
+            </p>
+        </DemoCard>
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Disconnecting always unlocks">
+            <p>
+                Closing the monitor, or tearing down a circuit, while "Lock changes" was on would
+                otherwise leave the application permanently frozen with no remaining way to unfreeze it.
+                Disconnecting the bridge clears both flags.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Redacting sensitive state</h3>
+        <p>
+            The state tree is handed to a browser extension. Anything in it is visible to that extension.
+            Blex gives you two hooks plus a shorthand.
         </p>
-    </DemoCard>
 
-    <Callout Kind="Callout.CalloutKind.Note" Title="Disconnecting always unlocks">
-        <p style="margin-bottom:0">
-            Closing the monitor, or tearing down a circuit, while "Lock changes" was on would
-            otherwise leave the application permanently frozen with no remaining way to unfreeze it.
-            Disconnecting the bridge clears both flags.
+        <CodeBlock Code="@Sanitize" FileName="Program.cs" />
+
+        <ApiTable Rows="@SanitizerRows" />
+
+        <p>
+            <code>RedactDevToolsKeys</code> walks the whole tree - objects <em>and</em> arrays - replacing
+            matching keys with <code>&lt;redacted&gt;</code>, and it is applied to action payloads as well
+            as state, so an argument named <code>password</code> is redacted too.
         </p>
-    </Callout>
-
-    <h2>Redacting sensitive state</h2>
-    <p>
-        The state tree is handed to a browser extension. Anything in it is visible to that extension.
-        Blex gives you two hooks plus a shorthand.
-    </p>
-
-    <CodeBlock Code="@Sanitize" FileName="Program.cs" />
-
-    <ApiTable Rows="@SanitizerRows" />
-
-    <p>
-        <code>RedactDevToolsKeys</code> walks the whole tree - objects <em>and</em> arrays - replacing
-        matching keys with <code>&lt;redacted&gt;</code>, and it is applied to action payloads as well
-        as state, so an argument named <code>password</code> is redacted too.
-    </p>
-
-    <p>
-        It is additive, and it composes. Calling it a second time <em>widens</em> the redaction set
-        rather than replacing it, so a library and an app can each register their own secrets without
-        one silently unmasking the other's. A custom <code>DevToolsStateSanitizer</code> assigned
-        <em>before</em> the call still runs - redaction is applied on top of its output - which lets
-        you reshape the tree and redact it in the same pipeline.
-    </p>
-    <CodeBlock Code="@Compose" Title="Additive and composing" Compact="true" />
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="Assigning the sanitizer last wins">
-        <p style="margin-bottom:0">
-            The composition is one-directional: redaction wraps whatever sanitizer was already there.
-            Assigning <code>DevToolsStateSanitizer</code> <em>after</em> calling
-            <code>RedactDevToolsKeys</code> replaces redaction outright. Register redaction last.
+
+        <p>
+            It is additive, and it composes. Calling it a second time <em>widens</em> the redaction set
+            rather than replacing it, so a library and an app can each register their own secrets without
+            one silently unmasking the other's. A custom <code>DevToolsStateSanitizer</code> assigned
+            <em>before</em> the call still runs - redaction is applied on top of its output - which lets
+            you reshape the tree and redact it in the same pipeline.
         </p>
-    </Callout>
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="Redaction and time-travel fight each other">
-        <p style="margin-bottom:0">
-            DevTools echoes the state it was <em>shown</em> back to the app when you jump. A redacted
-            value therefore comes back as the literal string <code>&lt;redacted&gt;</code> and
-            overwrites the real one. Redact only fields you never need to jump back through - or turn
-            DevTools off entirely in the environments where the data is real.
+        <CodeBlock Code="@Compose" Title="Additive and composing" />
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="Assigning the sanitizer last wins">
+            <p>
+                The composition is one-directional: redaction wraps whatever sanitizer was already there.
+                Assigning <code>DevToolsStateSanitizer</code> <em>after</em> calling
+                <code>RedactDevToolsKeys</code> replaces redaction outright. Register redaction last.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="Redaction and time-travel fight each other">
+            <p>
+                DevTools echoes the state it was <em>shown</em> back to the app when you jump. A redacted
+                value therefore comes back as the literal string <code>&lt;redacted&gt;</code> and
+                overwrites the real one. Redact only fields you never need to jump back through - or turn
+                DevTools off entirely in the environments where the data is real.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Sanitizers fail closed">
+            <p>
+                If your state sanitizer throws, Blex sends an <em>empty</em> tree rather than the
+                unsanitized one - a bug in redaction cannot leak what it was meant to hide. A throwing
+                action sanitizer yields <code>&lt;sanitizer-error&gt;</code>. Both are reported through
+                <code>OnError</code> with source <code>devtools</code>.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Turning it off</h3>
+        <p>
+            For production, disable the connection outright. Nothing is serialized and nothing is sent.
         </p>
-    </Callout>
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Sanitizers fail closed">
-        <p style="margin-bottom:0">
-            If your state sanitizer throws, Blex sends an <em>empty</em> tree rather than the
-            unsanitized one - a bug in redaction cannot leak what it was meant to hide. A throwing
-            action sanitizer yields <code>&lt;sanitizer-error&gt;</code>. Both are reported through
-            <code>OnError</code> with source <code>devtools</code>.
+        <CodeBlock Code="@Disable" Language="razor" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Under the hood</h3>
+        <p>
+            The manager has no JS dependency - it only knows the <code>IBlexDevTools</code>
+            interface. <code>BlexReduxDevToolsConnector</code>, in the <code>Bit.Blex.Blazor</code> namespace,
+            implements it: it loads a small ES module (<code>_content/Bit.Blex/bit-blex-devtools.js</code>) and talks to
+            <code>window.__REDUX_DEVTOOLS_EXTENSION__</code>.
         </p>
-    </Callout>
-
-    <h2>Turning it off</h2>
-    <p>
-        For production, disable the connection outright. Nothing is serialized and nothing is sent.
-    </p>
-    <CodeBlock Code="@Disable" Language="razor" />
-
-    <h2>Under the hood</h2>
-    <p>
-        The manager has no JS dependency - it only knows the <code>IBlexDevTools</code>
-        interface. <code>BlexReduxDevToolsConnector</code>, in the <code>Bit.Blex.Blazor</code> namespace,
-        implements it: it loads a small ES module (<code>_content/Bit.Blex/bit-blex-devtools.js</code>) and talks to
-        <code>window.__REDUX_DEVTOOLS_EXTENSION__</code>.
-    </p>
-
-    <CodeBlock Code="@Interface" />
-
-    <ul>
-        <li>If the extension is not installed, <code>connect</code> returns <code>false</code> and everything becomes a no-op - no errors, no cost.</li>
-        <li>Interop calls are dispatched without blocking the dispatch pipeline, but their tasks are still observed so a transient failure cannot surface as an unobserved exception.</li>
-        <li>Disconnecting detaches only Blex's own subscription, rather than killing every DevTools instance on the page.</li>
-        <li>The bridge advertises exactly what it implements: <code>jump</code> and <code>export</code> yes; <code>dispatch</code>, <code>skip</code> and <code>reorder</code> no.</li>
-    </ul>
-
-    <h2>Connecting a different sink</h2>
-    <p>
-        <code>IBlexDevTools</code> is public, so the manager can feed anything - a server-side
-        session recorder, a test double, a custom monitor.
-    </p>
-    <CodeBlock Code="@CustomSink" />
-
-    <div class="readout" style="margin-top:1rem">
-        <div class="readout__item">
-            <span class="readout__label">Stores in this app's tree</span>
-            <span class="readout__value readout__value--accent">@Manager.Stores.Count</span>
-        </div>
-        <div class="readout__item">
-            <span class="readout__label">Names</span>
-            <span class="readout__value" style="font-size:0.85rem">@string.Join(", ", Manager.Stores.Select(s => s.Name))</span>
+
+        <CodeBlock Code="@Interface" />
+
+        <ul class="bb-detail-list">
+            <li>If the extension is not installed, <code>connect</code> returns <code>false</code> and everything becomes a no-op - no errors, no cost.</li>
+            <li>Interop calls are dispatched without blocking the dispatch pipeline, but their tasks are still observed so a transient failure cannot surface as an unobserved exception.</li>
+            <li>Disconnecting detaches only Blex's own subscription, rather than killing every DevTools instance on the page.</li>
+            <li>The bridge advertises exactly what it implements: <code>jump</code> and <code>export</code> yes; <code>dispatch</code>, <code>skip</code> and <code>reorder</code> no.</li>
+        </ul>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Connecting a different sink</h3>
+        <p>
+            <code>IBlexDevTools</code> is public, so the manager can feed anything - a server-side
+            session recorder, a test double, a custom monitor.
+        </p>
+        <CodeBlock Code="@CustomSink" />
+
+        <div class="bb-stats">
+            <div class="bb-stat">
+                <span class="bb-stat-label">Stores in this app's tree</span>
+                <span class="bb-stat-value demo-accent">@Manager.Stores.Count</span>
+            </div>
+            <div class="bb-stat">
+                <span class="bb-stat-label">Names</span>
+                <span class="bb-stat-value demo-stat-text">@string.Join(", ", Manager.Stores.Select(s => s.Name))</span>
+            </div>
         </div>
     </div>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Diagnostics.razor b/src/Utilities/Blex/Demo/Client/Pages/Diagnostics.razor
index 54c4b8defa0..0ceca307902 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Diagnostics.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Diagnostics.razor
@@ -3,73 +3,78 @@
 <DocPage Href="diagnostics" Title="Compile-time diagnostics"
          Lead="The generator validates every store and fails the build with a precise message rather than emitting code that does not compile.">
 
-    <p>
-        All nineteen diagnostics live in the <code>Bit.Blex.Generators</code> category. Sixteen are errors - they
-        describe shapes the generator genuinely cannot emit - and three are warnings about code that
-        compiles but almost certainly does not do what you meant.
-    </p>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Overview</h3>
+        <p>
+            All nineteen diagnostics live in the <code>Bit.Blex.Generators</code> category. Sixteen are errors - they
+            describe shapes the generator genuinely cannot emit - and three are warnings about code that
+            compiles but almost certainly does not do what you meant.
+        </p>
+
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead>
+                    <tr><th>Code</th><th>Severity</th><th>Summary</th></tr>
+                </thead>
+                <tbody>
+                    @foreach (var d in DiagnosticsCatalog.All)
+                    {
+                        <tr>
+                            <td class="bb-table-key"><a href="diagnostics#@d.Code.ToLowerInvariant()"><code>@d.Code</code></a></td>
+                            <td class="bb-table-key">
+                                @if (d.IsError)
+                                {
+                                    <span class="bb-badge bb-badge-danger">Error</span>
+                                }
+                                else
+                                {
+                                    <span class="bb-badge bb-badge-warn">Warning</span>
+                                }
+                            </td>
+                            <td>@d.Title</td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Nothing is emitted for a rejected store">
+            <p>
+                When a store fails validation, the generator reports the diagnostic and emits
+                <em>no</em> partial for it. Expect a cascade of "does not contain a definition for
+                <code>Count</code>" errors alongside the Blex diagnostic - fix the Blex one first and
+                the rest disappear.
+            </p>
+        </Callout>
+    </div>
 
-    <div class="table-scroll">
-        <table>
-            <thead>
-                <tr><th>Code</th><th>Severity</th><th>Summary</th></tr>
-            </thead>
-            <tbody>
-                @foreach (var d in DiagnosticsCatalog.All)
-                {
-                    <tr>
-                        <td><a href="#@d.Code.ToLowerInvariant()"><code>@d.Code</code></a></td>
-                        <td>
-                            @if (d.IsError)
-                            {
-                                <span class="pill pill--err">Error</span>
-                            }
-                            else
-                            {
-                                <span class="pill pill--busy">Warning</span>
-                            }
-                        </td>
-                        <td>@d.Title</td>
-                    </tr>
-                }
-            </tbody>
-        </table>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Suppressing a warning</h3>
+        <p>
+            The three warnings are suppressible like any other. Blex's own test project suppresses
+            <code>BLEX011</code> project-wide, because it has a fixture that deliberately declares a
+            value-returning action.
+        </p>
+        <CodeBlock Code="@Suppress" Language="xml" FileName="MyApp.csproj" />
+        <CodeBlock Code="@SuppressLocal" Title="Or locally" />
     </div>
 
     @foreach (var d in DiagnosticsCatalog.All)
     {
-        <h2 id="@d.Code.ToLowerInvariant()">
-            <code>@d.Code</code> - @d.Title
-        </h2>
-        <p>@((MarkupString)d.Cause)</p>
-        @if (!string.IsNullOrEmpty(d.Bad))
-        {
-            <CodeBlock Code="@d.Bad" Title="Rejected" Compact="true" />
-        }
-        @if (!string.IsNullOrEmpty(d.Good))
-        {
-            <CodeBlock Code="@d.Good" Title="Fix" Compact="true" />
-        }
+        <div class="bb-card" id="@d.Code.ToLowerInvariant()">
+            <h3 class="bb-card-title"><span class="bb-dot @(d.IsError ? "bb-dot-danger" : "bb-dot-warning")"></span> <code>@d.Code</code> - @d.Title</h3>
+            <p>@((MarkupString)d.Cause)</p>
+            @if (!string.IsNullOrEmpty(d.Bad))
+            {
+                <CodeBlock Code="@d.Bad" Title="Rejected" />
+            }
+            @if (!string.IsNullOrEmpty(d.Good))
+            {
+                <CodeBlock Code="@d.Good" Title="Fix" />
+            }
+        </div>
     }
 
-    <h2>Suppressing a warning</h2>
-    <p>
-        The three warnings are suppressible like any other. Blex's own test project suppresses
-        <code>BLEX011</code> project-wide, because it has a fixture that deliberately declares a
-        value-returning action.
-    </p>
-    <CodeBlock Code="@Suppress" Language="xml" FileName="MyApp.csproj" />
-    <CodeBlock Code="@SuppressLocal" Title="Or locally" Compact="true" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Nothing is emitted for a rejected store">
-        <p style="margin-bottom:0">
-            When a store fails validation, the generator reports the diagnostic and emits
-            <em>no</em> partial for it. Expect a cascade of "does not contain a definition for
-            <code>Count</code>" errors alongside the Blex diagnostic - fix the Blex one first and
-            the rest disappear.
-        </p>
-    </Callout>
-
 </DocPage>
 
 @code {
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Effects.razor b/src/Utilities/Blex/Demo/Client/Pages/Effects.razor
index 1d8dfc8ea29..1008d7ca677 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Effects.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Effects.razor
@@ -6,293 +6,306 @@
 <DocPage Href="effects" Title="Effects"
          Lead="Async work with a loading flag, an error slot, a cancellation method and a concurrency policy - all generated.">
 
-    <h2>The convention</h2>
-    <p>
-        Mark an async method named <code>OnXxx</code> returning <code>Task</code> or
-        <code>ValueTask</code> with <code>[BlexEffect]</code>. You get a public <code>Xxx(...)</code>
-        wrapper plus reactive lifecycle properties. The body is still recorded as one named,
-        time-travelable action.
-    </p>
-
-    <CodeBlock Code="@Basic" />
-
-    <ApiTable Title="Generated for [BlexEffect] OnLoadUser(int id, CancellationToken ct)" Rows="@GeneratedRows" />
-
-    <p>
-        The wrapper never throws: an exception from the body is captured into <code>XxxError</code>
-        instead of propagating. That is deliberate - an effect is usually fired from an event handler
-        where nothing would catch it.
-    </p>
-
-    <h2>Loading is reference-counted</h2>
-    <p>
-        <code>XxxIsLoading</code> stays <code>true</code> until the <em>last</em> in-flight run
-        finishes, so overlapping invocations do not flip it off early. It is set through
-        <code>SetEffectState</code>, which notifies the UI but never records a time-travel action -
-        a spinner turning on is not something you want to rewind to.
-    </p>
-
-    <h2>Cancellation</h2>
-    <p>
-        Give the effect a <strong>trailing</strong> <code>CancellationToken</code> parameter and the
-        generator supplies the token itself - it does not appear on the public wrapper - and emits a
-        <code>CancelXxx()</code> method.
-    </p>
-
-    <CodeBlock Code="@Cancel" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Whose cancellation was it?">
-        <p style="margin-bottom:0">
-            Cancellation through the effect's <em>own</em> token - from <code>CancelXxx()</code> or
-            from being superseded in <code>Latest</code> mode - is a normal outcome and never
-            populates <code>Error</code>. A <em>foreign</em> <code>OperationCanceledException</code>,
-            such as an <code>HttpClient</code> timeout, or any cancellation in an effect that has no
-            token parameter, is a real failure and is recorded in <code>Error</code>.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The convention</h3>
+        <p>
+            Mark an async method named <code>OnXxx</code> returning <code>Task</code> or
+            <code>ValueTask</code> with <code>[BlexEffect]</code>. You get a public <code>Xxx(...)</code>
+            wrapper plus reactive lifecycle properties. The body is still recorded as one named,
+            time-travelable action.
         </p>
-    </Callout>
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Disposing a store cancels its effects">
-        <p style="margin-bottom:0">
-            A store is <code>IDisposable</code>, and its container disposes it - a Blazor Server
-            circuit ending, a test scope closing. That cancels every in-flight effect and stops any
-            pending debounce timer, so a request started moments before teardown does not carry on
-            resuming against a dead renderer. It counts as the effect's own cancellation, so it
-            populates no <code>Error</code>; the store itself stays usable, because disposal ordering
-            must not be able to strand a final persistence flush.
+
+        <CodeBlock Code="@Basic" />
+
+        <ApiTable Title="Generated for [BlexEffect] OnLoadUser(int id, CancellationToken ct)" Rows="@GeneratedRows" />
+
+        <p>
+            The wrapper never throws: an exception from the body is captured into <code>XxxError</code>
+            instead of propagating. That is deliberate - an effect is usually fired from an event handler
+            where nothing would catch it.
         </p>
-    </Callout>
-
-    <h2>Concurrency</h2>
-    <p>
-        <code>[BlexEffect(Concurrency = …)]</code> decides what happens when a run starts while another
-        is still going, mirroring the RxJS flattening operators NgRx effects are built on.
-    </p>
-
-    <div class="table-scroll">
-        <table>
-            <thead><tr><th>Mode</th><th>RxJS</th><th>Semantics</th><th>Use it for</th></tr></thead>
-            <tbody>
-                <tr><td><code>Parallel</code> <span class="pill">default</span></td><td><code>mergeMap</code></td><td>Every run proceeds concurrently.</td><td>Independent fetches.</td></tr>
-                <tr><td><code>Latest</code></td><td><code>switchMap</code></td><td>A new run cancels the previous one.</td><td>Type-ahead search.</td></tr>
-                <tr><td><code>Drop</code></td><td><code>exhaustMap</code></td><td>New runs are ignored while one is in flight.</td><td>Double-click-proof submits.</td></tr>
-                <tr><td><code>Queue</code></td><td><code>concatMap</code></td><td>Runs execute one at a time, in arrival order.</td><td>Ordered writes.</td></tr>
-            </tbody>
-        </table>
     </div>
 
-    <DemoCard Title="The four modes, side by side"
-              Description="Each button starts the same 1.2 s job. Click one several times quickly and read the timeline."
-              Source="@LabSource">
-        <div class="row">
-            <button class="btn btn-primary" @onclick="RunParallel">
-                Parallel @if (Lab.RunParallelIsLoading) { <span class="pill pill--busy">running</span> }
-            </button>
-            <button class="btn btn-primary" @onclick="RunLatest">
-                Latest @if (Lab.RunLatestIsLoading) { <span class="pill pill--busy">running</span> }
-            </button>
-            <button class="btn btn-primary" @onclick="RunDrop">
-                Drop @if (Lab.RunDropIsLoading) { <span class="pill pill--busy">running</span> }
-            </button>
-            <button class="btn btn-primary" @onclick="RunQueue">
-                Queue @if (Lab.RunQueueIsLoading) { <span class="pill pill--busy">running</span> }
-            </button>
-        </div>
-        <div class="row">
-            <button class="btn btn-sm" @onclick="Lab.CancelRunParallel" disabled="@(!Lab.RunParallelIsLoading)">CancelRunParallel()</button>
-            <button class="btn btn-sm" @onclick="Lab.CancelRunLatest" disabled="@(!Lab.RunLatestIsLoading)">CancelRunLatest()</button>
-            <button class="btn btn-sm btn-ghost" @onclick="Lab.Clear">Clear timeline</button>
-        </div>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Loading is reference-counted</h3>
+        <p>
+            <code>XxxIsLoading</code> stays <code>true</code> until the <em>last</em> in-flight run
+            finishes, so overlapping invocations do not flip it off early. It is set through
+            <code>SetEffectState</code>, which notifies the UI but never records a time-travel action -
+            a spinner turning on is not something you want to rewind to.
+        </p>
+    </div>
 
-        @if (Lab.Events.Count == 0)
-        {
-            <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">
-                Timeline is empty. Try clicking <strong>Latest</strong> three times in a row, then
-                <strong>Queue</strong> three times, and compare.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Cancellation</h3>
+        <p>
+            Give the effect a <strong>trailing</strong> <code>CancellationToken</code> parameter and the
+            generator supplies the token itself - it does not appear on the public wrapper - and emits a
+            <code>CancelXxx()</code> method.
+        </p>
+
+        <CodeBlock Code="@Cancel" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Whose cancellation was it?">
+            <p>
+                Cancellation through the effect's <em>own</em> token - from <code>CancelXxx()</code> or
+                from being superseded in <code>Latest</code> mode - is a normal outcome and never
+                populates <code>Error</code>. A <em>foreign</em> <code>OperationCanceledException</code>,
+                such as an <code>HttpClient</code> timeout, or any cancellation in an effect that has no
+                token parameter, is a real failure and is recorded in <code>Error</code>.
             </p>
-        }
-        else
-        {
-            <ul class="timeline">
-                @foreach (var e in Lab.Events)
-                {
-                    <li>
-                        <span class="timeline__at">@e.At ms</span>
-                        <span class="timeline__mode timeline__mode--@e.Mode">@e.Mode</span>
-                        <span>run @e.Run</span>
-                        <span class="timeline__phase--@e.Phase">@e.Phase</span>
-                    </li>
-                }
-            </ul>
-        }
-    </DemoCard>
-
-    <h3>What you should see</h3>
-    <ul>
-        <li><strong>Parallel</strong> - three clicks give three <code>started</code> lines immediately and three <code>finished</code> lines ~1.2 s later.</li>
-        <li><strong>Latest</strong> - each click <code>cancelled</code>s the previous run; only the last one finishes.</li>
-        <li><strong>Drop</strong> - the second and third clicks produce <code>dropped</code>; the first run finishes undisturbed.</li>
-        <li><strong>Queue</strong> - the runs start ~1.2 s apart, strictly in the order you clicked.</li>
-    </ul>
-
-    <h2>A realistic type-ahead</h2>
-    <p>
-        <code>Latest</code> plus a token is the whole recipe for search-as-you-type: an obsolete
-        request cannot land after a newer one and overwrite the results.
-    </p>
-
-    <DemoCard Title="Search with Latest concurrency"
-              Description="Type quickly: each keystroke supersedes the previous request. Flip the failure switch to see the generated error slot fill in."
-              Source="@SearchSource">
-        <div class="row">
-            <input type="search" placeholder="Try &quot;blazor&quot; or &quot;gen&quot;…"
-                   value="@_queryBox" @oninput="OnQueryInput" style="flex:1;min-width:220px" />
-            <button class="btn btn-sm" @onclick="Search.CancelSearch" disabled="@(!Search.SearchIsLoading)">Cancel</button>
-            <button class="btn btn-sm btn-ghost" @onclick="ClearSearch">Clear</button>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Disposing a store cancels its effects">
+            <p>
+                A store is <code>IDisposable</code>, and its container disposes it - a Blazor Server
+                circuit ending, a test scope closing. That cancels every in-flight effect and stops any
+                pending debounce timer, so a request started moments before teardown does not carry on
+                resuming against a dead renderer. It counts as the effect's own cancellation, so it
+                populates no <code>Error</code>; the store itself stays usable, because disposal ordering
+                must not be able to strand a final persistence flush.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Concurrency</h3>
+        <p>
+            <code>[BlexEffect(Concurrency = …)]</code> decides what happens when a run starts while another
+            is still going, mirroring the RxJS flattening operators NgRx effects are built on.
+        </p>
+
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>Mode</th><th>RxJS</th><th>Semantics</th><th>Use it for</th></tr></thead>
+                <tbody>
+                    <tr><td class="bb-table-key"><code>Parallel</code> <span class="bb-badge">default</span></td><td class="bb-table-key"><code>mergeMap</code></td><td>Every run proceeds concurrently.</td><td>Independent fetches.</td></tr>
+                    <tr><td class="bb-table-key"><code>Latest</code></td><td class="bb-table-key"><code>switchMap</code></td><td>A new run cancels the previous one.</td><td>Type-ahead search.</td></tr>
+                    <tr><td class="bb-table-key"><code>Drop</code></td><td class="bb-table-key"><code>exhaustMap</code></td><td>New runs are ignored while one is in flight.</td><td>Double-click-proof submits.</td></tr>
+                    <tr><td class="bb-table-key"><code>Queue</code></td><td class="bb-table-key"><code>concatMap</code></td><td>Runs execute one at a time, in arrival order.</td><td>Ordered writes.</td></tr>
+                </tbody>
+            </table>
         </div>
-        <div class="row">
-            <label class="check">
-                <input type="checkbox" checked="@Search.SimulateFailure"
-                       @onchange="e => Search.SetSimulateFailure((bool)(e.Value ?? false))" />
-                Simulate a failing service
-            </label>
-            @if (Search.SearchIsLoading)
+
+        <DemoCard Title="The four modes, side by side"
+                  Description="Each button starts the same 1.2 s job. Click one several times quickly and read the timeline."
+                  Source="@LabSource">
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="RunParallel">
+                    Parallel @if (Lab.RunParallelIsLoading) { <span class="bb-badge bb-badge-warn">running</span> }
+                </button>
+                <button class="btn btn-primary" @onclick="RunLatest">
+                    Latest @if (Lab.RunLatestIsLoading) { <span class="bb-badge bb-badge-warn">running</span> }
+                </button>
+                <button class="btn btn-primary" @onclick="RunDrop">
+                    Drop @if (Lab.RunDropIsLoading) { <span class="bb-badge bb-badge-warn">running</span> }
+                </button>
+                <button class="btn btn-primary" @onclick="RunQueue">
+                    Queue @if (Lab.RunQueueIsLoading) { <span class="bb-badge bb-badge-warn">running</span> }
+                </button>
+            </div>
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" @onclick="Lab.CancelRunParallel" disabled="@(!Lab.RunParallelIsLoading)">CancelRunParallel()</button>
+                <button class="btn btn-secondary" @onclick="Lab.CancelRunLatest" disabled="@(!Lab.RunLatestIsLoading)">CancelRunLatest()</button>
+                <button class="btn btn-secondary" @onclick="Lab.Clear">Clear timeline</button>
+            </div>
+
+            @if (Lab.Events.Count == 0)
             {
-                <span class="pill pill--busy">SearchIsLoading = true</span>
+                <p class="bb-card-desc">
+                    Timeline is empty. Try clicking <strong>Latest</strong> three times in a row, then
+                    <strong>Queue</strong> three times, and compare.
+                </p>
             }
             else
             {
-                <span class="pill pill--off">SearchIsLoading = false</span>
+                <ul class="timeline">
+                    @foreach (var e in Lab.Events)
+                    {
+                        <li>
+                            <span class="timeline__at">@e.At ms</span>
+                            <span class="timeline__mode timeline__mode--@e.Mode">@e.Mode</span>
+                            <span>run @e.Run</span>
+                            <span class="timeline__phase--@e.Phase">@e.Phase</span>
+                        </li>
+                    }
+                </ul>
             }
-            @if (Search.SearchError is not null)
-            {
-                <span class="pill pill--err">SearchError set</span>
-            }
-        </div>
+        </DemoCard>
+
+        <h4>What you should see</h4>
+        <ul class="bb-detail-list">
+            <li><strong>Parallel</strong> - three clicks give three <code>started</code> lines immediately and three <code>finished</code> lines ~1.2 s later.</li>
+            <li><strong>Latest</strong> - each click <code>cancelled</code>s the previous run; only the last one finishes.</li>
+            <li><strong>Drop</strong> - the second and third clicks produce <code>dropped</code>; the first run finishes undisturbed.</li>
+            <li><strong>Queue</strong> - the runs start ~1.2 s apart, strictly in the order you clicked.</li>
+        </ul>
+    </div>
 
-        @if (Search.SearchError is not null)
-        {
-            <div class="callout callout--gotcha" style="margin-top:0.8rem">
-                <div class="callout__icon">⚠</div>
-                <div class="callout__body">
-                    <p class="callout__title">SearchError</p>
-                    <p style="margin-bottom:0">@Search.SearchError.Message</p>
-                </div>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> A realistic type-ahead</h3>
+        <p>
+            <code>Latest</code> plus a token is the whole recipe for search-as-you-type: an obsolete
+            request cannot land after a newer one and overwrite the results.
+        </p>
+
+        <DemoCard Title="Search with Latest concurrency"
+                  Description="Type quickly: each keystroke supersedes the previous request. Flip the failure switch to see the generated error slot fill in."
+                  Source="@SearchSource">
+            <div class="bb-toolbar">
+                <input type="search" placeholder="Try &quot;blazor&quot; or &quot;gen&quot;…"
+                       value="@_queryBox" @oninput="OnQueryInput" class="demo-input-grow" />
+                <button class="btn btn-secondary" @onclick="Search.CancelSearch" disabled="@(!Search.SearchIsLoading)">Cancel</button>
+                <button class="btn btn-secondary" @onclick="ClearSearch">Clear</button>
             </div>
-        }
-        else if (Search.HasResults)
-        {
-            <ul class="list">
-                @foreach (var result in Search.Results)
+            <div class="bb-toolbar">
+                <label class="bb-check">
+                    <input type="checkbox" checked="@Search.SimulateFailure"
+                           @onchange="e => Search.SetSimulateFailure((bool)(e.Value ?? false))" />
+                    Simulate a failing service
+                </label>
+                @if (Search.SearchIsLoading)
                 {
-                    <li><span class="list__name">@result</span></li>
+                    <span class="bb-badge bb-badge-warn">SearchIsLoading = true</span>
                 }
-            </ul>
-        }
-        else if (!Search.SearchIsLoading && !string.IsNullOrWhiteSpace(Search.Query))
-        {
-            <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">No matches for “@Search.Query”.</p>
-        }
-    </DemoCard>
-
-    <h2>Debouncing</h2>
-    <p>
-        <code>Latest</code> stops a stale response from landing, but it still sends a request per
-        keystroke. <code>DebounceMilliseconds</code> waits for a quiet period first, so only the
-        invocation the user actually paused on runs at all. The two compose, and together they are
-        the complete type-ahead recipe: debounce decides <em>whether</em> to ask, <code>Latest</code>
-        decides <em>which answer</em> is allowed to land.
-    </p>
-    <CodeBlock Code="@Debounce" Title="The whole recipe" Compact="true" />
-
-    <p>
-        The wait happens before anything observable, which is what makes it worth generating rather
-        than hand-rolling. A superseded invocation never flips <code>XxxIsLoading</code>, never
-        clears <code>XxxError</code>, is never offered to middleware and records no action - so a
-        spinner bound to <code>IsLoading</code> does not blink once per keystroke, and DevTools does
-        not fill up with searches that never happened.
-    </p>
-
-    <DemoCard Title="Keystrokes in, requests out"
-              Description="Type a word at normal speed. The keystroke counter climbs per character; the request counter climbs once, when you pause."
-              Source="@DebouncedSource">
-        <div class="row">
-            <input type="search" placeholder="Type &quot;blazor&quot; quickly…"
-                   value="@_debouncedBox" @oninput="OnDebouncedInput" style="flex:1;min-width:220px" />
-            <button class="btn btn-sm btn-ghost" @onclick="ClearDebounced">Clear</button>
-        </div>
-
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Keystrokes</span>
-                <span class="readout__value">@Search.Keystrokes</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Requests started</span>
-                <span class="readout__value readout__value--accent">@Search.RequestsStarted</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">TypeAheadIsLoading</span>
-                <span class="readout__value">@(Search.TypeAheadIsLoading ? "true" : "false")</span>
-            </div>
-        </div>
-
-        @if (Search.TypeAheadError is not null)
-        {
-            <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">@Search.TypeAheadError.Message</p>
-        }
-        else if (Search.HasResults)
-        {
-            <ul class="list" style="margin-top:0.8rem">
-                @foreach (var result in Search.Results)
+                else
                 {
-                    <li><span class="list__name">@result</span></li>
+                    <span class="bb-badge demo-badge-off">SearchIsLoading = false</span>
                 }
-            </ul>
-        }
-    </DemoCard>
+                @if (Search.SearchError is not null)
+                {
+                    <span class="bb-badge bb-badge-danger">SearchError set</span>
+                }
+            </div>
+
+            @if (Search.SearchError is not null)
+            {
+                <div class="bb-note bb-note-danger" role="alert">
+                    <strong class="demo-note-title">SearchError</strong>
+                    <p>@Search.SearchError.Message</p>
+                </div>
+            }
+            else if (Search.HasResults)
+            {
+                <ul class="demo-list">
+                    @foreach (var result in Search.Results)
+                    {
+                        <li><span class="demo-list-name">@result</span></li>
+                    }
+                </ul>
+            }
+            else if (!Search.SearchIsLoading && !string.IsNullOrWhiteSpace(Search.Query))
+            {
+                <p class="bb-card-desc">No matches for “@Search.Query”.</p>
+            }
+        </DemoCard>
+    </div>
 
-    <Callout Kind="Callout.CalloutKind.Note" Title="The gate is per effect, not per argument">
-        <p style="margin-bottom:0">
-            Every invocation of the same effect shares one gate, whatever its arguments. That is
-            what you want for a search box; if you need one gate per key (say, per row in a grid),
-            debounce at the call site instead.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Debouncing</h3>
+        <p>
+            <code>Latest</code> stops a stale response from landing, but it still sends a request per
+            keystroke. <code>DebounceMilliseconds</code> waits for a quiet period first, so only the
+            invocation the user actually paused on runs at all. The two compose, and together they are
+            the complete type-ahead recipe: debounce decides <em>whether</em> to ask, <code>Latest</code>
+            decides <em>which answer</em> is allowed to land.
         </p>
-    </Callout>
-
-    <h2>Rules</h2>
-    <ul>
-        <li>
-            The return type must be non-generic <code>Task</code> or <code>ValueTask</code>
-            (<code>BLEX007</code>). An effect owns the loading and error lifecycle, so there is
-            nowhere to put a return value - write results into <code>[BlexState]</code> fields.
-        </li>
-        <li>
-            <code>Latest</code> without a <code>CancellationToken</code> parameter is warning
-            <code>BLEX009</code>: supersession still marks the run stale, but the superseded body
-            keeps executing because nothing can observe the cancellation.
-        </li>
-        <li>Effects cannot be <code>static</code> (<code>BLEX008</code>) or generic (<code>BLEX014</code>), and cannot take by-ref parameters (<code>BLEX013</code>).</li>
-    </ul>
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="A Queue effect must never invoke itself">
-        <p style="margin-bottom:0">
-            <code>Queue</code> makes each run wait for its predecessor. If a queued effect invokes
-            itself - directly, or through a subscriber its body triggers - the nested call waits on a
-            gate that only the outer call can open, and both deadlock.
+        <CodeBlock Code="@Debounce" Title="The whole recipe" />
+
+        <p>
+            The wait happens before anything observable, which is what makes it worth generating rather
+            than hand-rolling. A superseded invocation never flips <code>XxxIsLoading</code>, never
+            clears <code>XxxError</code>, is never offered to middleware and records no action - so a
+            spinner bound to <code>IsLoading</code> does not blink once per keystroke, and DevTools does
+            not fill up with searches that never happened.
         </p>
-    </Callout>
 
-    <Callout Kind="Callout.CalloutKind.Note" Title="Latest cancels on invocation, not on approval">
-        <p style="margin-bottom:0">
-            In <code>Latest</code> mode the previous run is cancelled the moment a new invocation
-            starts - even if middleware later vetoes that new action. A veto stops the mutation; it
-            does not resurrect the run it superseded.
-        </p>
-    </Callout>
+        <DemoCard Title="Keystrokes in, requests out"
+                  Description="Type a word at normal speed. The keystroke counter climbs per character; the request counter climbs once, when you pause."
+                  Source="@DebouncedSource">
+            <div class="bb-toolbar">
+                <input type="search" placeholder="Type &quot;blazor&quot; quickly…"
+                       value="@_debouncedBox" @oninput="OnDebouncedInput" class="demo-input-grow" />
+                <button class="btn btn-secondary" @onclick="ClearDebounced">Clear</button>
+            </div>
 
-    <h2>The generated wrapper</h2>
-    <p>Roughly what the generator emits for a <code>Latest</code> effect with a token:</p>
-    <CodeBlock Code="@GeneratedEffect" Title="Generated (simplified)" />
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Keystrokes</span>
+                    <span class="bb-stat-value">@Search.Keystrokes</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Requests started</span>
+                    <span class="bb-stat-value demo-accent">@Search.RequestsStarted</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">TypeAheadIsLoading</span>
+                    <span class="bb-stat-value">@(Search.TypeAheadIsLoading ? "true" : "false")</span>
+                </div>
+            </div>
+
+            @if (Search.TypeAheadError is not null)
+            {
+                <p class="bb-card-desc">@Search.TypeAheadError.Message</p>
+            }
+            else if (Search.HasResults)
+            {
+                <ul class="demo-list">
+                    @foreach (var result in Search.Results)
+                    {
+                        <li><span class="demo-list-name">@result</span></li>
+                    }
+                </ul>
+            }
+        </DemoCard>
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="The gate is per effect, not per argument">
+            <p>
+                Every invocation of the same effect shares one gate, whatever its arguments. That is
+                what you want for a search box; if you need one gate per key (say, per row in a grid),
+                debounce at the call site instead.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Rules</h3>
+        <ul class="bb-detail-list">
+            <li>
+                The return type must be non-generic <code>Task</code> or <code>ValueTask</code>
+                (<code>BLEX007</code>). An effect owns the loading and error lifecycle, so there is
+                nowhere to put a return value - write results into <code>[BlexState]</code> fields.
+            </li>
+            <li>
+                <code>Latest</code> without a <code>CancellationToken</code> parameter is warning
+                <code>BLEX009</code>: supersession still marks the run stale, but the superseded body
+                keeps executing because nothing can observe the cancellation.
+            </li>
+            <li>Effects cannot be <code>static</code> (<code>BLEX008</code>) or generic (<code>BLEX014</code>), and cannot take by-ref parameters (<code>BLEX013</code>).</li>
+        </ul>
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="A Queue effect must never invoke itself">
+            <p>
+                <code>Queue</code> makes each run wait for its predecessor. If a queued effect invokes
+                itself - directly, or through a subscriber its body triggers - the nested call waits on a
+                gate that only the outer call can open, and both deadlock.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Latest cancels on invocation, not on approval">
+            <p>
+                In <code>Latest</code> mode the previous run is cancelled the moment a new invocation
+                starts - even if middleware later vetoes that new action. A veto stops the mutation; it
+                does not resurrect the run it superseded.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The generated wrapper</h3>
+        <p>Roughly what the generator emits for a <code>Latest</code> effect with a token:</p>
+        <CodeBlock Code="@GeneratedEffect" Title="Generated (simplified)" />
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Entities.razor b/src/Utilities/Blex/Demo/Client/Pages/Entities.razor
index 5068c568dd4..02526009722 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Entities.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Entities.razor
@@ -5,187 +5,204 @@
 <DocPage Href="entities" Title="Entity adapter"
          Lead="Normalized, immutable collections with generated CRUD - the same idea as Redux Toolkit's createEntityAdapter.">
 
-    <h2>Why normalize</h2>
-    <p>
-        Keeping a collection as a flat <code>List&lt;T&gt;</code> means every update is a scan, every
-        lookup by id is a scan, and every mutation risks being done in place - which
-        <a href="stores#change-detection">silently defeats change detection</a>.
-        <code>BlexEntityState&lt;TEntity, TKey&gt;</code> stores an ordered id list plus an id-keyed map,
-        and every operation returns a <em>new</em> instance, so notifications, time-travel and
-        persistence all behave.
-    </p>
-
-    <CodeBlock Code="@Shape" Title="The shape" />
-
-    <h2>Declaring one</h2>
-    <p>
-        The adapter holds the id selector, so it is not serializable - keep it as a
-        <code>static readonly</code> field. The <code>[BlexState]</code> field holds the state itself.
-    </p>
-
-    <CodeBlock Code="@Declare" />
-
-    <h2>Sorting</h2>
-    <p>
-        Pass an <code>IComparer&lt;TEntity&gt;</code> and the adapter re-sorts <code>Ids</code> after
-        every operation, so iteration order is always correct without sorting in the view. Without
-        one, insertion order is preserved.
-    </p>
-    <CodeBlock Code="@Sorted" />
-
-    <DemoCard Title="Normalized contacts"
-              Description="Every button below is one adapter call inside one action. The list is kept sorted by name automatically."
-              Source="@StoreSource">
-        <div class="row">
-            <input type="text" placeholder="Name" value="@_name" @oninput="OnNameInput" style="min-width:150px" />
-            <select value="@_team" @onchange="OnTeamChange">
-                <option value="Research">Research</option>
-                <option value="Compilers">Compilers</option>
-                <option value="Languages">Languages</option>
-                <option value="Runtime">Runtime</option>
-            </select>
-            <button class="btn btn-primary" @onclick="Add" disabled="@string.IsNullOrWhiteSpace(_name)">AddOne</button>
-        </div>
-
-        <div class="row">
-            <span class="small muted">Filter:</span>
-            @foreach (var team in Contacts.Teams)
-            {
-                var current = team;
-                <button class="btn btn-sm @(Contacts.TeamFilter == current ? "btn-primary" : null)"
-                        @onclick="() => Contacts.SetTeamFilter(current)">
-                    @current
-                </button>
-            }
-        </div>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Why normalize</h3>
+        <p>
+            Keeping a collection as a flat <code>List&lt;T&gt;</code> means every update is a scan, every
+            lookup by id is a scan, and every mutation risks being done in place - which
+            <a href="stores#change-detection">silently defeats change detection</a>.
+            <code>BlexEntityState&lt;TEntity, TKey&gt;</code> stores an ordered id list plus an id-keyed map,
+            and every operation returns a <em>new</em> instance, so notifications, time-travel and
+            persistence all behave.
+        </p>
+
+        <CodeBlock Code="@Shape" Title="The shape" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Declaring one</h3>
+        <p>
+            The adapter holds the id selector, so it is not serializable - keep it as a
+            <code>static readonly</code> field. The <code>[BlexState]</code> field holds the state itself.
+        </p>
 
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value readout__value--accent">@Contacts.Total</span>
+        <CodeBlock Code="@Declare" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Sorting</h3>
+        <p>
+            Pass an <code>IComparer&lt;TEntity&gt;</code> and the adapter re-sorts <code>Ids</code> after
+            every operation, so iteration order is always correct without sorting in the view. Without
+            one, insertion order is preserved.
+        </p>
+        <CodeBlock Code="@Sorted" />
+
+        <DemoCard Title="Normalized contacts"
+                  Description="Every button below is one adapter call inside one action. The list is kept sorted by name automatically."
+                  Source="@StoreSource">
+            <div class="bb-toolbar">
+                <input type="text" placeholder="Name" value="@_name" @oninput="OnNameInput" class="demo-input-name" />
+                <select value="@_team" @onchange="OnTeamChange">
+                    <option value="Research">Research</option>
+                    <option value="Compilers">Compilers</option>
+                    <option value="Languages">Languages</option>
+                    <option value="Runtime">Runtime</option>
+                </select>
+                <button class="btn btn-primary" @onclick="Add" disabled="@string.IsNullOrWhiteSpace(_name)">AddOne</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Starred</span>
-                <span class="readout__value">@Contacts.Starred</span>
+
+            <div class="bb-toolbar">
+                <span class="bb-overline">Filter</span>
+                <div class="bb-segmented" role="group" aria-label="Team filter">
+                    @foreach (var team in Contacts.Teams)
+                    {
+                        var current = team;
+                        <button type="button" aria-pressed="@(Contacts.TeamFilter == current ? "true" : "false")"
+                                @onclick="() => Contacts.SetTeamFilter(current)">@current</button>
+                    }
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Ids (ordered)</span>
-                <span class="readout__value" style="font-size:0.85rem">[@string.Join(", ", Contacts.Contacts.Ids)]</span>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value demo-accent">@Contacts.Total</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Starred</span>
+                    <span class="bb-stat-value">@Contacts.Starred</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Ids (ordered)</span>
+                    <span class="bb-stat-value demo-stat-text">[@string.Join(", ", Contacts.Contacts.Ids)]</span>
+                </div>
             </div>
-        </div>
 
-        <ul class="list" style="margin-top:0.8rem">
-            @foreach (var contact in Contacts.Visible)
+            <ul class="demo-list">
+                @foreach (var contact in Contacts.Visible)
+                {
+                    var id = contact.Id;
+                    <li>
+                        <button type="button" class="demo-star @(contact.Starred ? "demo-star--on" : null)"
+                                title="UpdateOne" @onclick="() => Contacts.ToggleStar(id)">
+                            @(contact.Starred ? "★" : "☆")
+                        </button>
+                        <span class="demo-list-name">@contact.Name</span>
+                        <span class="demo-list-meta">@contact.Team · id @contact.Id</span>
+                        <button class="btn demo-btn-danger" title="RemoveOne" @onclick="() => Contacts.Remove(id)">Remove</button>
+                    </li>
+                }
+            </ul>
+            @if (Contacts.Visible.Count == 0)
             {
-                var id = contact.Id;
-                <li>
-                    <button class="star @(contact.Starred ? "star--on" : null)"
-                            title="UpdateOne" @onclick="() => Contacts.ToggleStar(id)">
-                        @(contact.Starred ? "★" : "☆")
-                    </button>
-                    <span class="list__name">@contact.Name</span>
-                    <span class="list__meta">@contact.Team · id @contact.Id</span>
-                    <button class="btn btn-sm btn-danger" title="RemoveOne" @onclick="() => Contacts.Remove(id)">Remove</button>
-                </li>
+                <p class="bb-card-desc">Nothing matches this filter.</p>
             }
-        </ul>
-        @if (Contacts.Visible.Count == 0)
-        {
-            <p class="small muted">Nothing matches this filter.</p>
-        }
 
-        <div class="row" style="margin-top:0.6rem">
-            <button class="btn btn-sm" @onclick="Contacts.StarAll">Map - star everyone</button>
-            <button class="btn btn-sm" @onclick="Contacts.RemoveUnstarred">RemoveMany - drop unstarred</button>
-            <button class="btn btn-sm btn-danger" @onclick="Contacts.RemoveAll">RemoveAll</button>
-            <button class="btn btn-sm btn-ghost" @onclick="Contacts.Reseed">SetAll - reseed</button>
-        </div>
-
-        <div class="row" style="margin-top:0.6rem">
-            <button class="btn btn-sm" title="SetOne with an id that exists" @onclick="() => LateSave(1)">
-                SetOne - late save for id 1
-            </button>
-            <button class="btn btn-sm" title="SetOne with an id that does not exist" @onclick="() => LateSave(99)">
-                SetOne - late save for id 99
-            </button>
-            <button class="btn btn-sm btn-ghost" @onclick="ReseedIdentical">SetAll - identical payload</button>
-        </div>
-        <p class="small muted" style="margin-top:0.4rem">@_setNote</p>
-    </DemoCard>
-
-    <h2>BlexEntityState members</h2>
-    <ApiTable Rows="@StateRows" />
-
-    <h2>BlexEntityAdapter operations</h2>
-    <p>
-        Every operation takes the current state and returns the next one. Assign the result back to
-        the <code>[BlexState]</code> property - that assignment is what makes the change visible.
-    </p>
-    <ApiTable Rows="@AdapterRows" />
-
-    <CodeBlock Code="@Usage" Title="Typical actions" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Operations are no-ops when they cannot apply">
-        <p style="margin-bottom:0">
-            <code>AddOne</code> ignores an entity whose id already exists, <code>UpdateOne</code> and
-            <code>RemoveOne</code> ignore a missing id, and <code>UpdateMany</code> skips ids that are
-            not present. Each of those returns the <em>same</em> state instance, so no notification
-            fires and no action is recorded for a change that did not happen.
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" @onclick="Contacts.StarAll">Map - star everyone</button>
+                <button class="btn btn-secondary" @onclick="Contacts.RemoveUnstarred">RemoveMany - drop unstarred</button>
+                <button class="btn demo-btn-danger" @onclick="Contacts.RemoveAll">RemoveAll</button>
+                <button class="btn btn-secondary" @onclick="Contacts.Reseed">SetAll - reseed</button>
+            </div>
+
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" title="SetOne with an id that exists" @onclick="() => LateSave(1)">
+                    SetOne - late save for id 1
+                </button>
+                <button class="btn btn-secondary" title="SetOne with an id that does not exist" @onclick="() => LateSave(99)">
+                    SetOne - late save for id 99
+                </button>
+                <button class="btn btn-secondary" @onclick="ReseedIdentical">SetAll - identical payload</button>
+            </div>
+            @if (_setNote.Length > 0)
+            {
+                <p class="bb-card-desc">@_setNote</p>
+            }
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> BlexEntityState members</h3>
+        <ApiTable Rows="@StateRows" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> BlexEntityAdapter operations</h3>
+        <p>
+            Every operation takes the current state and returns the next one. Assign the result back to
+            the <code>[BlexState]</code> property - that assignment is what makes the change visible.
+        </p>
+        <ApiTable Rows="@AdapterRows" />
+
+        <CodeBlock Code="@Usage" Title="Typical actions" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Operations are no-ops when they cannot apply">
+            <p>
+                <code>AddOne</code> ignores an entity whose id already exists, <code>UpdateOne</code> and
+                <code>RemoveOne</code> ignore a missing id, and <code>UpdateMany</code> skips ids that are
+                not present. Each of those returns the <em>same</em> state instance, so no notification
+                fires and no action is recorded for a change that did not happen.
+            </p>
+        </Callout>
+
+        <h4>Set vs Upsert</h4>
+        <p>
+            <code>UpsertOne</code> inserts an unknown id; <code>SetOne</code> refuses to. That is the
+            difference between "save this, wherever it came from" and "apply this update to a row I
+            already have". Reach for <code>SetOne</code>/<code>SetMany</code> when a late response must
+            not resurrect a record that was deleted while it was in flight - a stale <code>PUT</code>
+            reply arriving after the user removed the row leaves the list alone instead of putting the
+            row back.
+        </p>
+        <CodeBlock Code="@SetVsUpsert" Title="A late response must not resurrect a deleted row" />
+
+        <h4>Writing the same value twice costs nothing</h4>
+        <p>
+            Every write operation compares before it commits. Re-applying a value that is already there -
+            <code>SetAll</code> with an unchanged server response, <code>UpsertMany</code> where only one
+            of fifty rows actually moved - returns the same state instance, so nothing notifies, nothing
+            persists, and no undo step appears for a mutation that did not happen. Polling a list
+            endpoint on a timer is therefore free while the data is unchanged.
         </p>
-    </Callout>
-
-    <h3>Set vs Upsert</h3>
-    <p>
-        <code>UpsertOne</code> inserts an unknown id; <code>SetOne</code> refuses to. That is the
-        difference between "save this, wherever it came from" and "apply this update to a row I
-        already have". Reach for <code>SetOne</code>/<code>SetMany</code> when a late response must
-        not resurrect a record that was deleted while it was in flight - a stale <code>PUT</code>
-        reply arriving after the user removed the row leaves the list alone instead of putting the
-        row back.
-    </p>
-    <CodeBlock Code="@SetVsUpsert" Title="A late response must not resurrect a deleted row" Compact="true" />
-
-    <h3>Writing the same value twice costs nothing</h3>
-    <p>
-        Every write operation compares before it commits. Re-applying a value that is already there -
-        <code>SetAll</code> with an unchanged server response, <code>UpsertMany</code> where only one
-        of fifty rows actually moved - returns the same state instance, so nothing notifies, nothing
-        persists, and no undo step appears for a mutation that did not happen. Polling a list
-        endpoint on a timer is therefore free while the data is unchanged.
-    </p>
-    <CodeBlock Code="@NoOpIdentity" Title="Idempotent reseeding" Compact="true" />
-
-    <h3>Changing an entity's id</h3>
-    <p>
-        <code>UpdateOne</code> handles an update function that changes the id: the entity moves to
-        the new key and keeps its position in the order. If the new id already belongs to another
-        entity, that one is overwritten and the old slot is dropped, so an id never appears twice in
-        the ordered list.
-    </p>
-
-    <h2>Serialization</h2>
-    <p>
-        <code>BlexEntityState</code> round-trips through JSON as <code>{ "ids": [...], "entities":
-        { ... } }</code>, so a normalized collection persists and time-travels like any other state.
-        <code>Count</code> and <code>All</code> are marked <code>[JsonIgnore]</code> - they are
-        derived from <code>Ids</code>.
-    </p>
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="TKey must survive being a JSON dictionary key">
-        <p style="margin-bottom:0">
-            <code>Entities</code> serializes as a JSON object, whose keys are strings.
-            <code>int</code>, <code>string</code> and <code>Guid</code> all work. A composite or
-            custom key type needs a converter that round-trips it as a dictionary key.
+        <CodeBlock Code="@NoOpIdentity" Title="Idempotent reseeding" />
+
+        <h4>Changing an entity's id</h4>
+        <p>
+            <code>UpdateOne</code> handles an update function that changes the id: the entity moves to
+            the new key and keeps its position in the order. If the new id already belongs to another
+            entity, that one is overwritten and the old slot is dropped, so an id never appears twice in
+            the ordered list.
+        </p>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Serialization</h3>
+        <p>
+            <code>BlexEntityState</code> round-trips through JSON as <code>{ "ids": [...], "entities":
+            { ... } }</code>, so a normalized collection persists and time-travels like any other state.
+            <code>Count</code> and <code>All</code> are marked <code>[JsonIgnore]</code> - they are
+            derived from <code>Ids</code>.
+        </p>
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="TKey must survive being a JSON dictionary key">
+            <p>
+                <code>Entities</code> serializes as a JSON object, whose keys are strings.
+                <code>int</code>, <code>string</code> and <code>Guid</code> all work. A composite or
+                custom key type needs a converter that round-trips it as a dictionary key.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Deriving views</h3>
+        <p>
+            Pair the adapter with <a href="computed"><code>[BlexComputed]</code></a> to project filtered or
+            aggregated views. They are memoized, so a filtered list is rebuilt once per change rather
+            than once per render.
         </p>
-    </Callout>
-
-    <h2>Deriving views</h2>
-    <p>
-        Pair the adapter with <a href="computed"><code>[BlexComputed]</code></a> to project filtered or
-        aggregated views. They are memoized, so a filtered list is rebuilt once per change rather
-        than once per render.
-    </p>
-    <CodeBlock Code="@Computed" />
+        <CodeBlock Code="@Computed" />
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/ErrorPage.razor b/src/Utilities/Blex/Demo/Client/Pages/ErrorPage.razor
index 83e1e478277..05e6763f351 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/ErrorPage.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/ErrorPage.razor
@@ -1,8 +1,15 @@
 @page "/Error"
+@layout MainLayout
 
 @* Target of app.UseExceptionHandler("/Error") in the host's Program.cs. *@
 
 <PageTitle>Error · Blex</PageTitle>
-<h1>Error</h1>
-<p class="lead">An error occurred while processing your request.</p>
-<a class="btn btn-primary" href="">Back to the introduction</a>
+
+<div class="bb-error">
+    <h1>Error</h1>
+    <p>An error occurred while processing your request.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="introduction" class="btn btn-secondary">Browse the docs</a>
+    </div>
+</div>
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Errors.razor b/src/Utilities/Blex/Demo/Client/Pages/Errors.razor
index 0a9bcf16beb..b40b9343fdb 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Errors.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Errors.razor
@@ -7,140 +7,152 @@
 <DocPage Href="errors" Title="Error isolation"
          Lead="Blex refuses to let a misbehaving observer break dispatch. Everything it swallows is handed to you instead.">
 
-    <h2>The problem</h2>
-    <p>
-        A dispatch fans out to middleware, the DevTools bridge, persistence, history and every
-        subscriber. If any one of them throws and the exception escapes, the observers registered
-        after it never run - persistence silently stops saving because an unrelated analytics handler
-        had a bad day. Blex isolates each of those call sites and routes the failure to a single
-        sink.
-    </p>
-
-    <CodeBlock Code="@Setup" FileName="Program.cs" />
-
-    <p>
-        Without a handler, isolated errors are written to <code>Console.Error</code> - visible in the
-        browser console, but easy to miss. Setting <code>OnError</code> is the first thing to do in
-        any real app.
-    </p>
-
-    <h2>BlexError</h2>
-    <CodeBlock Code="@Record" />
-    <ApiTable Rows="@ErrorRows" />
-
-    <h2>What gets reported</h2>
-    <div class="table-scroll">
-        <table>
-            <thead><tr><th>Source</th><th>Raised when</th></tr></thead>
-            <tbody>
-                <tr><td><code>subscriber</code></td><td>A handler passed to <code>Subscribe</code> / <code>SubscribeTo</code> / <code>SubscribeToAction</code> threw. <code>Detail</code> is the qualified action name.</td></tr>
-                <tr><td><code>async reactor</code></td><td>A <code>SubscribeAsync</code> handler's task faulted.</td></tr>
-                <tr><td><code>middleware</code></td><td>A middleware's <code>BeforeAction</code> or <code>OnAction</code> threw. The pipeline continues with the next middleware.</td></tr>
-                <tr><td><code>persistence</code></td><td>Rehydrating, applying, serializing, scheduling or writing a persisted slice failed. <code>Detail</code> names the store or key.</td></tr>
-                <tr><td><code>restore</code></td><td>A store's slice could not be deserialized during <code>RestoreGlobalState</code>. That store is skipped; the others still restore.</td></tr>
-                <tr><td><code>devtools</code></td><td>A time-travel snapshot from the extension was malformed, a sanitizer threw, or the JS bridge failed to load or send.</td></tr>
-                <tr><td><code>history</code></td><td>A <code>BlexHistory.Changed</code> handler threw while recording or after an external restore, or a history filter threw.</td></tr>
-                <tr><td><code>reset</code></td><td>A store failed to reset during <code>BlexManager.ResetAll()</code>. That store is skipped; the rest still reset.</td></tr>
-                <tr><td><code>register</code></td><td>Two stores were registered under the same name, so their state slices, DevTools entries and storage keys collide.</td></tr>
-                <tr><td><code>prerender</code></td><td>Handing a store's state across the prerender-to-interactive boundary failed. The store simply renders from its own state instead - the worst case is rendering twice.</td></tr>
-            </tbody>
-        </table>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The problem</h3>
+        <p>
+            A dispatch fans out to middleware, the DevTools bridge, persistence, history and every
+            subscriber. If any one of them throws and the exception escapes, the observers registered
+            after it never run - persistence silently stops saving because an unrelated analytics handler
+            had a bad day. Blex isolates each of those call sites and routes the failure to a single
+            sink.
+        </p>
+
+        <CodeBlock Code="@Setup" FileName="Program.cs" />
+
+        <p>
+            Without a handler, isolated errors are written to <code>Console.Error</code> - visible in the
+            browser console, but easy to miss. Setting <code>OnError</code> is the first thing to do in
+            any real app.
+        </p>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> BlexError</h3>
+        <CodeBlock Code="@Record" />
+        <ApiTable Rows="@ErrorRows" />
     </div>
 
-    <DemoCard Title="Break a subscriber on purpose"
-              Description="This registers a subscriber that throws on the next counter/Increment. The action still applies, the other observers still run, and the failure lands in the log below - and in the Inspector's Errors tab."
-              Source="@DemoSource">
-        <div class="row">
-            <button class="btn btn-danger" @onclick="BreakSubscriber">Arm a throwing subscriber, then increment</button>
-            <button class="btn" @onclick="Counter.Increment">Plain increment</button>
-            <button class="btn btn-ghost" @onclick="Log.Clear">Clear log</button>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What gets reported</h3>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>Source</th><th>Raised when</th></tr></thead>
+                <tbody>
+                    <tr><td class="bb-table-key"><code>subscriber</code></td><td>A handler passed to <code>Subscribe</code> / <code>SubscribeTo</code> / <code>SubscribeToAction</code> threw. <code>Detail</code> is the qualified action name.</td></tr>
+                    <tr><td class="bb-table-key"><code>async reactor</code></td><td>A <code>SubscribeAsync</code> handler's task faulted.</td></tr>
+                    <tr><td class="bb-table-key"><code>middleware</code></td><td>A middleware's <code>BeforeAction</code> or <code>OnAction</code> threw. The pipeline continues with the next middleware.</td></tr>
+                    <tr><td class="bb-table-key"><code>persistence</code></td><td>Rehydrating, applying, serializing, scheduling or writing a persisted slice failed. <code>Detail</code> names the store or key.</td></tr>
+                    <tr><td class="bb-table-key"><code>restore</code></td><td>A store's slice could not be deserialized during <code>RestoreGlobalState</code>. That store is skipped; the others still restore.</td></tr>
+                    <tr><td class="bb-table-key"><code>devtools</code></td><td>A time-travel snapshot from the extension was malformed, a sanitizer threw, or the JS bridge failed to load or send.</td></tr>
+                    <tr><td class="bb-table-key"><code>history</code></td><td>A <code>BlexHistory.Changed</code> handler threw while recording or after an external restore, or a history filter threw.</td></tr>
+                    <tr><td class="bb-table-key"><code>reset</code></td><td>A store failed to reset during <code>BlexManager.ResetAll()</code>. That store is skipped; the rest still reset.</td></tr>
+                    <tr><td class="bb-table-key"><code>register</code></td><td>Two stores were registered under the same name, so their state slices, DevTools entries and storage keys collide.</td></tr>
+                    <tr><td class="bb-table-key"><code>prerender</code></td><td>Handing a store's state across the prerender-to-interactive boundary failed. The store simply renders from its own state instead - the worst case is rendering twice.</td></tr>
+                </tbody>
+            </table>
         </div>
 
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
+        <DemoCard Title="Break a subscriber on purpose"
+                  Description="This registers a subscriber that throws on the next counter/Increment. The action still applies, the other observers still run, and the failure lands in the log below - and in the Inspector's Errors tab."
+                  Source="@DemoSource">
+            <div class="bb-toolbar">
+                <button class="btn demo-btn-danger" @onclick="BreakSubscriber">Arm a throwing subscriber, then increment</button>
+                <button class="btn btn-secondary" @onclick="Counter.Increment">Plain increment</button>
+                <button class="btn btn-secondary" @onclick="Log.Clear">Clear log</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Errors captured</span>
-                <span class="readout__value">@Log.Errors.Count</span>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Errors captured</span>
+                    <span class="bb-stat-value">@Log.Errors.Count</span>
+                </div>
             </div>
-        </div>
 
-        @if (Log.Errors.Count > 0)
-        {
-            <ul class="err-list" style="margin-top:0.8rem">
-                @foreach (var error in Log.Errors)
-                {
-                    <li>
-                        <span class="err-list__source">@error.Source</span>
-                        <span class="err-list__detail">@error.Detail</span>
-                        <span class="err-list__msg">@error.Exception.Message</span>
-                    </li>
-                }
-            </ul>
-        }
-        <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">
-            Note that <code>Count</code> still went up. The mutation had already been applied when the
-            subscriber ran - isolation protects the pipeline, it does not roll anything back.
-        </p>
-    </DemoCard>
-
-    <h2>Guarantees</h2>
-    <ul>
-        <li>
-            <strong>The mutation is recorded even if a subscriber throws.</strong> A standalone
-            <code>Set X</code> whose <code>StateChanged</code> handler throws is still recorded,
-            because the state genuinely changed - skipping the record would leave persistence,
-            history and DevTools out of sync with reality.
-        </li>
-        <li>
-            <strong>Sanitizers fail closed.</strong> If your DevTools state sanitizer throws, Blex
-            sends an <em>empty</em> tree rather than the unsanitized one, so a bug in redaction
-            cannot leak the data it was meant to hide. A failing action sanitizer sends
-            <code>&lt;sanitizer-error&gt;</code>.
-        </li>
-        <li>
-            <strong>Corrupt persisted data never blocks startup.</strong> An unreadable payload is
-            reported, discarded and removed from storage; the app starts with defaults.
-        </li>
-        <li>
-            <strong>The handler itself is guarded.</strong> If your <code>OnError</code> throws, that
-            exception is swallowed - it is the last line of defence, and there is nowhere left to
-            report to.
-        </li>
-    </ul>
-
-    <h2>A realistic handler</h2>
-    <CodeBlock Code="@Logging" />
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="OnError is captured on the singleton options">
-        <p style="margin-bottom:0">
-            <code>BlexOptions</code> is registered as a singleton, and the delegate you assign is
-            copied onto each scoped <code>BlexManager</code> as it is created. Do not close over a
-            scoped service in it - under Blazor Server that would capture one circuit's dependency
-            and share it with all of them. Close over something process-wide (an
-            <code>ILoggerFactory</code>, a metrics client), or assign
-            <code>manager.OnError</code> per scope instead.
-        </p>
-    </Callout>
-
-    <h2>Setting it per scope</h2>
-    <p>
-        <code>OnError</code> is also a settable property on <code>BlexManager</code>, so a scoped
-        component or service can install its own handler where a scoped dependency is genuinely
-        needed.
-    </p>
-    <CodeBlock Code="@PerScope" />
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Errors inside an action body are not isolated">
-        <p style="margin-bottom:0">
-            This is about the <em>observers</em> of an action. An exception thrown by your own
-            <code>[BlexAction]</code> method body propagates to the caller as usual - only
-            <code>[BlexEffect]</code> bodies capture their exception, into the generated
-            <code>XxxError</code> property.
+            @if (Log.Errors.Count > 0)
+            {
+                <ul class="err-list">
+                    @foreach (var error in Log.Errors)
+                    {
+                        <li>
+                            <span class="err-list__source">@error.Source</span>
+                            <span class="err-list__detail">@error.Detail</span>
+                            <span class="err-list__msg">@error.Exception.Message</span>
+                        </li>
+                    }
+                </ul>
+            }
+            <p class="bb-card-desc">
+                Note that <code>Count</code> still went up. The mutation had already been applied when the
+                subscriber ran - isolation protects the pipeline, it does not roll anything back.
+            </p>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Guarantees</h3>
+        <ul class="bb-detail-list">
+            <li>
+                <strong>The mutation is recorded even if a subscriber throws.</strong> A standalone
+                <code>Set X</code> whose <code>StateChanged</code> handler throws is still recorded,
+                because the state genuinely changed - skipping the record would leave persistence,
+                history and DevTools out of sync with reality.
+            </li>
+            <li>
+                <strong>Sanitizers fail closed.</strong> If your DevTools state sanitizer throws, Blex
+                sends an <em>empty</em> tree rather than the unsanitized one, so a bug in redaction
+                cannot leak the data it was meant to hide. A failing action sanitizer sends
+                <code>&lt;sanitizer-error&gt;</code>.
+            </li>
+            <li>
+                <strong>Corrupt persisted data never blocks startup.</strong> An unreadable payload is
+                reported, discarded and removed from storage; the app starts with defaults.
+            </li>
+            <li>
+                <strong>The handler itself is guarded.</strong> If your <code>OnError</code> throws, that
+                exception is swallowed - it is the last line of defence, and there is nowhere left to
+                report to.
+            </li>
+        </ul>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> A realistic handler</h3>
+        <CodeBlock Code="@Logging" />
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="OnError is captured on the singleton options">
+            <p>
+                <code>BlexOptions</code> is registered as a singleton, and the delegate you assign is
+                copied onto each scoped <code>BlexManager</code> as it is created. Do not close over a
+                scoped service in it - under Blazor Server that would capture one circuit's dependency
+                and share it with all of them. Close over something process-wide (an
+                <code>ILoggerFactory</code>, a metrics client), or assign
+                <code>manager.OnError</code> per scope instead.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Setting it per scope</h3>
+        <p>
+            <code>OnError</code> is also a settable property on <code>BlexManager</code>, so a scoped
+            component or service can install its own handler where a scoped dependency is genuinely
+            needed.
         </p>
-    </Callout>
+        <CodeBlock Code="@PerScope" />
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Errors inside an action body are not isolated">
+            <p>
+                This is about the <em>observers</em> of an action. An exception thrown by your own
+                <code>[BlexAction]</code> method body propagates to the caller as usual - only
+                <code>[BlexEffect]</code> bodies capture their exception, into the generated
+                <code>XxxError</code> property.
+            </p>
+        </Callout>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/History.razor b/src/Utilities/Blex/Demo/Client/Pages/History.razor
index 23c9957accf..630add59e77 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/History.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/History.razor
@@ -7,270 +7,289 @@
 <DocPage Href="history" Title="Undo & redo"
          Lead="In-app history over the entire application state, independent of the browser extension.">
 
-    <h2>Setup</h2>
-    <p>
-        Register it once. <code>&lt;BlexProvider&gt;</code> calls <code>Start()</code> for you -
-        deliberately <em>after</em> rehydration, so the baseline that undo ultimately returns to is
-        the state the user actually loaded, not the pre-hydration defaults.
-    </p>
-
-    <CodeBlock Code="@Setup" FileName="Program.cs" />
-    <CodeBlock Code="@Usage" Language="razor" />
-
-    <DemoCard Title="Undo across every store at once"
-              Description="History snapshots the whole state tree, so a single Undo steps back through whichever store changed last - counter or contacts."
-              Source="@DemoSource" SourceLanguage="razor">
-        <div class="row">
-            <button class="btn btn-primary" @onclick="HistoryStack.Undo" disabled="@(!HistoryStack.CanUndo)">
-                ↶ Undo @HistoryStack.NextUndoLabel
-            </button>
-            <button class="btn btn-primary" @onclick="HistoryStack.Redo" disabled="@(!HistoryStack.CanRedo)">
-                ↷ Redo @HistoryStack.NextRedoLabel
-            </button>
-            <button class="btn" title="BlexHistory.Checkpoint(...)" @onclick="Checkpoint">Checkpoint</button>
-            <button class="btn btn-ghost" @onclick="HistoryStack.Clear">Clear history</button>
-        </div>
-        <p class="small muted" style="margin-top:0.4rem;margin-bottom:0">@_checkpointNote</p>
-
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Undo depth</span>
-                <span class="readout__value readout__value--accent">@HistoryStack.UndoCount</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Redo depth</span>
-                <span class="readout__value">@HistoryStack.RedoCount</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Max entries</span>
-                <span class="readout__value">@HistoryStack.MaxEntries</span>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Setup</h3>
+        <p>
+            Register it once. <code>&lt;BlexProvider&gt;</code> calls <code>Start()</code> for you -
+            deliberately <em>after</em> rehydration, so the baseline that undo ultimately returns to is
+            the state the user actually loaded, not the pre-hydration defaults.
+        </p>
+
+        <CodeBlock Code="@Setup" FileName="Program.cs" />
+        <CodeBlock Code="@Usage" Language="razor" />
+
+        <DemoCard Title="Undo across every store at once"
+                  Description="History snapshots the whole state tree, so a single Undo steps back through whichever store changed last - counter or contacts."
+                  Source="@DemoSource" SourceLanguage="razor">
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="HistoryStack.Undo" disabled="@(!HistoryStack.CanUndo)">
+                    ↶ Undo @HistoryStack.NextUndoLabel
+                </button>
+                <button class="btn btn-primary" @onclick="HistoryStack.Redo" disabled="@(!HistoryStack.CanRedo)">
+                    ↷ Redo @HistoryStack.NextRedoLabel
+                </button>
+                <button class="btn btn-secondary" title="BlexHistory.Checkpoint(...)" @onclick="Checkpoint">Checkpoint</button>
+                <button class="btn btn-secondary" @onclick="HistoryStack.Clear">Clear history</button>
             </div>
-        </div>
-
-        <div class="grid grid--2" style="margin-top:0.9rem">
-            <div class="card">
-                <p class="card__title">counter <span class="card__num">Count = @Counter.Count</span></p>
-                <div class="row">
-                    <button class="btn btn-sm" @onclick="Counter.Increment">Increment</button>
-                    <button class="btn btn-sm" @onclick="Counter.Decrement">Decrement</button>
+            @if (_checkpointNote.Length > 0)
+            {
+                <p class="bb-card-desc">@_checkpointNote</p>
+            }
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Undo depth</span>
+                    <span class="bb-stat-value demo-accent">@HistoryStack.UndoCount</span>
                 </div>
-            </div>
-            <div class="card">
-                <p class="card__title">contacts <span class="card__num">@Contacts.Total contacts</span></p>
-                <div class="row">
-                    <button class="btn btn-sm" @onclick="AddContact">Add one</button>
-                    <button class="btn btn-sm" @onclick="Contacts.StarAll">Star all</button>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Redo depth</span>
+                    <span class="bb-stat-value">@HistoryStack.RedoCount</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Max entries</span>
+                    <span class="bb-stat-value">@HistoryStack.MaxEntries</span>
                 </div>
             </div>
-        </div>
 
-        <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">
-            Interleave the two: increment, add a contact, increment again - then undo three times and
-            watch each store roll back in turn.
-        </p>
-    </DemoCard>
-
-    <h2>Jumping several steps at once</h2>
-    <p>
-        <code>Undo()</code> and <code>Redo()</code> are the one-step cases of <code>Jump(n)</code>:
-        negative walks back, positive walks forward. The intermediate states are never applied - the
-        stacks are walked first and only the destination is restored, so a ten-step undo costs one
-        render, one storage write and one <code>Changed</code> raise instead of ten of each.
-    </p>
-    <p>
-        <code>UndoLabels</code> and <code>RedoLabels</code> name the steps in navigation order, which
-        is what a history panel renders; <code>JumpToPast</code> / <code>JumpToFuture</code> address
-        them the way redux-undo does.
-    </p>
-    <CodeBlock Code="@JumpApi" />
-
-    <DemoCard Title="A history panel"
-              Description="Pick any point on either stack and land on it directly. Make a few changes below first, then step back through them."
-              Source="@JumpSource" SourceLanguage="razor">
-        <div class="row">
-            <button class="btn btn-sm" @onclick="Counter.Increment">Increment counter</button>
-            <button class="btn btn-sm" @onclick="AddContact">Add a contact</button>
-            <button class="btn btn-sm btn-ghost" @onclick="HistoryStack.Clear">Clear history</button>
-        </div>
-
-        <div class="grid grid--2" style="margin-top:0.9rem">
-            <div class="card">
-                <p class="card__title">Undo stack <span class="card__num">@HistoryStack.UndoCount</span></p>
-                @if (HistoryStack.UndoCount == 0)
-                {
-                    <p class="small muted" style="margin-bottom:0">Nothing to undo yet.</p>
-                }
-                else
-                {
-                    <div class="row">
-                        @for (var i = 0; i < HistoryStack.UndoLabels.Count; i++)
-                        {
-                            var steps = i + 1;
-                            var label = HistoryStack.UndoLabels[i];
-                            <button class="btn btn-sm" @onclick="() => HistoryStack.Jump(-steps)">
-                                ↶ @label <span class="muted">(@steps)</span>
-                            </button>
-                        }
+            <div class="bb-grid">
+                <div class="bb-card">
+                    <p class="bb-card-title">counter <span class="bb-badge">Count = @Counter.Count</span></p>
+                    <div class="bb-toolbar">
+                        <button class="btn btn-secondary" @onclick="Counter.Increment">Increment</button>
+                        <button class="btn btn-secondary" @onclick="Counter.Decrement">Decrement</button>
                     </div>
-                }
-            </div>
-            <div class="card">
-                <p class="card__title">Redo stack <span class="card__num">@HistoryStack.RedoCount</span></p>
-                @if (HistoryStack.RedoCount == 0)
-                {
-                    <p class="small muted" style="margin-bottom:0">Nothing to redo yet.</p>
-                }
-                else
-                {
-                    <div class="row">
-                        @for (var i = 0; i < HistoryStack.RedoLabels.Count; i++)
-                        {
-                            var index = i;
-                            var label = HistoryStack.RedoLabels[i];
-                            <button class="btn btn-sm" @onclick="() => HistoryStack.JumpToFuture(index)">
-                                ↷ @label <span class="muted">(@(index + 1))</span>
-                            </button>
-                        }
+                </div>
+                <div class="bb-card">
+                    <p class="bb-card-title">contacts <span class="bb-badge">@Contacts.Total contacts</span></p>
+                    <div class="bb-toolbar">
+                        <button class="btn btn-secondary" @onclick="AddContact">Add one</button>
+                        <button class="btn btn-secondary" @onclick="Contacts.StarAll">Star all</button>
                     </div>
-                }
+                </div>
+            </div>
+
+            <p class="bb-card-desc">
+                Interleave the two: increment, add a contact, increment again - then undo three times and
+                watch each store roll back in turn.
+            </p>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Jumping several steps at once</h3>
+        <p>
+            <code>Undo()</code> and <code>Redo()</code> are the one-step cases of <code>Jump(n)</code>:
+            negative walks back, positive walks forward. The intermediate states are never applied - the
+            stacks are walked first and only the destination is restored, so a ten-step undo costs one
+            render, one storage write and one <code>Changed</code> raise instead of ten of each.
+        </p>
+        <p>
+            <code>UndoLabels</code> and <code>RedoLabels</code> name the steps in navigation order, which
+            is what a history panel renders; <code>JumpToPast</code> / <code>JumpToFuture</code> address
+            them the way redux-undo does.
+        </p>
+        <CodeBlock Code="@JumpApi" />
+
+        <DemoCard Title="A history panel"
+                  Description="Pick any point on either stack and land on it directly. Make a few changes below first, then step back through them."
+                  Source="@JumpSource" SourceLanguage="razor">
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" @onclick="Counter.Increment">Increment counter</button>
+                <button class="btn btn-secondary" @onclick="AddContact">Add a contact</button>
+                <button class="btn btn-secondary" @onclick="HistoryStack.Clear">Clear history</button>
             </div>
-        </div>
 
-        <div class="readout" style="margin-top:0.9rem">
-            <div class="readout__item">
-                <span class="readout__label">counter/Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
+            <div class="bb-grid">
+                <div class="bb-card">
+                    <p class="bb-card-title">Undo stack <span class="bb-badge">@HistoryStack.UndoCount</span></p>
+                    @if (HistoryStack.UndoCount == 0)
+                    {
+                        <p class="bb-card-desc">Nothing to undo yet.</p>
+                    }
+                    else
+                    {
+                        <div class="bb-toolbar">
+                            @for (var i = 0; i < HistoryStack.UndoLabels.Count; i++)
+                            {
+                                var steps = i + 1;
+                                var label = HistoryStack.UndoLabels[i];
+                                <button class="btn btn-secondary" @onclick="() => HistoryStack.Jump(-steps)">
+                                    ↶ @label <span class="bb-muted">(@steps)</span>
+                                </button>
+                            }
+                        </div>
+                    }
+                </div>
+                <div class="bb-card">
+                    <p class="bb-card-title">Redo stack <span class="bb-badge">@HistoryStack.RedoCount</span></p>
+                    @if (HistoryStack.RedoCount == 0)
+                    {
+                        <p class="bb-card-desc">Nothing to redo yet.</p>
+                    }
+                    else
+                    {
+                        <div class="bb-toolbar">
+                            @for (var i = 0; i < HistoryStack.RedoLabels.Count; i++)
+                            {
+                                var index = i;
+                                var label = HistoryStack.RedoLabels[i];
+                                <button class="btn btn-secondary" @onclick="() => HistoryStack.JumpToFuture(index)">
+                                    ↷ @label <span class="bb-muted">(@(index + 1))</span>
+                                </button>
+                            }
+                        </div>
+                    }
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">contacts</span>
-                <span class="readout__value">@Contacts.Total</span>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">counter/Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">contacts</span>
+                    <span class="bb-stat-value">@Contacts.Total</span>
+                </div>
             </div>
-        </div>
-    </DemoCard>
-
-    <h2>Grouping keystrokes into one step</h2>
-    <p>
-        A filter removes an action from the stack entirely. <em>Grouping</em> keeps it but folds it
-        into the step already open, so a burst of related actions - every keystroke in one field,
-        every frame of one drag - costs a single undo. Return the same non-<code>null</code> key for
-        actions that belong together, and <code>null</code> for anything that deserves its own step.
-    </p>
-    <CodeBlock Code="@GroupBy" Title="Registration" />
-
-    <p>
-        Only <em>consecutive</em> actions merge: a differently-keyed action, an ungrouped one, a
-        <code>Checkpoint</code>, an undo or a redo all close the open group, so the next action
-        starts a fresh step. That is what stops a step the user has already stepped away from from
-        quietly absorbing new work.
-    </p>
-    <CodeBlock Code="@GroupBySemantics" Title="What the user experiences" Compact="true" />
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Filter, group or checkpoint?">
-        <p style="margin-bottom:0">
-            <strong>Filter</strong> when the action should never be a destination (telemetry, cursor
-            position). <strong>Group</strong> when a burst of actions is one edit to the user.
-            <strong>Checkpoint</strong> when only your component knows where the boundary is - a
-            field losing focus, a wizard step completing. They compose: group the keystrokes,
-            checkpoint on blur.
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Grouping keystrokes into one step</h3>
+        <p>
+            A filter removes an action from the stack entirely. <em>Grouping</em> keeps it but folds it
+            into the step already open, so a burst of related actions - every keystroke in one field,
+            every frame of one drag - costs a single undo. Return the same non-<code>null</code> key for
+            actions that belong together, and <code>null</code> for anything that deserves its own step.
         </p>
-    </Callout>
-
-    <h2>API</h2>
-    <ApiTable Title="BlexHistory" Rows="@HistoryRows" />
-
-    <h2>How it works</h2>
-    <ol>
-        <li><code>Start()</code> captures the current global state as the baseline and subscribes to the manager.</li>
-        <li>After each action, the previous snapshot is pushed onto the undo stack and the new one becomes the present. The redo stack is cleared, because you have branched away from it.</li>
-        <li><code>Undo()</code> pushes the present onto the redo stack, pops the undo stack and restores that snapshot through <code>RestoreGlobalState</code>.</li>
-        <li>Restoring does <strong>not</strong> record an action, so stepping backwards never pollutes the history you are stepping through.</li>
-    </ol>
-
-    <p>
-        Snapshots are whole state trees. <code>MaxEntries</code> caps how many are retained - older
-        ones are discarded from the bottom of the stack. The default is 100.
-    </p>
-
-    <h2>Labels</h2>
-    <p>
-        Each entry remembers the qualified name of the action that produced it, so a button can say
-        what it is about to undo rather than just "Undo".
-    </p>
-    <CodeBlock Code="@Labels" Language="razor" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="External restores are absorbed">
-        <p style="margin-bottom:0">
-            If something else changes the state without an action - a DevTools time-travel jump, or a
-            manual <code>RestoreGlobalState</code> - history refreshes its present snapshot so the
-            next undo diffs from what the user can actually see, rather than from a stale pre-jump
-            state.
+        <CodeBlock Code="@GroupBy" Title="Registration" />
+
+        <p>
+            Only <em>consecutive</em> actions merge: a differently-keyed action, an ungrouped one, a
+            <code>Checkpoint</code>, an undo or a redo all close the open group, so the next action
+            starts a fresh step. That is what stops a step the user has already stepped away from from
+            quietly absorbing new work.
+        </p>
+        <CodeBlock Code="@GroupBySemantics" Title="What the user experiences" />
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Filter, group or checkpoint?">
+            <p>
+                <strong>Filter</strong> when the action should never be a destination (telemetry, cursor
+                position). <strong>Group</strong> when a burst of actions is one edit to the user.
+                <strong>Checkpoint</strong> when only your component knows where the boundary is - a
+                field losing focus, a wizard step completing. They compose: group the keystrokes,
+                checkpoint on blur.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> API</h3>
+        <ApiTable Title="BlexHistory" Rows="@HistoryRows" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> How it works</h3>
+        <ol class="bb-detail-list">
+            <li><code>Start()</code> captures the current global state as the baseline and subscribes to the manager.</li>
+            <li>After each action, the previous snapshot is pushed onto the undo stack and the new one becomes the present. The redo stack is cleared, because you have branched away from it.</li>
+            <li><code>Undo()</code> pushes the present onto the redo stack, pops the undo stack and restores that snapshot through <code>RestoreGlobalState</code>.</li>
+            <li>Restoring does <strong>not</strong> record an action, so stepping backwards never pollutes the history you are stepping through.</li>
+        </ol>
+
+        <p>
+            Snapshots are whole state trees. <code>MaxEntries</code> caps how many are retained - older
+            ones are discarded from the bottom of the stack. The default is 100.
         </p>
-    </Callout>
+    </div>
 
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Undo/redo and persistence cooperate">
-        <p style="margin-bottom:0">
-            A restore raises <code>StateRestored</code>, and the persistor writes every persisted
-            slice back in response. So undoing and then reloading the page keeps the undone state -
-            the reload cannot resurrect what you just stepped away from.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Labels</h3>
+        <p>
+            Each entry remembers the qualified name of the action that produced it, so a button can say
+            what it is about to undo rather than just "Undo".
         </p>
-    </Callout>
-
-    <h2>Choosing what earns an undo step</h2>
-    <p>
-        By default every action becomes its own step. That is rarely what a user means by "undo" once
-        a text box is involved: typing "hello" into a <code>@@bind</code>-ed property records five
-        actions, so undo walks back one letter at a time. Pass a <em>filter</em> - a predicate over
-        the action context - to decide which actions get their own step. It is the same idea as
-        redux-undo's <code>filter</code>.
-    </p>
-    <CodeBlock Code="@Filter" Title="Registration" />
-
-    <p>
-        A filtered action still applies, and it still moves the present forward. It simply does not
-        become a separate step, so the next undo reverts it <em>together with</em> the recorded action
-        before it. That is what keeps undo landing on states the user recognizes: never on a
-        half-typed word, and never on a state they never saw.
-    </p>
-    <CodeBlock Code="@FilterSemantics" Title="What the user experiences" Compact="true" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="The filter fails open">
-        <p style="margin-bottom:0">
-            If the predicate throws, the action is recorded anyway and the exception is reported
-            through <code>OnError</code> with source <code>"history"</code>. Keeping an extra undo
-            step is a smaller failure than silently losing one the user is about to reach for.
+        <CodeBlock Code="@Labels" Language="razor" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="External restores are absorbed">
+            <p>
+                If something else changes the state without an action - a DevTools time-travel jump, or a
+                manual <code>RestoreGlobalState</code> - history refreshes its present snapshot so the
+                next undo diffs from what the user can actually see, rather than from a stale pre-jump
+                state.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Undo/redo and persistence cooperate">
+            <p>
+                A restore raises <code>StateRestored</code>, and the persistor writes every persisted
+                slice back in response. So undoing and then reloading the page keeps the undone state -
+                the reload cannot resurrect what you just stepped away from.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Choosing what earns an undo step</h3>
+        <p>
+            By default every action becomes its own step. That is rarely what a user means by "undo" once
+            a text box is involved: typing "hello" into a <code>@@bind</code>-ed property records five
+            actions, so undo walks back one letter at a time. Pass a <em>filter</em> - a predicate over
+            the action context - to decide which actions get their own step. It is the same idea as
+            redux-undo's <code>filter</code>.
+        </p>
+        <CodeBlock Code="@Filter" Title="Registration" />
+
+        <p>
+            A filtered action still applies, and it still moves the present forward. It simply does not
+            become a separate step, so the next undo reverts it <em>together with</em> the recorded action
+            before it. That is what keeps undo landing on states the user recognizes: never on a
+            half-typed word, and never on a state they never saw.
+        </p>
+        <CodeBlock Code="@FilterSemantics" Title="What the user experiences" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="The filter fails open">
+            <p>
+                If the predicate throws, the action is recorded anyway and the exception is reported
+                through <code>OnError</code> with source <code>"history"</code>. Keeping an extra undo
+                step is a smaller failure than silently losing one the user is about to reach for.
+            </p>
+        </Callout>
+
+        <h4>Marking your own boundaries</h4>
+        <p>
+            A filter alone leaves the filtered work with no boundary of its own, so the next recorded
+            action swallows it: undo would discard the whole typed edit <em>and</em> the button press
+            after it. <code>Checkpoint(label)</code> commits the current state as an undo step on demand
+            - call it where the user would expect a boundary: a pause in typing, a field losing focus, a
+            wizard step completing.
+        </p>
+        <CodeBlock Code="@CheckpointSource" Title="Debounced boundaries" />
+
+        <p>
+            Consecutive checkpoints with nothing in between collapse into one, so a "user stopped
+            typing" timer can call it freely without growing the stack while the state sits still.
         </p>
-    </Callout>
-
-    <h3>Marking your own boundaries</h3>
-    <p>
-        A filter alone leaves the filtered work with no boundary of its own, so the next recorded
-        action swallows it: undo would discard the whole typed edit <em>and</em> the button press
-        after it. <code>Checkpoint(label)</code> commits the current state as an undo step on demand
-        - call it where the user would expect a boundary: a pause in typing, a field losing focus, a
-        wizard step completing.
-    </p>
-    <CodeBlock Code="@CheckpointSource" Title="Debounced boundaries" Compact="true" />
-
-    <p>
-        Consecutive checkpoints with nothing in between collapse into one, so a "user stopped
-        typing" timer can call it freely without growing the stack while the state sits still.
-    </p>
-
-    <h2>Scoping history to one store</h2>
-    <p>
-        <code>BlexHistory</code> is deliberately global: it snapshots the whole tree, which is what
-        makes cross-store undo coherent. For per-store history, keep your own stack of that store's
-        snapshots and restore them with <code>RestoreState</code>, which applies a snapshot without
-        recording an action.
-    </p>
-    <CodeBlock Code="@PerStore" />
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Snapshots cost memory">
-        <p style="margin-bottom:0">
-            Every entry is a full serialized copy of every registered store. With large collections
-            in state, lower <code>maxEntries</code> - or scope history to the store that needs it.
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Scoping history to one store</h3>
+        <p>
+            <code>BlexHistory</code> is deliberately global: it snapshots the whole tree, which is what
+            makes cross-store undo coherent. For per-store history, keep your own stack of that store's
+            snapshots and restore them with <code>RestoreState</code>, which applies a snapshot without
+            recording an action.
         </p>
-    </Callout>
+        <CodeBlock Code="@PerStore" />
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Snapshots cost memory">
+            <p>
+                Every entry is a full serialized copy of every registered store. With large collections
+                in state, lower <code>maxEntries</code> - or scope history to the store that needs it.
+            </p>
+        </Callout>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Home.razor b/src/Utilities/Blex/Demo/Client/Pages/Home.razor
new file mode 100644
index 00000000000..f8550569809
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Pages/Home.razor
@@ -0,0 +1,352 @@
+@page "/"
+@layout MainLayout
+@inherits BlexComponentBase
+@inject CounterStore Counter
+
+<PageTitle>Blex - reactive state management for Blazor</PageTitle>
+
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with
+   Fluxor → persona tiles → FAQ → final call to action. Everything else on the site is a
+   documentation page under DocsLayout. The hero's sample is the real CounterStore the docs use,
+   resolved from DI and persisted - a state library is best introduced by changing some state. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>State management for Blazor,<br /><span class="bb-hero-accent">minus the ceremony.</span></h1>
+            <p class="bb-hero-sub">
+                Write one <code>[BlexState]</code> field and one <code>[BlexAction]</code> method. A Roslyn
+                source generator writes the reactive properties, the batched dispatch, the JSON snapshots
+                and the loading and error lifecycle of your effects - and every action streams into the
+                Redux DevTools with time travel built in.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Blex</pre>
+            <div class="bb-hero-actions">
+                <a href="quick-start" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="introduction" class="btn btn-secondary bb-btn-lg">Read the docs</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The store, framed as a window: its source on top, and that very store running underneath -
+           live, so the first thing a visitor can do here is dispatch an action. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">CounterStore.cs</span>
+                </div>
+                <CodeBlock Code="@HeroStore" />
+                <div class="home-hero-live">
+                    <div class="bb-stats">
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Count</span>
+                            <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">DoubleCount</span>
+                            <span class="bb-stat-value">@Counter.DoubleCount</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">IsEven</span>
+                            <span class="bb-stat-value">@Counter.IsEven</span>
+                        </div>
+                    </div>
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-primary" @onclick="Counter.Increment">Increment()</button>
+                        <button type="button" class="btn btn-secondary" @onclick="Counter.Decrement">Decrement()</button>
+                        <button type="button" class="btn btn-secondary" @onclick="Counter.ResetState">ResetState()</button>
+                    </div>
+                    <p class="bb-card-desc">
+                        Persisted to <code>localStorage</code> - reload and the count survives. The Inspector at the
+                        bottom of the window shows every action.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>Generated, not written</strong><span>properties, dispatch and snapshots</span></div>
+        <div><strong>Time travel built in</strong><span>Redux DevTools and in-app undo/redo</span></div>
+        <div><strong>Effects with a lifecycle</strong><span>loading, error, cancellation, concurrency</span></div>
+        <div><strong>Every host</strong><span>Server, WebAssembly, Auto, Hybrid and MAUI</span></div>
+    </section>
+
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>The Flux model, without the boilerplate</h2>
+        <p class="bb-section-sub">
+            One observable state tree, named actions and a middleware pipeline - the parts of Flux that pay
+            for themselves - with the action classes, reducers and feature registrations generated away.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Stores and computed state</h3>
+                <p class="bb-card-desc">
+                    A <code>partial class</code> with <code>[BlexState]</code> fields becomes a reactive store;
+                    <code>[BlexComputed]</code> methods become memoized properties that invalidate themselves.
+                </p>
+                <a href="stores" class="btn btn-outline">Stores &amp; state →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Batched, named actions</h3>
+                <p class="bb-card-desc">
+                    Every mutation inside an <code>[BlexAction]</code> folds into one notification, one render
+                    and one history entry, with its arguments captured as the payload.
+                </p>
+                <a href="actions" class="btn btn-outline">Actions →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Effects</h3>
+                <p class="bb-card-desc">
+                    <code>[BlexEffect]</code> generates <code>XxxIsLoading</code>, <code>XxxError</code> and
+                    <code>CancelXxx()</code>, with <code>Latest</code>, <code>Drop</code> and <code>Queue</code>
+                    concurrency and a built-in debounce.
+                </p>
+                <a href="effects" class="btn btn-outline">Effects →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Selectors</h3>
+                <p class="bb-card-desc">
+                    Subscribe a component to a projection and it re-renders only when that value changes -
+                    across stores too, with <code>CreateSelector</code>.
+                </p>
+                <a href="subscriptions" class="btn btn-outline">Components &amp; selectors →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Persistence</h3>
+                <p class="bb-card-desc">
+                    <code>Persist = true</code> and a provider: rehydrated on startup, debounced writes,
+                    versioned payloads with migrations, and sync across tabs.
+                </p>
+                <a href="persistence" class="btn btn-outline">Persistence →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Undo, redo and time travel</h3>
+                <p class="bb-card-desc">
+                    <code>BlexHistory</code> steps the whole state tree back and forth in the app; the
+                    DevTools bridge rewinds it from the browser extension.
+                </p>
+                <a href="history" class="btn btn-outline">Undo &amp; redo →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Write the store</h3>
+                    <p>
+                        A <code>partial class</code> marked <code>[BlexStore]</code>. Fields become reactive
+                        properties and <code>OnXxx</code> methods become public, recorded actions - the
+                        generator enforces the conventions at compile time.
+                    </p>
+                    <a href="quick-start">Quick start →</a>
+                </div>
+                <CodeBlock Code="@StepStore" />
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Register it, wrap the router</h3>
+                    <p>
+                        One call for Blex, one per store, and <code>&lt;BlexProvider&gt;</code> around the
+                        router - it registers the stores, restores persisted state and connects the DevTools.
+                    </p>
+                    <a href="installation">Installation →</a>
+                </div>
+                <CodeBlock Code="@StepRegister" />
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Use it in a component</h3>
+                    <p>
+                        <code>Subscribe(store)</code> re-renders the component when the store changes and
+                        detaches itself on dispose - no <code>StateHasChanged</code>, nothing to unsubscribe.
+                    </p>
+                    <a href="subscriptions">Components &amp; selectors →</a>
+                </div>
+                <CodeBlock Code="@StepComponent" Language="razor" />
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not Fluxor?</h2>
+        <p class="bb-section-sub">
+            Fluxor is the de-facto Redux library for Blazor, and it works - but a single counter costs a state
+            class, an action class, a reducer and often an effect class, and there is no DevTools time travel.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="Fluxor compared with Blex">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Task</th><th>Fluxor</th><th>Blex</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Define a piece of state</td><td>Feature + State class</td><td>one <code>[BlexState]</code> field</td></tr>
+                    <tr><td>Define an action</td><td>Action class + Reducer method</td><td>one <code>[BlexAction]</code> method</td></tr>
+                    <tr><td>Derived state</td><td>manual selectors</td><td><code>[BlexComputed]</code>, memoized</td></tr>
+                    <tr><td>Async side-effects</td><td>Effect classes</td><td><code>[BlexEffect]</code> with generated loading and error</td></tr>
+                    <tr><td>Persistence</td><td>third-party</td><td>built in, with debounce and migrations</td></tr>
+                    <tr><td>Undo / redo</td><td>✗</td><td><code>BlexHistory</code></td></tr>
+                    <tr><td>Redux DevTools time travel</td><td>✗</td><td>built in</td></tr>
+                    <tr><td>Test helpers</td><td>✗</td><td>the <code>Bit.Blex.Testing</code> harness</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Blex?</h3>
+                <p class="bb-card-desc">A complete, reactive, time-travelable counter in three files and about twenty lines.</p>
+                <a href="quick-start" class="btn btn-primary">Quick start →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Coming from Fluxor?</h3>
+                <p class="bb-card-desc">What maps to what - stores for features, actions for reducers, effects for effects - and what is new.</p>
+                <a href="introduction" class="btn btn-outline">The introduction →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it runs the real generator over its stores instead of guessing.</p>
+                <a href="mcp" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Which hosting models does it support?</summary>
+                <p>
+                    Blazor Server, WebAssembly, Auto and static server-side rendering, MAUI Blazor Hybrid and native .NET MAUI,
+                    on .NET 8, 9 and 10. Prerendered store state is handed to the interactive render through
+                    <code>PersistentComponentState</code>, so a page does not flicker back to its defaults.
+                </p>
+            </details>
+            <details>
+                <summary>Do I need the Redux DevTools extension?</summary>
+                <p>
+                    No. The bridge connects when the extension is there and disables itself when it is not - as in a
+                    MAUI WebView. Set <code>&lt;BlexProvider EnableDevTools="false"&gt;</code> in production so the state
+                    tree is never handed to an installed extension, or redact keys with <code>RedactDevToolsKeys</code>.
+                </p>
+            </details>
+            <details>
+                <summary>Is there reflection at runtime?</summary>
+                <p>
+                    The store plumbing is generated at compile time, and a malformed store fails the build with a
+                    <code>BLEX</code> diagnostic. Snapshots go through <code>System.Text.Json</code>; for a trimmed or AOT
+                    publish, point <code>BlexJson.Configure</code> at a source-generated context of your state types.
+                </p>
+            </details>
+            <details>
+                <summary>Can I test a store without a browser?</summary>
+                <p>
+                    Yes - stores, the manager and persistence never touch Blazor or JavaScript. A store tests like a plain
+                    object, and <code>Bit.Blex.Testing</code> adds a harness that records every action, its payload and
+                    the state after it.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Delete the boilerplate</h2>
+        <p class="bb-section-sub">One package, one service call, one provider - and a store is a field and a method.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Blex</pre>
+        <div class="bb-hero-actions">
+            <a href="quick-start" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="introduction" class="btn btn-secondary bb-btn-lg">Browse the docs</a>
+        </div>
+    </section>
+</div>
+
+@code {
+    protected override void OnInitialized() => Subscribe(Counter);
+
+    private const string HeroStore = """
+        [BlexStore(Name = "counter", Persist = true)]
+        public partial class CounterStore
+        {
+            [BlexState] private int _count;
+            [BlexState] private int _step = 1;
+
+            [BlexComputed] private int  ComputeDoubleCount() => Count * 2;
+            [BlexComputed] private bool ComputeIsEven()      => Count % 2 == 0;
+
+            [BlexAction] private void OnIncrement() => Count += Step;
+            [BlexAction] private void OnDecrement() => Count -= Step;
+        }
+        """;
+
+    private const string StepStore = """
+        [BlexStore(Name = "cart", Persist = true)]
+        public partial class CartStore
+        {
+            [BlexState] private IReadOnlyList<CartLine> _lines = [];
+
+            [BlexComputed] private decimal ComputeTotal() => Lines.Sum(l => l.Total);
+
+            [BlexAction] private void OnAdd(CartLine line) => Lines = [.. Lines, line];
+        }
+        """;
+
+    private const string StepRegister = """
+        // Program.cs
+        builder.Services.AddBitBlexServices();
+        builder.Services.AddBitBlexStore<CartStore>();
+        builder.Services.AddBitBlexLocalStoragePersistence();
+
+        // App.razor
+        <BlexProvider>
+            <Router AppAssembly="@typeof(App).Assembly">...</Router>
+        </BlexProvider>
+        """;
+
+    private const string StepComponent = """
+        @inherits BlexComponentBase
+        @inject CartStore Cart
+
+        <p>@Cart.Lines.Count items · @Cart.Total.ToString("C")</p>
+        <button @onclick="() => Cart.Add(new(...))">Add</button>
+
+        @code {
+            protected override void OnInitialized() => Subscribe(Cart);
+        }
+        """;
+}
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Installation.razor b/src/Utilities/Blex/Demo/Client/Pages/Installation.razor
index 7e3185c9d20..d41d746b151 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Installation.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Installation.razor
@@ -3,101 +3,113 @@
 <DocPage Href="installation" Title="Installation"
          Lead="One package, one DI call per store, and one component wrapped around your router.">
 
-    <h2>Packages</h2>
-    <p>
-        Reference <code>Bit.Blex</code>. It carries the runtime, the source generator that turns your
-        <code>[BlexStore]</code> classes into reactive stores, and the Blazor integration (the
-        <code>Bit.Blex.Blazor</code> namespace). The generator ships inside the package as an analyzer
-        (under <code>analyzers/dotnet/cs</code>), so it adds nothing to your app's output - but NuGet
-        does not flow analyzers to projects that only get a package transitively, so reference
-        <code>Bit.Blex</code> directly from every project that declares stores. Every runtime package
-        targets <code>net8.0</code>, <code>net9.0</code> and <code>net10.0</code>.
-    </p>
-
-    <CodeBlock Code="@Install" Language="bash" Title="Add the packages" />
-
-    <p>Or directly in the project file:</p>
-    <CodeBlock Code="@CsprojSample" Language="xml" FileName="MyApp.csproj" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Working inside this repository">
-        <p style="margin-bottom:0">
-            The sample and docs projects live next to the sources, so they reference the generator
-            as an analyzer <em>project</em> reference instead of consuming the published package:
-            <code>&lt;ProjectReference Include="..\..\Bit.Blex.Generators\Bit.Blex.Generators.csproj"
-            OutputItemType="Analyzer" ReferenceOutputAssembly="false" /&gt;</code>.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Packages</h3>
+        <p>
+            Reference <code>Bit.Blex</code>. It carries the runtime, the source generator that turns your
+            <code>[BlexStore]</code> classes into reactive stores, and the Blazor integration (the
+            <code>Bit.Blex.Blazor</code> namespace). The generator ships inside the package as an analyzer
+            (under <code>analyzers/dotnet/cs</code>), so it adds nothing to your app's output - but NuGet
+            does not flow analyzers to projects that only get a package transitively, so reference
+            <code>Bit.Blex</code> directly from every project that declares stores. Every runtime package
+            targets <code>net8.0</code>, <code>net9.0</code> and <code>net10.0</code>.
         </p>
-    </Callout>
-
-    <h2>Register the services</h2>
-    <p>
-        <code>AddBitBlexServices</code> registers the manager and the middleware pipeline;
-        <code>AddBitBlexStore&lt;T&gt;</code> registers each store as a scoped service exposed both as
-        its concrete type and as <code>IBlexStore</code>. A store is attached to the manager on first
-        resolution, so its actions are observed even in hosts without a provider component - console
-        apps, workers and tests included.
-    </p>
-
-    <CodeBlock Code="@ProgramSample" FileName="Program.cs" />
-
-    <ApiTable Title="Registration APIs" Rows="@RegistrationRows" MemberHeader="Call" />
-
-    <h2>Add the provider</h2>
-    <p>
-        <code>&lt;BlexProvider&gt;</code> goes once, near the root of the app, wrapping the router.
-        On initialization it registers every <code>IBlexStore</code> with the manager, restores
-        prerendered and persisted state, and starts undo/redo recording; on first render it connects
-        the Redux DevTools bridge.
-    </p>
-
-    <CodeBlock Code="@AppSample" Language="razor" FileName="App.razor" />
-
-    <ApiTable Title="&lt;BlexProvider&gt; parameters" Rows="@ProviderRows" MemberHeader="Parameter" />
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Turn DevTools off in production">
-        <p style="margin-bottom:0">
-            While enabled, the entire application state tree is serialized and handed to the Redux
-            DevTools browser extension on every action. Bind <code>EnableDevTools</code> to your host
-            environment so production builds never expose application state to an installed extension.
-            See <a href="devtools">DevTools &amp; time travel</a> for redaction options.
+
+        <CodeBlock Code="@Install" Language="bash" Title="Add the packages" />
+
+        <p>Or directly in the project file:</p>
+        <CodeBlock Code="@CsprojSample" Language="xml" FileName="MyApp.csproj" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Working inside this repository">
+            <p>
+                The sample and docs projects live next to the sources, so they reference the generator
+                as an analyzer <em>project</em> reference instead of consuming the published package:
+                <code>&lt;ProjectReference Include="..\..\Bit.Blex.Generators\Bit.Blex.Generators.csproj"
+                OutputItemType="Analyzer" ReferenceOutputAssembly="false" /&gt;</code>.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
+        <p>
+            <code>AddBitBlexServices</code> registers the manager and the middleware pipeline;
+            <code>AddBitBlexStore&lt;T&gt;</code> registers each store as a scoped service exposed both as
+            its concrete type and as <code>IBlexStore</code>. A store is attached to the manager on first
+            resolution, so its actions are observed even in hosts without a provider component - console
+            apps, workers and tests included.
+        </p>
+
+        <CodeBlock Code="@ProgramSample" FileName="Program.cs" />
+
+        <ApiTable Title="Registration APIs" Rows="@RegistrationRows" MemberHeader="Call" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Add the provider</h3>
+        <p>
+            <code>&lt;BlexProvider&gt;</code> goes once, near the root of the app, wrapping the router.
+            On initialization it registers every <code>IBlexStore</code> with the manager, restores
+            prerendered and persisted state, and starts undo/redo recording; on first render it connects
+            the Redux DevTools bridge.
+        </p>
+
+        <CodeBlock Code="@AppSample" Language="razor" FileName="App.razor" />
+
+        <ApiTable Title="&lt;BlexProvider&gt; parameters" Rows="@ProviderRows" MemberHeader="Parameter" />
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Turn DevTools off in production">
+            <p>
+                While enabled, the entire application state tree is serialized and handed to the Redux
+                DevTools browser extension on every action. Bind <code>EnableDevTools</code> to your host
+                environment so production builds never expose application state to an installed extension.
+                See <a href="devtools">DevTools &amp; time travel</a> for redaction options.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Without Blazor</h3>
+        <p>
+            Stores, the manager and persistence never touch Blazor or JavaScript - only the
+            <code>Bit.Blex.Blazor</code> namespace does. In a console app, worker or test, resolve
+            the stores from DI (which registers them with the manager) and drive them directly. For
+            persistence, implement <code>IBlexStorage</code> over a file or database and call
+            <code>AddBitBlexPersistence()</code>.
         </p>
-    </Callout>
-
-    <h2>Without Blazor</h2>
-    <p>
-        Stores, the manager and persistence never touch Blazor or JavaScript - only the
-        <code>Bit.Blex.Blazor</code> namespace does. In a console app, worker or test, resolve
-        the stores from DI (which registers them with the manager) and drive them directly. For
-        persistence, implement <code>IBlexStorage</code> over a file or database and call
-        <code>AddBitBlexPersistence()</code>.
-    </p>
-
-    <CodeBlock Code="@HeadlessSample" Title="Headless host" />
-
-    <h2>Trimming and AOT</h2>
-    <p>
-        Snapshots - <code>SerializeState</code>, persistence, the DevTools payload - go through
-        <code>System.Text.Json</code>. By default that is the reflection-based serializer, whose
-        metadata a trimmed publish (the Blazor WebAssembly release default) is free to strip for
-        types it cannot see being used. Point the shared options at a source-generated context and
-        every generated snapshot uses it instead.
-    </p>
-    <CodeBlock Code="@AotSample" FileName="Program.cs" />
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Register the state types, not the stores">
-        <p style="margin-bottom:0">
-            A store class is never serialized - only the value of each <code>[BlexState]</code>
-            field, one property at a time. So the context needs <code>CartLine</code> and
-            <code>BlexEntityState&lt;Todo, int&gt;</code>, not <code>CartStore</code>. A store whose
-            state is all primitives and strings needs nothing at all.
+
+        <CodeBlock Code="@HeadlessSample" Title="Headless host" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Trimming and AOT</h3>
+        <p>
+            Snapshots - <code>SerializeState</code>, persistence, the DevTools payload - go through
+            <code>System.Text.Json</code>. By default that is the reflection-based serializer, whose
+            metadata a trimmed publish (the Blazor WebAssembly release default) is free to strip for
+            types it cannot see being used. Point the shared options at a source-generated context and
+            every generated snapshot uses it instead.
         </p>
-    </Callout>
-
-    <h2>Requirements</h2>
-    <ul>
-        <li><strong>.NET 10</strong> for <code>Bit.Blex</code> and <code>Bit.Blex.Testing</code>.</li>
-        <li><strong>netstandard2.0</strong> for the generator, as Roslyn analyzers require.</li>
-        <li>Nullable reference types are supported and expected; generated code is annotated.</li>
-    </ul>
+        <CodeBlock Code="@AotSample" FileName="Program.cs" />
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Register the state types, not the stores">
+            <p>
+                A store class is never serialized - only the value of each <code>[BlexState]</code>
+                field, one property at a time. So the context needs <code>CartLine</code> and
+                <code>BlexEntityState&lt;Todo, int&gt;</code>, not <code>CartStore</code>. A store whose
+                state is all primitives and strings needs nothing at all.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Requirements</h3>
+        <ul class="bb-detail-list">
+            <li><strong>.NET 8, 9 or 10</strong> for <code>Bit.Blex</code>, <code>Bit.Blex.Maui</code> and <code>Bit.Blex.Testing</code> - each ships <code>net8.0</code>, <code>net9.0</code> and <code>net10.0</code> builds.</li>
+            <li><strong>netstandard2.0</strong> for the generator, as Roslyn analyzers require.</li>
+            <li>Nullable reference types are supported and expected; generated code is annotated.</li>
+        </ul>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Introduction.razor b/src/Utilities/Blex/Demo/Client/Pages/Introduction.razor
index 8335f462e66..c4c07f25155 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Introduction.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Introduction.razor
@@ -1,142 +1,127 @@
-@page "/"
+@page "/introduction"
 @inherits BlexComponentBase
 @inject CounterStore Counter
 
-<PageTitle>Blex · Reactive state management for Blazor</PageTitle>
-
-<article class="doc">
-    <header class="hero">
-        <span class="hero__tag">Blazor state management</span>
-        <h1>State management that gets out of the way</h1>
-        <p class="hero__lead">
-            Blex is a lightweight, source-generator-powered state library for Blazor. You write one
-            <code>[BlexState]</code> field and one <code>[BlexAction]</code> method; the generator writes the
-            reactive properties, the dispatch plumbing, the JSON snapshots and the loading/error
-            lifecycle. Redux DevTools time-travel is built in.
+<DocPage Href="introduction" Title="Introduction"
+         Lead="Blex is lightweight, source-generator-powered state management for Blazor and .NET MAUI. You write one [BlexState] field and one [BlexAction] method; the generator writes the reactive properties, the dispatch plumbing, the JSON snapshots and the loading and error lifecycle - and Redux DevTools time travel is built in.">
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The whole store</h3>
+        <p>
+            This is not an excerpt - it is a complete, working store. There are no action classes, no
+            reducers, no feature registrations and no selector boilerplate.
         </p>
-        <div class="hero__cta">
-            <a class="btn btn-primary" href="quick-start">Get started</a>
-            <a class="btn" href="stores">Read the concepts</a>
-            <a class="btn btn-ghost" href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Blex" target="_blank" rel="noopener">GitHub ↗</a>
-        </div>
-    </header>
-
-    <h2>The whole store</h2>
-    <p>
-        This is not an excerpt - it is a complete, working store. There are no action classes, no
-        reducers, no feature registrations and no selector boilerplate.
-    </p>
-
-    <CodeBlock Code="@StoreSample" FileName="CounterStore.cs" />
-
-    <p>From that, the generator emits:</p>
-    <ul>
-        <li>reactive <code>Count</code> / <code>Step</code> properties whose setters flow through the dispatch pipeline,</li>
-        <li>memoized <code>DoubleCount</code> / <code>IsEven</code> accessors that invalidate themselves on every state change,</li>
-        <li>public <code>Increment()</code>, <code>Decrement()</code> and <code>SetStep(int)</code> wrappers that batch their mutations into one named, recorded action,</li>
-        <li><code>SerializeState()</code> / <code>DeserializeState()</code> for snapshots, persistence and time-travel,</li>
-        <li>and the <code>BlexStoreBase</code> base type itself.</li>
-    </ul>
-
-    <DemoCard Title="That store, running right now"
-              Description="This is the very store shown above, resolved from DI. Open the Inspector at the bottom of the page to watch the actions stream in."
-              Source="@CounterUsage" SourceLanguage="razor">
-        <div class="readout">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">DoubleCount</span>
-                <span class="readout__value">@Counter.DoubleCount</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">IsEven</span>
-                <span class="readout__value">@Counter.IsEven</span>
+
+        <CodeBlock Code="@StoreSample" FileName="CounterStore.cs" />
+
+        <p>From that, the generator emits:</p>
+        <ul class="bb-detail-list">
+            <li>reactive <code>Count</code> / <code>Step</code> properties whose setters flow through the dispatch pipeline,</li>
+            <li>memoized <code>DoubleCount</code> / <code>IsEven</code> accessors that invalidate themselves on every state change,</li>
+            <li>public <code>Increment()</code>, <code>Decrement()</code> and <code>SetStep(int)</code> wrappers that batch their mutations into one named, recorded action,</li>
+            <li><code>SerializeState()</code> / <code>DeserializeState()</code> for snapshots, persistence and time-travel,</li>
+            <li>and the <code>BlexStoreBase</code> base type itself.</li>
+        </ul>
+
+        <DemoCard Title="That store, running right now"
+                  Description="This is the very store shown above, resolved from DI. Open the Inspector at the bottom of the page to watch the actions stream in."
+                  Source="@CounterUsage" SourceLanguage="razor">
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">DoubleCount</span>
+                    <span class="bb-stat-value">@Counter.DoubleCount</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">IsEven</span>
+                    <span class="bb-stat-value">@Counter.IsEven</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Step</span>
+                    <span class="bb-stat-value">@Counter.Step</span>
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Step</span>
-                <span class="readout__value">@Counter.Step</span>
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="Counter.Increment">+ @Counter.Step</button>
+                <button class="btn btn-secondary" @onclick="Counter.Decrement">− @Counter.Step</button>
+                <button class="btn btn-secondary" @onclick="() => Counter.SetStep(Counter.Step == 1 ? 5 : 1)">
+                    Step → @(Counter.Step == 1 ? 5 : 1)
+                </button>
+                <button class="btn btn-secondary" @onclick="Counter.ResetState">Reset</button>
             </div>
-        </div>
-        <div class="row" style="margin-top:0.9rem">
-            <button class="btn btn-primary" @onclick="Counter.Increment">+ @Counter.Step</button>
-            <button class="btn" @onclick="Counter.Decrement">− @Counter.Step</button>
-            <button class="btn" @onclick="() => Counter.SetStep(Counter.Step == 1 ? 5 : 1)">
-                Step → @(Counter.Step == 1 ? 5 : 1)
-            </button>
-            <button class="btn btn-ghost" @onclick="Counter.ResetState">Reset</button>
-        </div>
-        <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">
-            This store is marked <code>Persist = true</code> - reload the page and the count survives.
+            <p class="bb-card-desc">
+                This store is marked <code>Persist = true</code> - reload the page and the count survives.
+            </p>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Why it exists</h3>
+        <p>
+            Fluxor is the de-facto Redux implementation for Blazor, and it works - but a single counter
+            costs you a state class, an action class, a reducer and often an effect class, and there is no
+            first-class DevTools time-travel. Blex keeps what makes Flux good - one observable state
+            tree, named actions, a middleware pipeline - and deletes the ceremony with a Roslyn
+            incremental generator.
         </p>
-    </DemoCard>
-
-    <h2>Why it exists</h2>
-    <p>
-        Fluxor is the de-facto Redux implementation for Blazor, and it works - but a single counter
-        costs you a state class, an action class, a reducer and often an effect class, and there is no
-        first-class DevTools time-travel. Blex keeps what makes Flux good - one observable state
-        tree, named actions, a middleware pipeline - and deletes the ceremony with a Roslyn
-        incremental generator.
-    </p>
-
-    <div class="table-scroll">
-        <table>
-            <thead>
-                <tr><th>Task</th><th>Fluxor</th><th>Blex</th></tr>
-            </thead>
-            <tbody>
-                <tr><td>Define a piece of state</td><td>Feature + State class</td><td>one <code>[BlexState]</code> field</td></tr>
-                <tr><td>Define an action</td><td>Action class + Reducer method</td><td>one <code>[BlexAction]</code> method</td></tr>
-                <tr><td>Action payloads in DevTools / middleware</td><td>manual</td><td>automatic (<code>ctx.Args</code>)</td></tr>
-                <tr><td>Derived state</td><td>manual selectors</td><td><code>[BlexComputed]</code>, memoized</td></tr>
-                <tr><td>Async side-effects</td><td>Effect classes</td><td><code>[BlexEffect]</code> with generated loading/error</td></tr>
-                <tr><td>Effect cancellation &amp; concurrency</td><td>manual</td><td><code>CancellationToken</code> + <code>Latest</code>/<code>Drop</code>/<code>Queue</code></td></tr>
-                <tr><td>Ad-hoc batched mutations</td><td class="check-no">✗</td><td><code>store.Batch(name, …)</code></td></tr>
-                <tr><td>Reset to initial state</td><td>manual</td><td><code>store.ResetState()</code></td></tr>
-                <tr><td>Granular re-render</td><td>manual selectors</td><td>selector <code>Subscribe(…)</code></td></tr>
-                <tr><td>Normalized collections</td><td>manual</td><td><code>BlexEntityAdapter</code> / <code>BlexEntityState</code></td></tr>
-                <tr><td>Persistence</td><td>3rd-party</td><td>built in, with debounce + migrations</td></tr>
-                <tr><td>Undo / redo</td><td class="check-no">✗</td><td><code>BlexHistory</code></td></tr>
-                <tr><td>Redux DevTools time-travel</td><td class="check-no">✗</td><td class="check-yes">✓ built in</td></tr>
-                <tr><td>Test helpers</td><td class="check-no">✗</td><td><code>Bit.Blex.Testing</code> harness</td></tr>
-                <tr><td>Boilerplate</td><td>high</td><td>generated away</td></tr>
-            </tbody>
-        </table>
+
+        <div class="bb-scroll">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Task</th><th>Fluxor</th><th>Blex</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Define a piece of state</td><td>Feature + State class</td><td>one <code>[BlexState]</code> field</td></tr>
+                    <tr><td>Define an action</td><td>Action class + Reducer method</td><td>one <code>[BlexAction]</code> method</td></tr>
+                    <tr><td>Action payloads in DevTools / middleware</td><td>manual</td><td>automatic (<code>ctx.Args</code>)</td></tr>
+                    <tr><td>Derived state</td><td>manual selectors</td><td><code>[BlexComputed]</code>, memoized</td></tr>
+                    <tr><td>Async side-effects</td><td>Effect classes</td><td><code>[BlexEffect]</code> with generated loading/error</td></tr>
+                    <tr><td>Effect cancellation &amp; concurrency</td><td>manual</td><td><code>CancellationToken</code> + <code>Latest</code>/<code>Drop</code>/<code>Queue</code></td></tr>
+                    <tr><td>Ad-hoc batched mutations</td><td class="bb-soft">✗</td><td><code>store.Batch(name, …)</code></td></tr>
+                    <tr><td>Reset to initial state</td><td>manual</td><td><code>store.ResetState()</code></td></tr>
+                    <tr><td>Granular re-render</td><td>manual selectors</td><td>selector <code>Subscribe(…)</code></td></tr>
+                    <tr><td>Normalized collections</td><td>manual</td><td><code>BlexEntityAdapter</code> / <code>BlexEntityState</code></td></tr>
+                    <tr><td>Persistence</td><td>3rd-party</td><td>built in, with debounce + migrations</td></tr>
+                    <tr><td>Undo / redo</td><td class="bb-soft">✗</td><td><code>BlexHistory</code></td></tr>
+                    <tr><td>Redux DevTools time-travel</td><td class="bb-soft">✗</td><td>✓ built in</td></tr>
+                    <tr><td>Test helpers</td><td class="bb-soft">✗</td><td><code>Bit.Blex.Testing</code> harness</td></tr>
+                    <tr><td>Boilerplate</td><td>high</td><td>generated away</td></tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 
-    <h2>What's in the box</h2>
-    <div class="grid grid--3">
-        @foreach (var entry in DocsNav.Flat.Skip(1))
-        {
-            <a class="card" href="@entry.Href">
-                <p class="card__title">@entry.Title</p>
-                <p class="card__body">@entry.Summary</p>
-            </a>
-        }
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What's in the box</h3>
+        <div class="bb-grid">
+            @foreach (var entry in DocsCatalog.AllPages.Where(entry => entry.PageType != typeof(Introduction)))
+            {
+                <a class="bb-card" href="@entry.Url">
+                    <p class="bb-card-title">@entry.Title</p>
+                    <p class="bb-card-desc">@entry.Description</p>
+                </a>
+            }
+        </div>
     </div>
 
-    <h2>Packages</h2>
-    <ApiTable Rows="@Packages" MemberHeader="Package" />
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Packages</h3>
+        <ApiTable Rows="@Packages" MemberHeader="Package" />
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="The docs site is the demo">
+            <p>
+                Every page here runs against real stores registered in this app's
+                <code>Program.cs</code>. The <strong>Inspector</strong> at the bottom of the window shows
+                the live action feed, the serialized global state tree, the undo stack and the error sink -
+                all fed by the same public APIs you are reading about.
+            </p>
+        </Callout>
+    </div>
 
-    <Callout Kind="Callout.CalloutKind.Tip" Title="The docs site is the demo">
-        <p style="margin-bottom:0">
-            Every page here runs against real stores registered in this app's
-            <code>Program.cs</code>. The <strong>Inspector</strong> at the bottom of the window shows
-            the live action feed, the serialized global state tree, the undo stack and the error sink -
-            all fed by the same public APIs you are reading about.
-        </p>
-    </Callout>
-
-    <nav class="doc__pager">
-        <span></span>
-        <a class="pager pager--next" href="installation">
-            <span class="pager__dir">Next</span>
-            <span class="pager__title">Installation</span>
-        </a>
-    </nav>
-</article>
+</DocPage>
 
 @code {
     protected override void OnInitialized() => Subscribe(Counter);
diff --git a/src/Utilities/Blex/Demo/Client/Pages/McpServer.razor b/src/Utilities/Blex/Demo/Client/Pages/McpServer.razor
index 01d7fa67511..a60f09c3582 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/McpServer.razor
@@ -3,43 +3,52 @@
 <DocPage Href="mcp" Title="MCP server"
          Lead="This site hosts a Model Context Protocol server, so an AI agent can work against Blex's real API, docs and generator instead of guessing at them.">
 
-    <p>
-        Point an MCP client at <code>https://blex.bitplatform.dev/mcp</code> - or at
-        <code>http://localhost:5280/mcp</code> when you run the documentation site locally. It speaks the
-        streamable HTTP transport, needs no authentication, and every tool on it is read-only.
-    </p>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
+        <p>
+            Point an MCP client at <code>https://blex.bitplatform.dev/mcp</code> - or at
+            <code>http://localhost:5280/mcp</code> when you run the documentation site locally. It speaks the
+            streamable HTTP transport, needs no authentication, and every tool on it is read-only.
+        </p>
 
-    <CodeBlock Code="@ClaudeCode" Language="bash" Title="Claude Code" />
-    <CodeBlock Code="@VsCode" Language="json" FileName=".vscode/mcp.json" />
+        <CodeBlock Code="@ClaudeCode" Language="bash" Title="Claude Code" />
+        <CodeBlock Code="@VsCode" Language="json" FileName=".vscode/mcp.json" />
+    </div>
 
-    <h2>Tools</h2>
-    <p>
-        One rule holds across the reference tools: pass the key of the thing you want and you get that thing;
-        leave it out and you get the index of what there is. Every tool is also a plain HTTP GET under
-        <code>/api/mcp/...</code> - <a href="api/mcp/GetBlexApi" target="_blank" rel="noopener">/api/mcp/GetBlexApi</a> is the type list -
-        so you can look at any answer in a browser.
-    </p>
-    <ApiTable Rows="@Tools" MemberHeader="Tool" />
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
+        <p>
+            One rule holds across the reference tools: pass the key of the thing you want and you get that thing;
+            leave it out and you get the index of what there is. Every tool is also a plain HTTP GET under
+            <code>/api/mcp/...</code> - <a href="api/mcp/GetBlexApi" target="_blank" rel="noopener">/api/mcp/GetBlexApi</a> is the type list -
+            so you can look at any answer in a browser.
+        </p>
+        <ApiTable Rows="@Tools" MemberHeader="Tool" />
+    </div>
 
-    <h2>InspectBlexStore</h2>
-    <p>
-        The one question documentation cannot answer is "what does the generator do with <em>this</em> class?".
-        <code>InspectBlexStore</code> answers it by running the real <code>Bit.Blex.Generators</code> over the
-        source it is given. It returns every <code>BLEX</code> diagnostic a build would report, the compiler
-        errors in the result, and the exact public members the generator adds - so an agent calls
-        <code>Increment()</code> because the generator said so, not because it guessed the naming convention.
-    </p>
-    <CodeBlock Code="@InspectRequest" Language="bash" Title="Try it from a terminal" />
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> InspectBlexStore</h3>
+        <p>
+            The one question documentation cannot answer is "what does the generator do with <em>this</em> class?".
+            <code>InspectBlexStore</code> answers it by running the real <code>Bit.Blex.Generators</code> over the
+            source it is given. It returns every <code>BLEX</code> diagnostic a build would report, the compiler
+            errors in the result, and the exact public members the generator adds - so an agent calls
+            <code>Increment()</code> because the generator said so, not because it guessed the naming convention.
+        </p>
+        <CodeBlock Code="@InspectRequest" Language="bash" Title="Try it from a terminal" />
+    </div>
 
-    <h2>Resources and prompts</h2>
-    <ApiTable Rows="@Resources" MemberHeader="Resource" />
-    <ApiTable Rows="@Prompts" MemberHeader="Prompt" />
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Resources and prompts</h3>
+        <ApiTable Rows="@Resources" MemberHeader="Resource" />
+        <ApiTable Rows="@Prompts" MemberHeader="Prompt" />
 
-    <p>
-        The server also hands the model a short set of working rules at <code>initialize</code>, before any tool
-        is called, and completes every argument that is a key into a closed set - the docs slugs, the guide
-        headings, the type names, the diagnostic ids and the source paths.
-    </p>
+        <p>
+            The server also hands the model a short set of working rules at <code>initialize</code>, before any tool
+            is called, and completes every argument that is a key into a closed set - the docs slugs, the guide
+            headings, the type names, the diagnostic ids and the source paths.
+        </p>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Middleware.razor b/src/Utilities/Blex/Demo/Client/Pages/Middleware.razor
index 12bd132a666..31b203e5d7e 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Middleware.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Middleware.razor
@@ -9,233 +9,249 @@
 <DocPage Href="middleware" Title="Middleware"
          Lead="A hook on every action: observe it after it applies, or veto it before it runs.">
 
-    <h2>The interface</h2>
-    <p>
-        Middleware runs synchronously on the dispatch path. <code>BeforeAction</code> sees an action
-        that is about to mutate state and can cancel it; <code>OnAction</code> sees one that already
-        has, together with its payload and the resulting state tree.
-    </p>
-
-    <CodeBlock Code="@Interface" />
-
-    <h2>Registering</h2>
-    <p>Four ways, depending on what the middleware needs:</p>
-    <CodeBlock Code="@Register" FileName="Program.cs" />
-
-    <ApiTable Title="Registration" Rows="@RegisterRows" MemberHeader="Call" />
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Instances are shared across scopes">
-        <p style="margin-bottom:0">
-            <code>UseMiddleware(instance)</code> and the delegate overloads store the object on the
-            singleton options, so under Blazor Server it is shared by <em>every circuit</em>. Never
-            hold per-user state in one. Use <code>UseMiddleware&lt;T&gt;()</code> for anything scoped.
-            Ordering is registration order, whichever kind you mix - which matters, because the
-            first veto short-circuits the rest. Middleware registered straight into the service
-            collection rather than through the options runs after everything registered here.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The interface</h3>
+        <p>
+            Middleware runs synchronously on the dispatch path. <code>BeforeAction</code> sees an action
+            that is about to mutate state and can cancel it; <code>OnAction</code> sees one that already
+            has, together with its payload and the resulting state tree.
         </p>
-    </Callout>
-
-    <h2>Observing</h2>
-    <p>
-        This is how you get logging, analytics or an audit trail. The Inspector at the bottom of this
-        page is exactly this - an <code>ActionFeedMiddleware</code> registered in the site's
-        <code>Program.cs</code>, writing into a service the UI renders.
-    </p>
-
-    <CodeBlock Code="@Observe" />
-
-    <DemoCard Title="The feed you are already looking at"
-              Description="Dispatch an action and watch the same middleware that powers the Inspector pick it up."
-              Source="@FeedSource">
-        <div class="row">
-            <button class="btn btn-primary" @onclick="Counter.Increment">counter/Increment</button>
-            <button class="btn" @onclick="() => Counter.SetStep(Counter.Step + 1)">counter/SetStep</button>
-            <button class="btn btn-ghost" @onclick="Feed.Clear">Clear feed</button>
-        </div>
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Actions seen</span>
-                <span class="readout__value readout__value--accent">@Feed.TotalSeen</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Most recent</span>
-                <span class="readout__value" style="font-size:0.9rem">
-                    @(Feed.Entries.Count > 0 ? $"{Feed.Entries[0].Store}/{Feed.Entries[0].Action}" : "-")
-                </span>
+
+        <CodeBlock Code="@Interface" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Registering</h3>
+        <p>Four ways, depending on what the middleware needs:</p>
+        <CodeBlock Code="@Register" FileName="Program.cs" />
+
+        <ApiTable Title="Registration" Rows="@RegisterRows" MemberHeader="Call" />
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Instances are shared across scopes">
+            <p>
+                <code>UseMiddleware(instance)</code> and the delegate overloads store the object on the
+                singleton options, so under Blazor Server it is shared by <em>every circuit</em>. Never
+                hold per-user state in one. Use <code>UseMiddleware&lt;T&gt;()</code> for anything scoped.
+                Ordering is registration order, whichever kind you mix - which matters, because the
+                first veto short-circuits the rest. Middleware registered straight into the service
+                collection rather than through the options runs after everything registered here.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Observing</h3>
+        <p>
+            This is how you get logging, analytics or an audit trail. The Inspector at the bottom of this
+            page is exactly this - an <code>ActionFeedMiddleware</code> registered in the site's
+            <code>Program.cs</code>, writing into a service the UI renders.
+        </p>
+
+        <CodeBlock Code="@Observe" />
+
+        <DemoCard Title="The feed you are already looking at"
+                  Description="Dispatch an action and watch the same middleware that powers the Inspector pick it up."
+                  Source="@FeedSource">
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="Counter.Increment">counter/Increment</button>
+                <button class="btn btn-secondary" @onclick="() => Counter.SetStep(Counter.Step + 1)">counter/SetStep</button>
+                <button class="btn btn-secondary" @onclick="Feed.Clear">Clear feed</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Payload</span>
-                <span class="readout__value" style="font-size:0.9rem">
-                    @(Feed.Entries.Count > 0 && Feed.Entries[0].Args.Length > 0 ? Feed.Entries[0].Args : "-")
-                </span>
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Actions seen</span>
+                    <span class="bb-stat-value demo-accent">@Feed.TotalSeen</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Most recent</span>
+                    <span class="bb-stat-value demo-stat-text">
+                        @(Feed.Entries.Count > 0 ? $"{Feed.Entries[0].Store}/{Feed.Entries[0].Action}" : "-")
+                    </span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Payload</span>
+                    <span class="bb-stat-value demo-stat-text">
+                        @(Feed.Entries.Count > 0 && Feed.Entries[0].Args.Length > 0 ? Feed.Entries[0].Args : "-")
+                    </span>
+                </div>
             </div>
-        </div>
-    </DemoCard>
-
-    <h2>Vetoing</h2>
-    <p>
-        <code>BeforeAction</code> runs ahead of the mutation. Calling <code>Cancel()</code> stops the
-        action completely: the body never runs, nothing changes, nothing is recorded and no
-        notification fires. Use it for read-only modes, permission checks and payload validation.
-    </p>
-
-    <CodeBlock Code="@Veto" />
-
-    <DemoCard Title="A read-only guard"
-              Description="Turn the guard on and every action is cancelled before it can mutate anything. The counter stops responding - and the action feed stays silent, because a vetoed action is never recorded."
-              Source="@GuardSource">
-        <div class="row">
-            <label class="check">
-                <input type="checkbox" checked="@Guard.IsReadOnly" @onchange="OnGuardToggle" />
-                <strong>Read-only mode</strong>
-            </label>
-            @if (Guard.IsReadOnly)
-            {
-                <span class="pill pill--err">vetoing</span>
-            }
-            else
-            {
-                <span class="pill pill--on">allowing</span>
-            }
-        </div>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Vetoing</h3>
+        <p>
+            <code>BeforeAction</code> runs ahead of the mutation. Calling <code>Cancel()</code> stops the
+            action completely: the body never runs, nothing changes, nothing is recorded and no
+            notification fires. Use it for read-only modes, permission checks and payload validation.
+        </p>
 
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
+        <CodeBlock Code="@Veto" />
+
+        <DemoCard Title="A read-only guard"
+                  Description="Turn the guard on and every action is cancelled before it can mutate anything. The counter stops responding - and the action feed stays silent, because a vetoed action is never recorded."
+                  Source="@GuardSource">
+            <div class="bb-toolbar">
+                <label class="bb-check">
+                    <input type="checkbox" checked="@Guard.IsReadOnly" @onchange="OnGuardToggle" />
+                    <strong>Read-only mode</strong>
+                </label>
+                @if (Guard.IsReadOnly)
+                {
+                    <span class="bb-badge bb-badge-danger">vetoing</span>
+                }
+                else
+                {
+                    <span class="bb-badge bb-badge-success">allowing</span>
+                }
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Actions blocked</span>
-                <span class="readout__value">@Guard.BlockedCount</span>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Actions blocked</span>
+                    <span class="bb-stat-value">@Guard.BlockedCount</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Last blocked</span>
+                    <span class="bb-stat-value demo-stat-text">@(Guard.LastBlocked ?? "-")</span>
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Last blocked</span>
-                <span class="readout__value" style="font-size:0.9rem">@(Guard.LastBlocked ?? "-")</span>
+
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="Counter.Increment">Try to increment</button>
+                <button class="btn btn-secondary" @onclick="AssignDirectly">Try a direct assignment</button>
+                <button class="btn btn-secondary" @onclick="Guard.Reset">Reset counters</button>
             </div>
-        </div>
-
-        <div class="row" style="margin-top:0.8rem">
-            <button class="btn btn-primary" @onclick="Counter.Increment">Try to increment</button>
-            <button class="btn" @onclick="AssignDirectly">Try a direct assignment</button>
-            <button class="btn btn-ghost" @onclick="Guard.Reset">Reset counters</button>
-        </div>
-        <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">
-            Direct assignment is vetoable too - a <code>Set Count</code> goes through the same
-            pipeline as any named action.
+            <p class="bb-card-desc">
+                Direct assignment is vetoable too - a <code>Set Count</code> goes through the same
+                pipeline as any named action.
+            </p>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The pre-action context</h3>
+        <ApiTable Title="BlexPreActionContext" Rows="@PreRows" />
+
+        <p>
+            Because the payload is available before the mutation, a filter can validate arguments and
+            reject the action rather than letting it write bad state:
         </p>
-    </DemoCard>
-
-    <h2>The pre-action context</h2>
-    <ApiTable Title="BlexPreActionContext" Rows="@PreRows" />
-
-    <p>
-        Because the payload is available before the mutation, a filter can validate arguments and
-        reject the action rather than letting it write bad state:
-    </p>
-    <CodeBlock Code="@Validate" />
-
-    <h2>When the action itself throws</h2>
-    <p>
-        The third hook, <code>OnActionError</code>, fires when an action <em>body</em> throws. It is
-        the counterpart to Pinia's <code>$onAction</code> <code>onError</code>, and it is where a
-        crash reporter belongs: an effect swallows its exception into <code>XxxError</code> so the UI
-        can render it, which means nothing else would ever hear about the failure.
-    </p>
-
-    <CodeBlock Code="@ErrorHook" />
-
-    <p>
-        The hook observes; it cannot handle. The exception continues on its way exactly as it would
-        have - captured by the effect wrapper, or surfaced to the caller of a plain action - so
-        adding a reporter never changes what the application does. For the one-liner case, wire
-        <code>options.OnActionError</code> instead of writing a middleware.
-    </p>
-    <CodeBlock Code="@ErrorOption" FileName="Program.cs" />
-
-    <DemoCard Title="A reporter over failing actions"
-              Description="Both buttons fail on purpose. The failure still reaches SearchError for the UI to render - and the reporter below hears about it too."
-              Source="@ErrorDemoSource">
-        <div class="row">
-            <button class="btn btn-primary" @onclick="FailingSearch">Run a failing search</button>
-            <button class="btn" @onclick="SucceedingSearch">Run a search that works</button>
-            <button class="btn btn-ghost" @onclick="Failures.Clear">Clear</button>
-        </div>
-
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">search/SearchIsLoading</span>
-                <span class="readout__value">@Search.SearchIsLoading</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">search/SearchError</span>
-                <span class="readout__value readout__value--accent">@(Search.SearchError is null ? "null" : "set")</span>
+        <CodeBlock Code="@Validate" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> When the action itself throws</h3>
+        <p>
+            The third hook, <code>OnActionError</code>, fires when an action <em>body</em> throws. It is
+            the counterpart to Pinia's <code>$onAction</code> <code>onError</code>, and it is where a
+            crash reporter belongs: an effect swallows its exception into <code>XxxError</code> so the UI
+            can render it, which means nothing else would ever hear about the failure.
+        </p>
+
+        <CodeBlock Code="@ErrorHook" />
+
+        <p>
+            The hook observes; it cannot handle. The exception continues on its way exactly as it would
+            have - captured by the effect wrapper, or surfaced to the caller of a plain action - so
+            adding a reporter never changes what the application does. For the one-liner case, wire
+            <code>options.OnActionError</code> instead of writing a middleware.
+        </p>
+        <CodeBlock Code="@ErrorOption" FileName="Program.cs" />
+
+        <DemoCard Title="A reporter over failing actions"
+                  Description="Both buttons fail on purpose. The failure still reaches SearchError for the UI to render - and the reporter below hears about it too."
+                  Source="@ErrorDemoSource">
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="FailingSearch">Run a failing search</button>
+                <button class="btn btn-secondary" @onclick="SucceedingSearch">Run a search that works</button>
+                <button class="btn btn-secondary" @onclick="Failures.Clear">Clear</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Reported</span>
-                <span class="readout__value">@Failures.Failures.Count</span>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">search/SearchIsLoading</span>
+                    <span class="bb-stat-value">@Search.SearchIsLoading</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">search/SearchError</span>
+                    <span class="bb-stat-value demo-accent">@(Search.SearchError is null ? "null" : "set")</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Reported</span>
+                    <span class="bb-stat-value">@Failures.Failures.Count</span>
+                </div>
             </div>
-        </div>
 
-        @if (Failures.Failures.Count == 0)
-        {
-            <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">
-                Nothing reported yet. Cancellation is not a failure, so superseded runs never appear here.
-            </p>
-        }
-        else
-        {
-            <ul class="small" style="margin-top:0.8rem;margin-bottom:0">
-                @foreach (var failure in Failures.Failures)
-                {
-                    <li>
-                        <code>@failure.Action</code>
-                        @if (failure.Args.Length > 0)
-                        {
-                            <span class="muted"> (@failure.Args)</span>
-                        }
-                        - @failure.Message
-                    </li>
-                }
-            </ul>
-        }
-    </DemoCard>
+            @if (Failures.Failures.Count == 0)
+            {
+                <p class="bb-card-desc">
+                    Nothing reported yet. Cancellation is not a failure, so superseded runs never appear here.
+                </p>
+            }
+            else
+            {
+                <ul class="bb-detail-list">
+                    @foreach (var failure in Failures.Failures)
+                    {
+                        <li>
+                            <code>@failure.Action</code>
+                            @if (failure.Args.Length > 0)
+                            {
+                                <span class="bb-muted"> (@failure.Args)</span>
+                            }
+                            - @failure.Message
+                        </li>
+                    }
+                </ul>
+            }
+        </DemoCard>
 
-    <ApiTable Title="BlexActionErrorContext" Rows="@ErrorRows" />
+        <ApiTable Title="BlexActionErrorContext" Rows="@ErrorRows" />
 
-    <Callout Kind="Callout.CalloutKind.Note" Title="Cancellation is not a failure">
-        <p style="margin-bottom:0">
-            An <code>OperationCanceledException</code> is the documented outcome of
-            <code>CancelXxx()</code>, of a <code>Latest</code> run being superseded, and of disposing
-            a store with work in flight. Reporting those would bury the real failures under a
-            type-ahead's worth of noise, so they never reach this hook - exactly as they never reach
-            <code>XxxError</code>.
+        <Callout Kind="Callout.CalloutKind.Note" Title="Cancellation is not a failure">
+            <p>
+                An <code>OperationCanceledException</code> is the documented outcome of
+                <code>CancelXxx()</code>, of a <code>Latest</code> run being superseded, and of disposing
+                a store with work in flight. Reporting those would bury the real failures under a
+                type-ahead's worth of noise, so they never reach this hook - exactly as they never reach
+                <code>XxxError</code>.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Error isolation</h3>
+        <p>
+            Middleware must not be able to break dispatch. An exception thrown from
+            <code>BeforeAction</code> or <code>OnAction</code> is caught, reported to
+            <a href="errors"><code>OnError</code></a> with the source <code>"middleware"</code>, and the
+            pipeline carries on to the next middleware. A throwing filter therefore does <em>not</em>
+            veto the action - if you mean to cancel, call <code>Cancel()</code>.
         </p>
-    </Callout>
-
-    <h2>Error isolation</h2>
-    <p>
-        Middleware must not be able to break dispatch. An exception thrown from
-        <code>BeforeAction</code> or <code>OnAction</code> is caught, reported to
-        <a href="errors"><code>OnError</code></a> with the source <code>"middleware"</code>, and the
-        pipeline carries on to the next middleware. A throwing filter therefore does <em>not</em>
-        veto the action - if you mean to cancel, call <code>Cancel()</code>.
-    </p>
-
-    <h2>Cost when nothing is listening</h2>
-    <p>
-        With no middleware, no DevTools connection and no subscribers, the manager reports
-        <code>HasObservers == false</code> and the whole recording step is skipped. Generated
-        wrappers check the same flag before allocating their <code>BlexActionArg[]</code>, so an app that
-        observes nothing pays nothing for the machinery.
-    </p>
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Middleware is also a coordination point">
-        <p style="margin-bottom:0">
-            Anything you can do in a <a href="cross-store">manager subscription</a> you can do in
-            middleware, with the difference that middleware is registered at startup and always on,
-            while subscriptions come and go with the component or service that owns them.
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Cost when nothing is listening</h3>
+        <p>
+            With no middleware, no DevTools connection and no subscribers, the manager reports
+            <code>HasObservers == false</code> and the whole recording step is skipped. Generated
+            wrappers check the same flag before allocating their <code>BlexActionArg[]</code>, so an app that
+            observes nothing pays nothing for the machinery.
         </p>
-    </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Middleware is also a coordination point">
+            <p>
+                Anything you can do in a <a href="cross-store">manager subscription</a> you can do in
+                middleware, with the difference that middleware is registered at startup and always on,
+                while subscriptions come and go with the component or service that owns them.
+            </p>
+        </Callout>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/NotFound.razor b/src/Utilities/Blex/Demo/Client/Pages/NotFound.razor
new file mode 100644
index 00000000000..25837b3a05e
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Client/Pages/NotFound.razor
@@ -0,0 +1,18 @@
+@page "/not-found"
+@layout MainLayout
+
+@* Target of app.UseStatusCodePagesWithReExecute("/not-found") in the host's Program.cs (a deep
+   link to an unknown URL matches no endpoint, so the server re-executes it here), and also the
+   router's NotFoundPage for routes missed during client-side navigation. *@
+
+<PageTitle>Not found · Blex</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="introduction" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Blex/Demo/Client/Pages/NotFoundPage.razor b/src/Utilities/Blex/Demo/Client/Pages/NotFoundPage.razor
deleted file mode 100644
index 7f8db728c59..00000000000
--- a/src/Utilities/Blex/Demo/Client/Pages/NotFoundPage.razor
+++ /dev/null
@@ -1,10 +0,0 @@
-@page "/not-found"
-
-@* Target of app.UseStatusCodePagesWithReExecute("/not-found") in the host's Program.cs (a deep
-   link to an unknown URL matches no endpoint, so the server re-executes it here), and also the
-   router's NotFoundPage for routes missed during client-side navigation. *@
-
-<PageTitle>Not found · Blex</PageTitle>
-<h1>404</h1>
-<p class="lead">That page does not exist. Try the navigation on the left.</p>
-<a class="btn btn-primary" href="">Back to the introduction</a>
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Persistence.razor b/src/Utilities/Blex/Demo/Client/Pages/Persistence.razor
index 4dc95502c5e..7f932c3d8c4 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Persistence.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Persistence.razor
@@ -7,282 +7,296 @@
 <DocPage Href="persistence" Title="Persistence"
          Lead="Opt a store in, register a storage provider, and its state survives a reload - with debouncing, versioning and migrations included.">
 
-    <h2>Opting in</h2>
-    <p>
-        Set <code>Persist = true</code> on the store and register a provider. The store is rehydrated
-        during startup and written back after every action that touches it.
-    </p>
-
-    <CodeBlock Code="@OptIn" />
-    <CodeBlock Code="@Register" FileName="Program.cs" />
-
-    <ApiTable Title="Providers" Rows="@ProviderRows" MemberHeader="Call" />
-
-    <DemoCard Title="This page's settings are persisted"
-              Description="Change something, then reload the browser. The values come back - and so does the raw payload below, read straight out of localStorage."
-              Source="@StoreSource">
-        <div class="row">
-            <span class="small muted">Accent:</span>
-            @foreach (var accent in Accents)
-            {
-                var current = accent;
-                <button class="btn btn-sm @(Settings.Accent == current ? "btn-primary" : null)"
-                        @onclick="() => Settings.SetAccent(current)">@current</button>
-            }
-        </div>
-        <div class="row">
-            <span class="small muted">Density:</span>
-            <button class="btn btn-sm @(Settings.Density == Density.Comfortable ? "btn-primary" : null)"
-                    @onclick="() => Settings.SetDensity(Density.Comfortable)">Comfortable</button>
-            <button class="btn btn-sm @(Settings.Density == Density.Compact ? "btn-primary" : null)"
-                    @onclick="() => Settings.SetDensity(Density.Compact)">Compact</button>
-            <label class="check">
-                <input type="checkbox" checked="@Settings.ShowLineNumbers" @onchange="_ => Settings.ToggleLineNumbers()" />
-                Line numbers
-            </label>
-        </div>
-
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Summary (computed)</span>
-                <span class="readout__value" style="font-size:0.95rem">@Settings.Summary</span>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Opting in</h3>
+        <p>
+            Set <code>Persist = true</code> on the store and register a provider. The store is rehydrated
+            during startup and written back after every action that touches it.
+        </p>
+
+        <CodeBlock Code="@OptIn" />
+        <CodeBlock Code="@Register" FileName="Program.cs" />
+
+        <ApiTable Title="Providers" Rows="@ProviderRows" MemberHeader="Call" />
+
+        <DemoCard Title="This page's settings are persisted"
+                  Description="Change something, then reload the browser. The values come back - and so does the raw payload below, read straight out of localStorage."
+                  Source="@StoreSource">
+            <div class="bb-toolbar">
+                <span class="bb-overline">Accent</span>
+                <div class="bb-segmented" role="group" aria-label="Accent">
+                    @foreach (var accent in Accents)
+                    {
+                        var current = accent;
+                        <button type="button" aria-pressed="@(Settings.Accent == current ? "true" : "false")"
+                                @onclick="() => Settings.SetAccent(current)">@current</button>
+                    }
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Storage key</span>
-                <span class="readout__value" style="font-size:0.85rem">blex-docs:settings</span>
+            <div class="bb-toolbar">
+                <span class="bb-overline">Density</span>
+                <div class="bb-segmented" role="group" aria-label="Density">
+                    <button type="button" aria-pressed="@(Settings.Density == Density.Comfortable ? "true" : "false")"
+                            @onclick="() => Settings.SetDensity(Density.Comfortable)">Comfortable</button>
+                    <button type="button" aria-pressed="@(Settings.Density == Density.Compact ? "true" : "false")"
+                            @onclick="() => Settings.SetDensity(Density.Compact)">Compact</button>
+                </div>
+                <label class="bb-check">
+                    <input type="checkbox" checked="@Settings.ShowLineNumbers" @onchange="_ => Settings.ToggleLineNumbers()" />
+                    Line numbers
+                </label>
             </div>
-        </div>
 
-        <div class="row" style="margin-top:0.8rem">
-            <button class="btn btn-sm" @onclick="ReadRaw">Read localStorage</button>
-            <button class="btn btn-sm" @onclick="FlushAsync">FlushAsync()</button>
-            <button class="btn btn-sm btn-ghost" @onclick="Settings.ResetState">ResetState()</button>
-            <button class="btn btn-sm btn-danger" @onclick="ClearAsync">ClearAsync()</button>
-        </div>
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Summary (computed)</span>
+                    <span class="bb-stat-value demo-stat-text">@Settings.Summary</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Storage key</span>
+                    <span class="bb-stat-value demo-stat-text">blex-docs:settings</span>
+                </div>
+            </div>
 
-        @if (_raw is not null)
-        {
-            <div style="margin-top:0.8rem">
-                <CodeBlock Code="@_raw" Language="json" Title="Raw payload" Compact="true" />
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" @onclick="ReadRaw">Read localStorage</button>
+                <button class="btn btn-secondary" @onclick="FlushAsync">FlushAsync()</button>
+                <button class="btn btn-secondary" @onclick="Settings.ResetState">ResetState()</button>
+                <button class="btn demo-btn-danger" @onclick="ClearAsync">ClearAsync()</button>
             </div>
-        }
 
-        <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">
-            This site runs with <code>SyncAcrossTabs</code> on. Open it in a second tab, change the
-            theme there, and watch this one follow without a reload.
+            @if (_raw is not null)
+            {
+                <CodeBlock Code="@_raw" Language="json" Title="Raw payload" />
+            }
+
+            <p class="bb-card-desc">
+                This site runs with <code>SyncAcrossTabs</code> on. Open it in a second tab, change the
+                accent there, and watch this one follow without a reload.
+            </p>
+        </DemoCard>
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Note the envelope">
+            <p>
+                Because this site sets <code>options.Version = 1</code>, the payload is wrapped as
+                <code>{ "__blexVersion": 1, "state": { … } }</code>. With <code>Version</code> left at
+                <code>0</code> the state is stored bare, with no envelope and no version checking.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Options</h3>
+        <ApiTable Title="BlexPersistenceOptions" Rows="@OptionRows" />
+
+        <h4>Debouncing</h4>
+        <p>
+            Without a debounce, every action writes. For a store that changes on every keystroke or drag
+            that is a lot of serialization and a lot of storage churn. <code>DebounceInterval</code>
+            coalesces a burst into one write once things go quiet.
+        </p>
+        <CodeBlock Code="@Debounce" />
+        <p>
+            Debouncing is trailing-edge, so a continuous stream of actions would postpone the write
+            forever. <code>DebounceMaxDelay</code> caps that: once the oldest pending change reaches that
+            age, a save is forced. Pending writes are also flushed on dispose, and on demand via
+            <code>FlushAsync()</code>.
         </p>
-    </DemoCard>
 
-    <Callout Kind="Callout.CalloutKind.Note" Title="Note the envelope">
-        <p style="margin-bottom:0">
-            Because this site sets <code>options.Version = 1</code>, the payload is wrapped as
-            <code>{ "__blexVersion": 1, "state": { … } }</code>. With <code>Version</code> left at
-            <code>0</code> the state is stored bare, with no envelope and no version checking.
+        <h4>Versioning and migrations</h4>
+        <p>
+            When a persisted store's shape changes, bump <code>Version</code>. On load, a payload whose
+            stored version differs is handed to <code>Migrate</code>; return the upgraded state, or
+            <code>null</code> to discard it. Without a migration hook, a mismatched payload is simply
+            dropped.
         </p>
-    </Callout>
-
-    <h2>Options</h2>
-    <ApiTable Title="BlexPersistenceOptions" Rows="@OptionRows" />
-
-    <h3>Debouncing</h3>
-    <p>
-        Without a debounce, every action writes. For a store that changes on every keystroke or drag
-        that is a lot of serialization and a lot of storage churn. <code>DebounceInterval</code>
-        coalesces a burst into one write once things go quiet.
-    </p>
-    <CodeBlock Code="@Debounce" />
-    <p>
-        Debouncing is trailing-edge, so a continuous stream of actions would postpone the write
-        forever. <code>DebounceMaxDelay</code> caps that: once the oldest pending change reaches that
-        age, a save is forced. Pending writes are also flushed on dispose, and on demand via
-        <code>FlushAsync()</code>.
-    </p>
-
-    <h3>Versioning and migrations</h3>
-    <p>
-        When a persisted store's shape changes, bump <code>Version</code>. On load, a payload whose
-        stored version differs is handed to <code>Migrate</code>; return the upgraded state, or
-        <code>null</code> to discard it. Without a migration hook, a mismatched payload is simply
-        dropped.
-    </p>
-    <CodeBlock Code="@Migrate" />
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="fromVersion 0 means &quot;pre-envelope&quot;">
-        <p style="margin-bottom:0">
-            A payload written before you enabled versioning has no envelope, so it arrives as
-            version <code>0</code>. Handle that case explicitly - usually by accepting it as-is or
-            discarding it, depending on whether the shape actually changed.
+        <CodeBlock Code="@Migrate" />
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="fromVersion 0 means &quot;pre-envelope&quot;">
+            <p>
+                A payload written before you enabled versioning has no envelope, so it arrives as
+                version <code>0</code>. Handle that case explicitly - usually by accepting it as-is or
+                discarding it, depending on whether the shape actually changed.
+            </p>
+        </Callout>
+
+        <h4>Persisting only part of a store</h4>
+        <p>
+            <code>Partialize</code> receives each store's snapshot on its way to storage and returns what
+            should actually be written - zustand's option of the same name. Use it to keep transient
+            state out of storage: a search box's text, an "is the drawer open" flag, a cached response
+            that must be re-fetched rather than restored. Returning <code>null</code> skips that store's
+            write entirely and leaves whatever is already stored untouched.
         </p>
-    </Callout>
-
-    <h3>Persisting only part of a store</h3>
-    <p>
-        <code>Partialize</code> receives each store's snapshot on its way to storage and returns what
-        should actually be written - zustand's option of the same name. Use it to keep transient
-        state out of storage: a search box's text, an "is the drawer open" flag, a cached response
-        that must be re-fetched rather than restored. Returning <code>null</code> skips that store's
-        write entirely and leaves whatever is already stored untouched.
-    </p>
-    <CodeBlock Code="@Partialize" Title="Drop transient fields" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Omitted keys come back as their declared defaults">
-        <p style="margin-bottom:0">
-            Rehydration applies only the keys present in the payload, so a field you left out is not
-            wiped - it simply keeps the value the store's field initializer gives it. That is what
-            makes <code>Partialize</code> safe to widen or narrow between releases.
+        <CodeBlock Code="@Partialize" Title="Drop transient fields" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Omitted keys come back as their declared defaults">
+            <p>
+                Rehydration applies only the keys present in the payload, so a field you left out is not
+                wiped - it simply keeps the value the store's field initializer gives it. That is what
+                makes <code>Partialize</code> safe to widen or narrow between releases.
+            </p>
+        </Callout>
+
+        <h4>Reacting to rehydration</h4>
+        <p>
+            <code>OnRehydrated</code> fires once per persistent store as <code>StartAsync</code> applies
+            it, with the slice that was applied - or <code>null</code> when nothing was stored, which is
+            how you tell a returning user from a first visit. It is the natural place to kick off a
+            refresh, mark a splash screen done, or record the hydration in telemetry. A callback that
+            throws is reported through <code>OnError</code> and never derails startup.
         </p>
-    </Callout>
-
-    <h3>Reacting to rehydration</h3>
-    <p>
-        <code>OnRehydrated</code> fires once per persistent store as <code>StartAsync</code> applies
-        it, with the slice that was applied - or <code>null</code> when nothing was stored, which is
-        how you tell a returning user from a first visit. It is the natural place to kick off a
-        refresh, mark a splash screen done, or record the hydration in telemetry. A callback that
-        throws is reported through <code>OnError</code> and never derails startup.
-    </p>
-    <CodeBlock Code="@OnRehydrated" Title="First visit vs returning" Compact="true" />
-
-    <h3>Deferring hydration</h3>
-    <p>
-        Sometimes state must not be restored at startup: a per-user payload that only makes sense
-        once sign-in resolves, or a draft the user should be asked about before it reappears. Set
-        <code>SkipHydration</code> and call <code>RehydrateAsync()</code> when the moment arrives.
-        Saving is live from the start either way, so nothing changed in the meantime is lost.
-    </p>
-    <CodeBlock Code="@SkipHydration" Title="Hydrate after sign-in" Compact="true" />
-
-    <h3>Two tabs, one state</h3>
-    <p>
-        By default, two open tabs of the same app quietly fight. Each saves its own state after every
-        action, so whichever tab acted last wins and the other's changes disappear on its next
-        reload. Set <code>SyncAcrossTabs</code> and a change made in one tab is re-read and applied
-        in the others as soon as it lands, so they converge instead.
-    </p>
-    <CodeBlock Code="@SyncTabs" Title="Opting in" Compact="true" />
-
-    <p>
-        Incoming state is applied as a <em>restore</em>, not an action: it raises the usual change
-        notification so the UI updates, but records no time-travel entry and is not written straight
-        back - echoing it would bounce the same value between tabs forever.
-        <code>Migrate</code> runs on it exactly as at startup, so a tab on an older build still reads
-        what a newer one wrote. <code>OnExternalChange</code> tells you it happened.
-    </p>
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="localStorage only, and last writer still wins">
-        <p style="margin-bottom:0">
-            <code>sessionStorage</code> is per-tab, so there is no other instance to hear from and
-            the option is inert there. Synchronization does not merge concurrent edits: two tabs
-            editing the same store still resolve to whoever wrote last. What it removes is the
-            <em>silence</em> - both tabs end up showing the same state rather than diverging until
-            the next reload.
+        <CodeBlock Code="@OnRehydrated" Title="First visit vs returning" />
+
+        <h4>Deferring hydration</h4>
+        <p>
+            Sometimes state must not be restored at startup: a per-user payload that only makes sense
+            once sign-in resolves, or a draft the user should be asked about before it reappears. Set
+            <code>SkipHydration</code> and call <code>RehydrateAsync()</code> when the moment arrives.
+            Saving is live from the start either way, so nothing changed in the meantime is lost.
         </p>
-    </Callout>
-
-    <h3>Knowing when the real state has landed</h3>
-    <p>
-        Hydration is not instantaneous: browser storage sits behind JS interop, a Blazor Server
-        prerender cannot reach it at all, and <code>SkipHydration</code> defers it on purpose. Until
-        it finishes, a component bound to a persisted store is rendering <em>declared defaults</em>,
-        not the user's data - which is how a full cart briefly renders as "0 items".
-        <code>HasHydrated</code> is the flag to branch on, <code>Hydrated</code> the event to
-        re-render from, and <code>WhenHydratedAsync()</code> the awaitable form.
-    </p>
-    <CodeBlock Code="@Hydration" Language="razor" />
-
-    <DemoCard Title="This page's own hydration state"
-              Description="Already true by the time you can read this - <BlexProvider> awaits StartAsync before the first interactive render. The interesting case is SkipHydration, or a slow storage provider."
-              Source="@HydrationSource" SourceLanguage="razor">
-        <div class="readout">
-            <div class="readout__item">
-                <span class="readout__label">HasHydrated</span>
-                <span class="readout__value readout__value--accent">@Persistor.HasHydrated</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">settings/Accent</span>
-                <span class="readout__value">@Settings.Accent</span>
+        <CodeBlock Code="@SkipHydration" Title="Hydrate after sign-in" />
+
+        <h4>Two tabs, one state</h4>
+        <p>
+            By default, two open tabs of the same app quietly fight. Each saves its own state after every
+            action, so whichever tab acted last wins and the other's changes disappear on its next
+            reload. Set <code>SyncAcrossTabs</code> and a change made in one tab is re-read and applied
+            in the others as soon as it lands, so they converge instead.
+        </p>
+        <CodeBlock Code="@SyncTabs" Title="Opting in" />
+
+        <p>
+            Incoming state is applied as a <em>restore</em>, not an action: it raises the usual change
+            notification so the UI updates, but records no time-travel entry and is not written straight
+            back - echoing it would bounce the same value between tabs forever.
+            <code>Migrate</code> runs on it exactly as at startup, so a tab on an older build still reads
+            what a newer one wrote. <code>OnExternalChange</code> tells you it happened.
+        </p>
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="localStorage only, and last writer still wins">
+            <p>
+                <code>sessionStorage</code> is per-tab, so there is no other instance to hear from and
+                the option is inert there. Synchronization does not merge concurrent edits: two tabs
+                editing the same store still resolve to whoever wrote last. What it removes is the
+                <em>silence</em> - both tabs end up showing the same state rather than diverging until
+                the next reload.
+            </p>
+        </Callout>
+
+        <h4>Knowing when the real state has landed</h4>
+        <p>
+            Hydration is not instantaneous: browser storage sits behind JS interop, a Blazor Server
+            prerender cannot reach it at all, and <code>SkipHydration</code> defers it on purpose. Until
+            it finishes, a component bound to a persisted store is rendering <em>declared defaults</em>,
+            not the user's data - which is how a full cart briefly renders as "0 items".
+            <code>HasHydrated</code> is the flag to branch on, <code>Hydrated</code> the event to
+            re-render from, and <code>WhenHydratedAsync()</code> the awaitable form.
+        </p>
+        <CodeBlock Code="@Hydration" Language="razor" />
+
+        <DemoCard Title="This page's own hydration state"
+                  Description="Already true by the time you can read this - <BlexProvider> awaits StartAsync before the first interactive render. The interesting case is SkipHydration, or a slow storage provider."
+                  Source="@HydrationSource" SourceLanguage="razor">
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">HasHydrated</span>
+                    <span class="bb-stat-value demo-accent">@Persistor.HasHydrated</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">settings/Accent</span>
+                    <span class="bb-stat-value">@Settings.Accent</span>
+                </div>
             </div>
-        </div>
-    </DemoCard>
-
-    <h3>Deciding how stored state meets live state</h3>
-    <p>
-        The default is already a shallow merge: the generated deserializer only writes the properties
-        the payload actually contains, so a key it omits keeps whatever the store currently holds.
-        <code>Merge</code> is for when that is not enough - a nested object that must be combined key
-        by key rather than replaced wholesale, or a value the <em>live</em> store must win on because
-        it was assigned before hydration finished.
-    </p>
-    <CodeBlock Code="@Merge" Title="Keeping a live value" Compact="true" />
-
-    <p>
-        It runs for cross-tab changes too, so both paths agree on what "applying stored state" means.
-        Return <code>null</code> to discard the payload and keep what the store already has; a hook
-        that throws does the same and reports through <code>OnError</code>, because applying a
-        half-merged state would be worse than starting from defaults.
-    </p>
-
-    <h2>BlexStatePersistor</h2>
-    <p>Resolve it from DI when you need to control persistence directly.</p>
-    <ApiTable Rows="@PersistorRows" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Only registered stores rehydrate">
-        <p style="margin-bottom:0">
-            <code>StartAsync</code> walks the manager's registry. <code>&lt;BlexProvider&gt;</code>
-            registers everything before calling it, so in Blazor this is automatic. In a host without
-            the provider, resolve every store from DI first - resolution is what registers them.
+        </DemoCard>
+
+        <h4>Deciding how stored state meets live state</h4>
+        <p>
+            The default is already a shallow merge: the generated deserializer only writes the properties
+            the payload actually contains, so a key it omits keeps whatever the store currently holds.
+            <code>Merge</code> is for when that is not enough - a nested object that must be combined key
+            by key rather than replaced wholesale, or a value the <em>live</em> store must win on because
+            it was assigned before hydration finished.
+        </p>
+        <CodeBlock Code="@Merge" Title="Keeping a live value" />
+
+        <p>
+            It runs for cross-tab changes too, so both paths agree on what "applying stored state" means.
+            Return <code>null</code> to discard the payload and keep what the store already has; a hook
+            that throws does the same and reports through <code>OnError</code>, because applying a
+            half-merged state would be worse than starting from defaults.
+        </p>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> BlexStatePersistor</h3>
+        <p>Resolve it from DI when you need to control persistence directly.</p>
+        <ApiTable Rows="@PersistorRows" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Only registered stores rehydrate">
+            <p>
+                <code>StartAsync</code> walks the manager's registry. <code>&lt;BlexProvider&gt;</code>
+                registers everything before calling it, so in Blazor this is automatic. In a host without
+                the provider, resolve every store from DI first - resolution is what registers them.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Custom storage</h3>
+        <p>
+            <code>IBlexStorage</code> is the whole contract; <code>BlexBrowserStorage</code>, in the
+            <code>Bit.Blex.Blazor</code> namespace, is the browser implementation. Anything else - a file,
+            IndexedDB, a server round-trip - is one small class.
+        </p>
+        <CodeBlock Code="@CustomStorage" />
+
+        <p>
+            A storage that can tell when something <em>else</em> wrote to it - a file watcher, a server
+            push, another tab - can also implement <code>IBlexExternalStorageChange</code> to opt into
+            <code>SyncAcrossTabs</code>. Raise the event only for changes you did not make yourself;
+            echoing your own writes back would spin the two sides against each other.
+        </p>
+        <CodeBlock Code="@WatchableStorage" Title="Reporting external changes" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Prerendering</h3>
+        <p>
+            <code>&lt;BlexProvider&gt;</code> also bridges to Blazor's
+            <code>PersistentComponentState</code>. State produced during prerendering is handed to the
+            interactive render instead of being recomputed, which removes the "double render" flicker.
+            That is separate from durable persistence: it applies to <em>every</em> store, not just
+            persisted ones, and only spans a single page load. Opt out with
+            <code>PersistComponentState="false"</code>.
         </p>
-    </Callout>
-
-    <h2>Custom storage</h2>
-    <p>
-        <code>IBlexStorage</code> is the whole contract; <code>BlexBrowserStorage</code>, in the
-        <code>Bit.Blex.Blazor</code> namespace, is the browser implementation. Anything else - a file,
-        IndexedDB, a server round-trip - is one small class.
-    </p>
-    <CodeBlock Code="@CustomStorage" />
-
-    <p>
-        A storage that can tell when something <em>else</em> wrote to it - a file watcher, a server
-        push, another tab - can also implement <code>IBlexExternalStorageChange</code> to opt into
-        <code>SyncAcrossTabs</code>. Raise the event only for changes you did not make yourself;
-        echoing your own writes back would spin the two sides against each other.
-    </p>
-    <CodeBlock Code="@WatchableStorage" Title="Reporting external changes" Compact="true" />
-
-    <h2>Prerendering</h2>
-    <p>
-        <code>&lt;BlexProvider&gt;</code> also bridges to Blazor's
-        <code>PersistentComponentState</code>. State produced during prerendering is handed to the
-        interactive render instead of being recomputed, which removes the "double render" flicker.
-        That is separate from durable persistence: it applies to <em>every</em> store, not just
-        persisted ones, and only spans a single page load. Opt out with
-        <code>PersistComponentState="false"</code>.
-    </p>
-    <p>
-        Under Blazor Server, browser storage is unreachable during prerendering because JS interop is
-        not available yet. Rather than crashing startup, the provider retries hydration on first
-        render, once the circuit is interactive.
-    </p>
-
-    <h2>What you can rely on</h2>
-    <ul>
-        <li><strong>Corrupt data never breaks startup.</strong> An unreadable payload is reported through <code>OnError</code>, discarded and removed from storage.</li>
-        <li><strong>Restores are written back.</strong> Undo/redo and DevTools time-travel save the restored state, so a reload cannot resurrect the pre-restore state.</li>
-        <li><strong>Writes are ordered.</strong> Saves are chained in dispatch order, so a stale payload can never overwrite a newer one.</li>
-        <li><strong>Rehydration does not echo.</strong> Saving is suspended while <code>StartAsync</code> restores, so loading state does not immediately rewrite it.</li>
-        <li><strong>Only persisted stores are written.</strong> A store without <code>Persist = true</code> is ignored entirely.</li>
-        <li><strong>A failed write is reported, not swallowed.</strong> Quota exhaustion, private mode or storage being disabled reaches <code>OnError</code> with source <code>"persistence"</code> - the app can tell the user their changes are not being saved rather than pretending they were.</li>
-    </ul>
-
-    <Callout Kind="Callout.CalloutKind.Warning" Title="Renaming a store strands its data">
-        <p style="margin-bottom:0">
-            The storage key is <code>KeyPrefix + store.Name</code>. Change <code>Name</code> and the
-            old payload is orphaned - the store silently starts from defaults. Treat a persisted
-            store's name as part of its contract, and use <code>Version</code> plus
-            <code>Migrate</code> when the shape has to change.
+        <p>
+            Under Blazor Server, browser storage is unreachable during prerendering because JS interop is
+            not available yet. Rather than crashing startup, the provider retries hydration on first
+            render, once the circuit is interactive.
         </p>
-    </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What you can rely on</h3>
+        <ul class="bb-detail-list">
+            <li><strong>Corrupt data never breaks startup.</strong> An unreadable payload is reported through <code>OnError</code>, discarded and removed from storage.</li>
+            <li><strong>Restores are written back.</strong> Undo/redo and DevTools time-travel save the restored state, so a reload cannot resurrect the pre-restore state.</li>
+            <li><strong>Writes are ordered.</strong> Saves are chained in dispatch order, so a stale payload can never overwrite a newer one.</li>
+            <li><strong>Rehydration does not echo.</strong> Saving is suspended while <code>StartAsync</code> restores, so loading state does not immediately rewrite it.</li>
+            <li><strong>Only persisted stores are written.</strong> A store without <code>Persist = true</code> is ignored entirely.</li>
+            <li><strong>A failed write is reported, not swallowed.</strong> Quota exhaustion, private mode or storage being disabled reaches <code>OnError</code> with source <code>"persistence"</code> - the app can tell the user their changes are not being saved rather than pretending they were.</li>
+        </ul>
+
+        <Callout Kind="Callout.CalloutKind.Warning" Title="Renaming a store strands its data">
+            <p>
+                The storage key is <code>KeyPrefix + store.Name</code>. Change <code>Name</code> and the
+                old payload is orphaned - the store silently starts from defaults. Treat a persisted
+                store's name as part of its contract, and use <code>Version</code> plus
+                <code>Migrate</code> when the shape has to change.
+            </p>
+        </Callout>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/QuickStart.razor b/src/Utilities/Blex/Demo/Client/Pages/QuickStart.razor
index f7c78dbcece..b6de55cd525 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/QuickStart.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/QuickStart.razor
@@ -5,102 +5,112 @@
 <DocPage Href="quick-start" Title="Quick start"
          Lead="A complete, reactive, time-travelable counter in three files and about twenty lines.">
 
-    <h2>1. Write the store</h2>
-    <p>
-        A store is a <code>partial class</code> marked <code>[BlexStore]</code>. Fields marked
-        <code>[BlexState]</code> become reactive properties; methods marked <code>[BlexAction]</code> become
-        public wrappers that record a single named action.
-    </p>
-
-    <CodeBlock Code="@Step1" FileName="Stores/CounterStore.cs" />
-
-    <p>The naming conventions are mechanical, and the generator enforces them:</p>
-    <div class="table-scroll">
-        <table>
-            <thead><tr><th>You write</th><th>You get</th><th>Rule</th></tr></thead>
-            <tbody>
-                <tr><td><code>[BlexState] private int _count;</code></td><td><code>public int Count { get; set; }</code></td><td>Strip a leading underscore, capitalize.</td></tr>
-                <tr><td><code>[BlexComputed] int ComputeDoubleCount()</code></td><td><code>public int DoubleCount { get; }</code></td><td>Strip <code>Compute</code> or <code>Get</code>.</td></tr>
-                <tr><td><code>[BlexAction] void OnIncrement()</code></td><td><code>public void Increment()</code></td><td>Strip the <code>On</code> prefix.</td></tr>
-                <tr><td><code>[BlexEffect] async Task OnLoad()</code></td><td><code>public Task Load()</code> + <code>LoadIsLoading</code> + <code>LoadError</code></td><td>Strip <code>On</code>, add the lifecycle.</td></tr>
-            </tbody>
-        </table>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> 1. Write the store</h3>
+        <p>
+            A store is a <code>partial class</code> marked <code>[BlexStore]</code>. Fields marked
+            <code>[BlexState]</code> become reactive properties; methods marked <code>[BlexAction]</code> become
+            public wrappers that record a single named action.
+        </p>
+
+        <CodeBlock Code="@Step1" FileName="Stores/CounterStore.cs" />
+
+        <p>The naming conventions are mechanical, and the generator enforces them:</p>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>You write</th><th>You get</th><th>Rule</th></tr></thead>
+                <tbody>
+                    <tr><td><code>[BlexState] private int _count;</code></td><td><code>public int Count { get; set; }</code></td><td>Strip a leading underscore, capitalize.</td></tr>
+                    <tr><td><code>[BlexComputed] int ComputeDoubleCount()</code></td><td><code>public int DoubleCount { get; }</code></td><td>Strip <code>Compute</code> or <code>Get</code>.</td></tr>
+                    <tr><td><code>[BlexAction] void OnIncrement()</code></td><td><code>public void Increment()</code></td><td>Strip the <code>On</code> prefix.</td></tr>
+                    <tr><td><code>[BlexEffect] async Task OnLoad()</code></td><td><code>public Task Load()</code> + <code>LoadIsLoading</code> + <code>LoadError</code></td><td>Strip <code>On</code>, add the lifecycle.</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> 2. Register it</h3>
+        <CodeBlock Code="@Step2" FileName="Program.cs" />
     </div>
 
-    <h2>2. Register it</h2>
-    <CodeBlock Code="@Step2" FileName="Program.cs" />
-
-    <h2>3. Wrap the app and use the store</h2>
-    <CodeBlock Code="@Step3" Language="razor" FileName="App.razor" />
-    <CodeBlock Code="@Step4" Language="razor" FileName="Pages/Counter.razor" />
-
-    <p>
-        <code>BlexComponentBase.Subscribe(store)</code> re-renders the component whenever that
-        store changes, and detaches automatically when the component is disposed. That is the whole
-        integration - there is no <code>StateHasChanged</code> to call and nothing to unsubscribe.
-    </p>
-
-    <DemoCard Title="The finished counter"
-              Description="Exactly the code above. Every click is a named action: watch the Inspector at the bottom of the page."
-              Source="@Step4" SourceLanguage="razor">
-        <div class="readout">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value readout__value--accent">@Counter.Count</span>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> 3. Wrap the app and use the store</h3>
+        <CodeBlock Code="@Step3" Language="razor" FileName="App.razor" />
+        <CodeBlock Code="@Step4" Language="razor" FileName="Pages/Counter.razor" />
+
+        <p>
+            <code>BlexComponentBase.Subscribe(store)</code> re-renders the component whenever that
+            store changes, and detaches automatically when the component is disposed. That is the whole
+            integration - there is no <code>StateHasChanged</code> to call and nothing to unsubscribe.
+        </p>
+
+        <DemoCard Title="The finished counter"
+                  Description="Exactly the code above. Every click is a named action: watch the Inspector at the bottom of the page."
+                  Source="@Step4" SourceLanguage="razor">
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value demo-accent">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">DoubleCount</span>
+                    <span class="bb-stat-value">@Counter.DoubleCount</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">IsEven</span>
+                    <span class="bb-stat-value">@Counter.IsEven</span>
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">DoubleCount</span>
-                <span class="readout__value">@Counter.DoubleCount</span>
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="Counter.Increment">Increment</button>
+                <button class="btn btn-secondary" @onclick="Counter.Decrement">Decrement</button>
+                <button class="btn btn-secondary" @onclick="Counter.ResetState">ResetState()</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">IsEven</span>
-                <span class="readout__value">@Counter.IsEven</span>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What you got for free</h3>
+        <div class="bb-grid">
+            <div class="bb-card">
+                <p class="bb-card-title">Batched renders</p>
+                <p class="bb-card-desc">
+                    Every mutation inside an action is folded into one notification, so a five-field
+                    action re-renders the component once - not five times.
+                </p>
+            </div>
+            <div class="bb-card">
+                <p class="bb-card-title">Named, inspectable actions</p>
+                <p class="bb-card-desc">
+                    Each action carries its name and its argument payload to middleware, subscribers and
+                    the DevTools extension.
+                </p>
+            </div>
+            <div class="bb-card">
+                <p class="bb-card-title">Snapshots</p>
+                <p class="bb-card-desc">
+                    <code>SerializeState()</code> / <code>DeserializeState()</code> are generated, which
+                    is what makes persistence, undo/redo and time-travel possible.
+                </p>
+            </div>
+            <div class="bb-card">
+                <p class="bb-card-title">Compile-time safety</p>
+                <p class="bb-card-desc">
+                    Sixteen diagnostics catch a malformed store at build time rather than emitting code
+                    that does not compile. See <a href="diagnostics">Diagnostics</a>.
+                </p>
             </div>
-        </div>
-        <div class="row" style="margin-top:0.9rem">
-            <button class="btn btn-primary" @onclick="Counter.Increment">Increment</button>
-            <button class="btn" @onclick="Counter.Decrement">Decrement</button>
-            <button class="btn btn-ghost" @onclick="Counter.ResetState">ResetState()</button>
-        </div>
-    </DemoCard>
-
-    <h2>What you got for free</h2>
-    <div class="grid grid--2">
-        <div class="card">
-            <p class="card__title">Batched renders</p>
-            <p class="card__body">
-                Every mutation inside an action is folded into one notification, so a five-field
-                action re-renders the component once - not five times.
-            </p>
-        </div>
-        <div class="card">
-            <p class="card__title">Named, inspectable actions</p>
-            <p class="card__body">
-                Each action carries its name and its argument payload to middleware, subscribers and
-                the DevTools extension.
-            </p>
-        </div>
-        <div class="card">
-            <p class="card__title">Snapshots</p>
-            <p class="card__body">
-                <code>SerializeState()</code> / <code>DeserializeState()</code> are generated, which
-                is what makes persistence, undo/redo and time-travel possible.
-            </p>
-        </div>
-        <div class="card">
-            <p class="card__title">Compile-time safety</p>
-            <p class="card__body">
-                Sixteen diagnostics catch a malformed store at build time rather than emitting code
-                that does not compile. See <a href="diagnostics">Diagnostics</a>.
-            </p>
         </div>
     </div>
 
-    <h2>Where to next</h2>
-    <div class="grid grid--3">
-        <a class="card" href="stores"><p class="card__title">Stores &amp; state</p><p class="card__body">The container, its options and everything the generator emits.</p></a>
-        <a class="card" href="effects"><p class="card__title">Effects</p><p class="card__body">Async work with generated loading, error and cancellation.</p></a>
-        <a class="card" href="devtools"><p class="card__title">Time travel</p><p class="card__body">Rewind your application state in the Redux DevTools.</p></a>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where to next</h3>
+        <div class="bb-grid">
+            <a class="bb-card" href="stores"><p class="bb-card-title">Stores &amp; state</p><p class="bb-card-desc">The container, its options and everything the generator emits.</p></a>
+            <a class="bb-card" href="effects"><p class="bb-card-title">Effects</p><p class="bb-card-desc">Async work with generated loading, error and cancellation.</p></a>
+            <a class="bb-card" href="devtools"><p class="bb-card-title">Time travel</p><p class="bb-card-desc">Rewind your application state in the Redux DevTools.</p></a>
+        </div>
     </div>
 
 </DocPage>
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Stores.razor b/src/Utilities/Blex/Demo/Client/Pages/Stores.razor
index f3159734e15..dc41d6eb636 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Stores.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Stores.razor
@@ -7,165 +7,181 @@
 <DocPage Href="stores" Title="Stores & state"
          Lead="A store is a partial class that owns a slice of state. The generator turns its fields into reactive properties and gives it a JSON identity.">
 
-    <h2>The [BlexStore] attribute</h2>
-    <p>
-        Mark a <code>partial class</code> with <code>[BlexStore]</code> and the generator makes it derive
-        from <code>BlexStoreBase</code>, emits the reactive members and implements the snapshot methods.
-    </p>
-
-    <CodeBlock Code="@StoreDecl" />
-
-    <ApiTable Title="[BlexStore] properties" Rows="@StoreAttrRows" MemberHeader="Property" />
-
-    <Callout Kind="Callout.CalloutKind.Note" Title="Name is the slice key">
-        <p style="margin-bottom:0">
-            <code>Name</code> is what identifies the store in the global state tree, in DevTools, in
-            action labels (<code>counter/Increment</code>) and in persistence keys. Changing it
-            changes the persistence key, which strands previously saved data - bump
-            <code>options.Version</code> and migrate if you rename a persisted store.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The [BlexStore] attribute</h3>
+        <p>
+            Mark a <code>partial class</code> with <code>[BlexStore]</code> and the generator makes it derive
+            from <code>BlexStoreBase</code>, emits the reactive members and implements the snapshot methods.
+        </p>
+
+        <CodeBlock Code="@StoreDecl" />
+
+        <ApiTable Title="[BlexStore] properties" Rows="@StoreAttrRows" MemberHeader="Property" />
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Name is the slice key">
+            <p>
+                <code>Name</code> is what identifies the store in the global state tree, in DevTools, in
+                action labels (<code>counter/Increment</code>) and in persistence keys. Changing it
+                changes the persistence key, which strands previously saved data - bump
+                <code>options.Version</code> and migrate if you rename a persisted store.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Shape requirements</h3>
+        <p>The generator writes a flat, top-level partial declaration, so the class must be one it can extend:</p>
+        <ul class="bb-detail-list">
+            <li>declared <code>partial</code> - otherwise <code>BLEX001</code>;</li>
+            <li>a plain class, not a <code>record</code> - <code>BLEX015</code>. Records get value equality and a synthesized clone that fight a mutable reactive container;</li>
+            <li>top-level, non-generic and non-static - <code>BLEX006</code>;</li>
+            <li>with no other base class, since the generated partial adds <code>: Bit.Blex.BlexStoreBase</code> - <code>BLEX016</code>.</li>
+        </ul>
+        <p>
+            Constructors, interfaces, ordinary members and dependency injection all work normally. A
+            store is just a service, so it can take an <code>HttpClient</code> or a repository in its
+            constructor.
+        </p>
+
+        <CodeBlock Code="@DiSample" Title="A store with dependencies" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> [BlexState] fields</h3>
+        <p>
+            Each <code>[BlexState]</code> field becomes a public property whose setter runs through the
+            dispatch pipeline: it compares, assigns, invalidates computed values, notifies subscribers
+            and records the change for time-travel.
+        </p>
+
+        <CodeBlock Code="@StateSample" />
+
+        <p>The property name is derived by trimming a leading underscore and capitalizing:</p>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>Field</th><th>Property</th></tr></thead>
+                <tbody>
+                    <tr><td><code>_count</code></td><td><code>Count</code></td></tr>
+                    <tr><td><code>count</code></td><td><code>Count</code></td></tr>
+                    <tr><td><code>_isLoggedIn</code></td><td><code>IsLoggedIn</code></td></tr>
+                    <tr><td><code>Count</code></td><td class="bb-soft">error <code>BLEX012</code> - the field and property would collide</td></tr>
+                </tbody>
+            </table>
+        </div>
+        <p>
+            A <code>[BlexState]</code> field must be a writable instance field: <code>static</code>,
+            <code>const</code> and <code>readonly</code> are rejected with <code>BLEX008</code>.
         </p>
-    </Callout>
-
-    <h2>Shape requirements</h2>
-    <p>The generator writes a flat, top-level partial declaration, so the class must be one it can extend:</p>
-    <ul>
-        <li>declared <code>partial</code> - otherwise <code>BLEX001</code>;</li>
-        <li>a plain class, not a <code>record</code> - <code>BLEX015</code>. Records get value equality and a synthesized clone that fight a mutable reactive container;</li>
-        <li>top-level, non-generic and non-static - <code>BLEX006</code>;</li>
-        <li>with no other base class, since the generated partial adds <code>: Bit.Blex.BlexStoreBase</code> - <code>BLEX016</code>.</li>
-    </ul>
-    <p>
-        Constructors, interfaces, ordinary members and dependency injection all work normally. A
-        store is just a service, so it can take an <code>HttpClient</code> or a repository in its
-        constructor.
-    </p>
-
-    <CodeBlock Code="@DiSample" Title="A store with dependencies" />
-
-    <h2>[BlexState] fields</h2>
-    <p>
-        Each <code>[BlexState]</code> field becomes a public property whose setter runs through the
-        dispatch pipeline: it compares, assigns, invalidates computed values, notifies subscribers
-        and records the change for time-travel.
-    </p>
-
-    <CodeBlock Code="@StateSample" />
-
-    <p>The property name is derived by trimming a leading underscore and capitalizing:</p>
-    <div class="table-scroll">
-        <table>
-            <thead><tr><th>Field</th><th>Property</th></tr></thead>
-            <tbody>
-                <tr><td><code>_count</code></td><td><code>Count</code></td></tr>
-                <tr><td><code>count</code></td><td><code>Count</code></td></tr>
-                <tr><td><code>_isLoggedIn</code></td><td><code>IsLoggedIn</code></td></tr>
-                <tr><td><code>Count</code></td><td class="check-no">error <code>BLEX012</code> - the field and property would collide</td></tr>
-            </tbody>
-        </table>
     </div>
-    <p>
-        A <code>[BlexState]</code> field must be a writable instance field: <code>static</code>,
-        <code>const</code> and <code>readonly</code> are rejected with <code>BLEX008</code>.
-    </p>
-
-    <h2 id="change-detection">Change detection</h2>
-    <p>
-        Setters compare with <code>EqualityComparer&lt;T&gt;.Default</code>. For value types and
-        records that is structural equality, which is what you want. For a <code>List&lt;T&gt;</code>,
-        an array or any class that does not override equality, it is <strong>reference</strong>
-        equality - so mutating a collection in place changes nothing as far as Blex is concerned.
-    </p>
-
-    <DemoCard Title="In-place mutation vs. assignment"
-              Description="Both buttons add an item. Only one of them notifies anybody - watch the rendered count and the Inspector's action feed."
-              Source="@EqualitySource">
-        <div class="readout">
-            <div class="readout__item">
-                <span class="readout__label">Rendered count</span>
-                <span class="readout__value readout__value--accent">@Equality.Count</span>
+
+    <div class="bb-card" id="change-detection">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Change detection</h3>
+        <p>
+            Setters compare with <code>EqualityComparer&lt;T&gt;.Default</code>. For value types and
+            records that is structural equality, which is what you want. For a <code>List&lt;T&gt;</code>,
+            an array or any class that does not override equality, it is <strong>reference</strong>
+            equality - so mutating a collection in place changes nothing as far as Blex is concerned.
+        </p>
+
+        <DemoCard Title="In-place mutation vs. assignment"
+                  Description="Both buttons add an item. Only one of them notifies anybody - watch the rendered count and the Inspector's action feed."
+                  Source="@EqualitySource">
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Rendered count</span>
+                    <span class="bb-stat-value demo-accent">@Equality.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Actual list length</span>
+                    <span class="bb-stat-value">@Equality.Items.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Items</span>
+                    <span class="bb-stat-value demo-stat-text">@string.Join(", ", Equality.Items)</span>
+                </div>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Actual list length</span>
-                <span class="readout__value">@Equality.Items.Count</span>
+            <div class="bb-toolbar">
+                <button class="btn demo-btn-danger" @onclick="Equality.MutateInPlace">Items.Add(…) - in place</button>
+                <button class="btn btn-primary" @onclick="Equality.AssignNew">Items = [.. Items, …] - new instance</button>
+                <button class="btn btn-secondary" @onclick="Equality.Reset">Reset</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Items</span>
-                <span class="readout__value" style="font-size:0.85rem">@string.Join(", ", Equality.Items)</span>
+            <p class="bb-card-desc">
+                After clicking the red button the two numbers disagree: the list really did grow, but no
+                notification fired, so the UI still shows the stale computed value. Click the blue one
+                and both catch up.
+            </p>
+        </DemoCard>
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Treat state as immutable">
+            <p>
+                Always assign a new instance: <code>Items = [.. Items, newItem]</code>. Besides making
+                change detection work, immutable slices are what let time-travel, undo/redo and
+                persistence snapshot state safely. For collections that change often, use the
+                <a href="entities">entity adapter</a>, which is immutable by construction.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Serialization</h3>
+        <p>
+            Every store gets generated <code>SerializeState()</code> and <code>DeserializeState()</code>
+            methods keyed by the <em>property</em> names. This is the identity used for DevTools, undo/redo
+            and persistence. Values round-trip through <code>System.Text.Json</code> with
+            <code>BlexJson.Options</code> (web defaults, case-insensitive, enums as strings).
+        </p>
+
+        <DemoCard Title="Live snapshot" Description="SerializeState() on the counter store, re-read on every change.">
+            <CodeBlock Code="@CounterJson" Language="json" />
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" @onclick="Counter.Increment">Increment</button>
+                <button class="btn btn-secondary" @onclick="() => Counter.SetStep(Counter.Step + 1)">Step + 1</button>
+                <button class="btn btn-secondary" @onclick="Counter.ResetState">ResetState()</button>
             </div>
-        </div>
-        <div class="row" style="margin-top:0.9rem">
-            <button class="btn btn-danger" @onclick="Equality.MutateInPlace">Items.Add(…) - in place</button>
-            <button class="btn btn-primary" @onclick="Equality.AssignNew">Items = [.. Items, …] - new instance</button>
-            <button class="btn btn-ghost" @onclick="Equality.Reset">Reset</button>
-        </div>
-        <p class="small muted" style="margin-top:0.7rem;margin-bottom:0">
-            After clicking the red button the two numbers disagree: the list really did grow, but no
-            notification fired, so the UI still shows the stale computed value. Click the blue one
-            and both catch up.
+        </DemoCard>
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="Present-but-null vs. missing">
+            <p>
+                On restore, a property that is <em>present</em> but JSON-null resets the field to
+                <code>default</code>; a <em>missing</em> property leaves the current value untouched.
+                That is what lets you add a new <code>[BlexState]</code> field without invalidating payloads
+                saved by an older build.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> BlexStoreBase API</h3>
+        <p>
+            Your store inherits these. The <code>public</code> members are meant for callers; the
+            <code>protected</code> ones are what the generated code calls, and are available if you hand-write
+            a store.
         </p>
-    </DemoCard>
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Treat state as immutable">
-        <p style="margin-bottom:0">
-            Always assign a new instance: <code>Items = [.. Items, newItem]</code>. Besides making
-            change detection work, immutable slices are what let time-travel, undo/redo and
-            persistence snapshot state safely. For collections that change often, use the
-            <a href="entities">entity adapter</a>, which is immutable by construction.
+
+        <ApiTable Title="Public" Rows="@PublicRows" />
+        <ApiTable Title="Protected" Rows="@ProtectedRows" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The IBlexStore interface</h3>
+        <p>
+            Everything the manager needs from a store. Implement it directly only if you want a store
+            outside the generator's conventions - you then also give up batching and action recording
+            unless you call the <code>BlexStoreBase</code> helpers yourself.
         </p>
-    </Callout>
-
-    <h2>Serialization</h2>
-    <p>
-        Every store gets generated <code>SerializeState()</code> and <code>DeserializeState()</code>
-        methods keyed by the <em>property</em> names. This is the identity used for DevTools, undo/redo
-        and persistence. Values round-trip through <code>System.Text.Json</code> with
-        <code>BlexJson.Options</code> (web defaults, case-insensitive, enums as strings).
-    </p>
-
-    <DemoCard Title="Live snapshot" Description="SerializeState() on the counter store, re-read on every change.">
-        <CodeBlock Code="@CounterJson" Language="json" ShowChrome="false" Compact="true" />
-        <div class="row">
-            <button class="btn btn-sm" @onclick="Counter.Increment">Increment</button>
-            <button class="btn btn-sm" @onclick="() => Counter.SetStep(Counter.Step + 1)">Step + 1</button>
-            <button class="btn btn-sm btn-ghost" @onclick="Counter.ResetState">ResetState()</button>
-        </div>
-    </DemoCard>
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="Present-but-null vs. missing">
-        <p style="margin-bottom:0">
-            On restore, a property that is <em>present</em> but JSON-null resets the field to
-            <code>default</code>; a <em>missing</em> property leaves the current value untouched.
-            That is what lets you add a new <code>[BlexState]</code> field without invalidating payloads
-            saved by an older build.
+        <CodeBlock Code="@IStoreSample" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Lifetime</h3>
+        <p>
+            <code>AddBitBlexStore&lt;T&gt;</code> registers the store as <strong>scoped</strong>. In Blazor
+            WebAssembly there is one scope for the whole app, so a store is effectively a singleton. In
+            Blazor Server each circuit gets its own scope, so every user has an independent copy of the
+            state - which is what you want. The same applies to <code>BlexManager</code>,
+            <code>BlexStatePersistor</code> and <code>BlexHistory</code>.
         </p>
-    </Callout>
-
-    <h2>BlexStoreBase API</h2>
-    <p>
-        Your store inherits these. The <code>public</code> members are meant for callers; the
-        <code>protected</code> ones are what the generated code calls, and are available if you hand-write
-        a store.
-    </p>
-
-    <ApiTable Title="Public" Rows="@PublicRows" />
-    <ApiTable Title="Protected" Rows="@ProtectedRows" />
-
-    <h2>The IBlexStore interface</h2>
-    <p>
-        Everything the manager needs from a store. Implement it directly only if you want a store
-        outside the generator's conventions - you then also give up batching and action recording
-        unless you call the <code>BlexStoreBase</code> helpers yourself.
-    </p>
-    <CodeBlock Code="@IStoreSample" />
-
-    <h2>Lifetime</h2>
-    <p>
-        <code>AddBitBlexStore&lt;T&gt;</code> registers the store as <strong>scoped</strong>. In Blazor
-        WebAssembly there is one scope for the whole app, so a store is effectively a singleton. In
-        Blazor Server each circuit gets its own scope, so every user has an independent copy of the
-        state - which is what you want. The same applies to <code>BlexManager</code>,
-        <code>BlexStatePersistor</code> and <code>BlexHistory</code>.
-    </p>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Subscriptions.razor b/src/Utilities/Blex/Demo/Client/Pages/Subscriptions.razor
index 1803c33ddde..1194b270a9c 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Subscriptions.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Subscriptions.razor
@@ -6,190 +6,200 @@
 <DocPage Href="subscriptions" Title="Components & selectors"
          Lead="Re-render on the state you actually use - from a whole store down to a single projected value.">
 
-    <h2>BlexComponentBase</h2>
-    <p>
-        Inherit from <code>BlexComponentBase</code> and call <code>Subscribe(...)</code> in
-        <code>OnInitialized</code>. The component re-renders whenever a subscribed store changes and
-        detaches every handler on dispose - there is no <code>StateHasChanged</code> to call and
-        nothing to clean up.
-    </p>
-
-    <CodeBlock Code="@Basic" Language="razor" />
-
-    <p>You can subscribe to several stores at once; the call is idempotent per store.</p>
-    <CodeBlock Code="@Multi" />
-
-    <ApiTable Title="BlexComponentBase" Rows="@BaseRows" />
-
-    <h2>Selector subscriptions</h2>
-    <p>
-        <code>Subscribe(store)</code> fires on <em>any</em> change to that store. On a store with
-        many independent fields - or one big collection - that re-renders components that do not care.
-        Subscribe to a projection instead, and the component only wakes up when the projected value
-        actually changes.
-    </p>
-
-    <CodeBlock Code="@Selector" />
-
-    <DemoCard Title="Whole store vs. selector"
-              Description="Two identical panels, subscribed differently. Change only the Step field and watch which one re-renders."
-              Source="@WatcherSource" SourceLanguage="razor">
-        <div class="grid grid--2" style="margin:0 0 0.9rem">
-            <WholeStoreWatcher />
-            <SelectorWatcher />
-        </div>
-        <div class="row">
-            <button class="btn btn-primary" @onclick="Counter.Increment">Change Count (both re-render)</button>
-            <button class="btn" @onclick="() => Counter.SetStep(Counter.Step == 1 ? 5 : 1)">
-                Change Step only (left re-renders, right does not)
-            </button>
-            <button class="btn btn-ghost" @onclick="Counter.ResetState">Reset</button>
-        </div>
-        <div class="readout" style="margin-top:0.9rem">
-            <div class="readout__item">
-                <span class="readout__label">Count</span>
-                <span class="readout__value">@Counter.Count</span>
-            </div>
-            <div class="readout__item">
-                <span class="readout__label">Step</span>
-                <span class="readout__value">@Counter.Step</span>
-            </div>
-        </div>
-    </DemoCard>
-
-    <h2>Outside components</h2>
-    <p>
-        The same primitive is a plain extension method on <code>IBlexStore</code>, usable anywhere. It
-        returns a token - dispose it to stop observing.
-    </p>
-
-    <CodeBlock Code="@Standalone" />
-
-    <ApiTable Title="BlexStoreSubscriptionExtensions" Rows="@ExtensionRows" />
-
-    <h3>Previous and current</h3>
-    <p>
-        The two-argument overload delivers <code>(previous, current)</code>, which is what you want
-        for transition logic - analytics, animations, "changed from X to Y" logging. This is MobX's
-        <code>reaction</code> shape.
-    </p>
-    <CodeBlock Code="@PrevCurrent" />
-
-    <h3>Custom equality</h3>
-    <p>
-        Both overloads take an optional <code>IEqualityComparer&lt;T&gt;</code>. Supply one when the
-        projection returns something whose default equality is not what you mean - a collection, for
-        instance, where you want to compare contents rather than references.
-    </p>
-    <p>
-        This is the case that quietly defeats selectors. A projection like
-        <code>() =&gt; Contacts.All.Where(c =&gt; c.Starred)</code> builds a <em>new</em> object on
-        every evaluation, so the default reference comparison always reports a change and the
-        subscription fires on every action - precisely what selecting a projection was meant to
-        avoid. <code>BlexComparers</code> supplies the two comparers that fix it, the same job
-        zustand's <code>shallow</code> does.
-    </p>
-    <CodeBlock Code="@Comparer" />
-
-    <ApiTable Title="BlexComparers" Rows="@ComparerRows" />
-
-    <DemoCard Title="Same projection, two comparers"
-              Description="Both watch the starred contacts. Star and unstar to change the projection; add or remove an unstarred contact to leave it alone but still run it."
-              Source="@ComparerSource">
-        <div class="row">
-            <button class="btn btn-sm" @onclick="() => Contacts.ToggleStar(1)">Toggle Ada's star</button>
-            <button class="btn btn-sm" @onclick="AddUnstarred">Add an unstarred contact</button>
-            <button class="btn btn-sm btn-ghost" @onclick="ResetCounters">Reset counters</button>
-        </div>
-
-        <div class="readout" style="margin-top:0.8rem">
-            <div class="readout__item">
-                <span class="readout__label">Starred now</span>
-                <span class="readout__value readout__value--accent">@Contacts.Starred</span>
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> BlexComponentBase</h3>
+        <p>
+            Inherit from <code>BlexComponentBase</code> and call <code>Subscribe(...)</code> in
+            <code>OnInitialized</code>. The component re-renders whenever a subscribed store changes and
+            detaches every handler on dispose - there is no <code>StateHasChanged</code> to call and
+            nothing to clean up.
+        </p>
+
+        <CodeBlock Code="@Basic" Language="razor" />
+
+        <p>You can subscribe to several stores at once; the call is idempotent per store.</p>
+        <CodeBlock Code="@Multi" />
+
+        <ApiTable Title="BlexComponentBase" Rows="@BaseRows" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Selector subscriptions</h3>
+        <p>
+            <code>Subscribe(store)</code> fires on <em>any</em> change to that store. On a store with
+            many independent fields - or one big collection - that re-renders components that do not care.
+            Subscribe to a projection instead, and the component only wakes up when the projected value
+            actually changes.
+        </p>
+
+        <CodeBlock Code="@Selector" />
+
+        <DemoCard Title="Whole store vs. selector"
+                  Description="Two identical panels, subscribed differently. Change only the Step field and watch which one re-renders."
+                  Source="@WatcherSource" SourceLanguage="razor">
+            <div class="bb-grid">
+                <WholeStoreWatcher />
+                <SelectorWatcher />
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Default equality: fired</span>
-                <span class="readout__value">@_defaultFired</span>
+            <div class="bb-toolbar">
+                <button class="btn btn-primary" @onclick="Counter.Increment">Change Count (both re-render)</button>
+                <button class="btn btn-secondary" @onclick="() => Counter.SetStep(Counter.Step == 1 ? 5 : 1)">
+                    Change Step only (left re-renders, right does not)
+                </button>
+                <button class="btn btn-secondary" @onclick="Counter.ResetState">Reset</button>
             </div>
-            <div class="readout__item">
-                <span class="readout__label">Sequence comparer: fired</span>
-                <span class="readout__value readout__value--accent">@_sequenceFired</span>
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Count</span>
+                    <span class="bb-stat-value">@Counter.Count</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Step</span>
+                    <span class="bb-stat-value">@Counter.Step</span>
+                </div>
             </div>
-        </div>
+        </DemoCard>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Outside components</h3>
+        <p>
+            The same primitive is a plain extension method on <code>IBlexStore</code>, usable anywhere. It
+            returns a token - dispose it to stop observing.
+        </p>
 
-        <p class="small muted" style="margin-top:0.8rem;margin-bottom:0">
-            Adding an unstarred contact re-runs both projections and produces an identical sequence.
-            Only the left-hand counter moves - and it is the one that would have re-rendered a
-            component for nothing.
+        <CodeBlock Code="@Standalone" />
+
+        <ApiTable Title="BlexStoreSubscriptionExtensions" Rows="@ExtensionRows" />
+
+        <h4>Previous and current</h4>
+        <p>
+            The two-argument overload delivers <code>(previous, current)</code>, which is what you want
+            for transition logic - analytics, animations, "changed from X to Y" logging. This is MobX's
+            <code>reaction</code> shape.
         </p>
-    </DemoCard>
-
-    <h3>fireImmediately</h3>
-    <p>
-        Pass <code>fireImmediately: true</code> to invoke the callback once at subscription time with
-        the current value, so an observer does not have to seed itself. With the two-argument
-        overload, <code>previous</code> and <code>current</code> are both the value at subscription.
-        If that first call throws, the subscription is detached before the exception surfaces - the
-        caller never received a token, so a handler left attached would be unstoppable.
-    </p>
-
-    <h3>Across stores</h3>
-    <p>
-        <code>BlexManager</code> carries the same pair of overloads for a projection that spans
-        stores. Without it, a value derived from two stores has to be recomputed on every action of
-        every store - the cross-store equivalent of re-rendering the whole app on any change.
-    </p>
-    <CodeBlock Code="@ManagerSelector" Title="One callback, two stores" />
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="A manager selector runs after every action">
-        <p style="margin-bottom:0">
-            The store-level overload only runs when <em>that</em> store changes; the manager-level one
-            runs after every action in the application. Keep the projection cheap - read
-            already-memoized <a href="computed"><code>[BlexComputed]</code></a> properties
-            rather than recomputing over collections inside it.
+        <CodeBlock Code="@PrevCurrent" />
+
+        <h4>Custom equality</h4>
+        <p>
+            Both overloads take an optional <code>IEqualityComparer&lt;T&gt;</code>. Supply one when the
+            projection returns something whose default equality is not what you mean - a collection, for
+            instance, where you want to compare contents rather than references.
         </p>
-    </Callout>
-
-    <h2>Owning other subscriptions</h2>
-    <p>
-        <code>OwnsSubscription(IDisposable)</code> hands any token to the component so it is disposed
-        along with it - a manager subscription, a selector token you made yourself, anything.
-    </p>
-    <CodeBlock Code="@Owns" Language="razor" />
-
-    <h2>The raw event</h2>
-    <p>
-        Under everything is <code>IBlexStore.StateChanged</code>, a plain <code>Action</code> raised once
-        per action after the state has settled. Use it directly when you want no machinery at all -
-        just remember to unsubscribe.
-    </p>
-    <CodeBlock Code="@Raw" />
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Rendering is already batched">
-        <p style="margin-bottom:0">
-            An action that changes five fields raises <code>StateChanged</code> once, not five times,
-            so you do not need selectors to avoid render storms <em>within</em> an action. Reach for
-            them when a component should ignore whole categories of change on a shared store.
+        <p>
+            This is the case that quietly defeats selectors. A projection like
+            <code>() =&gt; Contacts.All.Where(c =&gt; c.Starred)</code> builds a <em>new</em> object on
+            every evaluation, so the default reference comparison always reports a change and the
+            subscription fires on every action - precisely what selecting a projection was meant to
+            avoid. <code>BlexComparers</code> supplies the two comparers that fix it, the same job
+            zustand's <code>shallow</code> does.
         </p>
-    </Callout>
-
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="Selectors compare, they do not deep-compare">
-        <p style="margin-bottom:0">
-            A selector returning <code>Store.Items</code> (a list) fires whenever the
-            <em>reference</em> changes - which, if you follow the immutable-assignment rule, is every
-            time the collection is replaced, even when the contents are equal. Project to something
-            small and comparable (<code>Items.Count</code>, an id, a formatted string), or pass
-            <code>BlexComparers.Sequence&lt;T&gt;()</code>.
+        <CodeBlock Code="@Comparer" />
+
+        <ApiTable Title="BlexComparers" Rows="@ComparerRows" />
+
+        <DemoCard Title="Same projection, two comparers"
+                  Description="Both watch the starred contacts. Star and unstar to change the projection; add or remove an unstarred contact to leave it alone but still run it."
+                  Source="@ComparerSource">
+            <div class="bb-toolbar">
+                <button class="btn btn-secondary" @onclick="() => Contacts.ToggleStar(1)">Toggle Ada's star</button>
+                <button class="btn btn-secondary" @onclick="AddUnstarred">Add an unstarred contact</button>
+                <button class="btn btn-secondary" @onclick="ResetCounters">Reset counters</button>
+            </div>
+
+            <div class="bb-stats">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Starred now</span>
+                    <span class="bb-stat-value demo-accent">@Contacts.Starred</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Default equality: fired</span>
+                    <span class="bb-stat-value">@_defaultFired</span>
+                </div>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Sequence comparer: fired</span>
+                    <span class="bb-stat-value demo-accent">@_sequenceFired</span>
+                </div>
+            </div>
+
+            <p class="bb-card-desc">
+                Adding an unstarred contact re-runs both projections and produces an identical sequence.
+                Only the left-hand counter moves - and it is the one that would have re-rendered a
+                component for nothing.
+            </p>
+        </DemoCard>
+
+        <h4>fireImmediately</h4>
+        <p>
+            Pass <code>fireImmediately: true</code> to invoke the callback once at subscription time with
+            the current value, so an observer does not have to seed itself. With the two-argument
+            overload, <code>previous</code> and <code>current</code> are both the value at subscription.
+            If that first call throws, the subscription is detached before the exception surfaces - the
+            caller never received a token, so a handler left attached would be unstoppable.
         </p>
-    </Callout>
 
-    <Callout Kind="Callout.CalloutKind.Note" Title="Manager selectors also see restores">
-        <p style="margin-bottom:0">
-            Undo/redo, a DevTools time-travel jump and an incoming cross-tab change all move state
-            without dispatching an action. A manager-level projection is re-evaluated after those too,
-            so it never keeps reporting a value the application no longer holds.
+        <h4>Across stores</h4>
+        <p>
+            <code>BlexManager</code> carries the same pair of overloads for a projection that spans
+            stores. Without it, a value derived from two stores has to be recomputed on every action of
+            every store - the cross-store equivalent of re-rendering the whole app on any change.
+        </p>
+        <CodeBlock Code="@ManagerSelector" Title="One callback, two stores" />
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="A manager selector runs after every action">
+            <p>
+                The store-level overload only runs when <em>that</em> store changes; the manager-level one
+                runs after every action in the application. Keep the projection cheap - read
+                already-memoized <a href="computed"><code>[BlexComputed]</code></a> properties
+                rather than recomputing over collections inside it.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Owning other subscriptions</h3>
+        <p>
+            <code>OwnsSubscription(IDisposable)</code> hands any token to the component so it is disposed
+            along with it - a manager subscription, a selector token you made yourself, anything.
+        </p>
+        <CodeBlock Code="@Owns" Language="razor" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The raw event</h3>
+        <p>
+            Under everything is <code>IBlexStore.StateChanged</code>, a plain <code>Action</code> raised once
+            per action after the state has settled. Use it directly when you want no machinery at all -
+            just remember to unsubscribe.
         </p>
-    </Callout>
+        <CodeBlock Code="@Raw" />
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Rendering is already batched">
+            <p>
+                An action that changes five fields raises <code>StateChanged</code> once, not five times,
+                so you do not need selectors to avoid render storms <em>within</em> an action. Reach for
+                them when a component should ignore whole categories of change on a shared store.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="Selectors compare, they do not deep-compare">
+            <p>
+                A selector returning <code>Store.Items</code> (a list) fires whenever the
+                <em>reference</em> changes - which, if you follow the immutable-assignment rule, is every
+                time the collection is replaced, even when the contents are equal. Project to something
+                small and comparable (<code>Items.Count</code>, an id, a formatted string), or pass
+                <code>BlexComparers.Sequence&lt;T&gt;()</code>.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Note" Title="Manager selectors also see restores">
+            <p>
+                Undo/redo, a DevTools time-travel jump and an incoming cross-tab change all move state
+                without dispatching an action. A manager-level projection is re-evaluated after those too,
+                so it never keeps reporting a value the application no longer holds.
+            </p>
+        </Callout>
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Pages/Testing.razor b/src/Utilities/Blex/Demo/Client/Pages/Testing.razor
index 067dfc39847..6d92169d976 100644
--- a/src/Utilities/Blex/Demo/Client/Pages/Testing.razor
+++ b/src/Utilities/Blex/Demo/Client/Pages/Testing.razor
@@ -3,131 +3,157 @@
 <DocPage Href="testing" Title="Testing"
          Lead="Stores are plain objects, so they test like plain objects - and Bit.Blex.Testing adds a harness for asserting on the dispatch pipeline itself.">
 
-    <h2>The simplest test</h2>
-    <p>
-        A store needs no host, no DI container and no Blazor. Construct it, call an action, assert on
-        a property.
-    </p>
-    <CodeBlock Code="@Plain" FileName="CounterTests.cs" />
-
-    <p>
-        That covers state. What it does not cover is whether the <em>right action</em> was dispatched,
-        with the right payload, exactly once. That is what the harness is for.
-    </p>
-
-    <h2>The harness</h2>
-    <p>
-        <code>BlexTestHarness&lt;TStore&gt;</code> creates a fresh <code>BlexManager</code>,
-        registers your store with it, and starts recording every action.
-    </p>
-    <CodeBlock Code="@Harness" />
-    <ApiTable Title="BlexTestHarness&lt;TStore&gt;" Rows="@HarnessRows" />
-
-    <h2>The action log</h2>
-    <p>
-        <code>BlexActionLog</code> records each dispatch with its name, sequence, arguments and the global
-        state immediately afterwards.
-    </p>
-    <CodeBlock Code="@Log" />
-    <ApiTable Title="BlexActionLog" Rows="@LogRows" />
-    <ApiTable Title="BlexRecordedAction" Rows="@RecordedRows" />
-
-    <h2>Asserting on payloads</h2>
-    <p>Action arguments are captured automatically, so you can assert on exactly what was dispatched.</p>
-    <CodeBlock Code="@Payload" />
-
-    <h2>Testing effects</h2>
-    <p>
-        Awaiting the effect wrapper is usually enough. When you need to observe an intermediate state
-        - a loading flag, say - <code>WaitForAsync</code> beats sprinkling <code>Task.Delay</code>
-        through the test: it re-evaluates the condition on every store change and throws
-        <code>TimeoutException</code> if it never becomes true.
-    </p>
-    <CodeBlock Code="@Effects" />
-
-    <h3>Errors and cancellation</h3>
-    <CodeBlock Code="@EffectErrors" />
-
-    <h2>Asserting on batching</h2>
-    <p>
-        <code>CountNotifications</code> counts how many times a store raised
-        <code>StateChanged</code> while an action ran - the direct way to prove that a multi-field
-        action really does render once.
-    </p>
-    <CodeBlock Code="@Notifications" />
-
-    <h2>Testing middleware</h2>
-    <p>
-        A store is rarely alone in production - a veto filter, an audit logger or a metrics recorder
-        usually wraps it, and those guard rails deserve tests too.
-        <code>BlexTestHarness.WithFilter</code> and <code>WithMiddleware</code> give you the same
-        zero-setup harness with the pipeline attached.
-    </p>
-    <CodeBlock Code="@MiddlewareTest" />
-
-    <p>
-        Reach for a hand-built <code>BlexManager</code> only when the test needs a manager configured
-        before any store is registered.
-    </p>
-
-    <h2>More than one store</h2>
-    <p>
-        Cross-store coordination is exactly the kind of thing worth testing, and abandoning the
-        harness to hand-wire a manager for it defeats the point. <code>harness.Register(store)</code>
-        brings a second store onto the same manager: its actions land in the same log and its slice
-        in the same <code>State</code> tree, and it is disposed with the harness.
-    </p>
-    <CodeBlock Code="@MultiStore" />
-
-    <p>
-        For a condition that spans stores - or one the store you are driving will not report -
-        <code>manager.WaitForAsync</code> re-checks after every action <em>and</em> every restore in
-        the application, where <code>store.WaitForAsync</code> only watches one store.
-    </p>
-
-    <h2>Asserting on failures</h2>
-    <p>
-        An effect captures its exception into <code>XxxError</code> instead of propagating it, so a
-        test that only watches for a throw sees nothing at all. <code>harness.Failures</code> records
-        every action whose body threw, with the arguments it was called with.
-    </p>
-    <CodeBlock Code="@FailureTest" />
-
-    <h2>Testing persistence</h2>
-    <p>
-        <code>IBlexStorage</code> is a three-method interface, so an in-memory fake is trivial.
-        Remember to <code>FlushAsync</code> when the persistor is debounced.
-    </p>
-    <CodeBlock Code="@PersistenceTest" />
-
-    <h2>Testing undo/redo</h2>
-    <CodeBlock Code="@HistoryTest" />
-
-    <h2>Extension methods</h2>
-    <ApiTable Title="BlexTestExtensions" Rows="@ExtensionRows" />
-
-    <Callout Kind="Callout.CalloutKind.Tip" Title="Snapshots make good assertions">
-        <p style="margin-bottom:0">
-            <code>harness.Snapshot()</code> and <code>harness.State</code> return the same JSON the
-            library uses for persistence and time-travel. Asserting against a snapshot checks the
-            whole store at once, and it fails loudly when a field you forgot about changes.
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The simplest test</h3>
+        <p>
+            A store needs no host, no DI container and no Blazor. Construct it, call an action, assert on
+            a property.
         </p>
-    </Callout>
+        <CodeBlock Code="@Plain" FileName="CounterTests.cs" />
 
-    <Callout Kind="Callout.CalloutKind.Gotcha" Title="Dispose the harness">
-        <p style="margin-bottom:0">
-            The harness holds a live subscription on its manager. Use <code>using var</code> - or
-            <code>Dispose()</code> - so a long test class does not accumulate recorders. The
-            harness's manager is its own, so tests never interfere with each other.
+        <p>
+            That covers state. What it does not cover is whether the <em>right action</em> was dispatched,
+            with the right payload, exactly once. That is what the harness is for.
         </p>
-    </Callout>
-
-    <h2>Testing components</h2>
-    <p>
-        For component-level tests with bUnit, register the store the same way the app does and let
-        the component subscribe. There is nothing Blex-specific to mock.
-    </p>
-    <CodeBlock Code="@Bunit" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The harness</h3>
+        <p>
+            <code>BlexTestHarness&lt;TStore&gt;</code> creates a fresh <code>BlexManager</code>,
+            registers your store with it, and starts recording every action.
+        </p>
+        <CodeBlock Code="@Harness" />
+        <ApiTable Title="BlexTestHarness&lt;TStore&gt;" Rows="@HarnessRows" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The action log</h3>
+        <p>
+            <code>BlexActionLog</code> records each dispatch with its name, sequence, arguments and the global
+            state immediately afterwards.
+        </p>
+        <CodeBlock Code="@Log" />
+        <ApiTable Title="BlexActionLog" Rows="@LogRows" />
+        <ApiTable Title="BlexRecordedAction" Rows="@RecordedRows" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Asserting on payloads</h3>
+        <p>Action arguments are captured automatically, so you can assert on exactly what was dispatched.</p>
+        <CodeBlock Code="@Payload" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Testing effects</h3>
+        <p>
+            Awaiting the effect wrapper is usually enough. When you need to observe an intermediate state
+            - a loading flag, say - <code>WaitForAsync</code> beats sprinkling <code>Task.Delay</code>
+            through the test: it re-evaluates the condition on every store change and throws
+            <code>TimeoutException</code> if it never becomes true.
+        </p>
+        <CodeBlock Code="@Effects" />
+
+        <h4>Errors and cancellation</h4>
+        <CodeBlock Code="@EffectErrors" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Asserting on batching</h3>
+        <p>
+            <code>CountNotifications</code> counts how many times a store raised
+            <code>StateChanged</code> while an action ran - the direct way to prove that a multi-field
+            action really does render once.
+        </p>
+        <CodeBlock Code="@Notifications" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Testing middleware</h3>
+        <p>
+            A store is rarely alone in production - a veto filter, an audit logger or a metrics recorder
+            usually wraps it, and those guard rails deserve tests too.
+            <code>BlexTestHarness.WithFilter</code> and <code>WithMiddleware</code> give you the same
+            zero-setup harness with the pipeline attached.
+        </p>
+        <CodeBlock Code="@MiddlewareTest" />
+
+        <p>
+            Reach for a hand-built <code>BlexManager</code> only when the test needs a manager configured
+            before any store is registered.
+        </p>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> More than one store</h3>
+        <p>
+            Cross-store coordination is exactly the kind of thing worth testing, and abandoning the
+            harness to hand-wire a manager for it defeats the point. <code>harness.Register(store)</code>
+            brings a second store onto the same manager: its actions land in the same log and its slice
+            in the same <code>State</code> tree, and it is disposed with the harness.
+        </p>
+        <CodeBlock Code="@MultiStore" />
+
+        <p>
+            For a condition that spans stores - or one the store you are driving will not report -
+            <code>manager.WaitForAsync</code> re-checks after every action <em>and</em> every restore in
+            the application, where <code>store.WaitForAsync</code> only watches one store.
+        </p>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Asserting on failures</h3>
+        <p>
+            An effect captures its exception into <code>XxxError</code> instead of propagating it, so a
+            test that only watches for a throw sees nothing at all. <code>harness.Failures</code> records
+            every action whose body threw, with the arguments it was called with.
+        </p>
+        <CodeBlock Code="@FailureTest" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Testing persistence</h3>
+        <p>
+            <code>IBlexStorage</code> is a three-method interface, so an in-memory fake is trivial.
+            Remember to <code>FlushAsync</code> when the persistor is debounced.
+        </p>
+        <CodeBlock Code="@PersistenceTest" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Testing undo/redo</h3>
+        <CodeBlock Code="@HistoryTest" />
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Extension methods</h3>
+        <ApiTable Title="BlexTestExtensions" Rows="@ExtensionRows" />
+
+        <Callout Kind="Callout.CalloutKind.Tip" Title="Snapshots make good assertions">
+            <p>
+                <code>harness.Snapshot()</code> and <code>harness.State</code> return the same JSON the
+                library uses for persistence and time-travel. Asserting against a snapshot checks the
+                whole store at once, and it fails loudly when a field you forgot about changes.
+            </p>
+        </Callout>
+
+        <Callout Kind="Callout.CalloutKind.Gotcha" Title="Dispose the harness">
+            <p>
+                The harness holds a live subscription on its manager. Use <code>using var</code> - or
+                <code>Dispose()</code> - so a long test class does not accumulate recorders. The
+                harness's manager is its own, so tests never interfere with each other.
+            </p>
+        </Callout>
+    </div>
+
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Testing components</h3>
+        <p>
+            For component-level tests with bUnit, register the store the same way the app does and let
+            the component subscribe. There is nothing Blex-specific to mock.
+        </p>
+        <CodeBlock Code="@Bunit" />
+    </div>
 
 </DocPage>
 
diff --git a/src/Utilities/Blex/Demo/Client/Routes.razor b/src/Utilities/Blex/Demo/Client/Routes.razor
index 61eea3b0a9f..c54dc51442a 100644
--- a/src/Utilities/Blex/Demo/Client/Routes.razor
+++ b/src/Utilities/Blex/Demo/Client/Routes.razor
@@ -1,12 +1,21 @@
 @*
     The whole app lives inside <BlexProvider>: it registers every store with the manager,
     restores persisted state, starts undo/redo recording and connects the Redux DevTools bridge.
+
+    Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+    landing, not-found and error pages opt out with @layout MainLayout. After a navigation the
+    page's own H1 takes focus, so a screen reader starts reading at the new page.
+
+    The Inspector dock sits after the router rather than in a layout: it is the same component on
+    every page, so it is mounted once and keeps its open tab and scroll across navigations.
 *@
 <BlexProvider>
-    <Router AppAssembly="typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFoundPage)">
+    <Router AppAssembly="typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFound)">
         <Found Context="routeData">
-            <RouteView RouteData="routeData" DefaultLayout="typeof(DocsLayout)" />
+            <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
             <FocusOnNavigate RouteData="routeData" Selector="h1" />
         </Found>
     </Router>
+
+    <InspectorDock />
 </BlexProvider>
diff --git a/src/Utilities/Blex/Demo/Client/Services/ThemeService.cs b/src/Utilities/Blex/Demo/Client/Services/ThemeService.cs
deleted file mode 100644
index d63dd303309..00000000000
--- a/src/Utilities/Blex/Demo/Client/Services/ThemeService.cs
+++ /dev/null
@@ -1,54 +0,0 @@
-using Microsoft.JSInterop;
-
-namespace Bit.Blex.Demo.Client.Services;
-
-/// <summary>
-/// Light/dark preference for the documentation site's own chrome. Deliberately <em>not</em> a
-/// Blex store: the site keeps its presentation concerns out of the demos so that everything a
-/// visitor sees in the action feed is theirs, not the site's.
-/// </summary>
-public sealed class ThemeService(IJSRuntime js)
-{
-    private const string StorageKey = "blex-docs-theme";
-
-    /// <summary>Raised when the theme changes.</summary>
-    public event Action? Changed;
-
-    /// <summary><c>"dark"</c> or <c>"light"</c>.</summary>
-    public string Theme { get; private set; } = "dark";
-
-    /// <summary>Reads the stored preference (falling back to the OS setting) and applies it.</summary>
-    public async Task InitializeAsync()
-    {
-        try
-        {
-            var stored = await js.InvokeAsync<string?>("blexDocs.getTheme", StorageKey);
-            if (!string.IsNullOrEmpty(stored))
-                Theme = stored;
-            await ApplyAsync();
-        }
-        catch (JSException)
-        {
-            // Theme is cosmetic; a missing helper must not break the site.
-        }
-    }
-
-    /// <summary>Flips between light and dark and persists the choice.</summary>
-    public async Task ToggleAsync()
-    {
-        Theme = Theme == "dark" ? "light" : "dark";
-        await ApplyAsync();
-        Changed?.Invoke();
-    }
-
-    private async Task ApplyAsync()
-    {
-        try
-        {
-            await js.InvokeVoidAsync("blexDocs.setTheme", StorageKey, Theme);
-        }
-        catch (JSException)
-        {
-        }
-    }
-}
diff --git a/src/Utilities/Blex/Demo/Server/Bit.Blex.Demo.Server.csproj b/src/Utilities/Blex/Demo/Server/Bit.Blex.Demo.Server.csproj
index 06a20f8a448..fa6637c5b15 100644
--- a/src/Utilities/Blex/Demo/Server/Bit.Blex.Demo.Server.csproj
+++ b/src/Utilities/Blex/Demo/Server/Bit.Blex.Demo.Server.csproj
@@ -46,11 +46,11 @@
 
         <!-- What this site can teach about state management, and nothing else of it: the stores, the services
              and middleware, the registration and the components that show subscriptions. Site chrome - the
-             layout, the code highlighter, the page shell, the site map - answers no question about Blex. The
-             documentation pages among the components are dropped again at runtime by BlexSourceCatalog: their
-             prose is served rendered, by the docs tool. -->
+             layout (the shared site kit), the code highlighter, the page shell, the site map, the landing and
+             error pages - answers no question about Blex. The documentation pages among the components are
+             dropped again at runtime by BlexSourceCatalog: their prose is served rendered, by the docs tool. -->
         <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs;..\Client\*.csproj"
-                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\Components\CodeHighlighter.cs;..\Client\Components\CodeBlock.razor;..\Client\Components\Callout.razor;..\Client\Components\ApiTable.razor;..\Client\Components\DocPage.razor;..\Client\Components\DemoCard.razor;..\Client\DocsNav.cs;..\Client\DiagnosticsCatalog.cs;..\Client\Services\ThemeService.cs;..\Client\Pages\NotFoundPage.razor;..\Client\Pages\ErrorPage.razor">
+                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\Components\CodeHighlighter.cs;..\Client\Components\CodeBlock.razor;..\Client\Components\Callout.razor;..\Client\Components\ApiTable.razor;..\Client\Components\DocPage.razor;..\Client\Components\DemoCard.razor;..\Client\DocsCatalog.cs;..\Client\DiagnosticsCatalog.cs;..\Client\Pages\Home.razor;..\Client\Pages\NotFound.razor;..\Client\Pages\ErrorPage.razor">
             <LogicalName>BlexSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
         </EmbeddedResource>
 
diff --git a/src/Utilities/Blex/Demo/Server/Components/App.razor b/src/Utilities/Blex/Demo/Server/Components/App.razor
index 27230ac80cb..6047a0c4098 100644
--- a/src/Utilities/Blex/Demo/Server/Components/App.razor
+++ b/src/Utilities/Blex/Demo/Server/Components/App.razor
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en">
 
 <head>
-    <base href="/" />
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#FFFFFF" />
+    <base href="/" />
     @* No static <title> here: every page supplies its own through <PageTitle>, and with
        prerendering the HeadOutlet emits a real <title> element into this head. A second,
        earlier one would win in the served HTML (browsers and crawlers take the first). *@
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Bit.Blex is lightweight, source-generator-powered reactive state management for Blazor and .NET MAUI, with Redux DevTools time-travel, effects, persistence and undo/redo built in." />
-    <meta name="color-scheme" content="dark light" />
 
     @* What a link to the site looks like when it is shared. *@
     <meta property="og:type" content="website" />
@@ -18,24 +18,17 @@
     <meta property="og:description" content="One [BlexState] field, one [BlexAction] method. No reducers, no boilerplate - and Redux DevTools time-travel out of the box." />
     <meta name="twitter:card" content="summary" />
 
-    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
-    <link rel="stylesheet" href="css/site.css" />
-
-    @* Apply the stored theme before first paint so the page never flashes the wrong one. The key
-       is the one Services/ThemeService.cs persists the reader's choice under. *@
-    <script>
-        (function () {
-            try {
-                var stored = localStorage.getItem('blex-docs-theme');
-                if (!stored) {
-                    stored = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
-                        ? 'light' : 'dark';
-                }
-                document.documentElement.setAttribute('data-theme', stored);
-            } catch (e) { /* private mode: keep the default */ }
-        })();
-    </script>
-
+    <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. *@
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Blex.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
+    <ImportMap />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     @* Same render mode as the app itself, so <PageTitle> keeps working after hydration. *@
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
 </head>
@@ -43,18 +36,21 @@
 <body>
     @* Prerendered on the server, then hydrated by the WebAssembly runtime. Stores render their
        initial state in the served HTML; <BlexProvider> hands that state to the interactive render
-       and then rehydrates the persisted stores from localStorage. *@
+       and then rehydrates the persisted stores from localStorage. Bit.Blex has no stylesheet, and
+       its two script modules are imported on demand by the persistence and DevTools bridges. *@
     <Routes @rendermode="InteractiveWebAssembly" />
 
-    <div id="blazor-error-ui">
+    <div id="blazor-error-ui" data-nosnippet>
         An unhandled error has occurred.
         <a href="." class="reload">Reload</a>
-        <span class="dismiss">🗙</span>
+        <span class="dismiss">&#128473;</span>
     </div>
 
-    @* Loaded before the Blazor script so window.blexDocs exists by the time the app boots. *@
-    <script src="js/site.js"></script>
-    <script src="_framework/blazor.web.js"></script>
+    <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
+    @* The one helper a page needs beyond the kit: the persistence page reads the raw payload Blex
+       wrote to localStorage. *@
+    <script src="@Assets["demo.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Blex/Demo/Server/Services/DocsPageRenderer.cs b/src/Utilities/Blex/Demo/Server/Services/DocsPageRenderer.cs
index b4cc1f6123a..0f534611465 100644
--- a/src/Utilities/Blex/Demo/Server/Services/DocsPageRenderer.cs
+++ b/src/Utilities/Blex/Demo/Server/Services/DocsPageRenderer.cs
@@ -1,5 +1,4 @@
 using System.Text;
-using System.Reflection;
 using System.Collections.Concurrent;
 using Bit.Blex.Demo.Client;
 using Microsoft.AspNetCore.Components;
@@ -8,15 +7,15 @@
 namespace Bit.Blex.Demo.Server.Services;
 
 /// <summary>One page of the documentation site, as the MCP tools address it.</summary>
-/// <param name="Slug">The key a caller passes: the page's route, or "introduction" for the site's root page.</param>
+/// <param name="Slug">The key a caller passes: the page's route, without its leading slash.</param>
 /// <param name="Title">The page title, as the sidebar shows it.</param>
 /// <param name="Summary">The one-line description from the site map.</param>
 /// <param name="Section">The sidebar group the page belongs to.</param>
 /// <param name="PageType">The routable component that renders the page.</param>
-public sealed record DocsPageInfo(string Slug, string Title, string Summary, string Section, Type PageType)
+public sealed record BlexDocsPage(string Slug, string Title, string Summary, string Section, Type PageType)
 {
     /// <summary>The page on the live documentation site.</summary>
-    public string Url => $"{DocsPageRenderer.SiteUrl}/{(Slug == DocsPageRenderer.RootSlug ? string.Empty : Slug)}";
+    public string Url => $"{DocsPageRenderer.SiteUrl}/{Slug}";
 }
 
 /// <summary>
@@ -24,11 +23,13 @@ public sealed record DocsPageInfo(string Slug, string Title, string Summary, str
 /// that both hand out the docs.
 /// <para>
 /// The component is the very one the site serves, so what an MCP client reads is what a human reads.
-/// The site map (DocsNav) names the pages and the component that renders each one is found by its
-/// <c>@page</c> route, so there is no second list of pages here to fall out of step with the sidebar.
-/// A page renders on its own - outside the app's layout and its &lt;BlexProvider&gt; - so a page that
-/// reaches for JS interop while initializing throws instead of producing HTML. That comes back as a
-/// page-shaped answer explaining itself, never as a failed tool call that tells the agent nothing.
+/// The site map (the client's DocsCatalog) names the pages and the component that renders each one,
+/// so there is no second list of pages here to fall out of step with the sidebar. The landing page is
+/// not in it - it is a front door, not documentation - and neither is the site chrome: a page renders
+/// on its own, outside the app's layouts and its &lt;BlexProvider&gt;, so what comes back is the page's
+/// title block and its sections and nothing of the header, nav panel, pager or footer around them. A
+/// page that reaches for JS interop while initializing throws instead of producing HTML. That comes back
+/// as a page-shaped answer explaining itself, never as a failed tool call that tells the agent nothing.
 /// </para>
 /// </summary>
 public static class DocsPageRenderer
@@ -36,39 +37,30 @@ public static class DocsPageRenderer
     /// <summary>The live documentation site, which every page's URL points into.</summary>
     public const string SiteUrl = "https://blex.bitplatform.dev";
 
-    /// <summary>The slug of the site's root page, whose route is the empty string - which nobody can type.</summary>
+    /// <summary>The page a caller means when they ask for the root of the docs - an empty slug, "overview", "home".</summary>
     public const string RootSlug = "introduction";
 
     private static readonly ConcurrentDictionary<string, string> _markdown = new(StringComparer.Ordinal);
 
-    private static readonly Lazy<DocsPageInfo[]> _pages = new(BuildPages);
+    private static readonly Lazy<BlexDocsPage[]> _pages = new(BuildPages);
 
     /// <summary>Every documentation page, in the order the sidebar lists them.</summary>
-    public static DocsPageInfo[] Pages => _pages.Value;
+    public static BlexDocsPage[] Pages => _pages.Value;
 
-    private static DocsPageInfo[] BuildPages()
-    {
-        var routes = typeof(DocsNav).Assembly.GetExportedTypes()
-            .Where(type => typeof(IComponent).IsAssignableFrom(type))
-            .SelectMany(type => type.GetCustomAttributes<Microsoft.AspNetCore.Components.RouteAttribute>().Select(route => (Route: route.Template.Trim('/'), Type: type)))
-            .ToDictionary(entry => entry.Route, entry => entry.Type, StringComparer.OrdinalIgnoreCase);
-
-        return [.. DocsNav.Sections.SelectMany(section => section.Pages
-            .Where(page => routes.ContainsKey(page.Href))
-            .Select(page => new DocsPageInfo(
-                page.Href.Length == 0 ? RootSlug : page.Href,
-                page.Title,
-                page.Summary,
-                section.Title,
-                routes[page.Href])))];
-    }
+    private static BlexDocsPage[] BuildPages()
+        => [.. DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page => new BlexDocsPage(
+               page.Url.Trim('/'),
+               page.Title,
+               page.Description,
+               section.Title,
+               page.PageType)))];
 
     /// <summary>
     /// The page a slug names, or null when none does. The words a caller reaches for to mean the root
     /// page stand in for it, and slashes and case are ignored - the tool and the resource resolve slugs
     /// through this one method, so a slug that works in one cannot fail in the other.
     /// </summary>
-    public static DocsPageInfo? FindPage(string? slug)
+    public static BlexDocsPage? FindPage(string? slug)
     {
         var trimmed = (slug ?? string.Empty).Trim().Trim('/');
 
@@ -105,7 +97,7 @@ public static string RenderIndex()
     }
 
     /// <summary>The page as Markdown, or a null <c>Markdown</c> and the reason it could not be rendered.</summary>
-    public static async ValueTask<(string? Markdown, string? Error)> TryRenderMarkdownAsync(HtmlRenderer htmlRenderer, DocsPageInfo page)
+    public static async ValueTask<(string? Markdown, string? Error)> TryRenderMarkdownAsync(HtmlRenderer htmlRenderer, BlexDocsPage page)
     {
         if (_markdown.TryGetValue(page.Slug, out var cached)) return (cached, null);
 
@@ -133,7 +125,7 @@ public static string RenderIndex()
     }
 
     /// <summary>What to answer with when the page did not render - and where its content is anyway.</summary>
-    public static string Unavailable(DocsPageInfo page, string? error) =>
+    public static string Unavailable(BlexDocsPage page, string? error) =>
         $"The '{page.Title}' documentation page could not be rendered on the server{(error is null ? null : $": {error}")}. " +
         $"It is readable at {page.Url} on the live documentation site. For the same material as text, " +
         $"call SearchBlex(query: \"{page.Title}\") or GetBlexGuideSection.";
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/app.css b/src/Utilities/Blex/Demo/Server/wwwroot/app.css
new file mode 100644
index 00000000000..7b51a42ea90
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/app.css
@@ -0,0 +1,2820 @@
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/css/site.css b/src/Utilities/Blex/Demo/Server/wwwroot/css/site.css
deleted file mode 100644
index 9fa8fbca7f7..00000000000
--- a/src/Utilities/Blex/Demo/Server/wwwroot/css/site.css
+++ /dev/null
@@ -1,892 +0,0 @@
-/* ==========================================================================
-   Blex documentation site
-   Self-contained: no external fonts, no CDN, no third-party CSS.
-   ========================================================================== */
-
-:root {
-    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-
-    --topbar-h: 60px;
-    --sidebar-w: 274px;
-    --content-max: 860px;
-    --radius: 10px;
-    --radius-sm: 6px;
-}
-
-/* ---------- dark (default) ---------- */
-html[data-theme="dark"], :root {
-    --bg: #0c0d12;
-    --bg-raised: #121420;
-    --bg-sunken: #08090e;
-    --bg-code: #0e1018;
-    --bg-hover: #1a1d2c;
-
-    --fg: #e7e9f2;
-    --fg-muted: #9ba3bb;
-    --fg-faint: #6d7590;
-
-    --border: #22263a;
-    --border-strong: #2f344d;
-
-    --accent: #8b7bfb;
-    --accent-fg: #ffffff;
-    --accent-soft: rgba(139, 123, 251, 0.15);
-    --accent-line: rgba(139, 123, 251, 0.45);
-
-    --ok: #46c58a;
-    --warn: #e5b567;
-    --danger: #f2708a;
-    --info: #62b6f5;
-
-    --c-kw: #c792ea;
-    --c-str: #b9dd8e;
-    --c-num: #f7a06a;
-    --c-com: #6a7293;
-    --c-type: #7fd4f0;
-    --c-fn: #8ab4ff;
-    --c-attr: #e5b567;
-    --c-tag: #f2708a;
-    --c-attrname: #d7bd7b;
-    --c-razor: #c792ea;
-    --c-punc: #8891ad;
-
-    --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-    color-scheme: dark;
-}
-
-/* ---------- light ---------- */
-html[data-theme="light"] {
-    --bg: #ffffff;
-    --bg-raised: #f8f9fc;
-    --bg-sunken: #f1f3f9;
-    --bg-code: #f7f8fc;
-    --bg-hover: #eef0f7;
-
-    --fg: #1a1d29;
-    --fg-muted: #5a6178;
-    --fg-faint: #868da3;
-
-    --border: #e2e5ee;
-    --border-strong: #cfd4e2;
-
-    --accent: #5b46e5;
-    --accent-fg: #ffffff;
-    --accent-soft: rgba(91, 70, 229, 0.09);
-    --accent-line: rgba(91, 70, 229, 0.35);
-
-    --ok: #17864f;
-    --warn: #9a6a12;
-    --danger: #c8324f;
-    --info: #1b6fb5;
-
-    --c-kw: #8b30c4;
-    --c-str: #2d7a3f;
-    --c-num: #b1560f;
-    --c-com: #8a90a3;
-    --c-type: #0f6f92;
-    --c-fn: #2a55c9;
-    --c-attr: #9a6a12;
-    --c-tag: #b32b47;
-    --c-attrname: #7a5c12;
-    --c-razor: #8b30c4;
-    --c-punc: #6b7285;
-
-    --shadow: 0 14px 32px rgba(24, 28, 45, 0.12);
-    color-scheme: light;
-}
-
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-*, *::before, *::after { box-sizing: border-box; }
-
-html, body { height: 100%; }
-
-body {
-    margin: 0;
-    background: var(--bg);
-    color: var(--fg);
-    font-family: var(--font-sans);
-    font-size: 16px;
-    line-height: 1.65;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-}
-
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-
-h1, h2, h3, h4 { line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; margin: 0; }
-h1 { font-size: 2.3rem; }
-h2 { font-size: 1.5rem; margin: 2.75rem 0 0.85rem; padding-top: 0.5rem; }
-h3 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }
-h4 { font-size: 1rem; margin: 1.5rem 0 0.5rem; color: var(--fg-muted); }
-
-p { margin: 0 0 1rem; }
-ul, ol { margin: 0 0 1rem; padding-left: 1.35rem; }
-li { margin: 0.3rem 0; }
-li > ul, li > ol { margin-bottom: 0.25rem; }
-
-hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
-
-strong { font-weight: 640; color: var(--fg); }
-em { color: var(--fg); }
-
-code {
-    font-family: var(--font-mono);
-    font-size: 0.875em;
-}
-
-/* inline code */
-p > code, li > code, td > code, dd > code, h2 > code, h3 > code, h4 > code, a > code, strong > code {
-    background: var(--bg-sunken);
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    padding: 0.1em 0.36em;
-    color: var(--fg);
-    white-space: nowrap;
-}
-
-.muted { color: var(--fg-muted); }
-.small { font-size: 0.86rem; }
-.lead { font-size: 1.1rem; color: var(--fg-muted); }
-
-/* ==========================================================================
-   Shell / layout
-   ========================================================================== */
-
-.shell { min-height: 100%; }
-
-.topbar {
-    position: sticky;
-    top: 0;
-    z-index: 40;
-    height: var(--topbar-h);
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0 1.15rem;
-    background: color-mix(in srgb, var(--bg) 88%, transparent);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--border);
-}
-
-.topbar__spacer { flex: 1; }
-
-.topbar__links {
-    display: flex;
-    gap: 1.15rem;
-    font-size: 0.9rem;
-}
-.topbar__links a { color: var(--fg-muted); }
-.topbar__links a:hover { color: var(--fg); text-decoration: none; }
-
-.topbar__theme, .topbar__burger {
-    background: transparent;
-    border: 1px solid var(--border);
-    color: var(--fg-muted);
-    border-radius: var(--radius-sm);
-    height: 34px;
-    min-width: 34px;
-    cursor: pointer;
-    font-size: 0.95rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-.topbar__theme:hover, .topbar__burger:hover { background: var(--bg-hover); color: var(--fg); }
-
-.topbar__burger { display: none; flex-direction: column; gap: 3px; }
-.topbar__burger span { display: block; width: 15px; height: 1.5px; background: currentColor; }
-
-.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--fg); }
-.brand:hover { text-decoration: none; }
-.brand__mark { color: var(--accent); display: flex; }
-.brand__text { display: flex; align-items: baseline; gap: 0.45rem; }
-.brand__text strong { font-size: 1.05rem; letter-spacing: -0.02em; }
-.brand__tag { font-size: 0.74rem; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.08em; }
-
-.body { display: flex; align-items: flex-start; }
-
-/* ---------- sidebar ---------- */
-
-.sidebar {
-    position: sticky;
-    top: var(--topbar-h);
-    flex: 0 0 var(--sidebar-w);
-    width: var(--sidebar-w);
-    height: calc(100vh - var(--topbar-h));
-    overflow-y: auto;
-    border-right: 1px solid var(--border);
-    background: var(--bg);
-}
-
-.sidebar__inner { padding: 1.5rem 0.9rem 4rem 1.35rem; }
-
-.sidebar__section { margin-bottom: 1.45rem; }
-
-.sidebar__heading {
-    margin: 0 0 0.45rem;
-    font-size: 0.72rem;
-    font-weight: 680;
-    text-transform: uppercase;
-    letter-spacing: 0.09em;
-    color: var(--fg-faint);
-}
-
-.sidebar ul { list-style: none; margin: 0; padding: 0; }
-.sidebar li { margin: 0; }
-
-.sidebar__link {
-    display: block;
-    padding: 0.32rem 0.6rem;
-    margin-left: -0.6rem;
-    border-radius: var(--radius-sm);
-    color: var(--fg-muted);
-    font-size: 0.905rem;
-    border-left: 2px solid transparent;
-}
-.sidebar__link:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
-.sidebar__link.active {
-    color: var(--accent);
-    background: var(--accent-soft);
-    font-weight: 560;
-}
-
-.sidebar__foot {
-    margin-top: 2rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-    font-size: 0.8rem;
-    color: var(--fg-faint);
-}
-
-/* ---------- content ---------- */
-
-.content {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding: 2.5rem 2.5rem 8rem;
-    display: flex;
-    justify-content: center;
-}
-
-.doc { width: 100%; max-width: var(--content-max); }
-
-.doc__header { margin-bottom: 2rem; }
-.doc__eyebrow {
-    margin: 0 0 0.4rem;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--accent);
-    font-weight: 640;
-}
-.doc__lead {
-    margin: 0.85rem 0 0;
-    font-size: 1.13rem;
-    line-height: 1.6;
-    color: var(--fg-muted);
-}
-
-.doc h2 { border-top: 1px solid var(--border); }
-.doc__header + h2 { border-top: 0; margin-top: 1rem; }
-
-/* previous / next */
-.doc__pager {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
-    margin-top: 4rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid var(--border);
-}
-.pager {
-    display: flex;
-    flex-direction: column;
-    gap: 0.15rem;
-    padding: 0.75rem 1rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    min-width: 190px;
-    color: var(--fg);
-}
-.pager:hover { border-color: var(--accent-line); background: var(--bg-raised); text-decoration: none; }
-.pager--next { text-align: right; }
-.pager__dir { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
-.pager__title { font-weight: 570; color: var(--accent); }
-
-/* ==========================================================================
-   Code blocks
-   ========================================================================== */
-
-.code-block {
-    margin: 1.25rem 0;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--bg-code);
-    overflow: hidden;
-}
-
-.code-block__bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 0.4rem 0.5rem 0.4rem 0.9rem;
-    background: var(--bg-raised);
-    border-bottom: 1px solid var(--border);
-}
-
-.code-block__title {
-    font-size: 0.78rem;
-    font-weight: 620;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--fg-faint);
-}
-
-.code-block__actions { display: flex; align-items: center; gap: 0.7rem; }
-.code-block__file { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-faint); }
-
-.code-block__copy {
-    background: transparent;
-    border: 1px solid var(--border-strong);
-    color: var(--fg-muted);
-    font-size: 0.72rem;
-    padding: 0.2rem 0.6rem;
-    border-radius: 5px;
-    cursor: pointer;
-    font-family: var(--font-sans);
-}
-.code-block__copy:hover { color: var(--fg); border-color: var(--accent-line); }
-
-.code-block__pre {
-    margin: 0;
-    padding: 1rem 1.1rem;
-    overflow-x: auto;
-    font-size: 0.845rem;
-    line-height: 1.62;
-}
-.code-block--compact .code-block__pre { padding: 0.8rem 0.9rem; font-size: 0.815rem; }
-
-.code-block__pre code {
-    font-family: var(--font-mono);
-    white-space: pre;
-    color: var(--fg);
-}
-
-/* syntax tokens */
-.c-kw       { color: var(--c-kw); }
-.c-str      { color: var(--c-str); }
-.c-num      { color: var(--c-num); }
-.c-com      { color: var(--c-com); font-style: italic; }
-.c-type     { color: var(--c-type); }
-.c-fn       { color: var(--c-fn); }
-.c-attr     { color: var(--c-attr); }
-.c-tag      { color: var(--c-tag); }
-.c-attrname { color: var(--c-attrname); }
-.c-razor    { color: var(--c-razor); font-weight: 600; }
-.c-punc     { color: var(--c-punc); }
-
-/* ==========================================================================
-   Callouts
-   ========================================================================== */
-
-.callout {
-    display: flex;
-    gap: 0.85rem;
-    margin: 1.35rem 0;
-    padding: 0.9rem 1.1rem;
-    border: 1px solid var(--border);
-    border-left-width: 3px;
-    border-radius: var(--radius-sm);
-    background: var(--bg-raised);
-}
-.callout__icon {
-    flex: 0 0 20px;
-    height: 20px;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-size: 0.72rem;
-    font-weight: 700;
-    margin-top: 0.18rem;
-}
-.callout__body > :last-child { margin-bottom: 0; }
-.callout__title { margin: 0 0 0.3rem; font-weight: 640; }
-
-.callout--note    { border-left-color: var(--info); }
-.callout--note .callout__icon    { background: var(--info); color: #06121c; }
-.callout--tip     { border-left-color: var(--ok); }
-.callout--tip .callout__icon     { background: var(--ok); color: #04180f; }
-.callout--warning { border-left-color: var(--warn); }
-.callout--warning .callout__icon { background: var(--warn); color: #1c1305; }
-.callout--gotcha  { border-left-color: var(--danger); }
-.callout--gotcha .callout__icon  { background: var(--danger); color: #1e0710; }
-
-/* ==========================================================================
-   Live demo cards
-   ========================================================================== */
-
-.demo {
-    margin: 1.6rem 0;
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius);
-    background: var(--bg-raised);
-    overflow: hidden;
-}
-
-.demo__head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 0.7rem 1rem;
-    border-bottom: 1px solid var(--border);
-}
-
-.demo__badge {
-    display: inline-block;
-    font-size: 0.66rem;
-    font-weight: 700;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--accent);
-    background: var(--accent-soft);
-    border: 1px solid var(--accent-line);
-    padding: 0.1rem 0.45rem;
-    border-radius: 20px;
-    margin-right: 0.6rem;
-    vertical-align: 1px;
-}
-.demo__title { font-weight: 600; font-size: 0.95rem; }
-
-.demo__toggle {
-    background: transparent;
-    border: 1px solid var(--border-strong);
-    color: var(--fg-muted);
-    font-size: 0.75rem;
-    padding: 0.25rem 0.65rem;
-    border-radius: 5px;
-    cursor: pointer;
-    white-space: nowrap;
-}
-.demo__toggle:hover { color: var(--fg); border-color: var(--accent-line); }
-
-.demo__desc {
-    margin: 0;
-    padding: 0.7rem 1rem 0;
-    font-size: 0.9rem;
-    color: var(--fg-muted);
-}
-
-.demo__stage { padding: 1.1rem; }
-.demo__stage > :last-child { margin-bottom: 0; }
-
-.demo__source { border-top: 1px solid var(--border); background: var(--bg-code); }
-.demo__source .code-block { margin: 0; border: 0; border-radius: 0; }
-
-/* demo internals */
-.row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
-.row + .row { margin-top: 0.7rem; }
-.stack { display: flex; flex-direction: column; gap: 0.7rem; }
-
-.readout {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.4rem;
-    padding: 0.8rem 1rem;
-    background: var(--bg-sunken);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    font-family: var(--font-mono);
-    font-size: 0.85rem;
-}
-.readout__item { display: flex; flex-direction: column; gap: 0.1rem; }
-.readout__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-faint); font-family: var(--font-sans); }
-.readout__value { font-size: 1.05rem; font-weight: 600; color: var(--fg); }
-.readout__value--accent { color: var(--accent); }
-
-/* ==========================================================================
-   Controls
-   ========================================================================== */
-
-.btn {
-    font-family: inherit;
-    font-size: 0.875rem;
-    font-weight: 540;
-    padding: 0.42rem 0.85rem;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border-strong);
-    background: var(--bg);
-    color: var(--fg);
-    cursor: pointer;
-    line-height: 1.35;
-    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
-}
-.btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent-line); }
-.btn:disabled { opacity: 0.42; cursor: not-allowed; }
-
-.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
-.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, #000); border-color: var(--accent); }
-
-.btn-danger { border-color: var(--danger); color: var(--danger); }
-.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 14%, transparent); }
-
-.btn-ghost { border-color: transparent; color: var(--fg-muted); }
-.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--fg); border-color: transparent; }
-
-.btn-sm { font-size: 0.78rem; padding: 0.24rem 0.6rem; }
-
-input[type="text"], input[type="number"], input[type="search"], select {
-    font-family: inherit;
-    font-size: 0.875rem;
-    padding: 0.4rem 0.6rem;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border-strong);
-    background: var(--bg);
-    color: var(--fg);
-    min-width: 0;
-}
-input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-}
-input[type="range"] { accent-color: var(--accent); }
-input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
-
-label.check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; cursor: pointer; }
-
-.pill {
-    display: inline-block;
-    font-size: 0.72rem;
-    font-weight: 600;
-    padding: 0.1rem 0.5rem;
-    border-radius: 20px;
-    border: 1px solid var(--border-strong);
-    color: var(--fg-muted);
-}
-.pill--on { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
-.pill--off { color: var(--fg-faint); }
-.pill--busy { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
-.pill--err { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
-
-.table-scroll { overflow-x: auto; margin: 1.1rem 0; }
-
-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.9rem;
-}
-th, td {
-    text-align: left;
-    padding: 0.55rem 0.8rem;
-    border-bottom: 1px solid var(--border);
-    vertical-align: top;
-}
-th {
-    font-size: 0.74rem;
-    text-transform: uppercase;
-    letter-spacing: 0.07em;
-    color: var(--fg-faint);
-    font-weight: 640;
-    background: var(--bg-raised);
-    border-bottom-color: var(--border-strong);
-}
-tbody tr:hover { background: var(--bg-raised); }
-td code { white-space: nowrap; }
-
-.api-table { margin: 1.4rem 0; }
-.api-table__title { margin: 0 0 0.4rem; font-size: 1rem; }
-.api-table__member { width: 38%; }
-
-.check-yes { color: var(--ok); font-weight: 700; }
-.check-no { color: var(--fg-faint); }
-
-/* ==========================================================================
-   Home page
-   ========================================================================== */
-
-.hero { padding: 1rem 0 0.5rem; }
-.hero h1 { font-size: 3rem; letter-spacing: -0.03em; }
-.hero__tag {
-    display: inline-block;
-    font-size: 0.74rem;
-    font-weight: 640;
-    letter-spacing: 0.09em;
-    text-transform: uppercase;
-    color: var(--accent);
-    border: 1px solid var(--accent-line);
-    background: var(--accent-soft);
-    border-radius: 20px;
-    padding: 0.15rem 0.7rem;
-    margin-bottom: 1rem;
-}
-.hero__lead { font-size: 1.22rem; color: var(--fg-muted); max-width: 44rem; margin-top: 0.9rem; }
-.hero__cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
-.hero__cta .btn { padding: 0.55rem 1.15rem; font-size: 0.95rem; }
-
-.grid { display: grid; gap: 0.9rem; margin: 1.5rem 0; }
-.grid--2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
-.grid--3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
-
-.card {
-    display: block;
-    padding: 1rem 1.1rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--bg-raised);
-    color: var(--fg);
-}
-a.card:hover { border-color: var(--accent-line); text-decoration: none; background: var(--bg-hover); }
-.card__title { font-weight: 620; margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.45rem; }
-.card__body { margin: 0; font-size: 0.88rem; color: var(--fg-muted); line-height: 1.55; }
-.card__num {
-    font-family: var(--font-mono);
-    font-size: 0.72rem;
-    color: var(--accent);
-    border: 1px solid var(--accent-line);
-    background: var(--accent-soft);
-    border-radius: 4px;
-    padding: 0 0.3rem;
-}
-
-.stat-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; padding: 0; }
-.stat-grid > div { display: flex; flex-direction: column; }
-.stat-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-faint); }
-.stat-grid dd { margin: 0; font-size: 1.15rem; font-weight: 620; font-family: var(--font-mono); }
-
-/* ==========================================================================
-   Inspector dock
-   ========================================================================== */
-
-.dock {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 50;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    pointer-events: none;
-}
-
-.dock__handle {
-    pointer-events: auto;
-    margin-left: 1.25rem;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.55rem;
-    padding: 0.34rem 0.85rem;
-    border: 1px solid var(--border-strong);
-    border-bottom: 0;
-    border-radius: 8px 8px 0 0;
-    background: var(--bg-raised);
-    color: var(--fg-muted);
-    font-family: inherit;
-    font-size: 0.78rem;
-    font-weight: 600;
-    cursor: pointer;
-    box-shadow: var(--shadow);
-}
-.dock__handle:hover { color: var(--fg); }
-.dock__handle-count {
-    font-family: var(--font-mono);
-    font-size: 0.7rem;
-    background: var(--accent-soft);
-    color: var(--accent);
-    border-radius: 20px;
-    padding: 0 0.42rem;
-}
-.dock__handle-caret { font-size: 0.62rem; }
-
-.dock__body {
-    pointer-events: auto;
-    width: 100%;
-    max-height: 46vh;
-    display: flex;
-    flex-direction: column;
-    background: var(--bg-raised);
-    border-top: 1px solid var(--border-strong);
-    box-shadow: var(--shadow);
-}
-
-.dock__tabs { display: flex; gap: 0.15rem; padding: 0.4rem 0.6rem 0; border-bottom: 1px solid var(--border); }
-.dock__tab {
-    background: transparent;
-    border: 0;
-    border-bottom: 2px solid transparent;
-    color: var(--fg-muted);
-    font-family: inherit;
-    font-size: 0.82rem;
-    font-weight: 560;
-    padding: 0.4rem 0.8rem;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-}
-.dock__tab:hover { color: var(--fg); }
-.dock__tab--active { color: var(--accent); border-bottom-color: var(--accent); }
-.dock__tab-badge {
-    font-size: 0.66rem;
-    background: var(--danger);
-    color: #fff;
-    border-radius: 20px;
-    padding: 0 0.35rem;
-}
-
-.dock__panel { overflow: auto; padding: 0.6rem 1rem 1rem; }
-.dock__toolbar { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0 0.6rem; font-size: 0.8rem; flex-wrap: wrap; }
-.dock__empty { color: var(--fg-faint); font-size: 0.86rem; padding: 0.6rem 0; }
-.dock__json { margin: 0; font-size: 0.78rem; font-family: var(--font-mono); white-space: pre; }
-.dock__banner {
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
-    padding: 0.5rem 1rem;
-    background: color-mix(in srgb, var(--warn) 16%, var(--bg-raised));
-    border-top: 1px solid var(--warn);
-    font-size: 0.83rem;
-}
-
-.feed { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 0.8rem; }
-.feed__row {
-    display: flex;
-    gap: 0.65rem;
-    align-items: baseline;
-    padding: 0.22rem 0;
-    border-bottom: 1px solid var(--border);
-    margin: 0;
-}
-.feed__seq { color: var(--fg-faint); min-width: 3rem; }
-.feed__store { color: var(--c-type); }
-.feed__action { color: var(--accent); font-weight: 600; }
-.feed__args { color: var(--fg-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.feed__time { color: var(--fg-faint); margin-left: auto; }
-
-.err-list { list-style: none; margin: 0; padding: 0; font-size: 0.83rem; }
-.err-list li { display: flex; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
-.err-list__source { color: var(--danger); font-weight: 640; font-family: var(--font-mono); }
-.err-list__detail { color: var(--fg-muted); font-family: var(--font-mono); }
-.err-list__msg { color: var(--fg); }
-
-/* ==========================================================================
-   Timeline (effects lab)
-   ========================================================================== */
-
-.timeline { list-style: none; margin: 0.4rem 0 0; padding: 0; font-family: var(--font-mono); font-size: 0.8rem; max-height: 210px; overflow-y: auto; }
-.timeline li { display: flex; gap: 0.7rem; padding: 0.18rem 0; margin: 0; border-bottom: 1px dashed var(--border); }
-.timeline__at { color: var(--fg-faint); min-width: 4.2rem; }
-.timeline__mode { min-width: 5rem; font-weight: 600; }
-.timeline__mode--Parallel { color: var(--info); }
-.timeline__mode--Latest { color: var(--accent); }
-.timeline__mode--Drop { color: var(--warn); }
-.timeline__mode--Queue { color: var(--ok); }
-.timeline__phase--started { color: var(--fg); }
-.timeline__phase--finished { color: var(--ok); }
-.timeline__phase--cancelled { color: var(--danger); }
-.timeline__phase--dropped { color: var(--fg-faint); }
-
-/* entity / list demos */
-.list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
-.list li {
-    display: flex;
-    align-items: center;
-    gap: 0.7rem;
-    padding: 0.42rem 0.6rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    margin: 0 0 0.35rem;
-    background: var(--bg);
-}
-.list__name { flex: 1; }
-.list__meta { font-size: 0.78rem; color: var(--fg-faint); }
-.star { background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.1rem; color: var(--fg-faint); }
-.star--on { color: var(--warn); }
-
-/* ==========================================================================
-   Responsive
-   ========================================================================== */
-
-@media (max-width: 1000px) {
-    .topbar__burger { display: inline-flex; }
-    .topbar__links { display: none; }
-
-    .sidebar {
-        position: fixed;
-        top: var(--topbar-h);
-        left: 0;
-        z-index: 45;
-        transform: translateX(-100%);
-        transition: transform 0.18s ease;
-        box-shadow: var(--shadow);
-    }
-    .sidebar--open { transform: translateX(0); }
-
-    .content { padding: 1.75rem 1.25rem 8rem; }
-    .hero h1 { font-size: 2.25rem; }
-    h1 { font-size: 1.9rem; }
-}
-
-@media (max-width: 620px) {
-    .doc__pager { flex-direction: column; }
-    .pager { min-width: 0; }
-    .readout { gap: 1rem; }
-    .brand__tag { display: none; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    * { transition: none !important; animation: none !important; }
-}
-
-/* ==========================================================================
-   Boot splash + framework error UI
-   ========================================================================== */
-
-.boot {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    color: var(--accent);
-    background: var(--bg);
-}
-.boot__mark { animation: boot-pulse 1.4s ease-in-out infinite; }
-.boot__text { color: var(--fg-faint); font-family: var(--font-sans); font-size: 0.9rem; margin: 0; }
-
-@keyframes boot-pulse {
-    0%, 100% { opacity: 0.35; transform: scale(0.94); }
-    50%      { opacity: 1;    transform: scale(1); }
-}
-
-#blazor-error-ui {
-    display: none;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-    padding: 0.7rem 1.25rem;
-    background: var(--warn);
-    color: #1c1305;
-    font-family: var(--font-sans);
-    font-size: 0.9rem;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-}
-#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.6rem; }
-#blazor-error-ui a { color: inherit; text-decoration: underline; }
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/demo.css b/src/Utilities/Blex/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..2f7965bc208
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,432 @@
+/* ============================================================================================
+   Blex demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is this site's own - the syntax highlighter's tokens, the
+   pieces the doc components (Components/*.razor) add to the kit's markup, the widgets inside the
+   samples and the Inspector dock - and it is written against the kit's --bb-* names, so it follows
+   the light/dark theme with no rules of its own for either. Bit.Blex itself ships no stylesheet.
+   ============================================================================================ */
+
+/* ---------- Code: CodeHighlighter's tokens on the kit's code surface ----------
+
+   The highlighter tells more kinds apart than the kit's four (keyword, string, comment, parameter),
+   so the extra ones get colors of their own here, light and dark, picked to hold their contrast on
+   --bb-code-bg in both themes. */
+:root {
+    --demo-code-type: #8250DF;
+    --demo-code-fn: #A21CAF;
+    --demo-code-number: #CF222E;
+}
+
+:root[bit-theme="dark"] {
+    --demo-code-type: #D2A8FF;
+    --demo-code-fn: #F0ABFC;
+    --demo-code-number: #FF7B72;
+}
+
+.c-kw,
+.c-tag { color: var(--bb-code-keyword); }
+.c-razor { color: var(--bb-code-keyword); font-weight: var(--fl-weight-semibold); }
+.c-str { color: var(--bb-code-string); }
+.c-com { color: var(--bb-code-comment); font-style: italic; }
+.c-punc { color: var(--bb-code-comment); }
+.c-attr,
+.c-attrname { color: var(--bb-code-param); }
+.c-type { color: var(--demo-code-type); }
+.c-fn { color: var(--demo-code-fn); }
+.c-num { color: var(--demo-code-number); }
+
+/* A CodeBlock's caption: its title, and the file the sample belongs in. */
+.demo-code-label {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: .25rem .75rem;
+    margin: 0 0 .5rem;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    color: var(--bb-text);
+}
+
+.demo-code-label > .bb-mono {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+/* ---------- The doc components' additions to the kit ---------- */
+
+/* DemoCard: the sample's name in the title bar, after the "Live" label and a hairline. */
+.demo-card-title {
+    margin-inline-start: .625rem;
+    padding-inline-start: .625rem;
+    border-inline-start: 1px solid var(--bb-border-strong);
+    font-size: var(--fl-font-size-200);
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--bb-text);
+}
+
+/* Callout: the bold lead-in of a note. */
+.demo-note-title {
+    display: block;
+    margin-bottom: .25rem;
+    color: var(--bb-text);
+}
+
+/* ApiTable: its heading, and a member column that wraps between the words of a signature but never
+   inside one - a member name broken letter by letter cannot be read. A signature longer than the
+   column widens the table, which then scrolls inside its .bb-scroll. */
+.demo-api-title {
+    margin: 1.5rem 0 .5rem;
+}
+
+.demo-api-table td:first-child {
+    width: 38%;
+    overflow-wrap: normal;
+}
+
+.demo-api-table td:first-child code {
+    overflow-wrap: normal;
+}
+
+/* ---------- Inside the samples ---------- */
+
+/* The headline number of a readout. */
+.bb-stat-value.demo-accent,
+.demo-accent {
+    color: var(--bb-primary);
+}
+
+/* A readout whose value is text - a list, a payload, a key - rather than a number. */
+.bb-stat-value.demo-stat-text {
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-regular);
+    line-height: 1.5;
+}
+
+/* The one destructive or deliberately-wrong action in a row: danger-stroked, never filled, so it
+   reads as "careful" rather than as the thing to press. */
+.btn.demo-btn-danger {
+    background: transparent;
+    color: var(--bb-danger-text);
+    border-color: color-mix(in srgb, var(--bb-danger) 45%, transparent);
+}
+
+.btn.demo-btn-danger:hover {
+    background: var(--bb-danger-soft);
+    border-color: var(--bb-danger);
+    color: var(--bb-danger-text);
+}
+
+/* A state that is off, next to the tinted badges of states that are on. */
+.bb-badge.demo-badge-off {
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-muted);
+    box-shadow: inset 0 0 0 1px var(--bb-border);
+}
+
+.demo-input-name { min-width: 150px; }
+.demo-input-qty { width: 5rem; }
+
+.demo-input-grow {
+    flex: 1;
+    min-width: min(220px, 100%);
+}
+
+.demo-qty {
+    min-width: 1.5rem;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    color: var(--bb-text);
+}
+
+/* A tile nested in a sample ends flush with its frame. */
+.bb-demo .bb-card > :last-child {
+    margin-bottom: 0;
+}
+
+/* The rows of a sample's list - the cart, the contacts, the search results. */
+.demo-list {
+    list-style: none;
+    margin: 0 0 1rem;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+}
+
+.demo-list li {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    min-height: 2.5rem;
+    padding: .375rem .625rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.demo-list-name {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.demo-list-meta {
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+}
+
+.demo-star {
+    flex: none;
+    padding: .125rem;
+    border: 0;
+    background: none;
+    font-size: 1.125rem;
+    line-height: 1;
+    color: var(--bb-text-soft);
+    cursor: pointer;
+}
+
+.demo-star--on {
+    color: var(--bb-warning);
+}
+
+/* The effects lab's timeline: one line per run event, in the code surface's colors. */
+.timeline {
+    list-style: none;
+    margin: 0 0 1rem;
+    padding: .5rem .875rem;
+    max-height: 14rem;
+    overflow-y: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.timeline li {
+    display: flex;
+    gap: .75rem;
+    padding: .125rem 0;
+    border-bottom: 1px dashed var(--bb-border);
+}
+
+.timeline li:last-child {
+    border-bottom: 0;
+}
+
+.timeline__at { min-width: 4.5rem; color: var(--bb-code-comment); }
+.timeline__mode { min-width: 5rem; font-weight: var(--fl-weight-semibold); }
+.timeline__mode--Parallel { color: var(--bb-primary); }
+.timeline__mode--Latest { color: var(--demo-code-type); }
+.timeline__mode--Drop { color: var(--bb-warning-text); }
+.timeline__mode--Queue { color: var(--bb-success-text); }
+.timeline__phase--finished { color: var(--bb-success-text); }
+.timeline__phase--cancelled { color: var(--bb-danger-text); }
+.timeline__phase--dropped { color: var(--bb-code-comment); }
+
+/* The landing page's live counter, under the store's source in the hero's window frame. */
+.home-hero-live {
+    padding: 1rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.home-hero-live > .bb-stats {
+    margin-bottom: 1rem;
+}
+
+.home-hero-live > .bb-toolbar {
+    margin-bottom: .75rem;
+}
+
+.home-hero-live > :last-child {
+    margin-bottom: 0;
+}
+
+/* ---------- The Inspector dock (Components/InspectorDock.razor) ----------
+
+   Fixed to the bottom of the window on every page: a tab at rest, a panel of the real pipeline when
+   opened. The tab sits at the inline end, where it clears the docs nav panel and the footer's
+   address column, and it is no taller than the footer's bottom padding. Above the page, below the
+   header, its drawers and the palette - an overlay the reader opened on purpose has to cover the
+   dock, not the other way round. */
+.dock {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 900;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    pointer-events: none;
+}
+
+.dock__handle {
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    margin-inline-end: 1.25rem;
+    padding: .3125rem .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-bottom: 0;
+    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-flyout);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.dock__handle:hover {
+    color: var(--bb-text);
+}
+
+.dock__handle-caret {
+    font-size: .625rem;
+}
+
+.dock__body {
+    pointer-events: auto;
+    width: 100%;
+    max-height: 46vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border-strong);
+    box-shadow: var(--bb-shadow-flyout);
+    color: var(--bb-text);
+}
+
+.dock__tabs {
+    flex: none;
+    margin: 0;
+    padding: 0 .75rem;
+}
+
+.dock__tabs > button {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+}
+
+.dock__panel {
+    overflow: auto;
+    padding: .25rem 1rem 1rem;
+}
+
+.dock__toolbar {
+    margin: .375rem 0 .625rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.dock__empty,
+.dock__note {
+    margin: .5rem 0 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+}
+
+.dock__json {
+    margin: 0;
+    font-size: .75rem;
+}
+
+.dock__stats {
+    margin-bottom: .75rem;
+}
+
+.dock__banner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem 1rem;
+    background: var(--bb-warning-soft);
+    border-top: 1px solid var(--bb-warning);
+    font-size: var(--fl-font-size-200);
+}
+
+.feed {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+}
+
+.feed__row {
+    display: flex;
+    align-items: baseline;
+    gap: .625rem;
+    padding: .25rem 0;
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.feed__seq { min-width: 3rem; color: var(--bb-text-soft); }
+.feed__store { color: var(--demo-code-type); }
+.feed__action { color: var(--bb-primary); font-weight: var(--fl-weight-semibold); }
+
+.feed__args {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--bb-text-muted);
+}
+
+.feed__time {
+    margin-inline-start: auto;
+    color: var(--bb-text-soft);
+}
+
+.err-list {
+    list-style: none;
+    margin: 0 0 1rem;
+    padding: 0;
+    font-size: var(--fl-font-size-200);
+}
+
+.err-list li {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    padding: .3125rem 0;
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.err-list__source { font-family: var(--bb-mono); font-weight: var(--fl-weight-semibold); color: var(--bb-danger-text); }
+.err-list__detail { font-family: var(--bb-mono); color: var(--bb-text-muted); }
+.err-list__msg { color: var(--bb-text); }
+
+@media (max-width: 600px) {
+    .dock__handle {
+        margin-inline-end: .75rem;
+    }
+
+    .feed__time {
+        display: none;
+    }
+}
+
+@media print {
+    .dock {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/demo.js b/src/Utilities/Blex/Demo/Server/wwwroot/demo.js
new file mode 100644
index 00000000000..16082dba281
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/demo.js
@@ -0,0 +1,11 @@
+// The one piece of interop the Blex docs need beyond the site kit (site.js, theme.js): the
+// persistence page shows the raw payload Blex wrote to localStorage. Everything else is C#.
+window.blexDocs = {
+    readStorage: function (key) {
+        try {
+            return localStorage.getItem(key);
+        } catch (e) {
+            return null;
+        }
+    }
+};
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/favicon.svg b/src/Utilities/Blex/Demo/Server/wwwroot/favicon.svg
index 490678ee78c..55d24def7c6 100644
--- a/src/Utilities/Blex/Demo/Server/wwwroot/favicon.svg
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/favicon.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="7" fill="#8b7bfb" />
+  <rect width="32" height="32" rx="7" fill="#1276C6" />
   <path d="M7 26 L15 4 L19 4 L12 18 L21 18 L14 29 Z" fill="#ffffff" />
 </svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Blex/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/js/site.js b/src/Utilities/Blex/Demo/Server/wwwroot/js/site.js
deleted file mode 100644
index 5a17ad84916..00000000000
--- a/src/Utilities/Blex/Demo/Server/wwwroot/js/site.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// Minimal interop for the documentation site: clipboard and theme persistence.
-// Everything else on the site is C#.
-window.blexDocs = {
-    copy: function (text) {
-        if (navigator.clipboard && window.isSecureContext) {
-            return navigator.clipboard.writeText(text);
-        }
-
-        // Fallback for non-secure contexts (e.g. plain http during local testing).
-        var area = document.createElement('textarea');
-        area.value = text;
-        area.setAttribute('readonly', '');
-        area.style.position = 'fixed';
-        area.style.opacity = '0';
-        document.body.appendChild(area);
-        area.select();
-        try { document.execCommand('copy'); } finally { document.body.removeChild(area); }
-        return Promise.resolve();
-    },
-
-    getTheme: function (key) {
-        try {
-            var stored = localStorage.getItem(key);
-            if (stored) return stored;
-            return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
-                ? 'light' : 'dark';
-        } catch (e) {
-            return 'dark';
-        }
-    },
-
-    // Used by the persistence page to show the raw payload Blex wrote.
-    readStorage: function (key) {
-        try {
-            return localStorage.getItem(key);
-        } catch (e) {
-            return null;
-        }
-    },
-
-    setTheme: function (key, theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-        try { localStorage.setItem(key, theme); } catch (e) { /* private mode */ }
-    }
-};
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/site.js b/src/Utilities/Blex/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Blex/Demo/Server/wwwroot/theme.js b/src/Utilities/Blex/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Blex/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Blow/Demo/Client/Bit.Blow.Demo.Client.csproj b/src/Utilities/Blow/Demo/Client/Bit.Blow.Demo.Client.csproj
index 772d48fdfcd..61ef1682202 100644
--- a/src/Utilities/Blow/Demo/Client/Bit.Blow.Demo.Client.csproj
+++ b/src/Utilities/Blow/Demo/Client/Bit.Blow.Demo.Client.csproj
@@ -60,10 +60,10 @@ foreach (var file in Directory.GetFiles(SourceDir, "*.razor", SearchOption.AllDi
     content = Regex.Replace(content, @"(?m)^[ \t]*@page[ \t]+""[^""]*""[ \t]*\r?\n", "");
     // 2. The <PageTitle> that sets the browser tab title.
     content = Regex.Replace(content, @"(?s)[ \t]*<PageTitle>.*?</PageTitle>[ \t]*\r?\n", "");
-    // 3. The demo-header description block on the hand-written demo pages. Its end is found by
+    // 3. The bb-intro title block on the hand-written demo pages. Its end is found by
     //    balancing <div> tags rather than with a lazy match, which would stop at the first
     //    </div> nested inside the header and leave the rest of it behind.
-    var header = Regex.Match(content, @"[ \t]*<div class=""demo-header"">");
+    var header = Regex.Match(content, @"[ \t]*<div class=""bb-intro"">");
     if (header.Success)
     {
         var depth = 0;
diff --git a/src/Utilities/Blow/Demo/Client/DocsCatalog.cs b/src/Utilities/Blow/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..110c931b028
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,212 @@
+using Bit.Blow.Demo.Client.Examples;
+using Bit.Blow.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Blow.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Blow";
+
+    public const string PackageId = "Bit.Blow";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Blow";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Blow is a Blazor-native library for node-based UIs - editors, flow charts, pipelines and diagrams - and " +
+        "the Blazor counterpart to React Flow, with interaction, layout and edge geometry written in C#. This " +
+        "site is itself a Blazor app built on it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["custom node", "minimap", "layout", "undo", "subflow"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/examples", "Examples"),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment -
+    /// Pages.Examples.BasicExample is Pages/Examples/BasicExample.razor.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    // The hand-written tours come first, in the order the old navigation listed them. The examples
+    // gallery follows as one section per group of ExampleCatalog - its own source of truth, which the
+    // gallery's index page and the MCP server's search read too - so an example added there shows up
+    // here, in the palette and in the pager without a second entry.
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting Started",
+                "Install the package, link the stylesheet, give the canvas a height and put a first flow on a page.",
+                "install setup nuget package quick start stylesheet bit-blow.css _Imports render mode first flow container height",
+                typeof(GettingStarted)),
+            new("/basic-flow", "Basic Flow",
+                "Nodes, edges and the default gestures: drag, connect, select, box-select, delete, pan and zoom.",
+                "basic flow first BlowCanvas nodes edges drag connect select delete pan zoom minimap controls add node",
+                typeof(BasicFlow)),
+            new("/examples", "All Examples",
+                "The gallery of React Flow examples ported to Blow, grouped by topic, each one a working page.",
+                "examples gallery react flow ports index catalog all",
+                typeof(Pages.Examples.ExamplesIndex)),
+        ]),
+        new("Feature Tours",
+        [
+            new("/custom-nodes", "Custom Nodes",
+                "A NodeTemplate that renders its own markup, with several labelled source handles on one node.",
+                "custom node NodeTemplate template BlowHandle multiple handles color swatch",
+                typeof(CustomNodes)),
+            new("/edge-types", "Edge Types",
+                "Bezier, straight, step and smooth-step paths, with closed and double-ended arrow markers.",
+                "edge types bezier straight step smoothstep markers arrow MarkerType MarkerStart",
+                typeof(EdgeTypes)),
+            new("/custom-edges", "Custom Edges",
+                "An EdgeTemplate on BlowBaseEdge, coloured from edge data, with a BlowEdgeToolbar on the selected edge.",
+                "custom edge EdgeTemplate BlowBaseEdge BlowEdgeText BlowEdgeToolbar recolor delete",
+                typeof(CustomEdges)),
+            new("/interactions", "Interactions",
+                "A playground of interaction options - snap to grid, connect on click, selection on drag - with an event log.",
+                "interactions playground SnapToGrid ConnectOnClick SelectionOnDrag PanOnScroll reconnect event log imperative api",
+                typeof(Interactions)),
+            new("/labels-handles", "Labels & Handles",
+                "HTML edge labels with buttons in them, and nodes that only drag by their grip.",
+                "html edge labels EdgeLabelTemplate drag handle BlowDragHandle UseCustomDragHandle",
+                typeof(LabelsAndHandles)),
+            new("/extras", "Theming & Extras",
+                "Colour modes, loose connections, node origin, a viewport portal, a single resize control and graph utilities.",
+                "theming color mode dark loose connections NodeOrigin BlowViewportPortal BlowNodeResizeControl BlowGraphUtils neighbors attribution",
+                typeof(Extras)),
+            new("/advanced", "Groups & Resizing",
+                "Group nodes that carry their children, a resizable node with a toolbar, and connection validation.",
+                "groups group parent resize BlowNodeResizer BlowNodeToolbar validation IsValidConnection",
+                typeof(Advanced)),
+            new("/connection-line", "Connection Lines",
+                "A custom ConnectionLineTemplate, the live connection state from OnConnectionChange, and Escape to cancel.",
+                "connection line ConnectionLineTemplate OnConnectionChange BlowConnectionLineContext cancel escape valid target",
+                typeof(ConnectionLineDemo)),
+            new("/add-node-on-drop", "Add Node on Drop",
+                "OnConnectEnd's BlowConnectEndInfo turns a connection dropped on empty space into a new, connected node.",
+                "add node drop OnConnectEnd BlowConnectEndInfo IsDropped IsReconnect FlowPosition spawn",
+                typeof(AddNodeOnDropDemo)),
+            new("/floating-edges", "Floating Edges",
+                "Edges that meet each node's border where it faces the other node, from BlowGraphUtils.GetFloatingEdgeParams.",
+                "floating edges GetFloatingEdgeParams loose connection EdgeTemplate border",
+                typeof(FloatingEdgesDemo)),
+            new("/minimap", "MiniMap",
+                "Per-node minimap colours and strokes, an SVG node template, and a minimap you pan and zoom.",
+                "minimap BlowMiniMap NodeColorFunc NodeStrokeColorFunc NodeTemplate Pannable Zoomable",
+                typeof(MiniMapDemo)),
+            new("/drag-threshold", "Drag Threshold",
+                "NodeDragThreshold: how far the pointer must travel before a press on a node becomes a drag.",
+                "drag threshold NodeDragThreshold click drag accidental nudge",
+                typeof(DragThresholdDemo)),
+        ]),
+        .. ExampleCatalog.Grouped().Select(group => new DocsSection(group.Key,
+        [
+            .. group.Select(example => new DocsPageInfo($"/examples/{example.Route}", example.Title,
+                example.Summary, example.Keywords, example.Page)),
+        ])),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Blow/Demo/Client/Examples/DemoCode.razor b/src/Utilities/Blow/Demo/Client/Examples/DemoCode.razor
index 75bce299dc9..ddf0e49a691 100644
--- a/src/Utilities/Blow/Demo/Client/Examples/DemoCode.razor
+++ b/src/Utilities/Blow/Demo/Client/Examples/DemoCode.razor
@@ -4,9 +4,9 @@
 @* A collapsible "View code" panel that shows the .razor source of the current demo page.
    The source is resolved from the build-generated DemoSources lookup, keyed by route. *@
 
-<div class="demo-code">
+<div class="bb-source demo-code">
     <button type="button"
-            class="demo-code__toggle"
+            class="btn btn-secondary demo-code__toggle"
             aria-expanded="@_open.ToString().ToLowerInvariant()"
             @onclick="Toggle">
         <span class="demo-code__caret">@(_open ? "▾" : "▸")</span>
@@ -18,11 +18,11 @@
     {
         @if (_source is null)
         {
-            <div class="demo-code__empty">Source for this page is not available.</div>
+            <div class="bb-empty demo-code__empty">Source for this page is not available.</div>
         }
         else
         {
-            <pre class="demo-code__pre"><code class="demo-code__code">@_source</code></pre>
+            <pre class="bb-code demo-code__pre"><code class="demo-code__code">@_source</code></pre>
         }
     }
 </div>
diff --git a/src/Utilities/Blow/Demo/Client/Examples/ExampleCatalog.cs b/src/Utilities/Blow/Demo/Client/Examples/ExampleCatalog.cs
index 1ec619f564d..ed7e94dc5c9 100644
--- a/src/Utilities/Blow/Demo/Client/Examples/ExampleCatalog.cs
+++ b/src/Utilities/Blow/Demo/Client/Examples/ExampleCatalog.cs
@@ -1,12 +1,19 @@
-namespace Bit.Blow.Demo.Client.Examples;
+using Bit.Blow.Demo.Client.Pages.Examples;
 
-/// <summary>Metadata for a single ported React Flow example.</summary>
-public sealed record ExampleInfo(string Route, string Title, string Group, string Summary);
+namespace Bit.Blow.Demo.Client.Examples;
 
 /// <summary>
-/// The catalog of React Flow examples ported to Blow. This is the single source of
-/// truth used by both the examples index page and (optionally) navigation. Each entry maps
-/// to a routable page under <c>/examples/{route}</c>.
+/// Metadata for a single ported React Flow example. <paramref name="Keywords"/> feed the site's search
+/// palette, and <paramref name="Page"/> is the component its route renders - which the docs shell turns into
+/// the "Edit this page on GitHub" link.
+/// </summary>
+public sealed record ExampleInfo(string Route, string Title, string Group, string Summary, string Keywords, Type Page);
+
+/// <summary>
+/// The catalog of React Flow examples ported to Blow. This is the single source of truth for the examples
+/// gallery: the index page's cards, the docs navigation and search palette (DocsCatalog builds a section per
+/// group from it) and the MCP server's search all read it. Each entry maps to a routable page under
+/// <c>/examples/{route}</c>.
 /// </summary>
 public static class ExampleCatalog
 {
@@ -22,103 +29,186 @@ public static class ExampleCatalog
     public static readonly IReadOnlyList<ExampleInfo> All =
     [
         // ---- Basics ----
-        new("basic", "Basic", BasicGroup, "The minimal flow: a few nodes and edges with pan, zoom and selection."),
-        new("empty", "Empty", BasicGroup, "An empty canvas you can build on by adding nodes at runtime."),
-        new("default-nodes", "Default Nodes", BasicGroup, "The built-in input, default and output node types."),
-        new("overview", "Overview", BasicGroup, "A bigger graph showcasing node types, edge types and overlays together."),
-        new("broken-nodes", "Broken Nodes", BasicGroup, "How the flow tolerates edges that reference missing nodes/handles."),
+        new("basic", "Basic", BasicGroup, "The minimal flow: a few nodes and edges with pan, zoom and selection.",
+            "minimal first flow BlowCanvas nodes edges pan zoom select connect FitViewOnInit", typeof(BasicExample)),
+        new("empty", "Empty", BasicGroup, "An empty canvas you can build on by adding nodes at runtime.",
+            "empty blank canvas add nodes runtime Refresh remeasure clear", typeof(EmptyExample)),
+        new("default-nodes", "Default Nodes", BasicGroup, "The built-in input, default and output node types.",
+            "built-in node types input default output Type handles", typeof(DefaultNodesExample)),
+        new("overview", "Overview", BasicGroup, "A bigger graph showcasing node types, edge types and overlays together.",
+            "overview showcase graph edge types minimap NodeColorFunc MinZoom MaxZoom panel", typeof(OverviewExample)),
+        new("broken-nodes", "Broken Nodes", BasicGroup, "How the flow tolerates edges that reference missing nodes/handles.",
+            "broken missing node dangling edge handle tolerant skipped graceful", typeof(BrokenNodesExample)),
 
         // ---- Nodes ----
-        new("custom-node", "Custom Node", NodesGroup, "A node rendered with a fully custom template and multiple handles."),
-        new("default-node-overwrite", "Default Node Overwrite", NodesGroup, "Replace the built-in default node with your own renderer."),
-        new("drag-handle", "Drag Handle", NodesGroup, "Only a designated area of the node initiates dragging."),
-        new("node-type-change", "Node Type Change", NodesGroup, "Switch a node's type at runtime."),
-        new("update-node", "Update Node", NodesGroup, "Update a node's label, position and style imperatively."),
-        new("stress", "Stress", NodesGroup, "Many nodes and edges with only-render-visible virtualization."),
-        new("hidden", "Hidden", NodesGroup, "Toggle visibility of nodes and edges."),
-        new("subflow", "Subflow", NodesGroup, "Nested nodes inside group containers (parent/child)."),
-        new("handle-positions", "Handle Positions", NodesGroup, "Move the built-in node handles for top-down or left-right flows."),
-        new("node-extent", "Node Extents", NodesGroup, "Constrain a node to a rectangle or its parent, or grow the parent to fit."),
-        new("editable-node", "Editable Node", NodesGroup, "Text inputs inside a node, with Backspace left to the field."),
+        new("custom-node", "Custom Node", NodesGroup, "A node rendered with a fully custom template and multiple handles.",
+            "custom node NodeTemplate text updater input data nodrag BlowHandle", typeof(CustomNodeExample)),
+        new("default-node-overwrite", "Default Node Overwrite", NodesGroup, "Replace the built-in default node with your own renderer.",
+            "override default node renderer NodeTemplate BlowDefaultNode card", typeof(DefaultNodeOverwriteExample)),
+        new("drag-handle", "Drag Handle", NodesGroup, "Only a designated area of the node initiates dragging.",
+            "drag handle grip BlowDragHandle UseCustomDragHandle", typeof(DragHandleExample)),
+        new("node-type-change", "Node Type Change", NodesGroup, "Switch a node's type at runtime.",
+            "change node type runtime input default output cycle", typeof(NodeTypeChangeExample)),
+        new("update-node", "Update Node", NodesGroup, "Update a node's label, position and style imperatively.",
+            "update node label style background position imperative updateNode", typeof(UpdateNodeExample)),
+        new("stress", "Stress", NodesGroup, "Many nodes and edges with only-render-visible virtualization.",
+            "stress performance large graph many nodes OnlyRenderVisibleElements culling virtualization", typeof(StressExample)),
+        new("hidden", "Hidden", NodesGroup, "Toggle visibility of nodes and edges.",
+            "hidden hide show collapse visibility Hidden flag", typeof(HiddenExample)),
+        new("subflow", "Subflow", NodesGroup, "Nested nodes inside group containers (parent/child).",
+            "subflow sub-flow group parent child ParentId ExtentParent nested", typeof(SubflowExample)),
+        new("handle-positions", "Handle Positions", NodesGroup, "Move the built-in node handles for top-down or left-right flows.",
+            "handle positions SourcePosition TargetPosition left right top bottom horizontal vertical", typeof(HandlePositionsExample)),
+        new("node-extent", "Node Extents", NodesGroup, "Constrain a node to a rectangle or its parent, or grow the parent to fit.",
+            "extent constrain bounds Extent BlowRect ExtentParent ExpandParent group", typeof(NodeExtentExample)),
+        new("editable-node", "Editable Node", NodesGroup, "Text inputs inside a node, with Backspace left to the field.",
+            "editable node input textarea form field Backspace focus drag handle", typeof(EditableNodeExample)),
 
         // ---- Edges ----
-        new("edges", "Edges", EdgesGroup, "All built-in edge path types side by side."),
-        new("edge-types", "Edge Types", EdgesGroup, "Bezier, straight, step and smooth-step edges, animated and labelled."),
-        new("custom-edges", "Custom Edges", EdgesGroup, "Custom edge templates built on BlowBaseEdge with interactive labels."),
-        new("edge-renderer", "Edge Renderer", EdgesGroup, "Custom edge with a button rendered on the edge label layer."),
-        new("default-edge-overwrite", "Default Edge Overwrite", EdgesGroup, "Apply default options to every newly created edge."),
-        new("floating-edges", "Floating Edges", EdgesGroup, "Edges that attach to the nearest point of each node."),
-        new("reconnect-edge", "Reconnect Edge", EdgesGroup, "Drag an existing edge endpoint to a new handle."),
-        new("edge-toolbar", "Edge Toolbar", EdgesGroup, "A toolbar that appears on the selected edge."),
-        new("edge-path-options", "Edge Path Options", EdgesGroup, "Tune curvature, corner radius, offset and bend position per edge."),
-        new("edge-markers", "Edge Markers", EdgesGroup, "Per-edge arrowheads: open or closed, in any colour and size."),
-        new("edge-label-styling", "Edge Label Styling", EdgesGroup, "Restyle, pad, round or remove the plate behind an edge label."),
-        new("self-loop-edges", "Self-Connections", EdgesGroup, "Edges back to their own node loop clear of it instead of collapsing onto it."),
+        new("edges", "Edges", EdgesGroup, "All built-in edge path types side by side.",
+            "edges path types bezier straight step smoothstep animated label", typeof(EdgesExample)),
+        new("edge-types", "Edge Types", EdgesGroup, "Bezier, straight, step and smooth-step edges, animated and labelled.",
+            "edge types DefaultEdgeType ConnectionLineType DefaultEdgeOptions animated markers", typeof(EdgeTypesExample)),
+        new("custom-edges", "Custom Edges", EdgesGroup, "Custom edge templates built on BlowBaseEdge with interactive labels.",
+            "custom edge EdgeTemplate BlowBaseEdge stroke color width data", typeof(CustomEdgesExample)),
+        new("edge-renderer", "Edge Renderer", EdgesGroup, "Custom edge with a button rendered on the edge label layer.",
+            "edge label renderer EdgeLabelTemplate HTML button delete EdgeLabelRenderer", typeof(EdgeRendererExample)),
+        new("default-edge-overwrite", "Default Edge Overwrite", EdgesGroup, "Apply default options to every newly created edge.",
+            "default edge options DefaultEdgeOptions BlowDefaultEdgeOptions new connections", typeof(DefaultEdgeOverwriteExample)),
+        new("floating-edges", "Floating Edges", EdgesGroup, "Edges that attach to the nearest point of each node.",
+            "floating edges GetFloatingEdgeParams BlowGraphUtils border nearest point", typeof(FloatingEdgesExample)),
+        new("reconnect-edge", "Reconnect Edge", EdgesGroup, "Drag an existing edge endpoint to a new handle.",
+            "reconnect rewire edge endpoint EdgesReconnectable OnReconnect", typeof(ReconnectEdgeExample)),
+        new("edge-toolbar", "Edge Toolbar", EdgesGroup, "A toolbar that appears on the selected edge.",
+            "edge toolbar BlowEdgeToolbar selected edge relabel recolor delete", typeof(EdgeToolbarExample)),
+        new("edge-path-options", "Edge Path Options", EdgesGroup, "Tune curvature, corner radius, offset and bend position per edge.",
+            "path options PathOptions BlowEdgePathOptions curvature BorderRadius Offset StepPosition", typeof(EdgePathOptionsExample)),
+        new("edge-markers", "Edge Markers", EdgesGroup, "Per-edge arrowheads: open or closed, in any colour and size.",
+            "markers arrowheads arrow ArrowClosed MarkerColor MarkerWidth MarkerStart MarkerEnd", typeof(EdgeMarkersExample)),
+        new("edge-label-styling", "Edge Label Styling", EdgesGroup, "Restyle, pad, round or remove the plate behind an edge label.",
+            "edge label style plate LabelStyle LabelBgStyle LabelShowBg LabelBgPaddingX LabelBgBorderRadius", typeof(EdgeLabelStylingExample)),
+        new("self-loop-edges", "Self-Connections", EdgesGroup, "Edges back to their own node loop clear of it instead of collapsing onto it.",
+            "self loop self-connection AllowSelfConnections LoopRadius recursion retry", typeof(SelfLoopEdgesExample)),
 
         // ---- Handles & Connections ----
-        new("validation", "Validation", HandlesGroup, "Validate connections while dragging and reject invalid ones."),
-        new("custom-connection-line", "Custom Connection Line", HandlesGroup, "Customize the line drawn while creating a connection."),
-        new("easy-connect", "Easy Connect", HandlesGroup, "Start a connection from anywhere on a node."),
-        new("connection-mode", "Connection Mode", HandlesGroup, "Loose vs strict connection modes."),
-        new("add-node-on-edge-drop", "Add Node on Edge Drop", HandlesGroup, "Drop a connection on the pane to spawn a connected node."),
-        new("cancel-connection", "Cancel Connection", HandlesGroup, "Press Escape to cancel an in-progress connection."),
-        new("use-connection", "Use Connection", HandlesGroup, "Observe the in-progress connection state live."),
-        new("use-node-connections", "Use Node Connections", HandlesGroup, "List the edges connected to a node."),
-        new("moving-handles", "Moving Handles", HandlesGroup, "Add/move handles at runtime and refresh edge anchors."),
-        new("connection-rules", "Connection Rules", HandlesGroup, "Duplicate, self and non-connectable rules applied while dragging."),
-        new("handle-rules", "Handle Rules", HandlesGroup, "Validation and connect callbacks that live on the handle itself."),
+        new("validation", "Validation", HandlesGroup, "Validate connections while dragging and reject invalid ones.",
+            "validation IsValidConnection valid invalid handle connect reject", typeof(ValidationExample)),
+        new("custom-connection-line", "Custom Connection Line", HandlesGroup, "Customize the line drawn while creating a connection.",
+            "connection line ConnectionLineTemplate gradient custom line dragging", typeof(CustomConnectionLineExample)),
+        new("easy-connect", "Easy Connect", HandlesGroup, "Start a connection from anywhere on a node.",
+            "easy connect whole node handle loose ConnectionMode floating edges", typeof(EasyConnectExample)),
+        new("connection-mode", "Connection Mode", HandlesGroup, "Loose vs strict connection modes.",
+            "connection mode strict loose ConnectionMode source target", typeof(ConnectionModeExample)),
+        new("add-node-on-edge-drop", "Add Node on Edge Drop", HandlesGroup, "Drop a connection on the pane to spawn a connected node.",
+            "add node drop connection pane OnConnectEnd BlowConnectEndInfo IsDropped FlowPosition", typeof(AddNodeOnEdgeDropExample)),
+        new("cancel-connection", "Cancel Connection", HandlesGroup, "Press Escape to cancel an in-progress connection.",
+            "cancel connection Escape OnConnectStart OnConnectEnd abort", typeof(CancelConnectionExample)),
+        new("use-connection", "Use Connection", HandlesGroup, "Observe the in-progress connection state live.",
+            "useConnection OnConnectionChange BlowConnectionLineContext live connection state", typeof(UseConnectionExample)),
+        new("use-node-connections", "Use Node Connections", HandlesGroup, "List the edges connected to a node.",
+            "node connections GetConnectedEdges GetIncomers GetOutgoers BlowGraphUtils neighbours", typeof(UseNodeConnectionsExample)),
+        new("moving-handles", "Moving Handles", HandlesGroup, "Add/move handles at runtime and refresh edge anchors.",
+            "moving handles add remove runtime Refresh remeasure anchors", typeof(MovingHandlesExample)),
+        new("connection-rules", "Connection Rules", HandlesGroup, "Duplicate, self and non-connectable rules applied while dragging.",
+            "connection rules PreventDuplicateEdges AllowSelfConnections Connectable ConnectionRadius", typeof(ConnectionRulesExample)),
+        new("handle-rules", "Handle Rules", HandlesGroup, "Validation and connect callbacks that live on the handle itself.",
+            "handle rules per-handle IsValidConnection OnConnect typed ports", typeof(HandleRulesExample)),
 
         // ---- Interaction ----
-        new("interaction", "Interaction", InteractionGroup, "Toggle draggable, selectable, zoom and pan options live."),
-        new("drag-n-drop", "Drag and Drop", InteractionGroup, "Drag new nodes from a sidebar onto the canvas."),
-        new("use-key-press", "Use Key Press", InteractionGroup, "React to keyboard shortcuts over the flow."),
-        new("intersection", "Intersection", InteractionGroup, "Detect which nodes intersect a dragged node."),
-        new("click-distance", "Click Distance", InteractionGroup, "Distinguish a click from a drag using a distance threshold."),
-        new("use-on-selection-change", "Selection Change", InteractionGroup, "React to selection changes and show the selected ids."),
-        new("delete-protection", "Delete Protection", InteractionGroup, "Deletable/Selectable flags, select-all and the delete veto."),
-        new("auto-pan", "Auto Pan & Pinch", InteractionGroup, "Drag past the canvas edge to scroll; pinch with two fingers to zoom."),
-        new("interaction-guards", "Interaction Guards", InteractionGroup, "nodrag, nopan and nowheel: carve interactivity back out of the canvas."),
-        new("key-bindings", "Key Bindings", InteractionGroup, "Choose which keys delete, zoom and multi-select."),
-        new("alignment-guides", "Alignment Guides", InteractionGroup, "Dragged nodes click into line with their neighbours."),
-        new("selection-gestures", "Selection Gestures", InteractionGroup, "Drag and right-click a whole selection; choose the selection and multi-select keys."),
+        new("interaction", "Interaction", InteractionGroup, "Toggle draggable, selectable, zoom and pan options live.",
+            "interaction NodesDraggable ElementsSelectable ZoomOnScroll PanOnDrag ZoomOnDoubleClick", typeof(InteractionExample)),
+        new("drag-n-drop", "Drag and Drop", InteractionGroup, "Drag new nodes from a sidebar onto the canvas.",
+            "drag and drop sidebar palette ScreenToFlowPosition ondrop new nodes", typeof(DragNDropExample)),
+        new("use-key-press", "Use Key Press", InteractionGroup, "React to keyboard shortcuts over the flow.",
+            "key press keyboard shortcut onkeydown DeleteKeyEnabled", typeof(UseKeyPressExample)),
+        new("intersection", "Intersection", InteractionGroup, "Detect which nodes intersect a dragged node.",
+            "intersection overlap GetIntersectingNodes collision OnNodeDrag", typeof(IntersectionExample)),
+        new("click-distance", "Click Distance", InteractionGroup, "Distinguish a click from a drag using a distance threshold.",
+            "click distance NodeClickDistance PaneClickDistance OnNodeClick OnPaneClick threshold", typeof(ClickDistanceExample)),
+        new("use-on-selection-change", "Selection Change", InteractionGroup, "React to selection changes and show the selected ids.",
+            "selection change OnSelectionChange selected nodes edges box select", typeof(UseOnSelectionChangeExample)),
+        new("delete-protection", "Delete Protection", InteractionGroup, "Deletable/Selectable flags, select-all and the delete veto.",
+            "delete protection Deletable Selectable locked read-only OnDelete select all", typeof(DeleteProtectionExample)),
+        new("auto-pan", "Auto Pan & Pinch", InteractionGroup, "Drag past the canvas edge to scroll; pinch with two fingers to zoom.",
+            "auto pan AutoPanOnNodeDrag AutoPanSpeed AutoPanMargin pinch ZoomOnPinch touch", typeof(AutoPanExample)),
+        new("interaction-guards", "Interaction Guards", InteractionGroup, "nodrag, nopan and nowheel: carve interactivity back out of the canvas.",
+            "nodrag nopan nowheel guards NoDragClass slider scroll inside node", typeof(InteractionGuardsExample)),
+        new("key-bindings", "Key Bindings", InteractionGroup, "Choose which keys delete, zoom and multi-select.",
+            "key bindings DeleteKeys ZoomActivationKey MultiSelectionKey Backspace modifier", typeof(KeyBindingsExample)),
+        new("alignment-guides", "Alignment Guides", InteractionGroup, "Dragged nodes click into line with their neighbours.",
+            "alignment guides snap SnapToGuides GuideDistance SnapToGrid", typeof(AlignmentGuidesExample)),
+        new("selection-gestures", "Selection Gestures", InteractionGroup, "Drag and right-click a whole selection; choose the selection and multi-select keys.",
+            "selection drag OnSelectionDragStart OnSelectionContextMenu SelectionKey SelectionOnDrag", typeof(SelectionGesturesExample)),
 
         // ---- Viewport & Layout ----
-        new("backgrounds", "Backgrounds", ViewportGroup, "Dots, lines and cross background patterns."),
-        new("controlled-viewport", "Controlled Viewport", ViewportGroup, "Drive the viewport from your own state."),
-        new("color-mode", "Color Mode", ViewportGroup, "Light, dark and system color themes."),
-        new("interactive-minimap", "Interactive MiniMap", ViewportGroup, "Pan and zoom the flow using the minimap."),
-        new("custom-minimap-node", "Custom MiniMap Node", ViewportGroup, "Render minimap nodes with custom colors/shapes."),
-        new("layouting", "Layouting", ViewportGroup, "Layered, grid and circle auto-layouts from the built-in BlowLayout."),
-        new("align-distribute", "Align & Distribute", ViewportGroup, "Line up and evenly space the selected nodes, the way a drawing tool does."),
-        new("viewport-transitions", "Viewport Transitions", ViewportGroup, "Ease the viewport between two parts of a graph instead of cutting."),
-        new("zindex-mode", "Z-Index Mode", ViewportGroup, "Control stacking of nodes and edges."),
-        new("devtools", "DevTools", ViewportGroup, "Inspect viewport, nodes and change events."),
-        new("overlay-layout", "Overlay Layout", ViewportGroup, "Anchor controls, minimap, panels and attribution; lock the canvas."),
-        new("responsive-canvas", "Responsive Canvas", ViewportGroup, "Container and node resizes are tracked automatically; controlled viewport."),
+        new("backgrounds", "Backgrounds", ViewportGroup, "Dots, lines and cross background patterns.",
+            "background pattern BlowBackground dots lines cross gap color", typeof(BackgroundsExample)),
+        new("controlled-viewport", "Controlled Viewport", ViewportGroup, "Drive the viewport from your own state.",
+            "controlled viewport Viewport OnViewportChanged BlowViewport pan zoom state", typeof(ControlledViewportExample)),
+        new("color-mode", "Color Mode", ViewportGroup, "Light, dark and system color themes.",
+            "color mode colour theme dark light system ColorMode BlowColorMode custom properties", typeof(ColorModeExample)),
+        new("interactive-minimap", "Interactive MiniMap", ViewportGroup, "Pan and zoom the flow using the minimap.",
+            "minimap BlowMiniMap Pannable Zoomable navigate", typeof(InteractiveMinimapExample)),
+        new("custom-minimap-node", "Custom MiniMap Node", ViewportGroup, "Render minimap nodes with custom colors/shapes.",
+            "minimap NodeColorFunc NodeStrokeColorFunc BorderRadius colours", typeof(CustomMiniMapNodeExample)),
+        new("layouting", "Layouting", ViewportGroup, "Layered, grid and circle auto-layouts from the built-in BlowLayout.",
+            "layout auto-layout BlowLayout Layered Grid Circle dagre elk direction", typeof(LayoutingExample)),
+        new("align-distribute", "Align & Distribute", ViewportGroup, "Line up and evenly space the selected nodes, the way a drawing tool does.",
+            "align distribute AlignSelectionAsync DistributeSelectionAsync BlowAlignEdge tidy", typeof(AlignDistributeExample)),
+        new("viewport-transitions", "Viewport Transitions", ViewportGroup, "Ease the viewport between two parts of a graph instead of cutting.",
+            "viewport transition animate SetCenterAsync FitViewAsync ZoomToAsync duration OnMoveStart OnMoveEnd", typeof(ViewportTransitionsExample)),
+        new("zindex-mode", "Z-Index Mode", ViewportGroup, "Control stacking of nodes and edges.",
+            "z-index stacking order ZIndexMode ZIndex auto basic manual", typeof(ZIndexModeExample)),
+        new("devtools", "DevTools", ViewportGroup, "Inspect viewport, nodes and change events.",
+            "devtools inspector viewport logger change log debug", typeof(DevToolsExample)),
+        new("overlay-layout", "Overlay Layout", ViewportGroup, "Anchor controls, minimap, panels and attribution; lock the canvas.",
+            "overlay controls position minimap panel attribution lock ShowInteractive orientation", typeof(OverlayLayoutExample)),
+        new("responsive-canvas", "Responsive Canvas", ViewportGroup, "Container and node resizes are tracked automatically; controlled viewport.",
+            "responsive resize container ResizeObserver node grows measure", typeof(ResponsiveCanvasExample)),
 
         // ---- State & API ----
-        new("use-reactflow", "Use Flow API", StateGroup, "Call the imperative flow API (zoom, fit, add, delete)."),
-        new("provider", "Provider", StateGroup, "Control a flow from outside via a captured reference."),
-        new("save-restore", "Save & Restore", StateGroup, "Persist and reload the flow from local storage."),
-        new("controlled-uncontrolled", "Controlled vs Uncontrolled", StateGroup, "Compare controlled and uncontrolled node state."),
-        new("multi-set-nodes", "Multi setNodes", StateGroup, "Multiple successive state updates in one tick."),
-        new("set-nodes-batching", "setNodes Batching", StateGroup, "Batch many node updates efficiently."),
-        new("use-nodes-data", "Use Nodes Data", StateGroup, "Read and react to another node's data."),
-        new("use-update-node-internals", "Update Node Internals", StateGroup, "Re-measure a node after its handles change."),
-        new("multi-flows", "Multi Flows", StateGroup, "Several independent flow instances on one page."),
-        new("redux", "External Store", StateGroup, "Drive a flow from a shared external store."),
-        new("diagnostics", "Diagnostics", StateGroup, "OnError reports a malformed graph instead of throwing on it."),
-        new("undo-redo", "Undo & Redo", StateGroup, "Snapshot-based history you drive from your own change events."),
-        new("built-in-undo-redo", "Built-in Undo & Redo", StateGroup, "Let the canvas keep the undo stack and bind the shortcuts itself."),
-        new("copy-paste", "Copy & Paste", StateGroup, "Copy, cut, paste and duplicate a selection, groups and all."),
+        new("use-reactflow", "Use Flow API", StateGroup, "Call the imperative flow API (zoom, fit, add, delete).",
+            "useReactFlow imperative API @ref ZoomIn ZoomOut FitView AddNodes DeleteElementsAsync ToObject", typeof(UseReactFlowExample)),
+        new("provider", "Provider", StateGroup, "Control a flow from outside via a captured reference.",
+            "provider ReactFlowProvider sidebar outside reference AddEdges", typeof(ProviderExample)),
+        new("save-restore", "Save & Restore", StateGroup, "Persist and reload the flow from local storage.",
+            "save restore persist local storage ToObject RestoreAsync BlowSnapshot json", typeof(SaveRestoreExample)),
+        new("controlled-uncontrolled", "Controlled vs Uncontrolled", StateGroup, "Compare controlled and uncontrolled node state.",
+            "controlled uncontrolled NodesChanged EdgesChanged state ToObject", typeof(ControlledUncontrolledExample)),
+        new("multi-set-nodes", "Multi setNodes", StateGroup, "Multiple successive state updates in one tick.",
+            "setNodes multiple updates one render batch shuffle", typeof(MultiSetNodesExample)),
+        new("set-nodes-batching", "setNodes Batching", StateGroup, "Batch many node updates efficiently.",
+            "batch AddNodes many nodes single update measure", typeof(SetNodesBatchingExample)),
+        new("use-nodes-data", "Use Nodes Data", StateGroup, "Read and react to another node's data.",
+            "nodes data Data derived computed source result slider", typeof(UseNodesDataExample)),
+        new("use-update-node-internals", "Update Node Internals", StateGroup, "Re-measure a node after its handles change.",
+            "useUpdateNodeInternals UpdateNodeInternals Refresh remeasure handles", typeof(UseUpdateNodeInternalsExample)),
+        new("multi-flows", "Multi Flows", StateGroup, "Several independent flow instances on one page.",
+            "multiple flows two canvases independent instances", typeof(MultiFlowsExample)),
+        new("redux", "External Store", StateGroup, "Drive a flow from a shared external store.",
+            "redux zustand store external state dispatch", typeof(ReduxExample)),
+        new("diagnostics", "Diagnostics", StateGroup, "OnError reports a malformed graph instead of throwing on it.",
+            "diagnostics OnError BlowError duplicate id dangling edge orphan", typeof(DiagnosticsExample)),
+        new("undo-redo", "Undo & Redo", StateGroup, "Snapshot-based history you drive from your own change events.",
+            "undo redo BlowHistory Capture snapshot history", typeof(UndoRedoExample)),
+        new("built-in-undo-redo", "Built-in Undo & Redo", StateGroup, "Let the canvas keep the undo stack and bind the shortcuts itself.",
+            "undo redo HistoryEnabled HistoryCapacity OnHistoryChanged UndoAsync RedoAsync Ctrl+Z", typeof(BuiltInUndoRedoExample)),
+        new("copy-paste", "Copy & Paste", StateGroup, "Copy, cut, paste and duplicate a selection, groups and all.",
+            "copy paste cut duplicate clipboard ClipboardShortcutsEnabled BlowFragment Ctrl+C Ctrl+V", typeof(CopyPasteExample)),
 
         // ---- Add-ons ----
-        new("node-resizer", "Node Resizer", AddonGroup, "Resize nodes with the BlowNodeResizer control."),
-        new("node-toolbar", "Node Toolbar", AddonGroup, "A toolbar anchored to the selected node."),
-        new("touch-device", "Touch Device", AddonGroup, "Pointer-based interactions that work on touch."),
-        new("a11y", "Accessibility", AddonGroup, "Keyboard focus and arrow-key movement of nodes."),
-        new("keyboard-a11y", "Keyboard Accessibility", AddonGroup, "Tab to nodes and edges, activate with Enter/Space, live announcements."),
-        new("localization", "Localization", AddonGroup, "Translate every label and announcement the canvas makes."),
+        new("node-resizer", "Node Resizer", AddonGroup, "Resize nodes with the BlowNodeResizer control.",
+            "resize resizer BlowNodeResizer MinWidth MinHeight KeepAspectRatio", typeof(NodeResizerExample)),
+        new("node-toolbar", "Node Toolbar", AddonGroup, "A toolbar anchored to the selected node.",
+            "node toolbar BlowNodeToolbar selected Position actions", typeof(NodeToolbarExample)),
+        new("touch-device", "Touch Device", AddonGroup, "Pointer-based interactions that work on touch.",
+            "touch mobile pointer events tablet SelectionOnDrag pinch", typeof(TouchDeviceExample)),
+        new("a11y", "Accessibility", AddonGroup, "Keyboard focus and arrow-key movement of nodes.",
+            "accessibility a11y keyboard focus arrow keys AriaLabel screen reader", typeof(A11yExample)),
+        new("keyboard-a11y", "Keyboard Accessibility", AddonGroup, "Tab to nodes and edges, activate with Enter/Space, live announcements.",
+            "keyboard accessibility tab EdgesFocusable aria-live Enter Space Escape", typeof(KeyboardA11yExample)),
+        new("localization", "Localization", AddonGroup, "Translate every label and announcement the canvas makes.",
+            "localization translate i18n AriaLabels BlowAriaLabels language DefaultViewport", typeof(LocalizationExample)),
     ];
 
     public static IEnumerable<IGrouping<string, ExampleInfo>> Grouped() =>
diff --git a/src/Utilities/Blow/Demo/Client/Examples/ExampleScaffold.razor b/src/Utilities/Blow/Demo/Client/Examples/ExampleScaffold.razor
index 494e1f4587d..43bdb9a5881 100644
--- a/src/Utilities/Blow/Demo/Client/Examples/ExampleScaffold.razor
+++ b/src/Utilities/Blow/Demo/Client/Examples/ExampleScaffold.razor
@@ -1,25 +1,29 @@
 @namespace Bit.Blow.Demo.Client.Examples
 
-@* Shared shell for every ported React Flow example: a titled header, an optional
-   summary and toolbar, and a bordered canvas area that hosts the BlowCanvas. *@
+@* Shared shell for every ported React Flow example: the page's title block, the "View code" toggle,
+   and a live sample frame - an optional toolbar over a canvas area that hosts the BlowCanvas. The
+   frame is marked bb-page-wide, so the docs shell gives the canvas the "on this page" rail's column
+   as well. *@
 
-<div class="demo-header">
-    <h3>@Title</h3>
+<div class="bb-intro">
+    <h1>@Title</h1>
     @if (!string.IsNullOrWhiteSpace(Summary))
     {
-        <p class="text-muted">@Summary</p>
+        <p class="bb-subtitle">@Summary</p>
     }
 </div>
 
 <DemoCode />
 
-@if (Toolbar is not null)
-{
-    <div class="example-toolbar">@Toolbar</div>
-}
+<div class="bb-demo blow-demo bb-page-wide">
+    @if (Toolbar is not null)
+    {
+        <div class="bb-demo-bar example-toolbar">@Toolbar</div>
+    }
 
-<div class="demo-canvas" style="@CanvasStyle">
-    @ChildContent
+    <div class="demo-canvas">
+        @ChildContent
+    </div>
 </div>
 
 @code {
@@ -27,9 +31,4 @@
     [Parameter] public string? Summary { get; set; }
     [Parameter] public RenderFragment? Toolbar { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
-
-    /// <summary>Optional override for the canvas height (defaults to the standard demo height).</summary>
-    [Parameter] public string? Height { get; set; }
-
-    private string CanvasStyle => Height is null ? string.Empty : $"height:{Height};";
 }
diff --git a/src/Utilities/Blow/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Blow/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Blow/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Blow/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Blow/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Blow/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/ExamplesLayout.razor b/src/Utilities/Blow/Demo/Client/Layout/ExamplesLayout.razor
deleted file mode 100644
index e16db0f05ce..00000000000
--- a/src/Utilities/Blow/Demo/Client/Layout/ExamplesLayout.razor
+++ /dev/null
@@ -1,70 +0,0 @@
-@namespace Bit.Blow.Demo.Client.Layout
-@inherits LayoutComponentBase
-@using Bit.Blow.Demo.Client.Examples
-
-@* Dedicated shell for the React Flow examples gallery. It is a self-contained
-   section with its own sidebar listing every example, kept separate from the
-   main demo navigation. *@
-
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. *@
-<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
-    <aside class="sidebar">
-        <div class="nav-top">
-            <a class="brand" href="examples">
-                <span class="brand-mark">@((MarkupString)LogoSvg)</span>
-                <span class="brand-text">Examples</span>
-            </a>
-            <button class="nav-toggle" title="Toggle navigation" @onclick="ToggleNav">
-                <span></span><span></span><span></span>
-            </button>
-        </div>
-
-        <nav class="@NavCssClass">
-            <NavLink class="ex-link ex-link--all" href="examples" Match="NavLinkMatch.All" @onclick="CollapseNav">
-                <span class="nav-icon">✺</span> All examples
-            </NavLink>
-
-            @foreach (var group in ExampleCatalog.Grouped())
-            {
-                <div class="ex-group">@group.Key</div>
-                @foreach (var ex in group)
-                {
-                    <NavLink class="ex-link ex-sublink" href="@($"examples/{ex.Route}")" @onclick="CollapseNav">
-                        @ex.Title
-                    </NavLink>
-                }
-            }
-        </nav>
-    </aside>
-
-    <main class="main">
-        <header class="top-row">
-            <a href="">← Back to demos</a>
-            <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Blow" target="_blank" rel="noopener">GitHub</a>
-        </header>
-
-        <article class="content">
-            @Body
-        </article>
-    </main>
-</div>
-
-@code {
-    private bool _collapsed = true;
-
-    private string NavCssClass => _collapsed ? "ex-nav collapse" : "ex-nav";
-
-    private void ToggleNav() => _collapsed = !_collapsed;
-
-    private void CollapseNav() => _collapsed = true;
-
-    private const string LogoSvg =
-        "<svg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>" +
-        "<rect x='2' y='3' width='7' height='5' rx='1.5' fill='#a5b4fc'/>" +
-        "<rect x='15' y='16' width='7' height='5' rx='1.5' fill='#818cf8'/>" +
-        "<rect x='15' y='3' width='7' height='5' rx='1.5' fill='#c7d2fe'/>" +
-        "<path d='M9 5.5h2.5a2 2 0 0 1 2 2v9a2 2 0 0 0 2 2H15' stroke='#e0e7ff' stroke-width='1.5' fill='none'/>" +
-        "<path d='M9 5.5h9' stroke='#e0e7ff' stroke-width='1.5'/>" +
-        "</svg>";
-}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/ExamplesLayout.razor.css b/src/Utilities/Blow/Demo/Client/Layout/ExamplesLayout.razor.css
deleted file mode 100644
index 9234af30624..00000000000
--- a/src/Utilities/Blow/Demo/Client/Layout/ExamplesLayout.razor.css
+++ /dev/null
@@ -1,198 +0,0 @@
-/* Layout shell (mirrors MainLayout so the examples section stands on its own). */
-.page {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-.sidebar {
-    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-
-.top-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1.5rem;
-    height: 3.5rem;
-    padding: 0 1.5rem;
-    background: var(--demo-surface);
-    border-bottom: 1px solid var(--demo-border);
-}
-
-    .top-row ::deep a {
-        color: var(--demo-muted);
-        font-weight: 500;
-        font-size: 0.9rem;
-        white-space: nowrap;
-    }
-
-    .top-row a:hover {
-        color: var(--demo-text);
-        text-decoration: none;
-    }
-
-.content {
-    flex: 1;
-    padding: 1.75rem 2rem;
-    min-width: 0;
-}
-
-/* Sidebar header / brand */
-.nav-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 3.5rem;
-    padding: 0 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    flex-shrink: 0;
-}
-
-.brand {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    color: #fff;
-    font-weight: 600;
-    font-size: 1.05rem;
-}
-
-.brand:hover {
-    text-decoration: none;
-}
-
-.brand-mark {
-    display: inline-flex;
-    align-items: center;
-}
-
-.nav-toggle {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    width: 36px;
-    height: 36px;
-    padding: 0 8px;
-    background: rgba(255, 255, 255, 0.08);
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-    .nav-toggle span {
-        display: block;
-        height: 2px;
-        background: #fff;
-        border-radius: 2px;
-    }
-
-/* Example links */
-.ex-nav {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    padding: 0.75rem;
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-.ex-group {
-    margin: 0.7rem 0 0.2rem;
-    padding: 0 0.75rem;
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: rgba(165, 180, 252, 0.8);
-}
-
-.ex-nav ::deep .ex-link {
-    display: flex;
-    align-items: center;
-    gap: 0.65rem;
-    padding: 0.45rem 0.75rem;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.86rem;
-    font-weight: 400;
-    border-radius: 8px;
-}
-
-.ex-nav ::deep .ex-link:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: #fff;
-    text-decoration: none;
-}
-
-.ex-nav ::deep .ex-link.active {
-    background: rgba(255, 255, 255, 0.16);
-    color: #fff;
-}
-
-.ex-nav ::deep .ex-link--all {
-    font-weight: 600;
-    font-size: 0.92rem;
-    color: #fff;
-}
-
-.nav-icon {
-    display: inline-flex;
-    width: 1.1rem;
-    justify-content: center;
-    font-size: 0.85rem;
-    color: #a5b4fc;
-}
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: center;
-    }
-
-    .content {
-        padding: 1.25rem;
-    }
-
-    .ex-nav.collapse {
-        display: none;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 260px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-        flex-shrink: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-    }
-
-    .nav-toggle {
-        display: none;
-    }
-
-    .ex-nav.collapse {
-        display: flex;
-    }
-}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/Footer.razor b/src/Utilities/Blow/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Blow/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/Header.razor b/src/Utilities/Blow/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/Header.razor.css b/src/Utilities/Blow/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor
index 51fef6b647e..44980dda101 100644
--- a/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor
@@ -1,21 +1,30 @@
 @inherits LayoutComponentBase
 
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. *@
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
 <div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
-    <aside class="sidebar">
-        <NavMenu />
-    </aside>
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
 
-    <main class="main">
-        <header class="top-row">
-            <a href="examples">Examples</a>
-            <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Blow" target="_blank" rel="noopener">GitHub</a>
-            <a href="https://learn.microsoft.com/aspnet/core/blazor/" target="_blank" rel="noopener">Blazor Docs</a>
-        </header>
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
 
-        <article class="content">
-            @Body
-        </article>
-    </main>
+    <Footer />
 </div>
diff --git a/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor.css
index cdeea32197f..22745885fe0 100644
--- a/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor.css
+++ b/src/Utilities/Blow/Demo/Client/Layout/MainLayout.razor.css
@@ -1,78 +1,25 @@
-.page {
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
 }
 
-.sidebar {
-    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.main {
+main {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
 }
 
-.top-row {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 1.5rem;
-    height: 3.5rem;
-    padding: 0 1.5rem;
-    background: var(--demo-surface);
-    border-bottom: 1px solid var(--demo-border);
-}
-
-    .top-row ::deep a {
-        color: var(--demo-muted);
-        font-weight: 500;
-        font-size: 0.9rem;
-        white-space: nowrap;
-    }
-
-    .top-row ::deep a:hover {
-        color: var(--demo-text);
-        text-decoration: none;
-    }
-
-.content {
-    flex: 1;
-    padding: 1.75rem 2rem;
-    min-width: 0;
-}
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: center;
-    }
-
-    .content {
-        padding: 1.25rem;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 260px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-        flex-shrink: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-    }
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
 }
diff --git a/src/Utilities/Blow/Demo/Client/Layout/NavMenu.razor b/src/Utilities/Blow/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 030c54bc9f0..00000000000
--- a/src/Utilities/Blow/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,73 +0,0 @@
-<div class="nav-top">
-    <a class="brand" href="">
-        <span class="brand-mark">@((MarkupString)LogoSvg)</span>
-        <span class="brand-text">bit Blow</span>
-    </a>
-    <button class="nav-toggle" title="Toggle navigation" @onclick="ToggleNavMenu">
-        <span></span><span></span><span></span>
-    </button>
-</div>
-
-<nav class="@NavMenuCssClass">
-    <NavLink class="nav-link" href="" Match="NavLinkMatch.All" @onclick="CollapseNavMenu">
-        <span class="nav-icon">●</span> Basic Flow
-    </NavLink>
-    <NavLink class="nav-link" href="custom-nodes" @onclick="CollapseNavMenu">
-        <span class="nav-icon">◆</span> Custom Nodes
-    </NavLink>
-    <NavLink class="nav-link" href="edge-types" @onclick="CollapseNavMenu">
-        <span class="nav-icon">↳</span> Edge Types
-    </NavLink>
-    <NavLink class="nav-link" href="custom-edges" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⤳</span> Custom Edges
-    </NavLink>
-    <NavLink class="nav-link" href="interactions" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⊹</span> Interactions
-    </NavLink>
-    <NavLink class="nav-link" href="labels-handles" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⛶</span> Labels &amp; Handles
-    </NavLink>
-    <NavLink class="nav-link" href="extras" @onclick="CollapseNavMenu">
-        <span class="nav-icon">✦</span> Theming &amp; Extras
-    </NavLink>
-    <NavLink class="nav-link" href="advanced" @onclick="CollapseNavMenu">
-        <span class="nav-icon">▣</span> Groups &amp; Resizing
-    </NavLink>
-    <NavLink class="nav-link" href="connection-line" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⤿</span> Connection Lines
-    </NavLink>
-    <NavLink class="nav-link" href="add-node-on-drop" @onclick="CollapseNavMenu">
-        <span class="nav-icon">＋</span> Add Node on Drop
-    </NavLink>
-    <NavLink class="nav-link" href="floating-edges" @onclick="CollapseNavMenu">
-        <span class="nav-icon">◌</span> Floating Edges
-    </NavLink>
-    <NavLink class="nav-link" href="minimap" @onclick="CollapseNavMenu">
-        <span class="nav-icon">▦</span> MiniMap
-    </NavLink>
-    <NavLink class="nav-link" href="drag-threshold" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⇆</span> Drag Threshold
-    </NavLink>
-    <NavLink class="nav-link" href="mcp-server" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⌘</span> MCP Server
-    </NavLink>
-</nav>
-
-@code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "nav-menu collapse" : "nav-menu";
-
-    private const string LogoSvg =
-        "<svg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>" +
-        "<rect x='2' y='3' width='7' height='5' rx='1.5' fill='#a5b4fc'/>" +
-        "<rect x='15' y='16' width='7' height='5' rx='1.5' fill='#818cf8'/>" +
-        "<rect x='15' y='3' width='7' height='5' rx='1.5' fill='#c7d2fe'/>" +
-        "<path d='M9 5.5h2.5a2 2 0 0 1 2 2v9a2 2 0 0 0 2 2H15' stroke='#e0e7ff' stroke-width='1.5' fill='none'/>" +
-        "<path d='M9 5.5h9' stroke='#e0e7ff' stroke-width='1.5'/>" +
-        "</svg>";
-
-    private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;
-
-    private void CollapseNavMenu() => collapseNavMenu = true;
-}
diff --git a/src/Utilities/Blow/Demo/Client/Layout/NavMenu.razor.css b/src/Utilities/Blow/Demo/Client/Layout/NavMenu.razor.css
deleted file mode 100644
index 237c5dc5ee4..00000000000
--- a/src/Utilities/Blow/Demo/Client/Layout/NavMenu.razor.css
+++ /dev/null
@@ -1,104 +0,0 @@
-.nav-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 3.5rem;
-    padding: 0 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    flex-shrink: 0;
-}
-
-.brand {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    color: #fff;
-    font-weight: 600;
-    font-size: 1.05rem;
-}
-
-.brand:hover {
-    text-decoration: none;
-}
-
-.brand-mark {
-    display: inline-flex;
-    align-items: center;
-}
-
-.nav-toggle {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    width: 36px;
-    height: 36px;
-    padding: 0 8px;
-    background: rgba(255, 255, 255, 0.08);
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-    .nav-toggle span {
-        display: block;
-        height: 2px;
-        background: #fff;
-        border-radius: 2px;
-    }
-
-.nav-menu {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 0.75rem;
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-.nav-menu ::deep .nav-link {
-    display: flex;
-    align-items: center;
-    gap: 0.65rem;
-    padding: 0.6rem 0.75rem;
-    color: rgba(255, 255, 255, 0.75);
-    font-size: 0.92rem;
-    font-weight: 500;
-    border-radius: 8px;
-}
-
-.nav-menu ::deep .nav-link:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: #fff;
-    text-decoration: none;
-}
-
-.nav-menu ::deep .nav-link.active {
-    background: rgba(255, 255, 255, 0.16);
-    color: #fff;
-}
-
-.nav-icon {
-    display: inline-flex;
-    width: 1.1rem;
-    justify-content: center;
-    font-size: 0.85rem;
-    color: #a5b4fc;
-}
-
-@media (max-width: 640.98px) {
-    .nav-menu.collapse {
-        display: none;
-    }
-}
-
-@media (min-width: 641px) {
-    .nav-toggle {
-        display: none;
-    }
-
-    .nav-menu.collapse {
-        display: flex;
-    }
-}
diff --git a/src/Utilities/Blow/Demo/Client/Pages/AddNodeOnDropDemo.razor b/src/Utilities/Blow/Demo/Client/Pages/AddNodeOnDropDemo.razor
index c54c495ba46..42423dbd695 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/AddNodeOnDropDemo.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/AddNodeOnDropDemo.razor
@@ -1,10 +1,10 @@
 @page "/add-node-on-drop"
 
-<PageTitle>Add Node on Edge Drop - bit Blow</PageTitle>
+<PageTitle>Add Node on Edge Drop · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Add Node on Edge Drop</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Add Node on Edge Drop</h1>
+    <p class="bb-subtitle">
         Demonstrates the enriched <code>OnConnectEnd</code> callback. Its <code>BlowConnectEndInfo</code> payload
         carries the originating handle, the drop position in flow coordinates, whether the drop landed on a
         valid handle, and whether the gesture really was a drop (<code>IsDropped</code>) of a new connection
@@ -16,18 +16,19 @@
 
 <DemoCode />
 
-<div class="example-toolbar">
-    <button class="btn btn-sm" @onclick="Reset">Reset</button>
-    <span class="text-muted">@_nodes.Count nodes · @_edges.Count edges · last drop: @_lastDrop</span>
-</div>
-
-<div class="demo-canvas" style="height: calc(100vh - 250px);">
-    <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
-                OnConnectEnd="OnConnectEnd">
-        <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
-        <BlowControls />
-        <BlowMiniMap />
-    </BlowCanvas>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="bb-demo-bar example-toolbar">
+        <button class="btn btn-secondary" @onclick="Reset">Reset</button>
+        <span class="bb-muted">@_nodes.Count nodes · @_edges.Count edges · last drop: @_lastDrop</span>
+    </div>
+    <div class="demo-canvas">
+        <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
+                    OnConnectEnd="OnConnectEnd">
+            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
+            <BlowControls />
+            <BlowMiniMap />
+        </BlowCanvas>
+    </div>
 </div>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Advanced.razor b/src/Utilities/Blow/Demo/Client/Pages/Advanced.razor
index 825b303b9ff..5f3a8770a16 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Advanced.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Advanced.razor
@@ -1,10 +1,10 @@
 @page "/advanced"
 
-<PageTitle>Groups &amp; Resizing - bit Blow</PageTitle>
+<PageTitle>Groups &amp; Resizing · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Groups, Resizing, Toolbars &amp; Validation</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Groups, Resizing, Toolbars &amp; Validation</h1>
+    <p class="bb-subtitle">
         The dashed box is a <strong>group</strong> - drag it and its children move with it.
         Select the blue node to <strong>resize</strong> it and use its <strong>toolbar</strong>.
         Connections are <strong>validated</strong>: you can only connect <em>into</em> the "Sink" node.
@@ -13,34 +13,36 @@
 
 <DemoCode />
 
-<div class="demo-canvas" style="height: calc(100vh - 250px);">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" IsValidConnection="ValidateConnection">
-        <NodeTemplate Context="node">
-            @if (node.Type == "resizable")
-            {
-                <BlowNodeResizer MinWidth="100" MinHeight="50" />
-                <BlowNodeToolbar Position="BlowPosition.Top">
-                    <button class="btn btn-sm" @onclick="() => Recolor(node)">🎨 Recolor</button>
-                    <button class="btn btn-sm" @onclick="() => Remove(node)">🗑 Delete</button>
-                </BlowNodeToolbar>
-                <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Left" />
-                <div style="display:flex;align-items:center;justify-content:center;height:100%;font-weight:600;">
-                    @node.Label
-                </div>
-                <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Right" />
-            }
-            else
-            {
-                <BlowDefaultNode Node="node" />
-            }
-        </NodeTemplate>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" IsValidConnection="ValidateConnection">
+            <NodeTemplate Context="node">
+                @if (node.Type == "resizable")
+                {
+                    <BlowNodeResizer MinWidth="100" MinHeight="50" />
+                    <BlowNodeToolbar Position="BlowPosition.Top">
+                        <button class="btn btn-secondary" @onclick="() => Recolor(node)">🎨 Recolor</button>
+                        <button class="btn btn-secondary" @onclick="() => Remove(node)">🗑 Delete</button>
+                    </BlowNodeToolbar>
+                    <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Left" />
+                    <div style="display:flex;align-items:center;justify-content:center;height:100%;font-weight:600;">
+                        @node.Label
+                    </div>
+                    <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Right" />
+                }
+                else
+                {
+                    <BlowDefaultNode Node="node" />
+                }
+            </NodeTemplate>
 
-        <ChildContent>
-            <BlowBackground Variant="BlowBackgroundVariant.Cross" Gap="24" />
-            <BlowControls />
-            <BlowMiniMap />
-        </ChildContent>
-    </BlowCanvas>
+            <ChildContent>
+                <BlowBackground Variant="BlowBackgroundVariant.Cross" Gap="24" />
+                <BlowControls />
+                <BlowMiniMap />
+            </ChildContent>
+        </BlowCanvas>
+    </div>
 </div>
 
 @code {
@@ -58,7 +60,7 @@
 
             // A resizable node with a toolbar.
             new BlowNode { Id = "r1", Type = "resizable", Label = "Resize me", Position = new(400, 60),
-                       Width = 160, Height = 80, Data = new NodeStyle("#dbeafe"), Style = "background:#dbeafe;" },
+                       Width = 160, Height = 80, Data = new NodeStyle("#3b82f6"), Style = Tint("#3b82f6") },
 
             // The only valid connection target.
             new BlowNode { Id = "sink", Type = "output", Label = "Sink", Position = new(440, 280) },
@@ -72,15 +74,19 @@
 
     public record NodeStyle(string Background);
 
+    // A tint of the colour mixed into the node's own fill, so a recoloured node reads in the light and
+    // the dark colour mode alike.
+    private static string Tint(string color) => $"background:color-mix(in srgb, {color} 20%, var(--bit-blow-node-bg));";
+
     // Only connections that end at the "sink" node are allowed.
     private bool ValidateConnection(BlowConnection c) => c.Target == "sink";
 
     private void Recolor(BlowNode node)
     {
-        var colors = new[] { "#dbeafe", "#dcfce7", "#fee2e2", "#fef9c3", "#f3e8ff" };
+        var colors = new[] { "#3b82f6", "#22c55e", "#ef4444", "#eab308", "#a855f7" };
         var next = colors[Random.Shared.Next(colors.Length)];
         node.Data = new NodeStyle(next);
-        node.Style = $"background:{next};";
+        node.Style = Tint(next);
     }
 
     private void Remove(BlowNode node)
diff --git a/src/Utilities/Blow/Demo/Client/Pages/BasicFlow.razor b/src/Utilities/Blow/Demo/Client/Pages/BasicFlow.razor
new file mode 100644
index 00000000000..6452e028b45
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Pages/BasicFlow.razor
@@ -0,0 +1,71 @@
+@page "/basic-flow"
+
+<PageTitle>Basic Flow · Blow</PageTitle>
+
+<div class="bb-intro">
+    <h1>Basic Flow</h1>
+    <p class="bb-subtitle">
+        Drag nodes, drag from a handle to another node to connect, scroll to zoom, drag the background to pan.
+        Click a node/edge to select, press <kbd>Delete</kbd> to remove. Hold <kbd>Shift</kbd> for multi-select,
+        or <kbd>Shift</kbd>-drag the background to box-select. See the <a href="interactions">Interactions</a> page for more.
+    </p>
+</div>
+
+<DemoCode />
+
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes"
+                    Edges="_edges"
+                    FitViewOnInit="true"
+                    OnConnect="OnConnect">
+            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
+            <BlowControls />
+            <BlowMiniMap />
+            <BlowPanel Position="top-right">
+                <button class="btn btn-primary" @onclick="AddNode">Add node</button>
+            </BlowPanel>
+        </BlowCanvas>
+    </div>
+</div>
+
+@code {
+    private List<BlowNode> _nodes = new();
+    private List<BlowEdge> _edges = new();
+    private int _counter = 4;
+
+    protected override void OnInitialized()
+    {
+        _nodes =
+        [
+            new BlowNode { Id = "1", Type = "input",  Label = "Input Node",  Position = new(250, 25) },
+            new BlowNode { Id = "2",                  Label = "Default Node", Position = new(150, 150) },
+            new BlowNode { Id = "3",                  Label = "Another Node", Position = new(400, 150) },
+            new BlowNode { Id = "4", Type = "output", Label = "Output Node",  Position = new(280, 300) },
+        ];
+
+        _edges =
+        [
+            new BlowEdge { Id = "e1-2", Source = "1", Target = "2", Animated = true },
+            new BlowEdge { Id = "e1-3", Source = "1", Target = "3" },
+            new BlowEdge { Id = "e2-4", Source = "2", Target = "4", Label = "edge label" },
+        ];
+    }
+
+    private void AddNode()
+    {
+        _counter++;
+        _nodes.Add(new BlowNode
+        {
+            Id = _counter.ToString(),
+            Label = $"Node {_counter}",
+            Position = new(Random.Shared.Next(50, 450), Random.Shared.Next(50, 350)),
+        });
+    }
+
+    private void OnConnect(BlowConnection c)
+    {
+        // The edge is already added by the canvas; hook here for side effects.
+        Console.WriteLine($"Connected {c.Source} -> {c.Target}");
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Pages/ConnectionLineDemo.razor b/src/Utilities/Blow/Demo/Client/Pages/ConnectionLineDemo.razor
index 22807ef88d1..51732b664a2 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/ConnectionLineDemo.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/ConnectionLineDemo.razor
@@ -1,10 +1,10 @@
 @page "/connection-line"
 
-<PageTitle>Custom Connection Lines - bit Blow</PageTitle>
+<PageTitle>Custom Connection Lines · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Custom Connection Lines &amp; Live Connection State</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Custom Connection Lines &amp; Live Connection State</h1>
+    <p class="bb-subtitle">
         Showcases three new APIs working together: <code>ConnectionLineTemplate</code> draws the in-progress
         line, <code>OnConnectionChange</code> reports the live <code>BlowConnectionLineContext</code> every frame,
         and pressing <kbd>Esc</kbd> while dragging cancels the connection. The end dot turns green only over a
@@ -14,47 +14,49 @@
 
 <DemoCode />
 
-<div class="demo-canvas">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
-                IsValidConnection="IsValid"
-                OnConnectionChange="c => { _conn = c; StateHasChanged(); }">
-        <ConnectionLineTemplate Context="c">
-            <defs>
-                <linearGradient id="demo-conn-grad" gradientUnits="userSpaceOnUse"
-                                x1="@Inv(c.From.X)" y1="@Inv(c.From.Y)" x2="@Inv(c.To.X)" y2="@Inv(c.To.Y)">
-                    <stop offset="0%" stop-color="#6366f1" />
-                    <stop offset="100%" stop-color="@(c.IsValid ? "#16a34a" : "#a855f7")" />
-                </linearGradient>
-            </defs>
-            <path d="@LinePath(c)" fill="none" stroke="url(#demo-conn-grad)" stroke-width="2.5" stroke-dasharray="8 5">
-                <animate attributeName="stroke-dashoffset" from="13" to="0" dur="0.5s" repeatCount="indefinite" />
-            </path>
-            <circle cx="@Inv(c.To.X)" cy="@Inv(c.To.Y)" r="6"
-                    fill="@(c.IsValid ? "#16a34a" : "#6366f1")" stroke="#fff" stroke-width="2" />
-        </ConnectionLineTemplate>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
+                    IsValidConnection="IsValid"
+                    OnConnectionChange="c => { _conn = c; StateHasChanged(); }">
+            <ConnectionLineTemplate Context="c">
+                <defs>
+                    <linearGradient id="demo-conn-grad" gradientUnits="userSpaceOnUse"
+                                    x1="@Inv(c.From.X)" y1="@Inv(c.From.Y)" x2="@Inv(c.To.X)" y2="@Inv(c.To.Y)">
+                        <stop offset="0%" stop-color="#6366f1" />
+                        <stop offset="100%" stop-color="@(c.IsValid ? "#16a34a" : "#a855f7")" />
+                    </linearGradient>
+                </defs>
+                <path d="@LinePath(c)" fill="none" stroke="url(#demo-conn-grad)" stroke-width="2.5" stroke-dasharray="8 5">
+                    <animate attributeName="stroke-dashoffset" from="13" to="0" dur="0.5s" repeatCount="indefinite" />
+                </path>
+                <circle cx="@Inv(c.To.X)" cy="@Inv(c.To.Y)" r="6"
+                        fill="@(c.IsValid ? "#16a34a" : "#6366f1")" stroke="#fff" stroke-width="2" />
+            </ConnectionLineTemplate>
 
-        <ChildContent>
-            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
-            <BlowControls />
-            <BlowPanel Position="top-right">
-                <div class="conn-state">
-                    <div class="conn-state__title">Connection state</div>
-                    @if (_conn is null)
-                    {
-                        <div class="text-muted">idle - drag from a handle</div>
-                    }
-                    else
-                    {
-                        <div><b>from</b> @_conn.FromNode / @_conn.FromHandleType</div>
-                        <div><b>to</b> (@_conn.To.X.ToString("0"), @_conn.To.Y.ToString("0"))</div>
-                        <div><b>valid target</b>
-                            <span class="@(_conn.IsValid ? "ok" : "no")">@(_conn.IsValid ? "yes" : "no")</span>
-                        </div>
-                    }
-                </div>
-            </BlowPanel>
-        </ChildContent>
-    </BlowCanvas>
+            <ChildContent>
+                <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
+                <BlowControls />
+                <BlowPanel Position="top-right">
+                    <div class="conn-state">
+                        <div class="conn-state__title">Connection state</div>
+                        @if (_conn is null)
+                        {
+                            <div class="bb-muted">idle - drag from a handle</div>
+                        }
+                        else
+                        {
+                            <div><b>from</b> @_conn.FromNode / @_conn.FromHandleType</div>
+                            <div><b>to</b> (@_conn.To.X.ToString("0"), @_conn.To.Y.ToString("0"))</div>
+                            <div><b>valid target</b>
+                                <span class="@(_conn.IsValid ? "ok" : "no")">@(_conn.IsValid ? "yes" : "no")</span>
+                            </div>
+                        }
+                    </div>
+                </BlowPanel>
+            </ChildContent>
+        </BlowCanvas>
+    </div>
 </div>
 
 <style>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/CustomEdges.razor b/src/Utilities/Blow/Demo/Client/Pages/CustomEdges.razor
index a49b102acf1..2eb4b0a0ef8 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/CustomEdges.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/CustomEdges.razor
@@ -1,10 +1,10 @@
 @page "/custom-edges"
 
-<PageTitle>Custom Edges - bit Blow</PageTitle>
+<PageTitle>Custom Edges · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Custom Edges, BlowBaseEdge &amp; Edge Toolbar</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Custom Edges, BlowBaseEdge &amp; Edge Toolbar</h1>
+    <p class="bb-subtitle">
         Edges are drawn with a custom <strong>EdgeTemplate</strong> built on <strong>BlowBaseEdge</strong> +
         <strong>BlowEdgeText</strong> (colored by edge data). Selecting an edge reveals an
         <strong>BlowEdgeToolbar</strong> (HTML overlay) to recolor or delete it. The connection line uses a
@@ -14,41 +14,45 @@
 
 <DemoCode />
 
-<div class="demo-canvas" style="height: calc(100vh - 240px);">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
-                ConnectionLineType="BlowEdgeType.SmoothStep"
-                DefaultEdgeType="BlowEdgeType.SmoothStep">
-        <EdgeTemplate Context="ctx">
-            <BlowBaseEdge Path="@ctx.Geometry.Path"
-                      Stroke="@((ctx.Edge.Data as string) ?? "var(--bit-blow-edge-stroke)")"
-                      StrokeWidth="@(ctx.Edge.Selected ? 3 : 2)"
-                      Label="@ctx.Edge.Label"
-                      LabelX="@ctx.Geometry.LabelX"
-                      LabelY="@ctx.Geometry.LabelY" />
-        </EdgeTemplate>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
+                    ConnectionLineType="BlowEdgeType.SmoothStep"
+                    DefaultEdgeType="BlowEdgeType.SmoothStep">
+            <EdgeTemplate Context="ctx">
+                <BlowBaseEdge Path="@ctx.Geometry.Path"
+                          Stroke="@((ctx.Edge.Data as string) ?? "var(--bit-blow-edge-stroke)")"
+                          StrokeWidth="@(ctx.Edge.Selected ? 3 : 2)"
+                          Label="@ctx.Edge.Label"
+                          LabelX="@ctx.Geometry.LabelX"
+                          LabelY="@ctx.Geometry.LabelY" />
+            </EdgeTemplate>
 
-        <EdgeLabelTemplate Context="ctx">
-            @if (ctx.Edge.Selected)
-            {
-                <BlowEdgeToolbar>
-                    <button class="btn-mini" @onclick="() => Recolor(ctx.Edge)">🎨</button>
-                    <button class="btn-mini danger" @onclick="() => Remove(ctx.Edge)">×</button>
-                </BlowEdgeToolbar>
-            }
-        </EdgeLabelTemplate>
+            <EdgeLabelTemplate Context="ctx">
+                @if (ctx.Edge.Selected)
+                {
+                    <BlowEdgeToolbar>
+                        <button class="btn-mini" @onclick="() => Recolor(ctx.Edge)">🎨</button>
+                        <button class="btn-mini danger" @onclick="() => Remove(ctx.Edge)">×</button>
+                    </BlowEdgeToolbar>
+                }
+            </EdgeLabelTemplate>
 
-        <ChildContent>
-            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
-            <BlowControls />
-            <BlowMiniMap />
-        </ChildContent>
-    </BlowCanvas>
+            <ChildContent>
+                <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
+                <BlowControls />
+                <BlowMiniMap />
+            </ChildContent>
+        </BlowCanvas>
+    </div>
 </div>
 
 <style>
-    .btn-mini { border:1px solid #ddd; background:#fff; border-radius:4px; cursor:pointer; padding:1px 6px; font-size:13px; }
-    .btn-mini.danger { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
-    .btn-mini:hover { background:#f3f4f6; }
+    /* Painted with the canvas's own --bit-blow-* colours, so the toolbar follows its colour mode. */
+    .btn-mini { border:1px solid var(--bit-blow-border); background:var(--bit-blow-surface); color:var(--bit-blow-text); border-radius:4px; cursor:pointer; padding:1px 6px; font-size:13px; }
+    .btn-mini:hover { background:var(--bit-blow-surface-hover); }
+    .btn-mini.danger { color:#ef4444; border-color:color-mix(in srgb, #ef4444 45%, transparent); }
+    .btn-mini.danger:hover { background:color-mix(in srgb, #ef4444 14%, var(--bit-blow-surface)); }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/CustomNodes.razor b/src/Utilities/Blow/Demo/Client/Pages/CustomNodes.razor
index edecec0091f..28047112471 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/CustomNodes.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/CustomNodes.razor
@@ -1,52 +1,54 @@
 @page "/custom-nodes"
 
-<PageTitle>Custom Nodes - bit Blow</PageTitle>
+<PageTitle>Custom Nodes · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Custom Nodes</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Custom Nodes</h1>
+    <p class="bb-subtitle">
         Nodes rendered with a custom template. The "color" node has multiple labelled source handles.
     </p>
 </div>
 
 <DemoCode />
 
-<div class="demo-canvas">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
-        <NodeTemplate Context="node">
-            @if (node.Type == "color" && node.Data is ColorData data)
-            {
-                <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Left" />
-                <div class="custom-node">
-                    <div class="custom-node__swatch" style="background:@data.Color"></div>
-                    <div class="custom-node__body">
-                        <strong>@node.Label</strong>
-                        <div class="custom-node__hex">@data.Color</div>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
+            <NodeTemplate Context="node">
+                @if (node.Type == "color" && node.Data is ColorData data)
+                {
+                    <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Left" />
+                    <div class="custom-node">
+                        <div class="custom-node__swatch" style="background:@data.Color"></div>
+                        <div class="custom-node__body">
+                            <strong>@node.Label</strong>
+                            <div class="custom-node__hex">@data.Color</div>
+                        </div>
                     </div>
-                </div>
-                <BlowHandle Type="BlowHandleType.Source" Id="a" Position="BlowPosition.Right" Style="top:35%" />
-                <BlowHandle Type="BlowHandleType.Source" Id="b" Position="BlowPosition.Right" Style="top:65%" />
-            }
-            else
-            {
-                <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Top" />
-                <div>@node.Label</div>
-                <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Bottom" />
-            }
-        </NodeTemplate>
+                    <BlowHandle Type="BlowHandleType.Source" Id="a" Position="BlowPosition.Right" Style="top:35%" />
+                    <BlowHandle Type="BlowHandleType.Source" Id="b" Position="BlowPosition.Right" Style="top:65%" />
+                }
+                else
+                {
+                    <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Top" />
+                    <div>@node.Label</div>
+                    <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Bottom" />
+                }
+            </NodeTemplate>
 
-        <ChildContent>
-            <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="24" Color="#eee" />
-            <BlowControls />
-        </ChildContent>
-    </BlowCanvas>
+            <ChildContent>
+                <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="24" Color="var(--bit-blow-border-subtle)" />
+                <BlowControls />
+            </ChildContent>
+        </BlowCanvas>
+    </div>
 </div>
 
 <style>
     .custom-node { display:flex; align-items:center; gap:10px; padding:2px; }
     .custom-node__swatch { width:28px; height:28px; border-radius:6px; border:1px solid rgba(0,0,0,0.15); }
     .custom-node__body { text-align:left; }
-    .custom-node__hex { font-size:11px; color:#888; }
+    .custom-node__hex { font-size:11px; color:var(--bit-blow-text-muted); }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/DragThresholdDemo.razor b/src/Utilities/Blow/Demo/Client/Pages/DragThresholdDemo.razor
index 00092bf847f..e4537ea536b 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/DragThresholdDemo.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/DragThresholdDemo.razor
@@ -1,10 +1,10 @@
 @page "/drag-threshold"
 
-<PageTitle>Node Drag Threshold - bit Blow</PageTitle>
+<PageTitle>Node Drag Threshold · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Node Drag Threshold</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Node Drag Threshold</h1>
+    <p class="bb-subtitle">
         The new <code>NodeDragThreshold</code> parameter sets how far (in screen pixels) the pointer must travel
         before a node actually starts moving. Below the threshold the gesture counts as a click, so the node
         selects but stays put - handy for preventing accidental nudges. Increase the threshold and try a small
@@ -14,23 +14,24 @@
 
 <DemoCode />
 
-<div class="example-toolbar">
-    <label>threshold:
-        <input type="range" min="0" max="80" step="1" value="@_threshold"
-               @oninput="e => _threshold = double.Parse(e.Value!.ToString()!)" />
-        <strong>@_threshold px</strong>
-    </label>
-    <span class="text-muted">last gesture: @_lastGesture</span>
-</div>
-
-<div class="demo-canvas" style="height: calc(100vh - 250px);">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
-                NodeDragThreshold="_threshold"
-                OnNodeDragStart="n => _dragStart = n.Position"
-                OnNodeDragStop="OnDragStop">
-        <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
-        <BlowControls />
-    </BlowCanvas>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="bb-demo-bar example-toolbar">
+        <label>threshold:
+            <input type="range" min="0" max="80" step="1" value="@_threshold"
+                   @oninput="e => _threshold = double.Parse(e.Value!.ToString()!)" />
+            <strong>@_threshold px</strong>
+        </label>
+        <span class="bb-muted">last gesture: @_lastGesture</span>
+    </div>
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
+                    NodeDragThreshold="_threshold"
+                    OnNodeDragStart="n => _dragStart = n.Position"
+                    OnNodeDragStop="OnDragStop">
+            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
+            <BlowControls />
+        </BlowCanvas>
+    </div>
 </div>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/EdgeTypes.razor b/src/Utilities/Blow/Demo/Client/Pages/EdgeTypes.razor
index 7307c44b464..7e4771a5328 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/EdgeTypes.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/EdgeTypes.razor
@@ -1,10 +1,10 @@
 @page "/edge-types"
 
-<PageTitle>Edge Types - bit Blow</PageTitle>
+<PageTitle>Edge Types · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Edge Types &amp; Markers</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Edge Types &amp; Markers</h1>
+    <p class="bb-subtitle">
         Four of the five built-in edge path algorithms: bezier, straight, step and smoothstep.
         The last two show <strong>arrow markers</strong> - a closed arrowhead and a double-ended edge.
     </p>
@@ -12,12 +12,14 @@
 
 <DemoCode />
 
-<div class="demo-canvas">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" DefaultEdgeType="BlowEdgeType.SmoothStep">
-        <BlowBackground />
-        <BlowControls />
-        <BlowMiniMap />
-    </BlowCanvas>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" DefaultEdgeType="BlowEdgeType.SmoothStep">
+            <BlowBackground />
+            <BlowControls />
+            <BlowMiniMap />
+        </BlowCanvas>
+    </div>
 </div>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/A11yExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/A11yExample.razor
index 5d847412f1b..905d84def2f 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/A11yExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/A11yExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/a11y"
 
-<PageTitle>Accessibility - bit Blow</PageTitle>
+<PageTitle>Accessibility · Blow</PageTitle>
 
 <ExampleScaffold Title="Accessibility"
                  Summary="Nodes are keyboard focusable with descriptive aria labels. Tab to a node, then use the arrow keys to move it (hold Shift for larger steps). Delete removes the selection.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/AddNodeOnEdgeDropExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/AddNodeOnEdgeDropExample.razor
index 962c8666f19..4a8fbfeb1fa 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/AddNodeOnEdgeDropExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/AddNodeOnEdgeDropExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/add-node-on-edge-drop"
 
-<PageTitle>Add Node on Edge Drop - bit Blow</PageTitle>
+<PageTitle>Add Node on Edge Drop · Blow</PageTitle>
 
 <ExampleScaffold Title="Add Node on Edge Drop"
                  Summary="Drag a connection from a handle and release it on empty canvas. A new node is created where you dropped, already connected - downstream when you dragged from a source handle, upstream when you dragged from a target handle. Releasing on a handle connects normally; a click, Escape or a reconnect adds nothing.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignDistributeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignDistributeExample.razor
index 4232b18e373..6b3ea4f0b21 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignDistributeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignDistributeExample.razor
@@ -1,27 +1,27 @@
 @page "/examples/align-distribute"
-<PageTitle>Align &amp; Distribute - bit Blow</PageTitle>
+<PageTitle>Align &amp; Distribute · Blow</PageTitle>
 
 <ExampleScaffold Title="Align &amp; Distribute"
                  Summary="Select two or more nodes - shift-drag a box round them, or shift-click them one at a time - and line them up or space them out. This is the tidy-up pass every drawing tool has, and it writes nothing but Node.Position, so it composes with undo, extents and sub-flows.">
     <Toolbar>
         <span class="group-label">Align</span>
-        <button class="btn" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Left)" title="Align left edges">⇤</button>
-        <button class="btn" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.CenterX)" title="Centre horizontally">⇹</button>
-        <button class="btn" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Right)" title="Align right edges">⇥</button>
-        <button class="btn" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Top)" title="Align top edges">⤒</button>
-        <button class="btn" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.CenterY)" title="Centre vertically">⇳</button>
-        <button class="btn" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Bottom)" title="Align bottom edges">⤓</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Left)" title="Align left edges">⇤</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.CenterX)" title="Centre horizontally">⇹</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Right)" title="Align right edges">⇥</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Top)" title="Align top edges">⤒</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.CenterY)" title="Centre vertically">⇳</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Align(BlowAlignEdge.Bottom)" title="Align bottom edges">⤓</button>
 
         <span class="group-label">Distribute</span>
-        <button class="btn" disabled="@(_selected < 3)" @onclick="() => Distribute(true)">Horizontally</button>
-        <button class="btn" disabled="@(_selected < 3)" @onclick="() => Distribute(false)">Vertically</button>
+        <button class="btn btn-secondary" disabled="@(_selected < 3)" @onclick="() => Distribute(true)">Horizontally</button>
+        <button class="btn btn-secondary" disabled="@(_selected < 3)" @onclick="() => Distribute(false)">Vertically</button>
 
         <span class="group-label">Gap</span>
-        <button class="btn" disabled="@TooFew" @onclick="() => Pack(true)">Pack 24px →</button>
-        <button class="btn" disabled="@TooFew" @onclick="() => Pack(false)">Pack 24px ↓</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Pack(true)">Pack 24px →</button>
+        <button class="btn btn-secondary" disabled="@TooFew" @onclick="() => Pack(false)">Pack 24px ↓</button>
 
-        <button class="btn" @onclick="SelectAll">Select all</button>
-        <button class="btn" @onclick="Scatter">Scatter</button>
+        <button class="btn btn-secondary" @onclick="SelectAll">Select all</button>
+        <button class="btn btn-secondary" @onclick="Scatter">Scatter</button>
 
         <span class="selection-count">@_selected selected</span>
     </Toolbar>
@@ -46,9 +46,9 @@
 </ExampleScaffold>
 
 <style>
-    .group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-left: .75rem; }
+    .group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bb-text-soft); margin-left: .75rem; }
     .group-label:first-child { margin-left: 0; }
-    .selection-count { margin-left: auto; font-size: 12px; color: #6b7280; }
+    .selection-count { margin-left: auto; font-size: 12px; color: var(--bb-text-soft); }
     .hint {
         max-width: 240px;
         padding: 6px 10px;
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignmentGuidesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignmentGuidesExample.razor
index 4c6bd24f991..fe1d4728933 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignmentGuidesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/AlignmentGuidesExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/alignment-guides"
 
-<PageTitle>Alignment Guides - bit Blow</PageTitle>
+<PageTitle>Alignment Guides · Blow</PageTitle>
 
 <ExampleScaffold Title="Alignment Guides"
                  Summary="Drag a node near another and it clicks into line with it - by left edge, centre or right edge, and the same three on the other axis. A thin guide shows what it lined up with. The snap distance is measured on screen, so it feels the same however far you have zoomed in.">
@@ -27,7 +27,7 @@
                     SnapGridX="20"
                     SnapGridY="20"
                     FitViewOnInit="true">
-            <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="20" Color="#eee" />
+            <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="20" Color="var(--bit-blow-border-subtle)" />
             <BlowControls />
             <BlowPanel Anchor="BlowPanelPosition.TopRight">
                 <div class="guide-hint">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/AutoPanExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/AutoPanExample.razor
index db8bd0ad8be..68cf1eabee9 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/AutoPanExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/AutoPanExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/auto-pan"
 
-<PageTitle>Auto Pan &amp; Pinch - bit Blow</PageTitle>
+<PageTitle>Auto Pan &amp; Pinch · Blow</PageTitle>
 
 <ExampleScaffold Title="Auto Pan &amp; Pinch"
                  Summary="Drag a node (or a connection) toward the edge of the canvas and hold it there: the viewport scrolls to follow, so you can move things well beyond the visible area. On a touch device, two fingers pinch to zoom about the midpoint between them.">
@@ -26,7 +26,7 @@
                     AutoPanMargin="_margin"
                     ZoomOnPinch="_pinch"
                     OnViewportChanged="@(vp => _viewport = vp)">
-            <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="40" Color="#e5e7eb" />
+            <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="40" Color="var(--bit-blow-border)" />
             <BlowControls />
             <BlowMiniMap Pannable="true" Zoomable="true" />
             <BlowPanel Anchor="BlowPanelPosition.TopLeft">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/BackgroundsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/BackgroundsExample.razor
index 23e4b1da264..e00064a1a09 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/BackgroundsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/BackgroundsExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/backgrounds"
 
-<PageTitle>Backgrounds - bit Blow</PageTitle>
+<PageTitle>Backgrounds · Blow</PageTitle>
 
 <ExampleScaffold Title="Backgrounds"
                  Summary="The Background component supports dots, lines and cross patterns. Adjust the variant, gap and color, or stack two backgrounds for a grid-with-dots effect.">
@@ -20,7 +20,7 @@
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
             @if (_stacked)
             {
-                <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="_gap * 4" Color="#e5e7eb" />
+                <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="_gap * 4" Color="var(--bit-blow-border)" />
             }
             <BlowBackground Variant="_variant" Gap="_gap" Color="#9ca3af" />
             <BlowControls />
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/BasicExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/BasicExample.razor
index 82ac8542bdd..2ab7ef57c54 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/BasicExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/BasicExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/basic"
 
-<PageTitle>Basic - bit Blow</PageTitle>
+<PageTitle>Basic · Blow</PageTitle>
 
 <ExampleScaffold Title="Basic"
                  Summary="The minimal flow: a handful of nodes and edges with panning, zooming, selection and connecting.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/BrokenNodesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/BrokenNodesExample.razor
index da8b10c159f..0b2fd07fe61 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/BrokenNodesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/BrokenNodesExample.razor
@@ -1,11 +1,11 @@
 @page "/examples/broken-nodes"
 
-<PageTitle>Broken Nodes - bit Blow</PageTitle>
+<PageTitle>Broken Nodes · Blow</PageTitle>
 
 <ExampleScaffold Title="Broken Nodes"
                  Summary="Edges that reference missing nodes or handles are simply skipped instead of throwing. Toggle the missing node to see its edges appear and disappear.">
     <Toolbar>
-        <button class="btn btn-sm" @onclick="ToggleGhost">@(_hasGhost ? "Remove" : "Add") node 3</button>
+        <button class="btn btn-secondary" @onclick="ToggleGhost">@(_hasGhost ? "Remove" : "Add") node 3</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/BuiltInUndoRedoExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/BuiltInUndoRedoExample.razor
index 29c9a72022c..25eb0bfe22c 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/BuiltInUndoRedoExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/BuiltInUndoRedoExample.razor
@@ -1,16 +1,16 @@
 @page "/examples/built-in-undo-redo"
-<PageTitle>Built-in Undo &amp; Redo - bit Blow</PageTitle>
+<PageTitle>Built-in Undo &amp; Redo · Blow</PageTitle>
 
 <ExampleScaffold Title="Built-in Undo &amp; Redo"
                  Summary="Set HistoryEnabled and the canvas keeps its own undo stack, recording a step at each point a user would recognise as one - a drag finished, an edge connected, something deleted, pasted, resized, aligned or nudged - and binding Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z. Selecting and panning are not edits, so they are not steps.">
     <Toolbar>
-        <button class="btn" disabled="@(!_state.CanUndo)" @onclick="Undo">↶ Undo</button>
-        <button class="btn" disabled="@(!_state.CanRedo)" @onclick="Redo">↷ Redo</button>
+        <button class="btn btn-secondary" disabled="@(!_state.CanUndo)" @onclick="Undo">↶ Undo</button>
+        <button class="btn btn-secondary" disabled="@(!_state.CanRedo)" @onclick="Redo">↷ Redo</button>
 
         <span class="group-label">Make an edit</span>
-        <button class="btn" @onclick="AddNode">Add node</button>
-        <button class="btn" @onclick="DeleteSelection">Delete selection</button>
-        <button class="btn" @onclick="AlignLeft">Align left</button>
+        <button class="btn btn-secondary" @onclick="AddNode">Add node</button>
+        <button class="btn btn-secondary" @onclick="DeleteSelection">Delete selection</button>
+        <button class="btn btn-secondary" @onclick="AlignLeft">Align left</button>
 
         <span class="depth">@_state.UndoDepth back · @_state.RedoDepth forward</span>
     </Toolbar>
@@ -38,8 +38,8 @@
 </ExampleScaffold>
 
 <style>
-    .group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-left: .75rem; }
-    .depth { margin-left: auto; font-size: 12px; color: #6b7280; }
+    .group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bb-text-soft); margin-left: .75rem; }
+    .depth { margin-left: auto; font-size: 12px; color: var(--bb-text-soft); }
     .hint {
         max-width: 250px;
         padding: 8px 10px;
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/CancelConnectionExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/CancelConnectionExample.razor
index 690a5878731..917bec047cf 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/CancelConnectionExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/CancelConnectionExample.razor
@@ -1,11 +1,11 @@
 @page "/examples/cancel-connection"
 
-<PageTitle>Cancel Connection - bit Blow</PageTitle>
+<PageTitle>Cancel Connection · Blow</PageTitle>
 
 <ExampleScaffold Title="Cancel Connection"
                  Summary="Start dragging a connection from a handle, then press Escape to cancel it before releasing. The status line tracks the connection lifecycle.">
     <Toolbar>
-        <span class="text-muted">status: <strong>@_status</strong></span>
+        <span class="bb-muted">status: <strong>@_status</strong></span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ClickDistanceExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ClickDistanceExample.razor
index e6f3c4a9fc6..adbb6f3dd2f 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ClickDistanceExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ClickDistanceExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/click-distance"
 
-<PageTitle>Click Distance - bit Blow</PageTitle>
+<PageTitle>Click Distance · Blow</PageTitle>
 
 <ExampleScaffold Title="Click Distance"
                  Summary="NodeClickDistance and PaneClickDistance set how far the pointer may travel between press and release and still count as a click. Press a node or the empty pane, move a little, and let go: within the distance OnNodeClick / OnPaneClick still fire; past it the gesture was a drag or a pan, and the click is suppressed.">
@@ -15,7 +15,7 @@
                    @oninput="e => _paneDistance = int.Parse(e.Value!.ToString()!)" />
             @_paneDistance px
         </label>
-        <span class="text-muted">
+        <span class="bb-muted">
             node clicks: <strong>@_nodeClicks</strong> · pane clicks: <strong>@_paneClicks</strong> · last: @_last
         </span>
     </Toolbar>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ColorModeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ColorModeExample.razor
index 55092552443..863503f4b04 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ColorModeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ColorModeExample.razor
@@ -1,13 +1,14 @@
 @page "/examples/color-mode"
 @inject IJSRuntime JS
 
-<PageTitle>Color Mode - bit Blow</PageTitle>
+<PageTitle>Color Mode · Blow</PageTitle>
 
 <ExampleScaffold Title="Color Mode"
-                 Summary="Switch between light, dark and system colour themes. Every part of the component follows - not only the canvas and its nodes, but the control bar, the minimap, node toolbars, edge labels and the attribution badge, all of which take their colours from the same set of CSS custom properties.">
+                 Summary="Switch between light, dark and system colour themes - or leave the flow to this site's own light/dark toggle. Every part of the component follows - not only the canvas and its nodes, but the control bar, the minimap, node toolbars, edge labels and the attribution badge, all of which take their colours from the same set of CSS custom properties.">
     <Toolbar>
         <label>theme:
-            <select @onchange="e => _mode = Enum.Parse<BlowColorMode>(e.Value!.ToString()!)">
+            <select @bind="_choice">
+                <option value="Site">Site theme</option>
                 <option value="Light">Light</option>
                 <option value="Dark">Dark</option>
                 <option value="System">System</option>
@@ -19,8 +20,8 @@
         <span class="note">Select a node to see its toolbar; the whole surface is themed.</span>
     </Toolbar>
     <ChildContent>
-        <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true" ColorMode="_mode"
-                    Class="@(_teal ? "teal-accent" : null)">
+        <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true" ColorMode="Mode"
+                    Class="@CanvasClass">
             <NodeTemplate Context="node">
                 <BlowNodeToolbar Position="BlowPosition.Top">
                     <button @onclick="@(() => Rename(node))">Rename</button>
@@ -58,9 +59,10 @@
         --bit-blow-node-selected: #0d9488;
         --bit-blow-edge-selected: #0d9488;
         --bit-blow-connection-stroke: #0d9488;
+        --bit-blow-dark-accent: #2dd4bf;       /* the same three in dark mode */
     }
 
-    .note { margin-left: auto; font-size: 11px; color: #6b7280; }
+    .note { margin-left: auto; font-size: 11px; color: var(--bb-text-soft); }
     .hint {
         max-width: 220px;
         padding: 6px 10px;
@@ -77,7 +79,20 @@
     private BlowCanvas? _flow;
     private List<BlowNode> _nodes = [];
     private List<BlowEdge> _edges = [];
-    private BlowColorMode _mode = BlowColorMode.Light;
+    private string _choice = "Site";
+
+    private BlowColorMode Mode => _choice switch
+    {
+        "Dark" => BlowColorMode.Dark,
+        "System" => BlowColorMode.System,
+        _ => BlowColorMode.Light,
+    };
+
+    // This site paints every flow in its own light/dark theme (its stylesheet copies the dark palette over the
+    // light one while the site is dark). "Site theme" leaves the canvas to that; any other choice is the
+    // canvas's own ColorMode, and own-color-mode tells the site's stylesheet to keep out of it.
+    private string CanvasClass => $"{(_choice == "Site" ? "" : "own-color-mode")} {(_teal ? "teal-accent" : "")}".Trim();
+
     private bool _teal;
 
     protected override void OnInitialized()
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionModeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionModeExample.razor
index 269e017b22d..f20d085e2ae 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionModeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionModeExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/connection-mode"
 
-<PageTitle>Connection Mode - bit Blow</PageTitle>
+<PageTitle>Connection Mode · Blow</PageTitle>
 
 <ExampleScaffold Title="Connection Mode"
                  Summary="Strict mode only allows source→target connections. Loose mode lets any handle connect to any other handle. Toggle the mode and try connecting handles of the same type.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionRulesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionRulesExample.razor
index 978c9b7075e..6227da142a8 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionRulesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ConnectionRulesExample.razor
@@ -1,13 +1,13 @@
 @page "/examples/connection-rules"
 
-<PageTitle>Connection Rules - bit Blow</PageTitle>
+<PageTitle>Connection Rules · Blow</PageTitle>
 
 <ExampleScaffold Title="Connection Rules"
                  Summary="The canvas rejects connections that would duplicate an existing edge, touch a node that opted out of connecting, or loop a node back to itself - unless you allow it. Toggle the rules and watch which handles light up green while you drag.">
     <Toolbar>
         <label><input type="checkbox" checked="@_preventDuplicates" @onchange="@(e => _preventDuplicates = (bool)e.Value!)" /> Prevent duplicate edges</label>
         <label><input type="checkbox" checked="@_allowSelf" @onchange="@(e => _allowSelf = (bool)e.Value!)" /> Allow self-connections</label>
-        <button class="btn btn-sm btn-primary" @onclick="Reset">Reset edges</button>
+        <button class="btn btn-primary" @onclick="Reset">Reset edges</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow"
@@ -48,7 +48,7 @@
 
 <style>
     .rule-node { padding: 4px 2px; }
-    .rule-flag { margin-top: 4px; font-size: 10px; color: #b91c1c; }
+    .rule-flag { margin-top: 4px; font-size: 10px; color: #ef4444; }
     .rule-log { min-width: 150px; padding: 8px 10px; font-size: 12px; background: var(--bit-blow-surface); color: var(--bit-blow-text); border: 1px solid var(--bit-blow-border); border-radius: 6px; }
 </style>
 
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledUncontrolledExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledUncontrolledExample.razor
index 539076f2e78..0048b1061d8 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledUncontrolledExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledUncontrolledExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/controlled-uncontrolled"
 
-<PageTitle>Controlled vs Uncontrolled - bit Blow</PageTitle>
+<PageTitle>Controlled vs Uncontrolled · Blow</PageTitle>
 
 <ExampleScaffold Title="Controlled vs Uncontrolled"
                  Summary="Controlled: the page subscribes to NodesChanged/EdgesChanged and keeps its own view of the graph in step with every edit as it happens. Uncontrolled: the page subscribes to nothing - the canvas edits the lists it was handed on its own, and the page only learns what changed when it asks the canvas through a component reference. Toggle, drag, connect or delete, and compare.">
@@ -8,12 +8,12 @@
         <label><input type="checkbox" checked="@_controlled" @onchange="OnModeChanged" /> controlled</label>
         @if (_controlled)
         {
-            <span class="text-muted">page state: @_nodeCount nodes, @_edgeCount edges (last change @_lastChange)</span>
+            <span class="bb-muted">page state: @_nodeCount nodes, @_edgeCount edges (last change @_lastChange)</span>
         }
         else
         {
-            <button class="btn btn-sm" @onclick="ReadFromCanvas">Ask the canvas</button>
-            <span class="text-muted">last read: @_lastRead</span>
+            <button class="btn btn-secondary" @onclick="ReadFromCanvas">Ask the canvas</button>
+            <span class="bb-muted">last read: @_lastRead</span>
         }
     </Toolbar>
     <ChildContent>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledViewportExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledViewportExample.razor
index c18021ac762..5535a244c1f 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledViewportExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ControlledViewportExample.razor
@@ -1,14 +1,14 @@
 @page "/examples/controlled-viewport"
 
-<PageTitle>Controlled Viewport - bit Blow</PageTitle>
+<PageTitle>Controlled Viewport · Blow</PageTitle>
 
 <ExampleScaffold Title="Controlled Viewport"
                  Summary="Drive the viewport from your own state. The canvas's Viewport parameter is bound to a field that OnViewportChanged keeps up to date as you pan and zoom; Reset and Center write that field directly and the canvas follows. Fit goes through the imperative API, which reports back through the same callback.">
     <Toolbar>
-        <span class="text-muted">x: @_vp.X.ToString("0") · y: @_vp.Y.ToString("0") · zoom: @_vp.Zoom.ToString("0.00")</span>
-        <button class="btn btn-sm" @onclick="@(() => _vp = new BlowViewport(0, 0, 1))">Reset</button>
-        <button class="btn btn-sm" @onclick="CenterOrigin">Center origin</button>
-        <button class="btn btn-sm" @onclick="@(() => _flow?.FitView())">Fit</button>
+        <span class="bb-muted">x: @_vp.X.ToString("0") · y: @_vp.Y.ToString("0") · zoom: @_vp.Zoom.ToString("0.00")</span>
+        <button class="btn btn-secondary" @onclick="@(() => _vp = new BlowViewport(0, 0, 1))">Reset</button>
+        <button class="btn btn-secondary" @onclick="CenterOrigin">Center origin</button>
+        <button class="btn btn-secondary" @onclick="@(() => _flow?.FitView())">Fit</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/CopyPasteExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/CopyPasteExample.razor
index 15c3933ad56..70fe0202b2d 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/CopyPasteExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/CopyPasteExample.razor
@@ -1,14 +1,14 @@
 @page "/examples/copy-paste"
 
-<PageTitle>Copy & Paste - bit Blow</PageTitle>
+<PageTitle>Copy & Paste · Blow</PageTitle>
 
 <ExampleScaffold Title="Copy & Paste"
                  Summary="Select some nodes and press Ctrl/Cmd+C then V, or X to cut, or D to duplicate. Cloning a selection sounds trivial until the details bite: ids must stay unique across repeated pastes, edges have to be rewired to the copies, an edge leaving the selection must not come along, and a copied child has to land inside the copied parent rather than drifting out of it.">
     <Toolbar>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Copy">Copy</button>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Cut">Cut</button>
-        <button class="btn btn-sm btn-primary" disabled="@(_flow is null || !_flow.CanPaste)" @onclick="Paste">Paste</button>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Duplicate">Duplicate</button>
+        <button class="btn btn-secondary" @onclick="Copy">Copy</button>
+        <button class="btn btn-secondary" @onclick="Cut">Cut</button>
+        <button class="btn btn-primary" disabled="@(_flow is null || !_flow.CanPaste)" @onclick="Paste">Paste</button>
+        <button class="btn btn-secondary" @onclick="Duplicate">Duplicate</button>
         <span class="cp-status">@_status</span>
     </Toolbar>
     <ChildContent>
@@ -38,7 +38,7 @@
 
 <style>
     .cp-shell { height: 100%; }
-    .cp-status { font-size: 12px; color: #374151; margin-left: 0.5rem; }
+    .cp-status { font-size: 12px; color: var(--bb-text-muted); margin-left: 0.5rem; }
     .cp-hint {
         max-width: 220px;
         padding: 6px 10px;
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomConnectionLineExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomConnectionLineExample.razor
index db1cce52c0a..0f936477ece 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomConnectionLineExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomConnectionLineExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/custom-connection-line"
 
-<PageTitle>Custom Connection Line - bit Blow</PageTitle>
+<PageTitle>Custom Connection Line · Blow</PageTitle>
 
 <ExampleScaffold Title="Custom Connection Line"
                  Summary="Customize the line drawn while creating a connection. Drag from a handle: the line is a dashed gradient stroke, indigo at the handle and pink at the pointer, with a moving end dot - and both turn green over a valid target.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomEdgesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomEdgesExample.razor
index 2040e6b3adc..00a09fcb12c 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomEdgesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomEdgesExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/custom-edges"
 
-<PageTitle>Custom Edges - bit Blow</PageTitle>
+<PageTitle>Custom Edges · Blow</PageTitle>
 
 <ExampleScaffold Title="Custom Edges"
                  Summary="A custom EdgeTemplate built on BlowBaseEdge: the stroke color and width come from each edge's data, and selected edges thicken. Connection lines use the same smooth-step style.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomMiniMapNodeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomMiniMapNodeExample.razor
index 86ed98ecee4..ffccc83f543 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomMiniMapNodeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomMiniMapNodeExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/custom-minimap-node"
 
-<PageTitle>Custom MiniMap Node - bit Blow</PageTitle>
+<PageTitle>Custom MiniMap Node · Blow</PageTitle>
 
 <ExampleScaffold Title="Custom MiniMap Node"
                  Summary="Color the minimap nodes by type and outline the selected node, using the BlowMiniMap's NodeColorFunc and NodeStrokeColorFunc. Select a node to see its minimap outline.">
@@ -44,5 +44,6 @@
         _ => "#fbbf24",
     };
 
-    private string NodeStroke(BlowNode n) => n.Selected ? "#111827" : "transparent";
+    // A theme property rather than a fixed colour, so the outline stays visible in the dark colour mode.
+    private string NodeStroke(BlowNode n) => n.Selected ? "var(--bit-blow-text)" : "transparent";
 }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomNodeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomNodeExample.razor
index 040b6ebec52..51d24c64cce 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomNodeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/CustomNodeExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/custom-node"
 
-<PageTitle>Custom Node - bit Blow</PageTitle>
+<PageTitle>Custom Node · Blow</PageTitle>
 
 <ExampleScaffold Title="Custom Node"
                  Summary="A custom 'text updater' node with its own markup, an input bound to node data, and explicitly placed handles. Edits flow through to a connected output.">
@@ -31,8 +31,8 @@
 
 <style>
     .text-updater { padding: 4px 2px; font-size: 12px; text-align: left; }
-    .text-updater label { display:block; color:#555; margin-bottom:3px; }
-    .text-updater input { width: 130px; padding: 3px 6px; border:1px solid #ddd; border-radius:5px; }
+    .text-updater label { display:block; color:var(--bit-blow-text-muted); margin-bottom:3px; }
+    .text-updater input { width: 130px; padding: 3px 6px; color:var(--bit-blow-text); background:var(--bit-blow-surface); border:1px solid var(--bit-blow-border); border-radius:5px; }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultEdgeOverwriteExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultEdgeOverwriteExample.razor
index 4545e1b1553..d53a711f69f 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultEdgeOverwriteExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultEdgeOverwriteExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/default-edge-overwrite"
 
-<PageTitle>Default Edge Overwrite - bit Blow</PageTitle>
+<PageTitle>Default Edge Overwrite · Blow</PageTitle>
 
 <ExampleScaffold Title="Default Edge Overwrite"
                  Summary="DefaultEdgeOptions apply to every newly created edge. Here new connections are animated smooth-step edges with a closed arrow and a thicker indigo stroke.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodeOverwriteExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodeOverwriteExample.razor
index 8a5b4e3f3fe..9cdc7a6151a 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodeOverwriteExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodeOverwriteExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/default-node-overwrite"
 
-<PageTitle>Default Node Overwrite - bit Blow</PageTitle>
+<PageTitle>Default Node Overwrite · Blow</PageTitle>
 
 <ExampleScaffold Title="Default Node Overwrite"
                  Summary="Replace the built-in 'default' node renderer with your own. Here every default node becomes a rounded card with an accent bar, while input/output keep their built-in look.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodesExample.razor
index b596da5f39c..7b054f16fb9 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DefaultNodesExample.razor
@@ -1,11 +1,11 @@
 @page "/examples/default-nodes"
 
-<PageTitle>Default Nodes - bit Blow</PageTitle>
+<PageTitle>Default Nodes · Blow</PageTitle>
 
 <ExampleScaffold Title="Default Nodes"
                  Summary="The three built-in node types: an input node (source handle only), a default node (both) and an output node (target handle only).">
     <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
-        <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="24" Color="#eee" />
+        <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="24" Color="var(--bit-blow-border-subtle)" />
         <BlowControls />
         <BlowMiniMap />
     </BlowCanvas>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DeleteProtectionExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DeleteProtectionExample.razor
index 14bd7640a8d..b283d13eb46 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DeleteProtectionExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DeleteProtectionExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/delete-protection"
 
-<PageTitle>Delete Protection - bit Blow</PageTitle>
+<PageTitle>Delete Protection · Blow</PageTitle>
 
 <ExampleScaffold Title="Delete Protection"
                  Summary="Nodes and edges carry Deletable and Selectable flags. Select everything (Ctrl+A) and press Delete: the locked node survives, the read-only node never even selects, and edges dangling off a deleted node are still cleaned up.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="Reset">Reset</button>
-        <span class="text-muted">Ctrl+A selects all · Delete removes · Escape clears</span>
+        <button class="btn btn-primary" @onclick="Reset">Reset</button>
+        <span class="bb-muted">Ctrl+A selects all · Delete removes · Escape clears</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow"
@@ -41,7 +41,7 @@
 
 <style>
     .prot-node { padding: 4px 2px; }
-    .prot-flags { margin-top: 4px; font-size: 10px; color: #6b7280; }
+    .prot-flags { margin-top: 4px; font-size: 10px; color: var(--bit-blow-text-muted); }
     .prot-log { min-width: 180px; padding: 8px 10px; font-size: 12px; background: var(--bit-blow-surface); color: var(--bit-blow-text); border: 1px solid var(--bit-blow-border); border-radius: 6px; }
 </style>
 
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DevToolsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DevToolsExample.razor
index 7ab0f2e12e5..be0f26540b5 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DevToolsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DevToolsExample.razor
@@ -1,10 +1,9 @@
 @page "/examples/devtools"
 
-<PageTitle>DevTools - bit Blow</PageTitle>
+<PageTitle>DevTools · Blow</PageTitle>
 
 <ExampleScaffold Title="DevTools"
-                 Summary="Inspector panels in the spirit of React Flow's DevTools: a live viewport logger, a node inspector and a change log. Drag and select nodes to see updates."
-                 Height="calc(100vh - 230px)">
+                 Summary="Inspector panels in the spirit of React Flow's DevTools: a live viewport logger, a node inspector and a change log. Drag and select nodes to see updates.">
     <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
                 OnViewportChanged="v => { _vp = v; StateHasChanged(); }"
                 OnNodeDragStop="OnNodeDragStop"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DiagnosticsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DiagnosticsExample.razor
index 116c06c49a0..327c43023c8 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DiagnosticsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DiagnosticsExample.razor
@@ -1,14 +1,14 @@
 @page "/examples/diagnostics"
 
-<PageTitle>Diagnostics - bit Blow</PageTitle>
+<PageTitle>Diagnostics · Blow</PageTitle>
 
 <ExampleScaffold Title="Diagnostics"
                  Summary="A graph assembled from real data is not always well formed. Rather than throwing, the canvas reports what it found through OnError and carries on drawing what it can - each distinct problem once, not on every render. Break the graph with the buttons and watch the log.">
     <Toolbar>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="AddDanglingEdge">Add dangling edge</button>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="AddDuplicateId">Add duplicate id</button>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="AddOrphan">Add orphan child</button>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Reset">Reset</button>
+        <button class="btn btn-secondary" @onclick="AddDanglingEdge">Add dangling edge</button>
+        <button class="btn btn-secondary" @onclick="AddDuplicateId">Add duplicate id</button>
+        <button class="btn btn-secondary" @onclick="AddOrphan">Add orphan child</button>
+        <button class="btn btn-secondary" @onclick="Reset">Reset</button>
     </Toolbar>
     <ChildContent>
         @* The canvas reports each distinct problem once for its lifetime, so Reset mounts a new
@@ -53,7 +53,7 @@
     }
     .diag-empty { color: var(--bit-blow-text-muted); }
     .diag-row { margin-top: 6px; }
-    .diag-row code { color: #b91c1c; }
+    .diag-row code { color: #ef4444; }
 
     @@media (max-width: 640px) {
         .diag-log { width: 200px; max-height: 140px; }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DragHandleExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DragHandleExample.razor
index 0859aa4d64c..2416d7a5d19 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DragHandleExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DragHandleExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/drag-handle"
 
-<PageTitle>Drag Handle - bit Blow</PageTitle>
+<PageTitle>Drag Handle · Blow</PageTitle>
 
 <ExampleScaffold Title="Drag Handle"
                  Summary="The node only moves when you drag the small grip area. Dragging the body does nothing, so the body can host interactive content.">
@@ -29,7 +29,7 @@
 
 <style>
     .dh-node { display:flex; align-items:stretch; }
-    .dh-node__grip { display:flex; align-items:center; padding:0 6px; cursor:grab; color:#888; border-right:1px solid #eee; user-select:none; }
+    .dh-node__grip { display:flex; align-items:center; padding:0 6px; cursor:grab; color:var(--bit-blow-text-muted); border-right:1px solid var(--bit-blow-border-subtle); user-select:none; }
     .dh-node__grip:active { cursor:grabbing; }
     .dh-node__body { padding:8px 12px; }
 </style>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/DragNDropExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/DragNDropExample.razor
index 33d03f7ca58..720c4dc66bc 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/DragNDropExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/DragNDropExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/drag-n-drop"
 
-<PageTitle>Drag and Drop - bit Blow</PageTitle>
+<PageTitle>Drag and Drop · Blow</PageTitle>
 
 <ExampleScaffold Title="Drag and Drop"
                  Summary="Drag a node type from the sidebar and drop it onto the canvas. The drop position is converted from screen to flow coordinates so the node lands under the cursor.">
     <div class="dnd">
         <aside class="dnd__sidebar">
-            <p class="text-muted">Drag these onto the canvas →</p>
+            <p class="bb-muted">Drag these onto the canvas →</p>
             <div class="dnd__item dnd__item--input" draggable="true" @ondragstart="@(() => _dragType = "input")">Input Node</div>
             <div class="dnd__item" draggable="true" @ondragstart="@(() => _dragType = "default")">Default Node</div>
             <div class="dnd__item dnd__item--output" draggable="true" @ondragstart="@(() => _dragType = "output")">Output Node</div>
@@ -22,12 +22,13 @@
 
 <style>
     .dnd { display:flex; height:100%; }
-    .dnd__sidebar { width:180px; padding:12px; border-right:1px solid var(--demo-border); background:#fafafa; }
+    /* Outside the canvas, so it takes the site's own surfaces rather than the flow's. */
+    .dnd__sidebar { width:180px; padding:12px; border-right:1px solid var(--bb-border); background:var(--bb-surface-sunken); color:var(--bb-text); }
     .dnd__sidebar p { font-size:12px; margin:0 0 10px; }
     .dnd__canvas { flex:1; position:relative; }
     .dnd__item {
-        padding:10px; margin-bottom:10px; border:1px solid #ccc; border-radius:8px;
-        background:#fff; cursor:grab; text-align:center; font-size:13px; font-weight:600;
+        padding:10px; margin-bottom:10px; border:1px solid var(--bb-border-strong); border-radius:8px;
+        background:var(--bb-surface); cursor:grab; text-align:center; font-size:13px; font-weight:600;
     }
     .dnd__item--input { border-color:#16a34a; }
     .dnd__item--output { border-color:#6366f1; }
@@ -35,7 +36,7 @@
     /* On a phone a fixed-width sidebar leaves the canvas a sliver: stack it above instead. */
     @@media (max-width: 640px) {
         .dnd { flex-direction:column; }
-        .dnd__sidebar { width:auto; display:flex; flex-wrap:wrap; gap:8px; border-right:0; border-bottom:1px solid var(--demo-border); }
+        .dnd__sidebar { width:auto; display:flex; flex-wrap:wrap; gap:8px; border-right:0; border-bottom:1px solid var(--bb-border); }
         .dnd__sidebar p { flex-basis:100%; margin:0; }
         .dnd__item { flex:1; margin-bottom:0; padding:6px; }
         .dnd__canvas { min-height:0; }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EasyConnectExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EasyConnectExample.razor
index 16007263b64..6047e0355e5 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EasyConnectExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EasyConnectExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/easy-connect"
 
-<PageTitle>Easy Connect - bit Blow</PageTitle>
+<PageTitle>Easy Connect · Blow</PageTitle>
 
 <ExampleScaffold Title="Easy Connect"
                  Summary="Each node is almost entirely covered by a connectable handle, so you can start and finish a connection from anywhere inside it; drag a node by its rim to move it. Uses loose connection mode and floating edges.">
@@ -31,7 +31,7 @@
     .easy-node {
         display:flex; align-items:center; justify-content:center;
         width:100%; height:100%; box-sizing:border-box; border-radius:10px;
-        background:#eef2ff; border:2px solid #6366f1; font-weight:600;
+        background:color-mix(in srgb, #6366f1 14%, var(--bit-blow-node-bg)); color:var(--bit-blow-node-color); border:2px solid #6366f1; font-weight:600;
     }
 </style>
 
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeLabelStylingExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeLabelStylingExample.razor
index 8e4e5d07cca..4437c588744 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeLabelStylingExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeLabelStylingExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/edge-label-styling"
 
-<PageTitle>Edge Label Styling - bit Blow</PageTitle>
+<PageTitle>Edge Label Styling · Blow</PageTitle>
 
 <ExampleScaffold Title="Edge Label Styling"
                  Summary="The plate behind an edge label can be restyled, padded, rounded or removed. SVG cannot size a rectangle to the text inside it and measuring every label in the browser on every render would be far too costly, so the plate is sized from a character-weighted estimate - the padding controls are there to tune it for an unusual font.">
@@ -56,7 +56,7 @@
         {
             Id = "bare", Source = "c1", Target = "c2", Label = "no plate",
             LabelShowBg = false,
-            LabelStyle = "fill:#b91c1c;font-weight:700",
+            LabelStyle = "fill:#dc2626;font-weight:700",
         },
         new()
         {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeMarkersExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeMarkersExample.razor
index f5ee0f374e5..8351cde0c17 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeMarkersExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeMarkersExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/edge-markers"
 
-<PageTitle>Edge Markers - bit Blow</PageTitle>
+<PageTitle>Edge Markers · Blow</PageTitle>
 
 <ExampleScaffold Title="Edge Markers"
                  Summary="Arrowheads are configured per edge: open or closed, in any colour and at any size. Edges asking for the same arrowhead share a single SVG definition, so a large graph declares one marker per style rather than one per edge.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgePathOptionsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgePathOptionsExample.razor
index be62c51a8d8..f93eff14deb 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgePathOptionsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgePathOptionsExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/edge-path-options"
 
-<PageTitle>Edge Path Options - bit Blow</PageTitle>
+<PageTitle>Edge Path Options · Blow</PageTitle>
 
 <ExampleScaffold Title="Edge Path Options"
                  Summary="Every built-in path algorithm can be tuned per edge. Drag the sliders to reshape the bezier curvature, the smooth-step corner radius, how far the route leaves a handle, and where along the route the bend sits.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeRendererExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeRendererExample.razor
index 9b4ea50affa..a3a7cf4900e 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeRendererExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeRendererExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/edge-renderer"
 
-<PageTitle>Edge Renderer - bit Blow</PageTitle>
+<PageTitle>Edge Renderer · Blow</PageTitle>
 
 <ExampleScaffold Title="Edge Renderer"
                  Summary="A custom edge that renders an interactive HTML button at its midpoint using the edge label layer (React Flow's EdgeLabelRenderer). Click the × to delete the edge.">
@@ -18,12 +18,12 @@
 <style>
     .edge-button {
         width: 20px; height: 20px; border-radius: 50%;
-        border: 1px solid #ddd; background: #fff; cursor: pointer;
-        line-height: 1; font-size: 14px; color: #555;
+        border: 1px solid var(--bit-blow-border); background: var(--bit-blow-surface); cursor: pointer;
+        line-height: 1; font-size: 14px; color: var(--bit-blow-text-muted);
         display: inline-flex; align-items: center; justify-content: center;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+        box-shadow: 0 1px 3px var(--bit-blow-shadow);
     }
-    .edge-button:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
+    .edge-button:hover { background: color-mix(in srgb, #ef4444 16%, var(--bit-blow-surface)); color: #ef4444; border-color: color-mix(in srgb, #ef4444 45%, transparent); }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeToolbarExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeToolbarExample.razor
index b323af8784d..0968e8f4d58 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeToolbarExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeToolbarExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/edge-toolbar"
 
-<PageTitle>Edge Toolbar - bit Blow</PageTitle>
+<PageTitle>Edge Toolbar · Blow</PageTitle>
 
 <ExampleScaffold Title="Edge Toolbar"
                  Summary="Selecting an edge reveals an BlowEdgeToolbar anchored at its midpoint (constant screen size). Use it to relabel, recolor or delete the edge.">
@@ -31,9 +31,11 @@
 </ExampleScaffold>
 
 <style>
-    .btn-mini { border:1px solid #ddd; background:#fff; border-radius:4px; cursor:pointer; padding:1px 6px; font-size:13px; }
-    .btn-mini.danger { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
-    .btn-mini:hover { background:#f3f4f6; }
+    /* Painted with the canvas's own --bit-blow-* colours, so the toolbar follows its colour mode. */
+    .btn-mini { border:1px solid var(--bit-blow-border); background:var(--bit-blow-surface); color:var(--bit-blow-text); border-radius:4px; cursor:pointer; padding:1px 6px; font-size:13px; }
+    .btn-mini:hover { background:var(--bit-blow-surface-hover); }
+    .btn-mini.danger { color:#ef4444; border-color:color-mix(in srgb, #ef4444 45%, transparent); }
+    .btn-mini.danger:hover { background:color-mix(in srgb, #ef4444 14%, var(--bit-blow-surface)); }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeTypesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeTypesExample.razor
index 8a6412d864b..6c7dd128413 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeTypesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgeTypesExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/edge-types"
 
-<PageTitle>Edge Types - bit Blow</PageTitle>
+<PageTitle>Edge Types · Blow</PageTitle>
 
 <ExampleScaffold Title="Edge Types"
                  Summary="Pick the default edge type for new connections, and toggle animation and markers. Drag between handles to create edges using the current settings.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgesExample.razor
index a31617e95fe..f4a49c85a9f 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EdgesExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/edges"
 
-<PageTitle>Edges - bit Blow</PageTitle>
+<PageTitle>Edges · Blow</PageTitle>
 
 <ExampleScaffold Title="Edges"
                  Summary="The built-in edge path types - bezier, straight, step and smooth-step - shown side by side, including animated, labelled and arrow-headed variants.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EditableNodeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EditableNodeExample.razor
index 5ca50d358b2..64b1ec49e74 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EditableNodeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EditableNodeExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/editable-node"
 
-<PageTitle>Editable Node - bit Blow</PageTitle>
+<PageTitle>Editable Node · Blow</PageTitle>
 
 <ExampleScaffold Title="Editable Node"
                  Summary="Nodes can host real form controls. Type in a field and use Backspace freely - the flow detects that focus is inside an editable element and leaves the graph alone. To delete a node, click its grip - that selects it and takes focus out of the fields - then press Delete, and it is removed as usual.">
@@ -20,7 +20,7 @@
                 <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Bottom" />
             </NodeTemplate>
             <ChildContent>
-                <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="24" Color="#e5e7eb" />
+                <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="24" Color="var(--bit-blow-border)" />
                 <BlowControls />
             </ChildContent>
         </BlowCanvas>
@@ -29,9 +29,10 @@
 
 <style>
     .edit-node { display: flex; flex-direction: column; gap: 6px; width: 190px; padding: 2px; text-align: left; }
-    .edit-grip { padding: 2px 4px; font-size: 10px; color: #9ca3af; border-radius: 4px; background: #f9fafb; }
-    .edit-input { width: 100%; padding: 4px 6px; font: inherit; border: 1px solid #d1d5db; border-radius: 4px; }
-    .edit-notes { width: 100%; height: 48px; padding: 4px 6px; font: inherit; resize: none; border: 1px solid #d1d5db; border-radius: 4px; }
+    /* The canvas's own --bit-blow-* colours, so the fields follow its colour mode. */
+    .edit-grip { padding: 2px 4px; font-size: 10px; color: var(--bit-blow-text-muted); border-radius: 4px; background: var(--bit-blow-surface-muted); }
+    .edit-input { width: 100%; padding: 4px 6px; font: inherit; color: var(--bit-blow-text); background: var(--bit-blow-surface); border: 1px solid var(--bit-blow-border); border-radius: 4px; }
+    .edit-notes { width: 100%; height: 48px; padding: 4px 6px; font: inherit; resize: none; color: var(--bit-blow-text); background: var(--bit-blow-surface); border: 1px solid var(--bit-blow-border); border-radius: 4px; }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/EmptyExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/EmptyExample.razor
index 840e3092225..bab7802f71c 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/EmptyExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/EmptyExample.razor
@@ -1,13 +1,13 @@
 @page "/examples/empty"
 
-<PageTitle>Empty - bit Blow</PageTitle>
+<PageTitle>Empty · Blow</PageTitle>
 
 <ExampleScaffold Title="Empty"
                  Summary="An empty canvas. Use the buttons to add nodes at runtime, then connect them.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="AddNode">Add node</button>
-        <button class="btn btn-sm" @onclick="Reset">Clear</button>
-        <span class="text-muted">@_nodes.Count node(s)</span>
+        <button class="btn btn-primary" @onclick="AddNode">Add node</button>
+        <button class="btn btn-secondary" @onclick="Reset">Clear</button>
+        <span class="bb-muted">@_nodes.Count node(s)</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ExamplesIndex.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ExamplesIndex.razor
index dea43262f4d..0d8f72a8d81 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ExamplesIndex.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ExamplesIndex.razor
@@ -1,53 +1,27 @@
 @page "/examples"
 @using Bit.Blow.Demo.Client.Examples
 
-<PageTitle>React Flow Examples - bit Blow</PageTitle>
+<PageTitle>React Flow Examples · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>React Flow Examples</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>React Flow Examples</h1>
+    <p class="bb-subtitle">
         Blow ports of the official <a href="https://github.com/xyflow/xyflow/tree/main/examples/react" target="_blank" rel="noopener">React Flow examples</a>.
-        Each card links to a self-contained page demonstrating one feature. @ExampleCatalog.All.Count examples in total.
+        Each card links to a self-contained page demonstrating one feature, with its source a click away.
+        @ExampleCatalog.All.Count examples in total.
     </p>
 </div>
 
 @foreach (var group in ExampleCatalog.Grouped())
 {
-    <section class="example-group">
-        <h4 class="example-group__title">@group.Key</h4>
-        <div class="example-grid">
-            @foreach (var ex in group)
-            {
-                <a class="example-card" href="examples/@ex.Route">
-                    <span class="example-card__title">@ex.Title</span>
-                    <span class="example-card__summary">@ex.Summary</span>
-                </a>
-            }
-        </div>
-    </section>
+    <h2 @key="group.Key">@group.Key</h2>
+    <div class="bb-grid">
+        @foreach (var ex in group)
+        {
+            <a class="bb-card example-card" href="examples/@ex.Route" @key="ex.Route">
+                <span class="example-card__title">@ex.Title</span>
+                <span class="example-card__summary">@ex.Summary</span>
+            </a>
+        }
+    </div>
 }
-
-<style>
-    .example-group { margin-bottom: 1.6rem; }
-    .example-group__title {
-        margin: 0 0 0.7rem; font-size: 1.05rem; color: var(--demo-muted);
-        text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem;
-    }
-    .example-grid {
-        display: grid; gap: 0.75rem;
-        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    }
-    .example-card {
-        display: flex; flex-direction: column; gap: 0.3rem;
-        padding: 0.85rem 1rem; border: 1px solid var(--demo-border);
-        border-radius: var(--demo-radius); background: var(--demo-surface);
-        box-shadow: var(--demo-shadow); text-decoration: none; color: inherit;
-        transition: border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
-    }
-    .example-card:hover {
-        text-decoration: none; border-color: var(--demo-primary);
-        transform: translateY(-1px);
-    }
-    .example-card__title { font-weight: 600; color: var(--demo-text); }
-    .example-card__summary { font-size: 0.85rem; color: var(--demo-muted); line-height: 1.4; }
-</style>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/FloatingEdgesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/FloatingEdgesExample.razor
index 40679c6328b..592803fbba7 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/FloatingEdgesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/FloatingEdgesExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/floating-edges"
 
-<PageTitle>Floating Edges - bit Blow</PageTitle>
+<PageTitle>Floating Edges · Blow</PageTitle>
 
 <ExampleScaffold Title="Floating Edges"
                  Summary="Edges attach to the point on each node's border that faces the other node, recomputed live as you drag. The custom EdgeTemplate uses BlowGraphUtils.GetFloatingEdgeParams.">
@@ -34,7 +34,7 @@
     .floating-node {
         display:flex; align-items:center; justify-content:center;
         width:100%; height:100%; box-sizing:border-box; border-radius:12px;
-        background:#fff; border:2px solid #6366f1; font-weight:600; font-size:12px;
+        background:var(--bit-blow-node-bg); color:var(--bit-blow-node-color); border:2px solid #6366f1; font-weight:600; font-size:12px;
     }
     .floating-handle { opacity:0; }
 </style>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/HandlePositionsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/HandlePositionsExample.razor
index 6d29d28eb72..f86a2755f55 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/HandlePositionsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/HandlePositionsExample.razor
@@ -1,13 +1,13 @@
 @page "/examples/handle-positions"
 
-<PageTitle>Handle Positions - bit Blow</PageTitle>
+<PageTitle>Handle Positions · Blow</PageTitle>
 
 <ExampleScaffold Title="Handle Positions"
                  Summary="Built-in nodes place their handles wherever you tell them to. Set SourcePosition/TargetPosition on the node and the default renderer moves the handles - no custom template needed.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="@(() => SetDirection(false))">Top to bottom</button>
-        <button class="btn btn-sm btn-primary" @onclick="@(() => SetDirection(true))">Left to right</button>
-        <span class="text-muted">Current: @(_horizontal ? "left to right" : "top to bottom")</span>
+        <button class="btn btn-primary" @onclick="@(() => SetDirection(false))">Top to bottom</button>
+        <button class="btn btn-primary" @onclick="@(() => SetDirection(true))">Left to right</button>
+        <span class="bb-muted">Current: @(_horizontal ? "left to right" : "top to bottom")</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/HandleRulesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/HandleRulesExample.razor
index 68df88b7853..818313ff2c9 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/HandleRulesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/HandleRulesExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/handle-rules"
 
-<PageTitle>Handle Rules - bit Blow</PageTitle>
+<PageTitle>Handle Rules · Blow</PageTitle>
 
 <ExampleScaffold Title="Handle Rules"
                  Summary="Validation can live on the handle it belongs to rather than in one canvas-wide predicate. The 'number' input only accepts the number output, the 'text' input only the text output, and each input announces what arrived. Both ends of a prospective connection get a say, so a rule sits wherever it reads best.">
     <Toolbar>
         <span class="rules-log">@(_lastConnected ?? "No connection made yet.")</span>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Reset">Reset</button>
+        <button class="btn btn-secondary" @onclick="Reset">Reset</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" ConnectionRadius="30">
@@ -57,11 +57,11 @@
 
 <style>
     .rules-title { font-weight: 600; }
-    .rules-sub { font-size: 11px; color: #6b7280; }
+    .rules-sub { font-size: 11px; color: var(--bit-blow-text-muted); }
     /* The negative margin carries each row out over the node's 14px side padding, so a handle
        pinned to the row's right edge lands on the node's edge like any other handle. */
     .rules-port { position: relative; font-size: 11px; text-align: right; margin-right: -14px; padding-right: 20px; }
-    .rules-log { font-size: 12px; color: #374151; margin-right: 0.75rem; }
+    .rules-log { font-size: 12px; color: var(--bb-text-muted); margin-right: 0.75rem; }
     /* Set through the handle's own colour token rather than a background with !important, so the
        live valid/invalid highlight still shows while a connection is being dragged. */
     .port-number { --bit-blow-handle-bg: #2563eb; }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/HiddenExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/HiddenExample.razor
index 52966856a5c..b9e788f5c87 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/HiddenExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/HiddenExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/hidden"
 
-<PageTitle>Hidden - bit Blow</PageTitle>
+<PageTitle>Hidden · Blow</PageTitle>
 
 <ExampleScaffold Title="Hidden"
                  Summary="Toggle the Hidden flag on nodes and edges. Hidden elements are left out of rendering, layout, selection and fit-view, but stay in state. Hiding a node also takes away the edges attached to it - an edge with only one end left has nothing to be an edge between - so collapsing part of a graph needs only the nodes named.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionExample.razor
index 2fc07aa7e08..b97516bb572 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/interaction"
 
-<PageTitle>Interaction - bit Blow</PageTitle>
+<PageTitle>Interaction · Blow</PageTitle>
 
 <ExampleScaffold Title="Interaction"
                  Summary="Toggle the interaction options live and see how the flow responds - draggable nodes, selectable elements, zoom and pan behaviours.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionGuardsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionGuardsExample.razor
index c5fae0e7485..03066b33bb2 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionGuardsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractionGuardsExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/interaction-guards"
 
-<PageTitle>Interaction Guards - bit Blow</PageTitle>
+<PageTitle>Interaction Guards · Blow</PageTitle>
 
 <ExampleScaffold Title="Interaction Guards"
                  Summary="Three CSS classes carve interactivity back out of the canvas. Drag the slider or select the text in the top node: neither moves it, because they sit in a 'nodrag' area. Scroll the list in the second node and the list scrolls instead of the canvas zooming, because it is marked 'nowheel'. The panel top-right is marked 'nopan', so dragging it does not pan.">
@@ -55,14 +55,14 @@
     .guard-body { padding: 4px 2px; cursor: default; }
     .guard-body input { width: 100%; }
     .guard-value { font-variant-numeric: tabular-nums; }
-    .guard-hint { margin: 6px 0 0; font-size: 11px; color: #6b7280; user-select: text; }
+    .guard-hint { margin: 6px 0 0; font-size: 11px; color: var(--bit-blow-text-muted); user-select: text; }
     .guard-log {
         max-height: 70px;
         overflow-y: auto;
         text-align: left;
         font-size: 11px;
         line-height: 1.6;
-        border: 1px solid #e5e7eb;
+        border: 1px solid var(--bit-blow-border);
         border-radius: 4px;
         padding: 4px 6px;
     }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractiveMinimapExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractiveMinimapExample.razor
index 0b4eaff7e69..551691dfa9c 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractiveMinimapExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/InteractiveMinimapExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/interactive-minimap"
 
-<PageTitle>Interactive MiniMap - bit Blow</PageTitle>
+<PageTitle>Interactive MiniMap · Blow</PageTitle>
 
 <ExampleScaffold Title="Interactive MiniMap"
                  Summary="The minimap is both pannable and zoomable: drag inside it to move the viewport, and scroll over it to zoom the main flow.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/IntersectionExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/IntersectionExample.razor
index bbdc3416f39..34d52f47ec6 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/IntersectionExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/IntersectionExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/intersection"
 
-<PageTitle>Intersection - bit Blow</PageTitle>
+<PageTitle>Intersection · Blow</PageTitle>
 
 <ExampleScaffold Title="Intersection"
                  Summary="Drag the highlighted node around. Any node it overlaps is detected with GetIntersectingNodes and turns orange in real time.">
@@ -23,10 +23,10 @@
     .bit-blow-node.ix-shell.selected { box-shadow:0 0 0 2px var(--bit-blow-node-selected); }
     .ix-node {
         display:flex; align-items:center; justify-content:center; width:100%; height:100%; box-sizing:border-box;
-        border:1px solid #bbb; border-radius:8px; background:#fff; font-weight:600;
+        border:1px solid var(--bit-blow-edge-stroke); border-radius:8px; background:var(--bit-blow-node-bg); color:var(--bit-blow-node-color); font-weight:600;
     }
-    .ix-node.dragging { border-color:#6366f1; background:#eef2ff; }
-    .ix-node.intersecting { border-color:#ea580c; background:#ffedd5; }
+    .ix-node.dragging { border-color:#6366f1; background:color-mix(in srgb, #6366f1 14%, var(--bit-blow-node-bg)); }
+    .ix-node.intersecting { border-color:#ea580c; background:color-mix(in srgb, #ea580c 20%, var(--bit-blow-node-bg)); }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyBindingsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyBindingsExample.razor
index f2cf498d265..a43d37c9183 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyBindingsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyBindingsExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/key-bindings"
 
-<PageTitle>Key Bindings - bit Blow</PageTitle>
+<PageTitle>Key Bindings · Blow</PageTitle>
 
 <ExampleScaffold Title="Key Bindings"
                  Summary="Which keys the canvas claims is configurable. A flow embedded in a long page usually should not swallow Backspace or hijack the scroll wheel - narrow the delete keys and require a modifier to zoom, and the page behaves normally again.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyboardA11yExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyboardA11yExample.razor
index 94b5b6b3f82..b90533c1a50 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyboardA11yExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/KeyboardA11yExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/keyboard-a11y"
 
-<PageTitle>Keyboard Accessibility - bit Blow</PageTitle>
+<PageTitle>Keyboard Accessibility · Blow</PageTitle>
 
 <ExampleScaffold Title="Keyboard Accessibility"
                  Summary="Nodes and edges are both in the tab order. Tab to one, press Enter or Space to select it (Shift to add to the selection), move a selection with the arrow keys, press Escape to clear it and Delete to remove it. Every change is announced through an aria-live region.">
     <Toolbar>
         <label><input type="checkbox" checked="@_edgesFocusable" @onchange="@(e => _edgesFocusable = (bool)e.Value!)" /> Edges focusable</label>
-        <button class="btn btn-sm btn-primary" @onclick="Reset">Reset</button>
+        <button class="btn btn-primary" @onclick="Reset">Reset</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/LayoutingExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/LayoutingExample.razor
index 1260d48fd02..facada920bd 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/LayoutingExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/LayoutingExample.razor
@@ -1,19 +1,19 @@
 @page "/examples/layouting"
-<PageTitle>Layouting - bit Blow</PageTitle>
+<PageTitle>Layouting · Blow</PageTitle>
 
 <ExampleScaffold Title="Layouting"
                  Summary="Arrange the graph automatically with the layouts that ship in the box - no JavaScript layout engine needed. The layered layout orders each layer to keep edges from crossing, packs layers by their own thickness so tall nodes never overlap the next row, and points the handles along the flow. Grid and circle are there for tidying up and for showing a set of peers.">
     <Toolbar>
         @foreach (var (key, label) in _layouts)
         {
-            <button class="btn btn-sm @(key == _current ? "btn-primary" : "btn-outline-secondary")"
+            <button class="btn @(key == _current ? "btn-primary" : "btn-secondary")"
                     @onclick="@(() => Relayout(key))">
                 @label
             </button>
         }
         <span class="lay-sep"></span>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="AddBranch">Add branch</button>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Reset">Reset</button>
+        <button class="btn btn-secondary" @onclick="AddBranch">Add branch</button>
+        <button class="btn btn-secondary" @onclick="Reset">Reset</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/LocalizationExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/LocalizationExample.razor
index 064097a1282..0ee696d24bf 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/LocalizationExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/LocalizationExample.razor
@@ -1,13 +1,13 @@
 @page "/examples/localization"
 
-<PageTitle>Localization - bit Blow</PageTitle>
+<PageTitle>Localization · Blow</PageTitle>
 
 <ExampleScaffold Title="Localization"
                  Summary="Every string the canvas reads out or labels itself with comes from one AriaLabels object, so a flow can be translated without reimplementing its accessibility. Switch language, then Tab to a node and press Enter - the live region below shows what a screen reader would hear. The starting pan and zoom come from DefaultViewport.">
     <Toolbar>
         @foreach (var (code, name) in _languages)
         {
-            <button class="btn btn-sm @(code == _language ? "btn-primary" : "btn-outline-secondary")"
+            <button class="btn @(code == _language ? "btn-primary" : "btn-secondary")"
                     @onclick="@(() => _language = code)">
                 @name
             </button>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/MovingHandlesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/MovingHandlesExample.razor
index 942cb1cc01d..2ed59ebb7a9 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/MovingHandlesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/MovingHandlesExample.razor
@@ -1,14 +1,14 @@
 @page "/examples/moving-handles"
 @using System.Globalization
 
-<PageTitle>Moving Handles - bit Blow</PageTitle>
+<PageTitle>Moving Handles · Blow</PageTitle>
 
 <ExampleScaffold Title="Moving Handles"
                  Summary="Add or remove handles on a node at runtime. After the handle layout changes, the canvas re-measures so connected edges snap to the correct anchors.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="AddHandle">Add handle</button>
-        <button class="btn btn-sm" @onclick="RemoveHandle">Remove handle</button>
-        <span class="text-muted">@_handleCount source handle(s)</span>
+        <button class="btn btn-primary" @onclick="AddHandle">Add handle</button>
+        <button class="btn btn-secondary" @onclick="RemoveHandle">Remove handle</button>
+        <span class="bb-muted">@_handleCount source handle(s)</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiFlowsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiFlowsExample.razor
index f555c9a4ab1..cf5fbeae28e 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiFlowsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiFlowsExample.razor
@@ -1,20 +1,20 @@
 @page "/examples/multi-flows"
 
-<PageTitle>Multi Flows - bit Blow</PageTitle>
+<PageTitle>Multi Flows · Blow</PageTitle>
 
 <ExampleScaffold Title="Multi Flows"
                  Summary="Two independent BlowCanvas instances on one page, each with its own nodes, edges, viewport and overlays.">
     <div class="multi">
         <div class="multi__pane">
             <BlowCanvas Nodes="_a" Edges="_ea" FitViewOnInit="true">
-                <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" Color="#c7d2fe" />
+                <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" Color="rgba(99, 102, 241, 0.5)" />
                 <BlowControls />
                 <BlowPanel Position="top-left"><strong>Flow A</strong></BlowPanel>
             </BlowCanvas>
         </div>
         <div class="multi__pane">
             <BlowCanvas Nodes="_b" Edges="_eb" FitViewOnInit="true">
-                <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="20" Color="#bbf7d0" />
+                <BlowBackground Variant="BlowBackgroundVariant.Lines" Gap="20" Color="rgba(34, 197, 94, 0.3)" />
                 <BlowControls />
                 <BlowPanel Position="top-left"><strong>Flow B</strong></BlowPanel>
             </BlowCanvas>
@@ -24,8 +24,15 @@
 
 <style>
     .multi { display:flex; height:100%; }
-    .multi__pane { flex:1; position:relative; border-right:1px solid var(--demo-border); }
+    .multi__pane { flex:1; position:relative; min-width:0; border-right:1px solid var(--bb-border); }
     .multi__pane:last-child { border-right:0; }
+
+    /* On a phone two flows side by side are each a sliver: stack them instead. */
+    @@media (max-width: 640px) {
+        .multi { flex-direction:column; }
+        .multi__pane { border-right:0; border-bottom:1px solid var(--bb-border); }
+        .multi__pane:last-child { border-bottom:0; }
+    }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiSetNodesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiSetNodesExample.razor
index 1eb40cf4d64..17469ef2c38 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiSetNodesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/MultiSetNodesExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/multi-set-nodes"
 
-<PageTitle>Multi setNodes - bit Blow</PageTitle>
+<PageTitle>Multi setNodes · Blow</PageTitle>
 
 <ExampleScaffold Title="Multi setNodes"
                  Summary="Apply several independent updates to the node list within a single handler. All mutations are coalesced into one render, mirroring multiple setNodes calls in React.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="ShuffleAndRecolor">Shuffle + recolor (one tick)</button>
-        <button class="btn btn-sm" @onclick="Reset">Reset</button>
+        <button class="btn btn-primary" @onclick="ShuffleAndRecolor">Shuffle + recolor (one tick)</button>
+        <button class="btn btn-secondary" @onclick="Reset">Reset</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
@@ -20,14 +20,18 @@
     private BlowCanvas? _flow;
     private List<BlowNode> _nodes = [];
     private List<BlowEdge> _edges = [];
-    private static readonly string[] Colors = ["#dbeafe", "#dcfce7", "#fee2e2", "#fef9c3", "#f3e8ff"];
+    private static readonly string[] Colors = ["#3b82f6", "#22c55e", "#ef4444", "#eab308", "#a855f7"];
+
+    // A tint of the colour mixed into the node's own fill rather than a fixed pastel, so the node reads
+    // in the light and the dark colour mode alike.
+    private static string Tint(string color) => $"background:color-mix(in srgb, {color} 20%, var(--bit-blow-node-bg));";
 
     protected override void OnInitialized() => Reset();
 
     private void Reset()
     {
         _nodes = Enumerable.Range(1, 5)
-            .Select(i => new BlowNode { Id = i.ToString(), Label = $"Node {i}", Position = new(i * 90, 120), Style = "background:#fff;" })
+            .Select(i => new BlowNode { Id = i.ToString(), Label = $"Node {i}", Position = new(i * 90, 120), Style = "background:var(--bit-blow-node-bg);" })
             .ToList();
         _edges = [];
         _flow?.Refresh(remeasure: true);
@@ -39,7 +43,7 @@
         foreach (var n in _nodes)
             n.Position = new(Random.Shared.Next(20, 460), Random.Shared.Next(20, 260));
         foreach (var n in _nodes)
-            n.Style = $"background:{Colors[Random.Shared.Next(Colors.Length)]};";
+            n.Style = Tint(Colors[Random.Shared.Next(Colors.Length)]);
         foreach (var n in _nodes)
             n.Label = $"{n.Id}·{Random.Shared.Next(100)}";
         _flow?.Refresh(remeasure: true);
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeExtentExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeExtentExample.razor
index 7ae91b55090..9bd9886d731 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeExtentExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeExtentExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/node-extent"
 
-<PageTitle>Node Extents - bit Blow</PageTitle>
+<PageTitle>Node Extents · Blow</PageTitle>
 
 <ExampleScaffold Title="Node Extents"
                  Summary="Three ways to constrain where a node can go: a rectangle of its own, its parent's bounds, or no constraint at all but with the parent growing to keep the child enclosed. Drag each node and watch how it behaves at the boundary.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="Reset">Reset positions</button>
-        <span class="text-muted">Dashed outline = the allowed area</span>
+        <button class="btn btn-primary" @onclick="Reset">Reset positions</button>
+        <span class="bb-muted">Dashed outline = the allowed area</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
@@ -36,7 +36,7 @@
 
 <style>
     .ext-node { padding: 2px; font-size: 12px; }
-    .ext-group-label { position: absolute; top: 6px; left: 10px; font-size: 11px; font-weight: 600; color: #6b7280; }
+    .ext-group-label { position: absolute; top: 6px; left: 10px; font-size: 11px; font-weight: 600; color: var(--bit-blow-text-muted); }
     .ext-bounds {
         position: absolute;
         left: 0; top: 0;
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeResizerExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeResizerExample.razor
index 3287ba37afe..9ca5b1ddb58 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeResizerExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeResizerExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/node-resizer"
 
-<PageTitle>Node Resizer - bit Blow</PageTitle>
+<PageTitle>Node Resizer · Blow</PageTitle>
 
 <ExampleScaffold Title="Node Resizer"
                  Summary="Select a node to reveal its BlowNodeResizer controls, then drag a corner or edge to resize. One node keeps its aspect ratio.">
@@ -26,12 +26,16 @@
     private List<BlowNode> _nodes = [];
     private List<BlowEdge> _edges = [];
 
+    // A tint of the colour mixed into the node's own fill rather than a fixed pastel, so the node reads
+    // in the light and the dark colour mode alike.
+    private static string Tint(string color) => $"background:color-mix(in srgb, {color} 20%, var(--bit-blow-node-bg));";
+
     protected override void OnInitialized()
     {
         _nodes =
         [
-            new BlowNode { Id = "1", Label = "Resize me", Position = new(80, 60), Width = 160, Height = 70, Style = "background:#dbeafe;" },
-            new BlowNode { Id = "2", Label = "Keep ratio", Position = new(340, 120), Width = 120, Height = 120, Style = "background:#dcfce7;" },
+            new BlowNode { Id = "1", Label = "Resize me", Position = new(80, 60), Width = 160, Height = 70, Style = Tint("#3b82f6") },
+            new BlowNode { Id = "2", Label = "Keep ratio", Position = new(340, 120), Width = 120, Height = 120, Style = Tint("#22c55e") },
         ];
         _edges = [ new BlowEdge { Id = "e1-2", Source = "1", Target = "2", Type = BlowEdgeType.SmoothStep } ];
     }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeToolbarExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeToolbarExample.razor
index 5e777e2daf4..eb717340826 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeToolbarExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeToolbarExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/node-toolbar"
 
-<PageTitle>Node Toolbar - bit Blow</PageTitle>
+<PageTitle>Node Toolbar · Blow</PageTitle>
 
 <ExampleScaffold Title="Node Toolbar"
                  Summary="A BlowNodeToolbar anchored to the selected node stays a constant screen size while zooming. Select a node to recolor or delete it; change the toolbar position.">
@@ -18,8 +18,8 @@
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
             <NodeTemplate Context="node">
                 <BlowNodeToolbar Position="_position">
-                    <button class="btn btn-sm" @onclick="() => Recolor(node)">🎨</button>
-                    <button class="btn btn-sm" @onclick="() => Remove(node)">🗑</button>
+                    <button class="btn btn-secondary" @onclick="() => Recolor(node)">🎨</button>
+                    <button class="btn btn-secondary" @onclick="() => Remove(node)">🗑</button>
                 </BlowNodeToolbar>
                 <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Top" />
                 <div class="tb-node">@node.Label</div>
@@ -42,20 +42,24 @@
     private List<BlowEdge> _edges = [];
     private BlowPosition _position = BlowPosition.Top;
 
+    // A tint of the colour mixed into the node's own fill rather than a fixed pastel, so the node reads
+    // in the light and the dark colour mode alike.
+    private static string Tint(string color) => $"background:color-mix(in srgb, {color} 20%, var(--bit-blow-node-bg));";
+
     protected override void OnInitialized()
     {
         _nodes =
         [
-            new BlowNode { Id = "1", Label = "Select me", Position = new(160, 60), Style = "background:#fef9c3;" },
-            new BlowNode { Id = "2", Label = "Or me", Position = new(220, 200), Style = "background:#dbeafe;" },
+            new BlowNode { Id = "1", Label = "Select me", Position = new(160, 60), Style = Tint("#eab308") },
+            new BlowNode { Id = "2", Label = "Or me", Position = new(220, 200), Style = Tint("#3b82f6") },
         ];
         _edges = [ new BlowEdge { Id = "e1-2", Source = "1", Target = "2" } ];
     }
 
     private void Recolor(BlowNode node)
     {
-        var colors = new[] { "#dbeafe", "#dcfce7", "#fee2e2", "#fef9c3", "#f3e8ff" };
-        node.Style = $"background:{colors[Random.Shared.Next(colors.Length)]};";
+        var colors = new[] { "#3b82f6", "#22c55e", "#ef4444", "#eab308", "#a855f7" };
+        node.Style = Tint(colors[Random.Shared.Next(colors.Length)]);
     }
 
     private void Remove(BlowNode node)
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeTypeChangeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeTypeChangeExample.razor
index 6f1281df755..531a27289ce 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeTypeChangeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/NodeTypeChangeExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/node-type-change"
 
-<PageTitle>Node Type Change - bit Blow</PageTitle>
+<PageTitle>Node Type Change · Blow</PageTitle>
 
 <ExampleScaffold Title="Node Type Change"
                  Summary="Change a node's type at runtime. The renderer and handle layout update immediately when the type cycles between input, default and output.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="CycleType">Cycle node 2 type</button>
-        <span class="text-muted">node 2 is currently: <strong>@_node2.Type</strong></span>
+        <button class="btn btn-primary" @onclick="CycleType">Cycle node 2 type</button>
+        <span class="bb-muted">node 2 is currently: <strong>@_node2.Type</strong></span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/OverlayLayoutExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/OverlayLayoutExample.razor
index 223d5286af4..c8cad99d923 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/OverlayLayoutExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/OverlayLayoutExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/overlay-layout"
 
-<PageTitle>Overlay Layout - bit Blow</PageTitle>
+<PageTitle>Overlay Layout · Blow</PageTitle>
 
 <ExampleScaffold Title="Overlay Layout"
                  Summary="Controls, the minimap, panels and the attribution badge can all be anchored to any corner, and the control bar can hide individual buttons or show a lock toggle that freezes the canvas.">
@@ -22,7 +22,7 @@
             </select>
         </label>
         <label><input type="checkbox" checked="@_horizontal" @onchange="@(e => _horizontal = (bool)e.Value!)" /> Horizontal controls</label>
-        <span class="text-muted">Interactive: @(_interactive ? "on" : "locked")</span>
+        <span class="bb-muted">Interactive: @(_interactive ? "on" : "locked")</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes"
@@ -32,7 +32,7 @@
                     NodesConnectable="_interactive"
                     ElementsSelectable="_interactive"
                     AttributionPosition="BlowPanelPosition.TopCenter">
-            <BlowBackground Variant="BlowBackgroundVariant.Cross" Gap="30" BgColor="#fbfbfd" Color="#cbd5e1" />
+            <BlowBackground Variant="BlowBackgroundVariant.Cross" Gap="30" BgColor="var(--bit-blow-surface)" Color="#94a3b8" />
             <BlowControls Position="_controlsPosition"
                       Orientation="@(_horizontal ? BlowControlsOrientation.Horizontal : BlowControlsOrientation.Vertical)"
                       ShowInteractive="true"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/OverviewExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/OverviewExample.razor
index a9da9fbf092..ba6e5d2b69c 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/OverviewExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/OverviewExample.razor
@@ -1,10 +1,9 @@
 @page "/examples/overview"
 
-<PageTitle>Overview - bit Blow</PageTitle>
+<PageTitle>Overview · Blow</PageTitle>
 
 <ExampleScaffold Title="Overview"
-                 Summary="A larger graph combining node types, several edge types (animated, labelled, smooth-step), a background, controls and a minimap."
-                 Height="calc(100vh - 230px)">
+                 Summary="A larger graph combining node types, several edge types (animated, labelled, smooth-step), a background, controls and a minimap.">
     <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" MinZoom="0.2" MaxZoom="4">
         <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
         <BlowControls />
@@ -26,7 +25,7 @@
             new BlowNode { Id = "1", Type = "input", Label = "Input", Position = new(0, 0) },
             new BlowNode { Id = "2", Label = "Default", Position = new(-120, 120) },
             new BlowNode { Id = "3", Label = "Default", Position = new(120, 120) },
-            new BlowNode { Id = "4", Label = "Process", Position = new(0, 240), Style = "background:#dbeafe;border-color:#60a5fa;" },
+            new BlowNode { Id = "4", Label = "Process", Position = new(0, 240), Style = "background:color-mix(in srgb, #60a5fa 22%, var(--bit-blow-node-bg));border-color:#60a5fa;" },
             new BlowNode { Id = "5", Label = "Decision", Position = new(-180, 360) },
             new BlowNode { Id = "6", Label = "Step", Position = new(180, 360) },
             new BlowNode { Id = "7", Type = "output", Label = "Output A", Position = new(-180, 480) },
@@ -50,6 +49,6 @@
     {
         "input" => "#6ede87",
         "output" => "#6865f0",
-        _ => "#ddd",
+        _ => "var(--bit-blow-minimap-node)",
     };
 }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ProviderExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ProviderExample.razor
index 8cb315014a7..31f690b48e9 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ProviderExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ProviderExample.razor
@@ -1,16 +1,16 @@
 @page "/examples/provider"
 
-<PageTitle>Provider - bit Blow</PageTitle>
+<PageTitle>Provider · Blow</PageTitle>
 
 <ExampleScaffold Title="Provider"
                  Summary="A sidebar outside the canvas drives the flow through a shared reference - the Blazor equivalent of wrapping a flow in ReactFlowProvider so sibling components can call the flow API.">
     <div class="provider">
         <aside class="provider__sidebar">
             <h4>Controls</h4>
-            <button class="btn btn-sm btn-primary" @onclick="AddNode">Add node</button>
-            <button class="btn btn-sm" @onclick="@(() => _flow?.FitView())">Fit view</button>
-            <button class="btn btn-sm" @onclick="ConnectLast">Connect last two</button>
-            <p class="text-muted">@_nodes.Count nodes · @_edges.Count edges</p>
+            <button class="btn btn-primary" @onclick="AddNode">Add node</button>
+            <button class="btn btn-secondary" @onclick="@(() => _flow?.FitView())">Fit view</button>
+            <button class="btn btn-secondary" @onclick="ConnectLast">Connect last two</button>
+            <p class="bb-muted">@_nodes.Count nodes · @_edges.Count edges</p>
         </aside>
         <div class="provider__canvas">
             <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
@@ -23,14 +23,15 @@
 
 <style>
     .provider { display:flex; height:100%; }
-    .provider__sidebar { width:180px; padding:14px; border-right:1px solid var(--demo-border); background:#fafafa; display:flex; flex-direction:column; gap:8px; }
+    /* Outside the canvas, so it takes the site's own surfaces rather than the flow's. */
+    .provider__sidebar { width:180px; padding:14px; border-right:1px solid var(--bb-border); background:var(--bb-surface-sunken); color:var(--bb-text); display:flex; flex-direction:column; gap:8px; }
     .provider__sidebar h4 { margin:0 0 4px; }
     .provider__canvas { flex:1; position:relative; }
 
     /* On a phone a fixed-width sidebar leaves the canvas a sliver: stack it above instead. */
     @@media (max-width: 640px) {
         .provider { flex-direction:column; }
-        .provider__sidebar { width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px; border-right:0; border-bottom:1px solid var(--demo-border); }
+        .provider__sidebar { width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px; border-right:0; border-bottom:1px solid var(--bb-border); }
         .provider__sidebar h4, .provider__sidebar p { flex-basis:100%; margin:0; }
         .provider__canvas { min-height:0; }
     }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ReconnectEdgeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ReconnectEdgeExample.razor
index c4b8bcbbece..8607366fb35 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ReconnectEdgeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ReconnectEdgeExample.razor
@@ -1,11 +1,11 @@
 @page "/examples/reconnect-edge"
 
-<PageTitle>Reconnect Edge - bit Blow</PageTitle>
+<PageTitle>Reconnect Edge · Blow</PageTitle>
 
 <ExampleScaffold Title="Reconnect Edge"
                  Summary="Select an edge, then drag either endpoint (the small circles) onto a different handle to rewire it. The log shows reconnect events.">
     <Toolbar>
-        <span class="text-muted">@_log</span>
+        <span class="bb-muted">@_log</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ReduxExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ReduxExample.razor
index 68c8f2ef68e..e0fb2a5368a 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ReduxExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ReduxExample.razor
@@ -1,15 +1,15 @@
 @page "/examples/redux"
 @implements IDisposable
 
-<PageTitle>External Store - bit Blow</PageTitle>
+<PageTitle>External Store · Blow</PageTitle>
 
 <ExampleScaffold Title="External Store"
                  Summary="Both the canvas and an external toolbar read and mutate a single shared store object (the Redux/Zustand pattern). Dispatching an action updates the store and re-renders the flow.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="@(() => _store.Dispatch(StoreAction.AddNode))">Add node</button>
-        <button class="btn btn-sm" @onclick="@(() => _store.Dispatch(StoreAction.ConnectRandom))">Connect random</button>
-        <button class="btn btn-sm" @onclick="@(() => _store.Dispatch(StoreAction.Reset))">Reset</button>
-        <span class="text-muted">store: @_store.Nodes.Count nodes, @_store.Edges.Count edges</span>
+        <button class="btn btn-primary" @onclick="@(() => _store.Dispatch(StoreAction.AddNode))">Add node</button>
+        <button class="btn btn-secondary" @onclick="@(() => _store.Dispatch(StoreAction.ConnectRandom))">Connect random</button>
+        <button class="btn btn-secondary" @onclick="@(() => _store.Dispatch(StoreAction.Reset))">Reset</button>
+        <span class="bb-muted">store: @_store.Nodes.Count nodes, @_store.Edges.Count edges</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_store.Nodes" Edges="_store.Edges" FitViewOnInit="true"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ResponsiveCanvasExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ResponsiveCanvasExample.razor
index c261b12de48..257c25bff2c 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ResponsiveCanvasExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ResponsiveCanvasExample.razor
@@ -1,15 +1,15 @@
 @page "/examples/responsive-canvas"
 
-<PageTitle>Responsive Canvas - bit Blow</PageTitle>
+<PageTitle>Responsive Canvas · Blow</PageTitle>
 
 <ExampleScaffold Title="Responsive Canvas"
                  Summary="The flow watches its own container and its nodes for size changes, so resizing the canvas or growing a node's content keeps hit-testing, edge anchors and the minimap correct without any work on your part. Drive the viewport from your own state at the same time.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="@(() => Resize(-120))">Narrower</button>
-        <button class="btn btn-sm btn-primary" @onclick="@(() => Resize(120))">Wider</button>
-        <button class="btn btn-sm btn-primary" @onclick="GrowNode">Grow node content</button>
-        <button class="btn btn-sm btn-primary" @onclick="Center">Recenter viewport</button>
-        <span class="text-muted">Canvas width: @_width px</span>
+        <button class="btn btn-primary" @onclick="@(() => Resize(-120))">Narrower</button>
+        <button class="btn btn-primary" @onclick="@(() => Resize(120))">Wider</button>
+        <button class="btn btn-primary" @onclick="GrowNode">Grow node content</button>
+        <button class="btn btn-primary" @onclick="Center">Recenter viewport</button>
+        <span class="bb-muted">Canvas width: @_width px</span>
     </Toolbar>
     <ChildContent>
         <div style="@($"width:{_width}px;max-width:100%;height:100%;")">
@@ -49,7 +49,7 @@
 
 <style>
     .resp-node { padding: 2px; text-align: left; }
-    .resp-line { font-size: 11px; color: #6b7280; }
+    .resp-line { font-size: 11px; color: var(--bit-blow-text-muted); }
     .resp-readout { padding: 6px 10px; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--bit-blow-surface); color: var(--bit-blow-text); border: 1px solid var(--bit-blow-border); border-radius: 6px; }
 </style>
 
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/SaveRestoreExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/SaveRestoreExample.razor
index 90c56390074..113abd55cf2 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/SaveRestoreExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/SaveRestoreExample.razor
@@ -1,15 +1,15 @@
 @page "/examples/save-restore"
 @inject IJSRuntime JS
 
-<PageTitle>Save & Restore - bit Blow</PageTitle>
+<PageTitle>Save & Restore · Blow</PageTitle>
 
 <ExampleScaffold Title="Save & Restore"
                  Summary="Persist the flow (nodes, edges and viewport) to the browser's local storage and reload it later. Move some nodes, Save, change things, then Restore.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="Save">Save</button>
-        <button class="btn btn-sm" @onclick="Restore">Restore</button>
-        <button class="btn btn-sm" @onclick="AddNode">Add node</button>
-        <span class="text-muted">@_status</span>
+        <button class="btn btn-primary" @onclick="Save">Save</button>
+        <button class="btn btn-secondary" @onclick="Restore">Restore</button>
+        <button class="btn btn-secondary" @onclick="AddNode">Add node</button>
+        <span class="bb-muted">@_status</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/SelectionGesturesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/SelectionGesturesExample.razor
index 20996b45204..d5fd95082cf 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/SelectionGesturesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/SelectionGesturesExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/selection-gestures"
 
-<PageTitle>Selection Gestures - bit Blow</PageTitle>
+<PageTitle>Selection Gestures · Blow</PageTitle>
 
 <ExampleScaffold Title="Selection Gestures"
                  Summary="A selection is a thing in its own right, not just several selected nodes. Dragging one member moves them all and reports it as a single OnSelectionDrag rather than a burst of node drags; right-clicking one of them offers the whole selection. The key that opens a selection box is configurable separately from the one that adds to a selection.">
@@ -25,7 +25,7 @@
         <label>
             <input type="checkbox" @bind="_selectionOnDrag" /> Selection on plain drag
         </label>
-        <button class="btn" @onclick="ClearLog">Clear log</button>
+        <button class="btn btn-secondary" @onclick="ClearLog">Clear log</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes"
@@ -72,7 +72,7 @@
         border-radius: 6px;
     }
     .log-title { font-weight: 600; margin-bottom: 4px; }
-    .log-empty { color: #6b7280; line-height: 1.45; }
+    .log-empty { color: var(--bit-blow-text-muted); line-height: 1.45; }
     .log-row { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 0; }
 </style>
 
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/SelfLoopEdgesExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/SelfLoopEdgesExample.razor
index 223c404747e..38cd5863441 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/SelfLoopEdgesExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/SelfLoopEdgesExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/self-loop-edges"
 
-<PageTitle>Self-Connections - bit Blow</PageTitle>
+<PageTitle>Self-Connections · Blow</PageTitle>
 
 <ExampleScaffold Title="Self-Connections"
                  Summary="An edge that comes back to the node it left has no route 'between two nodes' for an ordinary path algorithm to compute, so every one of them collapses onto the node itself. Blow notices and loops the edge clear instead - whatever path type it asked for, and wherever its two handles sit.">
@@ -56,7 +56,7 @@
 <style>
     .loop-node { font-weight: 600; }
     .radius { display: inline-block; min-width: 2.5rem; text-align: right; }
-    .note { margin-left: auto; font-size: 11px; color: #6b7280; }
+    .note { margin-left: auto; font-size: 11px; color: var(--bb-text-soft); }
     .hint {
         max-width: 230px;
         padding: 6px 10px;
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/SetNodesBatchingExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/SetNodesBatchingExample.razor
index ae3ee90ead2..d5c1c518a24 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/SetNodesBatchingExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/SetNodesBatchingExample.razor
@@ -1,14 +1,14 @@
 @page "/examples/set-nodes-batching"
 
-<PageTitle>setNodes Batching - bit Blow</PageTitle>
+<PageTitle>setNodes Batching · Blow</PageTitle>
 
 <ExampleScaffold Title="setNodes Batching"
                  Summary="Add many nodes in a single batched update. AddNodes appends them all and triggers one measure pass instead of one per node.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="@(() => AddBatch(25))">Add 25</button>
-        <button class="btn btn-sm btn-primary" @onclick="@(() => AddBatch(100))">Add 100</button>
-        <button class="btn btn-sm" @onclick="Clear">Clear</button>
-        <span class="text-muted">@_nodes.Count nodes</span>
+        <button class="btn btn-primary" @onclick="@(() => AddBatch(25))">Add 25</button>
+        <button class="btn btn-primary" @onclick="@(() => AddBatch(100))">Add 100</button>
+        <button class="btn btn-secondary" @onclick="Clear">Clear</button>
+        <span class="bb-muted">@_nodes.Count nodes</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" OnlyRenderVisibleElements="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/StressExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/StressExample.razor
index fa94c58572e..4e83e3df9ab 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/StressExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/StressExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/stress"
 
-<PageTitle>Stress - bit Blow</PageTitle>
+<PageTitle>Stress · Blow</PageTitle>
 
 <ExampleScaffold Title="Stress"
                  Summary="A large grid of nodes and edges. 'Only render visible elements' culls off-screen items so panning and zooming stay responsive.">
@@ -13,7 +13,7 @@
             </select>
         </label>
         <label><input type="checkbox" checked="@_cull" @onchange="e => _cull = (bool)e.Value!" /> only render visible</label>
-        <span class="text-muted">@_nodes.Count nodes, @_edges.Count edges</span>
+        <span class="bb-muted">@_nodes.Count nodes, @_edges.Count edges</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/SubflowExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/SubflowExample.razor
index bf9522a046f..31a16ebbafb 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/SubflowExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/SubflowExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/subflow"
 
-<PageTitle>Subflow - bit Blow</PageTitle>
+<PageTitle>Subflow · Blow</PageTitle>
 
 <ExampleScaffold Title="Subflow"
                  Summary="Nodes nested inside group containers via ParentId. Dragging a group moves its children; children with ExtentParent stay within their group's bounds.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/TouchDeviceExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/TouchDeviceExample.razor
index 3b7835b6d95..d3b49078431 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/TouchDeviceExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/TouchDeviceExample.razor
@@ -1,12 +1,12 @@
 @page "/examples/touch-device"
 
-<PageTitle>Touch Device - bit Blow</PageTitle>
+<PageTitle>Touch Device · Blow</PageTitle>
 
 <ExampleScaffold Title="Touch Device"
                  Summary="All interactions are built on pointer events, so dragging nodes, panning, pinch-zooming and connecting handles work with touch as well as mouse. A touchscreen has no Shift key to hold for a box selection, so turn on 'Drag to select' and a one-finger drag on the empty pane draws the box instead of panning. Try it on a touchscreen or with device emulation.">
     <Toolbar>
         <label><input type="checkbox" @bind="_selectionOnDrag" /> Drag to select</label>
-        <span class="text-muted">@(_selectionOnDrag ? "a drag on the pane draws a selection box" : "a drag on the pane pans")</span>
+        <span class="bb-muted">@(_selectionOnDrag ? "a drag on the pane draws a selection box" : "a drag on the pane pans")</span>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" SelectionOnDrag="_selectionOnDrag">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UndoRedoExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UndoRedoExample.razor
index 93daa0d1bb4..6b54af9b446 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UndoRedoExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UndoRedoExample.razor
@@ -1,18 +1,18 @@
 @page "/examples/undo-redo"
-<PageTitle>Undo & Redo - bit Blow</PageTitle>
+<PageTitle>Undo & Redo · Blow</PageTitle>
 
 <ExampleScaffold Title="Undo & Redo"
                  Summary="BlowHistory holds snapshots and hands back the one to restore. It is something you drive rather than something the canvas does for you, because only your app knows what counts as one undoable step - dragging five nodes is one step, not five hundred pointer moves. Capture when a gesture ends; identical captures are ignored, so pressing undo always does something.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" disabled="@(!_history.CanUndo)" @onclick="Undo">
+        <button class="btn btn-primary" disabled="@(!_history.CanUndo)" @onclick="Undo">
             Undo (@_history.UndoDepth)
         </button>
-        <button class="btn btn-sm btn-primary" disabled="@(!_history.CanRedo)" @onclick="Redo">
+        <button class="btn btn-primary" disabled="@(!_history.CanRedo)" @onclick="Redo">
             Redo (@_history.RedoDepth)
         </button>
         <span class="hist-sep"></span>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="AddNode">Add node</button>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Scramble">Scramble</button>
+        <button class="btn btn-secondary" @onclick="AddNode">Add node</button>
+        <button class="btn btn-secondary" @onclick="Scramble">Scramble</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow"
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UpdateNodeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UpdateNodeExample.razor
index f474e259065..76438fbe7a5 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UpdateNodeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UpdateNodeExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/update-node"
 
-<PageTitle>Update Node - bit Blow</PageTitle>
+<PageTitle>Update Node · Blow</PageTitle>
 
 <ExampleScaffold Title="Update Node"
                  Summary="Update a node's label, color and position imperatively from outside the canvas, mirroring React Flow's updateNode example.">
@@ -8,13 +8,14 @@
         <label>label: <input value="@_label" @oninput="e => SetLabel(e.Value?.ToString())" /></label>
         <label>bg:
             <select @onchange="e => SetColor(e.Value?.ToString())">
-                <option value="#ffffff">white</option>
-                <option value="#dbeafe">blue</option>
-                <option value="#dcfce7">green</option>
-                <option value="#fee2e2">red</option>
+                @* Tints mixed into the node's own fill, so each one reads in both colour modes. *@
+                <option value="var(--bit-blow-node-bg)">default</option>
+                <option value="color-mix(in srgb, #3b82f6 22%, var(--bit-blow-node-bg))">blue</option>
+                <option value="color-mix(in srgb, #22c55e 22%, var(--bit-blow-node-bg))">green</option>
+                <option value="color-mix(in srgb, #ef4444 22%, var(--bit-blow-node-bg))">red</option>
             </select>
         </label>
-        <button class="btn btn-sm" @onclick="MoveRandom">Move randomly</button>
+        <button class="btn btn-secondary" @onclick="MoveRandom">Move randomly</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
@@ -33,7 +34,7 @@
 
     protected override void OnInitialized()
     {
-        _target = new BlowNode { Id = "1", Label = _label, Position = new(250, 120), Style = "background:#ffffff;" };
+        _target = new BlowNode { Id = "1", Label = _label, Position = new(250, 120), Style = "background:var(--bit-blow-node-bg);" };
         _nodes =
         [
             _target,
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseConnectionExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseConnectionExample.razor
index fd990691559..017999623d9 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseConnectionExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseConnectionExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/use-connection"
 
-<PageTitle>Use Connection - bit Blow</PageTitle>
+<PageTitle>Use Connection · Blow</PageTitle>
 
 <ExampleScaffold Title="Use Connection"
                  Summary="Observe the in-progress connection live via OnConnectionChange (the equivalent of React Flow's useConnection hook). Start dragging from a handle to watch the panel update.">
@@ -11,7 +11,7 @@
             <div class="conn-panel">
                 @if (_conn is null)
                 {
-                    <span class="text-muted">no active connection</span>
+                    <span class="bb-muted">no active connection</span>
                 }
                 else
                 {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseKeyPressExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseKeyPressExample.razor
index 4d35d318856..548ff5744c3 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseKeyPressExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseKeyPressExample.razor
@@ -1,11 +1,11 @@
 @page "/examples/use-key-press"
 
-<PageTitle>Use Key Press - bit Blow</PageTitle>
+<PageTitle>Use Key Press · Blow</PageTitle>
 
 <ExampleScaffold Title="Use Key Press"
                  Summary="Click the canvas area to focus it, then use keyboard shortcuts: 'a' adds a node, Delete removes the selection. The last key pressed is shown.">
     <Toolbar>
-        <span class="text-muted">last key: <strong>@_lastKey</strong></span>
+        <span class="bb-muted">last key: <strong>@_lastKey</strong></span>
     </Toolbar>
     <ChildContent>
         <div class="keypress" tabindex="0" @onkeydown="OnKeyDown">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodeConnectionsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodeConnectionsExample.razor
index 8eea1169029..a9ad8c0d5dd 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodeConnectionsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodeConnectionsExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/use-node-connections"
 
-<PageTitle>Use Node Connections - bit Blow</PageTitle>
+<PageTitle>Use Node Connections · Blow</PageTitle>
 
 <ExampleScaffold Title="Use Node Connections"
                  Summary="Click a node to list the edges connected to it, along with its incoming and outgoing neighbours, computed with BlowGraphUtils.">
@@ -11,7 +11,7 @@
             <div class="conn-panel">
                 @if (_selected is null)
                 {
-                    <span class="text-muted">click a node</span>
+                    <span class="bb-muted">click a node</span>
                 }
                 else
                 {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodesDataExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodesDataExample.razor
index c5838dec869..5bb1de73e24 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodesDataExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseNodesDataExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/use-nodes-data"
 
-<PageTitle>Use Nodes Data - bit Blow</PageTitle>
+<PageTitle>Use Nodes Data · Blow</PageTitle>
 
 <ExampleScaffold Title="Use Nodes Data"
                  Summary="A node reads another node's data. The 'source' node holds a number; the connected 'result' nodes derive their display from it, recomputing whenever the source changes.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseOnSelectionChangeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseOnSelectionChangeExample.razor
index 12a6116b381..d9c39f702cb 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseOnSelectionChangeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseOnSelectionChangeExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/use-on-selection-change"
 
-<PageTitle>Selection Change - bit Blow</PageTitle>
+<PageTitle>Selection Change · Blow</PageTitle>
 
 <ExampleScaffold Title="Selection Change"
                  Summary="OnSelectionChange fires whenever the selected nodes or edges change. Click to select, Shift-click to add to the selection, or drag across the empty pane to box-select, and the current selection is listed.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseReactFlowExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseReactFlowExample.razor
index bc0918baa29..f087e468035 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseReactFlowExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseReactFlowExample.razor
@@ -1,16 +1,16 @@
 @page "/examples/use-reactflow"
 
-<PageTitle>Use Flow API - bit Blow</PageTitle>
+<PageTitle>Use Flow API · Blow</PageTitle>
 
 <ExampleScaffold Title="Use Flow API"
                  Summary="Call the imperative flow API through a captured reference (the equivalent of React Flow's useReactFlow hook): zoom, fit, add nodes/edges, delete the selection and snapshot the state.">
     <Toolbar>
-        <button class="btn btn-sm" @onclick="@(() => _flow?.ZoomIn())">Zoom in</button>
-        <button class="btn btn-sm" @onclick="@(() => _flow?.ZoomOut())">Zoom out</button>
-        <button class="btn btn-sm" @onclick="@(() => _flow?.FitView())">Fit view</button>
-        <button class="btn btn-sm btn-primary" @onclick="AddRandom">Add node</button>
-        <button class="btn btn-sm" @onclick="DeleteSelected">Delete selected</button>
-        <button class="btn btn-sm" @onclick="Snapshot">Snapshot</button>
+        <button class="btn btn-secondary" @onclick="@(() => _flow?.ZoomIn())">Zoom in</button>
+        <button class="btn btn-secondary" @onclick="@(() => _flow?.ZoomOut())">Zoom out</button>
+        <button class="btn btn-secondary" @onclick="@(() => _flow?.FitView())">Fit view</button>
+        <button class="btn btn-primary" @onclick="AddRandom">Add node</button>
+        <button class="btn btn-secondary" @onclick="DeleteSelected">Delete selected</button>
+        <button class="btn btn-secondary" @onclick="Snapshot">Snapshot</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseUpdateNodeInternalsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseUpdateNodeInternalsExample.razor
index 411e98d1c80..8124c31b0ff 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/UseUpdateNodeInternalsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/UseUpdateNodeInternalsExample.razor
@@ -1,13 +1,13 @@
 @page "/examples/use-update-node-internals"
 @using System.Globalization
 
-<PageTitle>Update Node Internals - bit Blow</PageTitle>
+<PageTitle>Update Node Internals · Blow</PageTitle>
 
 <ExampleScaffold Title="Update Node Internals"
                  Summary="When a node's handles change side or count, the canvas must re-measure so edges stay attached. Flip the handle side and the connected edge re-anchors after the internals update.">
     <Toolbar>
-        <button class="btn btn-sm btn-primary" @onclick="FlipSide">Flip handle side (@_side)</button>
-        <button class="btn btn-sm" @onclick="AddHandle">Add handle</button>
+        <button class="btn btn-primary" @onclick="FlipSide">Flip handle side (@_side)</button>
+        <button class="btn btn-secondary" @onclick="AddHandle">Add handle</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ValidationExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ValidationExample.razor
index 91edb7a770e..48ea98cc179 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ValidationExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ValidationExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/validation"
 
-<PageTitle>Validation - bit Blow</PageTitle>
+<PageTitle>Validation · Blow</PageTitle>
 
 <ExampleScaffold Title="Validation"
                  Summary="Connections are validated while dragging. Here you may only connect handle 'A' to handle 'B'. While you drag, the valid target handle lights up green and the invalid one red, and an invalid target won't accept the drop.">
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ViewportTransitionsExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ViewportTransitionsExample.razor
index 176024af79e..6d4b8ae9811 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ViewportTransitionsExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ViewportTransitionsExample.razor
@@ -1,6 +1,6 @@
 @page "/examples/viewport-transitions"
 
-<PageTitle>Viewport Transitions - bit Blow</PageTitle>
+<PageTitle>Viewport Transitions · Blow</PageTitle>
 
 <ExampleScaffold Title="Viewport Transitions"
                  Summary="Every viewport helper has an async twin that takes a duration. Jumping between two far-apart parts of a graph loses the reader; a short eased transition tells them which way they travelled. Grabbing the pane mid-flight abandons the transition rather than fighting it.">
@@ -11,10 +11,10 @@
                    @oninput="@(e => SetDuration(e.Value))" />
             <span class="duration">@(_duration == 0 ? "instant" : $"{_duration} ms")</span>
         </label>
-        <button class="btn" @onclick="FlyToStart">Fly to Start</button>
-        <button class="btn" @onclick="FlyToFinish">Fly to Finish</button>
-        <button class="btn" @onclick="FitAll">Fit all</button>
-        <button class="btn" @onclick="ZoomInSlowly">Zoom to 200%</button>
+        <button class="btn btn-secondary" @onclick="FlyToStart">Fly to Start</button>
+        <button class="btn btn-secondary" @onclick="FlyToFinish">Fly to Finish</button>
+        <button class="btn btn-secondary" @onclick="FitAll">Fit all</button>
+        <button class="btn btn-secondary" @onclick="ZoomInSlowly">Zoom to 200%</button>
         <span class="state">@_state</span>
     </Toolbar>
     <ChildContent>
@@ -40,7 +40,7 @@
 
 <style>
     .duration { display: inline-block; min-width: 5rem; text-align: right; }
-    .state { margin-left: auto; font-size: 12px; color: #6b7280; }
+    .state { margin-left: auto; font-size: 12px; color: var(--bb-text-soft); }
     .hint {
         max-width: 230px;
         padding: 6px 10px;
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/ZIndexModeExample.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/ZIndexModeExample.razor
index 4405f150d6b..9783492c4a3 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/ZIndexModeExample.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Examples/ZIndexModeExample.razor
@@ -1,19 +1,19 @@
 @page "/examples/zindex-mode"
 
-<PageTitle>Z-Index Mode - bit Blow</PageTitle>
+<PageTitle>Z-Index Mode · Blow</PageTitle>
 
 <ExampleScaffold Title="Z-Index Mode"
                  Summary="How much of the stacking order the canvas manages. Auto lifts the selection and keeps a child above the group it sits in; Basic lifts the selection only; Manual leaves everything to the ZIndex you set yourself. The child node is deliberately listed before its group, so only Auto draws it on top.">
     <Toolbar>
         @foreach (var mode in Enum.GetValues<BlowZIndexMode>())
         {
-            <button class="btn btn-sm @(mode == _mode ? "btn-primary" : "btn-outline-secondary")"
+            <button class="btn @(mode == _mode ? "btn-primary" : "btn-secondary")"
                     @onclick="@(() => _mode = mode)">
                 @mode
             </button>
         }
         <span class="zi-sep"></span>
-        <button class="btn btn-sm btn-outline-secondary" @onclick="Swap">Swap explicit z-index</button>
+        <button class="btn btn-secondary" @onclick="Swap">Swap explicit z-index</button>
     </Toolbar>
     <ChildContent>
         <BlowCanvas Nodes="_nodes" Edges="_edges" ZIndexMode="_mode" FitViewOnInit="true">
@@ -62,13 +62,13 @@
         {
             Id = "red", Position = new(360, 60),
             Width = 140, Height = 90, ZIndex = 1,
-            Style = "background:#fee2e2;border-color:#ef4444;",
+            Style = "background:color-mix(in srgb, #ef4444 20%, var(--bit-blow-node-bg));border-color:#ef4444;",
         };
         _blue = new BlowNode
         {
             Id = "blue", Position = new(430, 110),
             Width = 140, Height = 90, ZIndex = 2,
-            Style = "background:#dbeafe;border-color:#3b82f6;",
+            Style = "background:color-mix(in srgb, #3b82f6 20%, var(--bit-blow-node-bg));border-color:#3b82f6;",
         };
         Relabel();
 
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Examples/_Imports.razor b/src/Utilities/Blow/Demo/Client/Pages/Examples/_Imports.razor
deleted file mode 100644
index bc516a66f17..00000000000
--- a/src/Utilities/Blow/Demo/Client/Pages/Examples/_Imports.razor
+++ /dev/null
@@ -1,2 +0,0 @@
-@* All pages in the examples gallery use the dedicated examples layout. *@
-@layout Bit.Blow.Demo.Client.Layout.ExamplesLayout
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Extras.razor b/src/Utilities/Blow/Demo/Client/Pages/Extras.razor
index ca6fa1f600f..f7c209096e2 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Extras.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Extras.razor
@@ -1,10 +1,10 @@
 @page "/extras"
 
-<PageTitle>Theming &amp; Extras - bit Blow</PageTitle>
+<PageTitle>Theming &amp; Extras · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Theming, Viewport Portal, Single Resize &amp; Graph Utils</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Theming, Viewport Portal, Single Resize &amp; Graph Utils</h1>
+    <p class="bb-subtitle">
         Switch the <strong>color mode</strong>, toggle <strong>loose connections</strong> (connect any handle
         to any handle) and <strong>node origin</strong> (center vs top-left). The teal box is a
         <strong>BlowViewportPortal</strong> annotation (pans/zooms with the graph). The green node uses a single
@@ -14,60 +14,71 @@
 
 <DemoCode />
 
-<div class="demo-canvas" style="height: calc(100vh - 240px);">
-    <BlowCanvas @ref="_flow"
-                Nodes="_nodes"
-                Edges="_edges"
-                FitViewOnInit="true"
-                ColorMode="_colorMode"
-                ConnectionMode="_loose ? BlowConnectionMode.Loose : BlowConnectionMode.Strict"
-                NodeOrigin="_centerOrigin ? new BlowXYPosition(0.5, 0.5) : new BlowXYPosition(0, 0)"
-                HideAttribution="_hideAttribution"
-                OnNodeClick="n => _selected = n">
-        <NodeTemplate Context="node">
-            @if (node.Type == "sized")
-            {
-                <BlowNodeResizeControl Position="BlowResizeDirection.BottomRight" MinWidth="120" MinHeight="60" />
-                <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Top" />
-                <div style="display:flex;align-items:center;justify-content:center;height:100%;font-weight:600;">@node.Label</div>
-                <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Bottom" />
-            }
-            else
-            {
-                <BlowDefaultNode Node="node" />
-            }
-        </NodeTemplate>
-
-        <ChildContent>
-            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
-            <BlowControls />
-            <BlowMiniMap />
-
-            <BlowViewportPortal>
-                <div class="portal-annotation">Region A &middot; flow-space annotation</div>
-            </BlowViewportPortal>
-
-            <BlowPanel Position="top-left">
-                <div class="toolbar">
-                    <label><input type="checkbox" @bind="_dark" @bind:after="ApplyTheme" /> Dark mode</label>
-                    <label><input type="checkbox" @bind="_loose" /> Loose connections</label>
-                    <label><input type="checkbox" @bind="_centerOrigin" /> Center node origin</label>
-                    <label><input type="checkbox" @bind="_hideAttribution" /> Hide attribution</label>
-                    <button class="btn btn-sm btn-primary" @onclick="ShowNeighbors">Neighbors of selected</button>
-                    <div class="hint">@_info</div>
-                </div>
-            </BlowPanel>
-        </ChildContent>
-    </BlowCanvas>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas @ref="_flow"
+                    Nodes="_nodes"
+                    Edges="_edges"
+                    FitViewOnInit="true"
+                    ColorMode="Mode"
+                    Class="@CanvasClass"
+                    ConnectionMode="_loose ? BlowConnectionMode.Loose : BlowConnectionMode.Strict"
+                    NodeOrigin="_centerOrigin ? new BlowXYPosition(0.5, 0.5) : new BlowXYPosition(0, 0)"
+                    HideAttribution="_hideAttribution"
+                    OnNodeClick="n => _selected = n">
+            <NodeTemplate Context="node">
+                @if (node.Type == "sized")
+                {
+                    <BlowNodeResizeControl Position="BlowResizeDirection.BottomRight" MinWidth="120" MinHeight="60" />
+                    <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Top" />
+                    <div style="display:flex;align-items:center;justify-content:center;height:100%;font-weight:600;">@node.Label</div>
+                    <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Bottom" />
+                }
+                else
+                {
+                    <BlowDefaultNode Node="node" />
+                }
+            </NodeTemplate>
+
+            <ChildContent>
+                <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
+                <BlowControls />
+                <BlowMiniMap />
+
+                <BlowViewportPortal>
+                    <div class="portal-annotation">Region A &middot; flow-space annotation</div>
+                </BlowViewportPortal>
+
+                <BlowPanel Position="top-left">
+                    <div class="toolbar">
+                        <label>
+                            Colour mode
+                            <select @bind="_mode">
+                                <option value="site">Site theme</option>
+                                <option value="light">Light</option>
+                                <option value="dark">Dark</option>
+                                <option value="system">System</option>
+                            </select>
+                        </label>
+                        <label><input type="checkbox" @bind="_loose" /> Loose connections</label>
+                        <label><input type="checkbox" @bind="_centerOrigin" /> Center node origin</label>
+                        <label><input type="checkbox" @bind="_hideAttribution" /> Hide attribution</label>
+                        <button class="btn btn-primary" @onclick="ShowNeighbors">Neighbors of selected</button>
+                        <div class="hint">@_info</div>
+                    </div>
+                </BlowPanel>
+            </ChildContent>
+        </BlowCanvas>
+    </div>
 </div>
 
 <style>
     .portal-annotation {
         position:absolute; transform:translate(440px, 40px);
-        background:rgba(13,148,136,0.12); border:1px dashed #0d9488; color:#0f766e;
+        background:rgba(13,148,136,0.12); border:1px dashed #0d9488; color:color-mix(in srgb, #0d9488 70%, var(--bit-blow-text));
         padding:6px 10px; border-radius:6px; font-size:12px; white-space:nowrap; pointer-events:none;
     }
-    .toolbar { display:flex; flex-direction:column; gap:5px; font-size:13px; }
+    .toolbar { display:flex; flex-direction:column; gap:5px; padding:8px 10px; font-size:13px; color:var(--bit-blow-text); background:var(--bit-blow-surface-translucent); border:1px solid var(--bit-blow-border); border-radius:6px; }
     .toolbar label { display:flex; align-items:center; gap:6px; white-space:nowrap; }
     .toolbar .hint { font-size:12px; color:var(--bit-blow-text-muted); max-width:220px; }
 </style>
@@ -77,11 +88,13 @@
     private List<BlowNode> _nodes = new();
     private List<BlowEdge> _edges = new();
 
-    private bool _dark;
     private bool _loose;
     private bool _centerOrigin;
     private bool _hideAttribution;
-    private BlowColorMode _colorMode = BlowColorMode.Light;
+
+    // "site" leaves the canvas to this site's light/dark toggle; any other choice is the canvas's own
+    // ColorMode, and the own-color-mode class tells the site's stylesheet to keep out of it.
+    private string _mode = "site";
     private BlowNode? _selected;
     private string _info = "No node selected.";
 
@@ -91,7 +104,7 @@
         [
             new BlowNode { Id = "1", Type = "input",  Label = "Source", Position = new(240, 30) },
             new BlowNode { Id = "2", Type = "sized",  Label = "Resize ↘", Position = new(120, 170), Width = 150, Height = 70,
-                       Style = "background:#dcfce7;border-color:#16a34a;" },
+                       Style = "background:color-mix(in srgb, #16a34a 18%, var(--bit-blow-node-bg));border-color:#16a34a;" },
             new BlowNode { Id = "3",                  Label = "Node C", Position = new(400, 180) },
             new BlowNode { Id = "4", Type = "output", Label = "Sink",   Position = new(260, 320) },
         ];
@@ -105,7 +118,14 @@
         ];
     }
 
-    private void ApplyTheme() => _colorMode = _dark ? BlowColorMode.Dark : BlowColorMode.Light;
+    private BlowColorMode Mode => _mode switch
+    {
+        "dark" => BlowColorMode.Dark,
+        "system" => BlowColorMode.System,
+        _ => BlowColorMode.Light,
+    };
+
+    private string? CanvasClass => _mode == "site" ? null : "own-color-mode";
 
     private void ShowNeighbors()
     {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/FloatingEdgesDemo.razor b/src/Utilities/Blow/Demo/Client/Pages/FloatingEdgesDemo.razor
index 5b7624ca4f5..a889c984c27 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/FloatingEdgesDemo.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/FloatingEdgesDemo.razor
@@ -1,10 +1,10 @@
 @page "/floating-edges"
 
-<PageTitle>Floating Edges - bit Blow</PageTitle>
+<PageTitle>Floating Edges · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Floating Edges</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Floating Edges</h1>
+    <p class="bb-subtitle">
         Uses the new <code>BlowGraphUtils.GetFloatingEdgeParams</code> helper (a port of React Flow's floating-edge
         math) inside a custom <code>EdgeTemplate</code>. Each edge attaches to the point on a node's border that
         faces the other node and re-anchors live as you drag. Every node is one big handle apart from a thin
@@ -15,41 +15,42 @@
 
 <DemoCode />
 
-<div class="example-toolbar">
-    <label>edge path:
-        <select @onchange="e => _edgeType = Enum.Parse<BlowEdgeType>(e.Value!.ToString()!)">
-            <option value="Straight">Straight</option>
-            <option value="Bezier" selected>Bezier</option>
-            <option value="SmoothStep">SmoothStep</option>
-        </select>
-    </label>
-</div>
-
-<div class="demo-canvas" style="height: calc(100vh - 250px);">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" ConnectionMode="BlowConnectionMode.Loose">
-        <NodeTemplate Context="node">
-            <div class="fl-node" style="@($"background:{Color(node)}")">@node.Label</div>
-            @* Inset, not edge to edge: a handle covering the whole node would leave nothing to
-               press that drags the node instead of starting a connection. *@
-            <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Top"
-                    Style="position:absolute;inset:10px;width:auto;height:auto;border-radius:8px;background:transparent;border:1px dashed rgba(255,255,255,0.55);transform:none;" />
-        </NodeTemplate>
-
-        <EdgeTemplate Context="ctx">
-            <BlowBaseEdge Path="@FloatingPath(ctx.Edge)" StrokeWidth="@(ctx.Edge.Selected ? 3 : 1.5)" />
-        </EdgeTemplate>
-
-        <ConnectionLineTemplate Context="c">
-            <path d="@BlowEdgePath.Compute(_edgeType, c.From.X, c.From.Y, c.FromPosition, c.To.X, c.To.Y, c.ToPosition).Path"
-                  fill="none" stroke="#6366f1" stroke-width="2" stroke-dasharray="6 4" />
-        </ConnectionLineTemplate>
-
-        <ChildContent>
-            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
-            <BlowControls />
-            <BlowMiniMap NodeColorFunc="Color" />
-        </ChildContent>
-    </BlowCanvas>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="bb-demo-bar example-toolbar">
+        <label>edge path:
+            <select @onchange="e => _edgeType = Enum.Parse<BlowEdgeType>(e.Value!.ToString()!)">
+                <option value="Straight">Straight</option>
+                <option value="Bezier" selected>Bezier</option>
+                <option value="SmoothStep">SmoothStep</option>
+            </select>
+        </label>
+    </div>
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" ConnectionMode="BlowConnectionMode.Loose">
+            <NodeTemplate Context="node">
+                <div class="fl-node" style="@($"background:{Color(node)}")">@node.Label</div>
+                @* Inset, not edge to edge: a handle covering the whole node would leave nothing to
+                   press that drags the node instead of starting a connection. *@
+                <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Top"
+                        Style="position:absolute;inset:10px;width:auto;height:auto;border-radius:8px;background:transparent;border:1px dashed rgba(255,255,255,0.55);transform:none;" />
+            </NodeTemplate>
+
+            <EdgeTemplate Context="ctx">
+                <BlowBaseEdge Path="@FloatingPath(ctx.Edge)" StrokeWidth="@(ctx.Edge.Selected ? 3 : 1.5)" />
+            </EdgeTemplate>
+
+            <ConnectionLineTemplate Context="c">
+                <path d="@BlowEdgePath.Compute(_edgeType, c.From.X, c.From.Y, c.FromPosition, c.To.X, c.To.Y, c.ToPosition).Path"
+                      fill="none" stroke="#6366f1" stroke-width="2" stroke-dasharray="6 4" />
+            </ConnectionLineTemplate>
+
+            <ChildContent>
+                <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
+                <BlowControls />
+                <BlowMiniMap NodeColorFunc="Color" />
+            </ChildContent>
+        </BlowCanvas>
+    </div>
 </div>
 
 <style>
diff --git a/src/Utilities/Blow/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Blow/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..b4b2899bf8b
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,165 @@
+@page "/getting-started"
+
+<PageTitle>Getting Started · Blow</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting Started</h1>
+    <p class="bb-subtitle">
+        One package, one namespace and one stylesheet - no services to register. Then a <code>BlowCanvas</code>
+        in a container that has a height is a working node editor over your own <code>List&lt;BlowNode&gt;</code>
+        and <code>List&lt;BlowEdge&gt;</code>.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        The package runs on .NET 8, 9 and 10, in Blazor WebAssembly, Blazor Server, a Blazor Web App and Blazor
+        Hybrid. In a Web App it belongs in the project that holds the pages with a canvas - the <code>.Client</code>
+        project, for pages rendered with <code>InteractiveWebAssembly</code>.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.Blow</pre>
+    <p class="bb-card-desc">
+        Add the namespace to <code>_Imports.razor</code>. Everything in the library - the components, the model,
+        layout, history and the clipboard - lives in it:
+    </p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.Blow</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Link the stylesheet</h3>
+    <p class="bb-card-desc">
+        From the host page - <code>Components/App.razor</code> in a Blazor Web App, <code>wwwroot/index.html</code>
+        in a standalone WebAssembly or a Hybrid app. The link is required: the library does not inject its
+        stylesheet, so leaving it out gives an unstyled canvas rather than an error. Put your own overrides after it.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">link</span> rel=<span class="s">"stylesheet"</span> href=<span class="s">"_content/Bit.Blow/bit-blow.css"</span> /&gt;</pre>
+    <p class="bb-card-desc">
+        On .NET 9 and later, <code>href="@@Assets["_content/Bit.Blow/bit-blow.css"]"</code> in <code>App.razor</code>
+        serves the fingerprinted copy. The script module, <code>_content/Bit.Blow/bit-blow.js</code>, needs no tag:
+        the component imports it the first time it needs it.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> A first flow</h3>
+    <p class="bb-card-desc">
+        The canvas fills its container (<code>width: 100%; height: 100%</code>), so the container needs a height -
+        or give the canvas one directly with <code>Style="height: 600px"</code>. The graph is plain C#: the canvas
+        edits the lists you hand it in place as the user works.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">div</span> style=<span class="s">"height: 400px"</span>&gt;
+    &lt;<span class="k">BlowCanvas</span> @@ref=<span class="s">"_flow"</span> Nodes=<span class="s">"_nodes"</span> Edges=<span class="s">"_edges"</span> FitViewOnInit=<span class="s">"true"</span>&gt;
+        &lt;<span class="k">BlowBackground</span> /&gt;
+        &lt;<span class="k">BlowControls</span> /&gt;
+    &lt;/<span class="k">BlowCanvas</span>&gt;
+&lt;/<span class="k">div</span>&gt;
+
+<span class="k">@@code</span> {
+    <span class="k">private</span> BlowCanvas? _flow;
+
+    <span class="k">private</span> List&lt;BlowNode&gt; _nodes =
+    [
+        <span class="k">new</span> BlowNode { Id = <span class="s">"1"</span>, Type = <span class="s">"input"</span>, Label = <span class="s">"Order placed"</span>, Position = <span class="k">new</span>(0, 0) },
+        <span class="k">new</span> BlowNode { Id = <span class="s">"2"</span>, Label = <span class="s">"Payment"</span>, Position = <span class="k">new</span>(0, 100) },
+        <span class="k">new</span> BlowNode { Id = <span class="s">"3"</span>, Type = <span class="s">"output"</span>, Label = <span class="s">"Shipped"</span>, Position = <span class="k">new</span>(0, 200) },
+    ];
+
+    <span class="k">private</span> List&lt;BlowEdge&gt; _edges =
+    [
+        <span class="k">new</span> BlowEdge { Id = <span class="s">"e1-2"</span>, Source = <span class="s">"1"</span>, Target = <span class="s">"2"</span> },
+        <span class="k">new</span> BlowEdge { Id = <span class="s">"e2-3"</span>, Source = <span class="s">"2"</span>, Target = <span class="s">"3"</span>, Animated = <span class="k">true</span> },
+    ];
+}</pre>
+
+    <div class="bb-demo blow-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-secondary" @onclick="AddStep">Add step</button>
+        </div>
+        <div class="demo-canvas demo-canvas--short">
+            <BlowCanvas @ref="_flow" Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
+                <BlowBackground />
+                <BlowControls />
+            </BlowCanvas>
+        </div>
+    </div>
+
+    <p class="bb-card-desc">
+        That is a working editor. Nodes drag; dragging from a handle to another node connects them; clicking selects,
+        <kbd>Shift</kbd>+click adds to the selection and <kbd>Shift</kbd>+drag on the background draws a selection
+        box; <kbd>Delete</kbd> removes the selection; the wheel zooms toward the cursor, dragging the background pans
+        and two fingers pinch. <kbd>Tab</kbd> reaches every node and edge, <kbd>Enter</kbd> selects, the arrow keys
+        move the selection and <kbd>Escape</kbd> clears it.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Reacting to edits</h3>
+    <p class="bb-card-desc">
+        Your state is always the graph on screen. What the canvas raises tells you when something worth knowing
+        has happened:
+    </p>
+    <ul class="bb-detail-list">
+        <li><code>NodesChanged</code> and <code>EdgesChanged</code> once an edit is complete - a drag released, a resize ended, a connection made, something deleted or pasted. Not on every pointer move.</li>
+        <li><code>OnNodeDrag</code>, <code>OnNodeResize</code> and <code>OnMove</code> while a gesture runs, for live readouts.</li>
+        <li><code>OnSelectionChange</code> when the selected set actually changes.</li>
+        <li><code>OnConnect</code>, <code>OnReconnect</code> and <code>OnDelete</code> for the specific edits. A connection adds its own edge; <code>OnConnect</code> is for side effects.</li>
+    </ul>
+    <p class="bb-card-desc">
+        When your own code changes the graph outside a render of your component - a timer, a message from a server -
+        call <code>_flow.Refresh(remeasure: true)</code>, or <code>InvokeAsync(StateHasChanged)</code> on your component.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Calling the canvas from code</h3>
+    <p class="bb-card-desc">
+        Capture the canvas with <code>@@ref</code> for the imperative API - the counterpart of React Flow's
+        <code>useReactFlow()</code>:
+    </p>
+    <pre class="bb-code">_flow.FitView();
+<span class="k">await</span> _flow.SetCenterAsync(x: 400, y: 200, zoom: 1.5, durationMs: 300);
+BlowXYPosition point = _flow.ScreenToFlowPosition(e.ClientX, e.ClientY);
+
+_flow.AddNodes(node);
+<span class="k">await</span> _flow.DeleteElementsAsync(nodes: [node]);
+BlowNode? found = _flow.GetNode(<span class="s">"2"</span>);
+
+BlowSnapshot snapshot = _flow.ToObject();
+<span class="k">await</span> _flow.RestoreAsync(snapshot);</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Where to go next</h3>
+    <ul class="bb-link-list">
+        <li><a href="basic-flow">Basic Flow</a> - every default gesture on one canvas.</li>
+        <li><a href="custom-nodes">Custom Nodes</a> - your own node markup, with handles wherever you put them.</li>
+        <li><a href="examples">All Examples</a> - more than eighty working pages, most of them ports of React Flow's own.</li>
+        <li><a href="mcp-server">MCP server</a> - point an AI agent at this site and it reads the library instead of guessing.</li>
+    </ul>
+</div>
+
+@code {
+    private BlowCanvas? _flow;
+    private int _next = 4;
+
+    private List<BlowNode> _nodes =
+    [
+        new BlowNode { Id = "1", Type = "input", Label = "Order placed", Position = new(0, 0) },
+        new BlowNode { Id = "2", Label = "Payment", Position = new(0, 100) },
+        new BlowNode { Id = "3", Type = "output", Label = "Shipped", Position = new(0, 200) },
+    ];
+
+    private List<BlowEdge> _edges =
+    [
+        new BlowEdge { Id = "e1-2", Source = "1", Target = "2" },
+        new BlowEdge { Id = "e2-3", Source = "2", Target = "3", Animated = true },
+    ];
+
+    private void AddStep()
+    {
+        var id = (_next++).ToString();
+        _flow?.AddNodes(new BlowNode { Id = id, Label = $"Step {id}", Position = new(220, (_next - 5) * 70) });
+    }
+}
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Home.razor b/src/Utilities/Blow/Demo/Client/Pages/Home.razor
index 3fb3dc3b195..53e7e8c2caa 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Home.razor
@@ -1,69 +1,337 @@
 @page "/"
+@layout MainLayout
 
-<PageTitle>Basic - bit Blow</PageTitle>
+<PageTitle>Blow - node-based editors and diagrams for Blazor</PageTitle>
 
-<div class="demo-header">
-    <h3>Basic Flow</h3>
-    <p class="text-muted">
-        Drag nodes, drag from a handle to another node to connect, scroll to zoom, drag the background to pan.
-        Click a node/edge to select, press <kbd>Delete</kbd> to remove. Hold <kbd>Shift</kbd> for multi-select,
-        or <kbd>Shift</kbd>-drag the background to box-select. See the <strong>Interactions</strong> page for more.
-    </p>
-</div>
+@* The landing page: hero → proof strip → feature grid → code walkthrough → the React Flow mapping →
+   persona tiles → FAQ → final call to action. Everything else on the site is a documentation page
+   under DocsLayout. The hero's flow is live rather than a picture of one - a node editor is best
+   introduced by dragging a node. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Node-based editors for Blazor,<br /><span class="bb-hero-accent">the React Flow way.</span></h1>
+            <p class="bb-hero-sub">
+                Workflow editors, pipelines, state machines and diagrams: a pannable, zoomable <code>BlowCanvas</code>
+                over your own <code>List&lt;BlowNode&gt;</code> and <code>List&lt;BlowEdge&gt;</code>, with custom
+                nodes, handles, five edge paths, sub-flows, a minimap, auto-layout and undo. Dragging, connecting,
+                keyboard handling, layout and edge geometry are written in C# - there is no JavaScript diagram library
+                underneath.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Blow</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="examples" class="btn btn-secondary bb-btn-lg">Browse the examples</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The sample, framed as a window: the markup on top, and what it renders underneath - live, so
+           the first thing a visitor can do here is drag a node or draw an edge. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Workflow.razor</span>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BlowCanvas</span> Nodes=<span class="s">"_nodes"</span> Edges=<span class="s">"_edges"</span> FitViewOnInit=<span class="s">"true"</span>&gt;
+    &lt;<span class="k">BlowBackground</span> /&gt;
+    &lt;<span class="k">BlowControls</span> /&gt;
+&lt;/<span class="k">BlowCanvas</span>&gt;
+
+<span class="k">private</span> List&lt;BlowNode&gt; _nodes =
+[
+    <span class="k">new</span>() { Id = <span class="s">"1"</span>, Type = <span class="s">"input"</span>, Label = <span class="s">"Request"</span>, Position = <span class="k">new</span>(0, 0) },
+    <span class="k">new</span>() { Id = <span class="s">"2"</span>, Label = <span class="s">"Review"</span>, Position = <span class="k">new</span>(-90, 110) },
+    <span class="k">new</span>() { Id = <span class="s">"3"</span>, Type = <span class="s">"output"</span>, Label = <span class="s">"Approve"</span>, Position = <span class="k">new</span>(0, 220) },
+];</pre>
+                <div class="home-hero-flow">
+                    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true" AriaLabel="A live approval workflow">
+                        <BlowBackground />
+                        <BlowControls />
+                    </BlowCanvas>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>Written in C#</strong><span>interaction, layout and edge geometry</span></div>
+        <div><strong>80+ working examples</strong><span>most of them ports of React Flow's own</span></div>
+        <div><strong>Every hosting model</strong><span>WebAssembly, Server, Web App and Hybrid</span></div>
+        <div><strong>Keyboard &amp; screen reader</strong><span>every node and edge in the tab order</span></div>
+    </section>
+
+    @* ============================== Feature grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>Everything a node editor needs - as Blazor components</h2>
+        <p class="bb-section-sub">
+            Blow follows React Flow's concepts and, wherever C# allows, its names. The graph is plain C#: the same
+            lists can be built, validated, laid out, copied and saved with no UI at all, which is what makes a flow
+            testable and usable on a server.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Nodes and handles</h3>
+                <p class="bb-card-desc">
+                    Built-in <code>input</code>, <code>default</code>, <code>output</code> and <code>group</code>
+                    nodes, and a <code>NodeTemplate</code> for anything else - with <code>BlowHandle</code>s wherever
+                    you put them, measured in the browser so edges always meet them.
+                </p>
+                <a href="custom-nodes" class="btn btn-outline">Custom nodes →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Five edge paths</h3>
+                <p class="bb-card-desc">
+                    Bezier, simple bezier, straight, step and smooth step, each tunable per edge, with labels,
+                    arrowheads in any colour and size, animation, and self-connections that loop clear of their node.
+                </p>
+                <a href="edge-types" class="btn btn-outline">Edge types →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Connections with rules</h3>
+                <p class="bb-card-desc">
+                    Drag or click from handle to handle, with proximity snapping, duplicate and self-connection rules,
+                    <code>IsValidConnection</code> on the canvas or on each handle, and reconnection of existing edges.
+                </p>
+                <a href="examples/validation" class="btn btn-outline">Validation →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Sub-flows and resizing</h3>
+                <p class="bb-card-desc">
+                    Children move with their parent and can be pinned inside it or grow it; <code>BlowNodeResizer</code>,
+                    node and edge toolbars and a portal into the zoomed layer sit right next to them.
+                </p>
+                <a href="advanced" class="btn btn-outline">Groups &amp; resizing →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Layout without JavaScript</h3>
+                <p class="bb-card-desc">
+                    <code>BlowLayout</code>'s layered (with crossing reduction), grid and circle layouts, the align and
+                    distribute commands of a drawing tool, and alignment guides while you drag - all in C#.
+                </p>
+                <a href="examples/layouting" class="btn btn-outline">Layouting →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Undo, clipboard and saving</h3>
+                <p class="bb-card-desc">
+                    <code>HistoryEnabled</code> keeps the undo stack and binds Ctrl/Cmd+Z; copy and paste rewire edges
+                    and keep groups intact; <code>ToObject()</code> and <code>RestoreAsync</code> save and reload a flow.
+                </p>
+                <a href="examples/built-in-undo-redo" class="btn btn-outline">Built-in undo →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Install and link the stylesheet</h3>
+                    <p>
+                        One package and one stylesheet link - there are no services to register, and the script module
+                        is imported by the component the first time it needs it.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code">dotnet add package Bit.Blow
+
+<span class="c">&lt;!-- App.razor or index.html --&gt;</span>
+&lt;<span class="k">link</span> rel=<span class="s">"stylesheet"</span> href=<span class="s">"_content/Bit.Blow/bit-blow.css"</span> /&gt;
 
-<DemoCode />
-
-<div class="demo-canvas">
-    <BlowCanvas Nodes="_nodes"
-                Edges="_edges"
-                FitViewOnInit="true"
-                OnConnect="OnConnect">
-        <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
-        <BlowControls />
-        <BlowMiniMap />
-        <BlowPanel Position="top-right">
-            <button class="btn btn-sm btn-primary" @onclick="AddNode">Add node</button>
-        </BlowPanel>
-    </BlowCanvas>
+<span class="c">@@* _Imports.razor *@@</span>
+<span class="k">@@using</span> Bit.Blow</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Render your own nodes</h3>
+                    <p>
+                        A <code>NodeTemplate</code> switches on <code>node.Type</code>, with <code>BlowDefaultNode</code>
+                        for the rest. Handles go wherever the markup puts them; give each its own <code>Id</code> to tell
+                        an edge which one it starts from.
+                    </p>
+                    <a href="custom-nodes">Custom nodes →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BlowCanvas</span> Nodes=<span class="s">"_nodes"</span> Edges=<span class="s">"_edges"</span>&gt;
+    &lt;<span class="k">NodeTemplate</span> Context=<span class="s">"node"</span>&gt;
+        @@if (node.Type == <span class="s">"color"</span>)
+        {
+            &lt;<span class="k">BlowHandle</span> Type=<span class="s">"BlowHandleType.Target"</span> Position=<span class="s">"BlowPosition.Left"</span> /&gt;
+            &lt;<span class="k">div</span>&gt;@@node.Label&lt;/<span class="k">div</span>&gt;
+            &lt;<span class="k">BlowHandle</span> Type=<span class="s">"BlowHandleType.Source"</span> Id=<span class="s">"a"</span> Position=<span class="s">"BlowPosition.Right"</span> /&gt;
+        }
+        <span class="k">else</span>
+        {
+            &lt;<span class="k">BlowDefaultNode</span> Node=<span class="s">"node"</span> /&gt;
+        }
+    &lt;/<span class="k">NodeTemplate</span>&gt;
+&lt;/<span class="k">BlowCanvas</span>&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>React to edits, drive it from code</h3>
+                    <p>
+                        The canvas edits your lists in place and raises <code>NodesChanged</code> once an edit is
+                        complete - not on every pointer move. A <code>@@ref</code> is the imperative API, the counterpart
+                        of <code>useReactFlow()</code>.
+                    </p>
+                    <a href="examples/use-reactflow">Use the flow API →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BlowCanvas</span> @@ref=<span class="s">"_flow"</span> Nodes=<span class="s">"_nodes"</span> Edges=<span class="s">"_edges"</span>
+            NodesChanged=<span class="s">"Save"</span> OnConnect=<span class="s">"OnConnect"</span> /&gt;
+
+_flow.FitView();
+<span class="k">await</span> _flow.SetCenterAsync(x: 400, y: 200, zoom: 1.5, durationMs: 300);
+BlowSnapshot snapshot = _flow.ToObject();   <span class="c">// nodes, edges and viewport</span></pre>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Coming from React Flow?</h2>
+        <p class="bb-section-sub">
+            The same concepts under the names a Blazor component gives them. The main difference is state: there are
+            no change objects to apply - the canvas edits your lists in place and tells you afterwards, and a
+            connection adds its own edge.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="React Flow compared with Bit.Blow">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>React Flow</th><th>Bit.Blow</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>The component</td><td><code>&lt;ReactFlow&gt;</code></td><td><code>&lt;BlowCanvas&gt;</code></td></tr>
+                    <tr><td>The imperative API</td><td><code>useReactFlow()</code></td><td>a <code>@@ref</code> to <code>BlowCanvas</code></td></tr>
+                    <tr><td>Applying edits</td><td><code>onNodesChange</code> + <code>applyNodeChanges</code></td><td>nothing to apply; <code>NodesChanged</code> after the edit</td></tr>
+                    <tr><td>Custom nodes</td><td><code>nodeTypes</code></td><td><code>NodeTemplate</code> switching on <code>node.Type</code></td></tr>
+                    <tr><td>Handles</td><td><code>&lt;Handle type="source" position={Position.Right} /&gt;</code></td><td><code>&lt;BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Right" /&gt;</code></td></tr>
+                    <tr><td>Auto-layout</td><td>dagre or elkjs, outside the library</td><td><code>BlowLayout</code>, built in</td></tr>
+                    <tr><td>Undo and redo</td><td>yours to write</td><td><code>HistoryEnabled</code>, or <code>BlowHistory</code> driven by you</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Blow?</h3>
+                <p class="bb-card-desc">Install, link the stylesheet, give the canvas a height - a working editor in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Coming from React Flow?</h3>
+                <p class="bb-card-desc">Its examples are ported one for one, so the one you know is a click away - with its Blazor source.</p>
+                <a href="examples" class="btn btn-outline">Browse the examples →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this React Flow running through JavaScript interop?</summary>
+                <p>
+                    No. Dragging, selecting, connecting, resizing, keyboard handling, layout and edge geometry are written
+                    in C# and run on Blazor's own event system. A small script module does only what the browser alone
+                    can: measure DOM rectangles, notice when they change, find the handle under a point, hold pointer
+                    capture and keep the page from scrolling under a gesture.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    All of them, on .NET 8, 9 and 10. WebAssembly is the recommended model for editing - every pointer
+                    move is handled in the browser. Server works with the same features, a round trip per move; Auto and
+                    Hybrid work too. A statically rendered page shows the canvas but never becomes interactive.
+                </p>
+            </details>
+            <details>
+                <summary>Why does my canvas not show up?</summary>
+                <p>
+                    The canvas fills its container, so the container needs a height - or give the canvas one with
+                    <code>Style</code>. And the stylesheet is not injected for you: without the
+                    <code>_content/Bit.Blow/bit-blow.css</code> link the canvas renders unstyled.
+                </p>
+            </details>
+            <details>
+                <summary>How large a graph can it handle?</summary>
+                <p>
+                    Every node's position is resolved once per render and edge paths are cached, so a pan rebuilds no
+                    path strings. With <code>OnlyRenderVisibleElements</code> only what intersects the view is rendered -
+                    the stress example builds grids of up to 900 nodes.
+                </p>
+            </details>
+            <details>
+                <summary>Does it have a dark mode?</summary>
+                <p>
+                    Yes: <code>ColorMode</code> is <code>Light</code>, <code>Dark</code> or <code>System</code>, and every
+                    colour - the canvas, the control bar, the minimap, toolbars and labels - is a <code>--bit-blow-*</code>
+                    custom property, so a theme is a handful of overrides. This site's flows follow its theme toggle.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Draw the first edge</h2>
+        <p class="bb-section-sub">One package, one stylesheet, a container with a height - and your app has a node editor.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Blow</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="examples" class="btn btn-secondary bb-btn-lg">Browse the examples</a>
+        </div>
+    </section>
 </div>
 
 @code {
-    private List<BlowNode> _nodes = new();
-    private List<BlowEdge> _edges = new();
-    private int _counter = 4;
-
-    protected override void OnInitialized()
-    {
-        _nodes =
-        [
-            new BlowNode { Id = "1", Type = "input",  Label = "Input Node",  Position = new(250, 25) },
-            new BlowNode { Id = "2",                  Label = "Default Node", Position = new(150, 150) },
-            new BlowNode { Id = "3",                  Label = "Another Node", Position = new(400, 150) },
-            new BlowNode { Id = "4", Type = "output", Label = "Output Node",  Position = new(280, 300) },
-        ];
-
-        _edges =
-        [
-            new BlowEdge { Id = "e1-2", Source = "1", Target = "2", Animated = true },
-            new BlowEdge { Id = "e1-3", Source = "1", Target = "3" },
-            new BlowEdge { Id = "e2-4", Source = "2", Target = "4", Label = "edge label" },
-        ];
-    }
-
-    private void AddNode()
-    {
-        _counter++;
-        _nodes.Add(new BlowNode
-        {
-            Id = _counter.ToString(),
-            Label = $"Node {_counter}",
-            Position = new(Random.Shared.Next(50, 450), Random.Shared.Next(50, 350)),
-        });
-    }
-
-    private void OnConnect(BlowConnection c)
-    {
-        // The edge is already added by the canvas; hook here for side effects.
-        Console.WriteLine($"Connected {c.Source} -> {c.Target}");
-    }
+    private readonly List<BlowNode> _nodes =
+    [
+        new() { Id = "1", Type = "input", Label = "Request", Position = new(0, 0) },
+        new() { Id = "2", Label = "Review", Position = new(-90, 110) },
+        new() { Id = "3", Type = "output", Label = "Approve", Position = new(0, 220) },
+    ];
+
+    private readonly List<BlowEdge> _edges =
+    [
+        new() { Id = "e1-2", Source = "1", Target = "2", Animated = true },
+        new() { Id = "e2-3", Source = "2", Target = "3", Label = "ok" },
+    ];
 }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/Interactions.razor b/src/Utilities/Blow/Demo/Client/Pages/Interactions.razor
index cdc0ab0a0b3..5a7bceb6e8e 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/Interactions.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/Interactions.razor
@@ -1,10 +1,10 @@
 @page "/interactions"
 
-<PageTitle>Interactions - bit Blow</PageTitle>
+<PageTitle>Interactions · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>Interactions Playground</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Interactions Playground</h1>
+    <p class="bb-subtitle">
         Toggle behaviours on the left and watch the event log. <strong>Shift-drag</strong> the background
         to box-select, select an edge to drag its endpoints (<strong>reconnect</strong>), and use the
         imperative API buttons. Arrow keys nudge selected nodes.
@@ -13,71 +13,73 @@
 
 <DemoCode />
 
-<div class="demo-canvas" style="height: calc(100vh - 240px);">
-    <BlowCanvas @ref="_flow"
-                Nodes="_nodes"
-                Edges="_edges"
-                FitViewOnInit="true"
-                SnapToGrid="_snapToGrid"
-                SnapGridX="20" SnapGridY="20"
-                ConnectOnClick="_connectOnClick"
-                SelectionOnDrag="_selectionOnDrag"
-                PanOnScroll="_panOnScroll"
-                ZoomOnDoubleClick="_zoomOnDoubleClick"
-                OnlyRenderVisibleElements="_cullOffscreen"
-                OnConnect="OnConnect"
-                OnConnectStart="@(_ => Log("connect: start"))"
-                OnConnectEnd="@(() => Log("connect: end"))"
-                OnReconnect="OnReconnect"
-                OnSelectionChange="OnSelectionChange"
-                OnNodeDoubleClick="@(e => Log($"dblclick node {e.Node.Id}"))"
-                OnNodeContextMenu="@(e => Log($"context menu on node {e.Node.Id}"))"
-                OnNodeDragStop="@(n => Log($"drag stop {n.Id} @ {n.Position}"))">
-        <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
-        <BlowControls />
-        <BlowMiniMap Pannable="true" />
-
-        <BlowPanel Position="top-left">
-            <div class="toolbar">
-                <label><input type="checkbox" @bind="_snapToGrid" /> Snap to grid</label>
-                <label><input type="checkbox" @bind="_connectOnClick" /> Connect on click</label>
-                <label><input type="checkbox" @bind="_selectionOnDrag" /> Selection on drag</label>
-                <label><input type="checkbox" @bind="_panOnScroll" /> Pan on scroll</label>
-                <label><input type="checkbox" @bind="_zoomOnDoubleClick" /> Zoom on double-click</label>
-                <label><input type="checkbox" @bind="_cullOffscreen" /> Cull off-screen</label>
-            </div>
-        </BlowPanel>
-
-        <BlowPanel Position="top-right">
-            <div class="toolbar">
-                <button class="btn btn-sm btn-primary" @onclick="AddNode">Add node</button>
-                <button class="btn btn-sm" @onclick="DeleteSelected">Delete selected</button>
-                <button class="btn btn-sm" @onclick="() => _flow?.FitView()">Fit view</button>
-                <button class="btn btn-sm" @onclick="() => _flow?.ZoomTo(1.5)">Zoom 1.5×</button>
-                <button class="btn btn-sm" @onclick="Export">Export</button>
-            </div>
-        </BlowPanel>
-
-        @* Bottom-centre: the corners below are taken by the controls and the minimap. *@
-        <BlowPanel Position="bottom-center">
-            <div class="event-log">
-                <div class="event-log__title">Event log &middot; selected: @_selectedCount</div>
-                @foreach (var line in _log)
-                {
-                    <div class="event-log__line">@line</div>
-                }
-            </div>
-        </BlowPanel>
-    </BlowCanvas>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas @ref="_flow"
+                    Nodes="_nodes"
+                    Edges="_edges"
+                    FitViewOnInit="true"
+                    SnapToGrid="_snapToGrid"
+                    SnapGridX="20" SnapGridY="20"
+                    ConnectOnClick="_connectOnClick"
+                    SelectionOnDrag="_selectionOnDrag"
+                    PanOnScroll="_panOnScroll"
+                    ZoomOnDoubleClick="_zoomOnDoubleClick"
+                    OnlyRenderVisibleElements="_cullOffscreen"
+                    OnConnect="OnConnect"
+                    OnConnectStart="@(_ => Log("connect: start"))"
+                    OnConnectEnd="@(() => Log("connect: end"))"
+                    OnReconnect="OnReconnect"
+                    OnSelectionChange="OnSelectionChange"
+                    OnNodeDoubleClick="@(e => Log($"dblclick node {e.Node.Id}"))"
+                    OnNodeContextMenu="@(e => Log($"context menu on node {e.Node.Id}"))"
+                    OnNodeDragStop="@(n => Log($"drag stop {n.Id} @ {n.Position}"))">
+            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
+            <BlowControls />
+            <BlowMiniMap Pannable="true" />
+
+            <BlowPanel Position="top-left">
+                <div class="toolbar">
+                    <label><input type="checkbox" @bind="_snapToGrid" /> Snap to grid</label>
+                    <label><input type="checkbox" @bind="_connectOnClick" /> Connect on click</label>
+                    <label><input type="checkbox" @bind="_selectionOnDrag" /> Selection on drag</label>
+                    <label><input type="checkbox" @bind="_panOnScroll" /> Pan on scroll</label>
+                    <label><input type="checkbox" @bind="_zoomOnDoubleClick" /> Zoom on double-click</label>
+                    <label><input type="checkbox" @bind="_cullOffscreen" /> Cull off-screen</label>
+                </div>
+            </BlowPanel>
+
+            <BlowPanel Position="top-right">
+                <div class="toolbar">
+                    <button class="btn btn-primary" @onclick="AddNode">Add node</button>
+                    <button class="btn btn-secondary" @onclick="DeleteSelected">Delete selected</button>
+                    <button class="btn btn-secondary" @onclick="() => _flow?.FitView()">Fit view</button>
+                    <button class="btn btn-secondary" @onclick="() => _flow?.ZoomTo(1.5)">Zoom 1.5×</button>
+                    <button class="btn btn-secondary" @onclick="Export">Export</button>
+                </div>
+            </BlowPanel>
+
+            @* Bottom-centre: the corners below are taken by the controls and the minimap. *@
+            <BlowPanel Position="bottom-center">
+                <div class="event-log">
+                    <div class="event-log__title">Event log &middot; selected: @_selectedCount</div>
+                    @foreach (var line in _log)
+                    {
+                        <div class="event-log__line">@line</div>
+                    }
+                </div>
+            </BlowPanel>
+        </BlowCanvas>
+    </div>
 </div>
 
 <style>
     .toolbar { display:flex; flex-direction:column; gap:4px; font-size:13px; }
     .toolbar label { display:flex; align-items:center; gap:6px; white-space:nowrap; }
     .toolbar button { width:100%; }
-    .event-log { width:230px; max-height:200px; overflow:auto; font-size:12px; font-family:monospace; }
+    .event-log { width:230px; max-height:200px; overflow:auto; padding:6px 8px; font-size:12px; font-family:monospace; color:var(--bit-blow-text); background:var(--bit-blow-surface-translucent); border:1px solid var(--bit-blow-border); border-radius:6px; }
     .event-log__title { font-weight:600; margin-bottom:4px; font-family:inherit; }
-    .event-log__line { color:#444; padding:1px 0; border-top:1px solid #f0f0f0; }
+    .event-log__line { color:var(--bit-blow-text-muted); padding:1px 0; border-top:1px solid var(--bit-blow-border-subtle); }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/LabelsAndHandles.razor b/src/Utilities/Blow/Demo/Client/Pages/LabelsAndHandles.razor
index ddf8a6d70a8..a3e3915d2b9 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/LabelsAndHandles.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/LabelsAndHandles.razor
@@ -1,10 +1,10 @@
 @page "/labels-handles"
 
-<PageTitle>Labels &amp; Drag Handles - bit Blow</PageTitle>
+<PageTitle>Labels &amp; Drag Handles · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>HTML Edge Labels &amp; Drag Handles</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>HTML Edge Labels &amp; Drag Handles</h1>
+    <p class="bb-subtitle">
         Edges use <strong>HTML labels</strong> (interactive buttons rendered in a non-transformed overlay,
         so they stay a constant size). The purple nodes can only be dragged by their <strong>⠿ handle</strong>
         - clicking the body just selects.
@@ -13,55 +13,58 @@
 
 <DemoCode />
 
-<div class="demo-canvas" style="height: calc(100vh - 240px);">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
-        <NodeTemplate Context="node">
-            @if (node.Type == "panel")
-            {
-                <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Top" />
-                <div class="panel-node">
-                    <BlowDragHandle Class="panel-node__grip">⠿</BlowDragHandle>
-                    <div class="panel-node__title">@node.Label</div>
-                </div>
-                <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Bottom" />
-            }
-            else
-            {
-                <BlowDefaultNode Node="node" />
-            }
-        </NodeTemplate>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
+            <NodeTemplate Context="node">
+                @if (node.Type == "panel")
+                {
+                    <BlowHandle Type="BlowHandleType.Target" Position="BlowPosition.Top" />
+                    <div class="panel-node">
+                        <BlowDragHandle Class="panel-node__grip">⠿</BlowDragHandle>
+                        <div class="panel-node__title">@node.Label</div>
+                    </div>
+                    <BlowHandle Type="BlowHandleType.Source" Position="BlowPosition.Bottom" />
+                }
+                else
+                {
+                    <BlowDefaultNode Node="node" />
+                }
+            </NodeTemplate>
 
-        <EdgeLabelTemplate Context="ctx">
-            <div class="edge-label">
-                <span>@(ctx.Edge.Label ?? ctx.Edge.Id)</span>
-                <button class="edge-label__btn" title="Delete edge" @onclick="() => RemoveEdge(ctx.Edge)">×</button>
-            </div>
-        </EdgeLabelTemplate>
+            <EdgeLabelTemplate Context="ctx">
+                <div class="edge-label">
+                    <span>@(ctx.Edge.Label ?? ctx.Edge.Id)</span>
+                    <button class="edge-label__btn" title="Delete edge" @onclick="() => RemoveEdge(ctx.Edge)">×</button>
+                </div>
+            </EdgeLabelTemplate>
 
-        <ChildContent>
-            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
-            <BlowControls />
-            <BlowMiniMap />
-        </ChildContent>
-    </BlowCanvas>
+            <ChildContent>
+                <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="20" />
+                <BlowControls />
+                <BlowMiniMap />
+            </ChildContent>
+        </BlowCanvas>
+    </div>
 </div>
 
 <style>
     .panel-node { display:flex; align-items:center; gap:8px; padding:2px 4px; }
-    .panel-node__grip { font-size:16px; color:#7c3aed; user-select:none; }
+    .panel-node__grip { font-size:16px; color:#8b5cf6; user-select:none; }
     .panel-node__title { font-weight:600; }
-    .bit-blow-node-panel { background:#f5f3ff; border-color:#7c3aed; }
+    /* A violet tint mixed into the node's own fill, so it reads in the light and the dark mode alike. */
+    .bit-blow-node-panel { background:color-mix(in srgb, #8b5cf6 14%, var(--bit-blow-node-bg)); border-color:#8b5cf6; }
 
     .edge-label {
         display:flex; align-items:center; gap:6px;
-        background:#fff; border:1px solid #ddd; border-radius:6px;
-        padding:2px 6px; font-size:12px; box-shadow:0 1px 3px rgba(0,0,0,0.12);
+        background:var(--bit-blow-surface); color:var(--bit-blow-text); border:1px solid var(--bit-blow-border); border-radius:6px;
+        padding:2px 6px; font-size:12px; box-shadow:0 1px 3px var(--bit-blow-shadow);
     }
     .edge-label__btn {
-        border:none; background:#fee2e2; color:#b91c1c; border-radius:4px;
+        border:none; background:color-mix(in srgb, #ef4444 16%, var(--bit-blow-surface)); color:#ef4444; border-radius:4px;
         width:18px; height:18px; line-height:1; cursor:pointer; padding:0;
     }
-    .edge-label__btn:hover { background:#fecaca; }
+    .edge-label__btn:hover { background:color-mix(in srgb, #ef4444 28%, var(--bit-blow-surface)); }
 </style>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/McpServer.razor b/src/Utilities/Blow/Demo/Client/Pages/McpServer.razor
index 20709d70bfd..c1d3e1db4e7 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/McpServer.razor
@@ -3,11 +3,11 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - bit Blow</PageTitle>
+<PageTitle>MCP server · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>MCP server</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
         This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing node-editor and
         diagram code with Bit.Blow reads the library itself - its compiled API documentation, its guide, its stylesheet,
         the canvas and these demo pages - instead of guessing at an API it half remembers, or borrowing one from React
@@ -15,8 +15,8 @@
     </p>
 </div>
 
-<section class="mcp-panel">
-    <h4>Connect a client</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
@@ -24,47 +24,28 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre class="mcp-output"><code>@ClientConfig</code></pre>
+    <pre class="bb-code">@ClientConfig</pre>
 </section>
 
-<section class="mcp-panel">
-    <h4>Tools</h4>
-
-    <table class="mcp-table">
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code>SearchBlow</code></td>
-                <td>Everything at once - the guide, every public member, the setup guides, the theme, the stylesheet and the demo's pages and examples - each hit with the exact follow-up call.</td>
-            </tr>
-            <tr>
-                <td><code>GetBlowSetupGuide</code></td>
-                <td>The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid - the stylesheet link and the canvas height included.</td>
-            </tr>
-            <tr>
-                <td><code>GetBlowGuideSection</code></td>
-                <td>One section of the reference guide, or the index of sections.</td>
-            </tr>
-            <tr>
-                <td><code>GetBlowApi</code></td>
-                <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
-            </tr>
-            <tr>
-                <td><code>GetBlowTheme</code></td>
-                <td>The <code>--bit-blow-*</code> custom properties with their light and dark values and what each one paints - or one of them in full.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBlowFlow</code></td>
-                <td>What the real canvas makes of a flow's nodes and edges - the problems it reports, its bounds and sub-flows, and optionally a layout - or a sample flow, to see the format.</td>
-            </tr>
-            <tr>
-                <td><code>GetBlowSourceFile</code></td>
-                <td>One demo or library file verbatim - every page and example here is a working flow - or the index of files.</td>
-            </tr>
-        </tbody>
-    </table>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
+
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var tool in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        <td>@((MarkupString)tool.Description)</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
 
     <p>
         The guide, the API, the theme, a sample flow and the sources are also exposed as <code>blow://</code>
@@ -73,78 +54,22 @@
     </p>
 </section>
 
-<section class="mcp-panel">
-    <h4>The same tools over plain HTTP</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
-        <li><a href="/api/mcp/SearchBlow?query=custom%20node%20handles" target="_blank" rel="noopener">/api/mcp/SearchBlow?query=custom node handles</a></li>
-        <li><a href="/api/mcp/GetBlowApi?typeName=BlowCanvas" target="_blank" rel="noopener">/api/mcp/GetBlowApi?typeName=BlowCanvas</a></li>
-        <li><a href="/api/mcp/GetBlowTheme" target="_blank" rel="noopener">/api/mcp/GetBlowTheme</a></li>
-        <li><a href="/api/mcp/InspectBlowFlow" target="_blank" rel="noopener">/api/mcp/InspectBlowFlow</a></li>
-        <li><a href="/api/mcp/GetBlowSourceFile?path=Demo/Client/Pages/CustomNodes.razor" target="_blank" rel="noopener">/api/mcp/GetBlowSourceFile?path=Demo/Client/Pages/CustomNodes.razor</a></li>
+    <ul class="bb-detail-list">
+        @foreach (var (href, text) in HttpExamples)
+        {
+            <li><a href="@href" target="_blank" rel="noopener">@text</a></li>
+        }
     </ul>
 </section>
 
-@* The demo's stylesheet has no panel or table styles of its own - every other page is a canvas - so the
-   few this page needs live with it, built on the site's own --demo-* palette. *@
-<style>
-    .mcp-panel {
-        max-width: 960px;
-        margin-bottom: 1.1rem;
-        padding: 1rem 1.2rem;
-        border: 1px solid var(--demo-border);
-        border-radius: var(--demo-radius);
-        background: var(--demo-surface);
-        box-shadow: var(--demo-shadow);
-        line-height: 1.55;
-    }
-
-    .mcp-panel h4 {
-        margin: 0 0 0.6rem;
-        font-size: 1.05rem;
-    }
-
-    .mcp-panel p {
-        margin: 0.4rem 0;
-    }
-
-    .mcp-output {
-        margin: 0.6rem 0 0;
-        padding: 0.8rem 1rem;
-        overflow-x: auto;
-        border-radius: 8px;
-        background: #f1f2f4;
-        font-size: 0.85rem;
-    }
-
-    .mcp-output code {
-        color: var(--demo-text);
-    }
-
-    .mcp-table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 0.9rem;
-    }
-
-    .mcp-table th,
-    .mcp-table td {
-        padding: 0.45rem 0.6rem;
-        border-bottom: 1px solid var(--demo-border);
-        text-align: left;
-        vertical-align: top;
-    }
-
-    .mcp-table td:first-child {
-        white-space: nowrap;
-    }
-</style>
-
 @code {
     private const string ClientConfig = """
         // .mcp.json (Claude Code, VS Code, and anything else reading this shape)
@@ -157,4 +82,33 @@
           }
         }
         """;
+
+    // The server's tools, in the order an agent usually needs them. The one place to change when a tool is
+    // added, renamed or retired; the description is markup.
+    private static readonly (string Name, string Description)[] Tools =
+    [
+        ("SearchBlow",
+            "Everything at once - the guide, every public member, the setup guides, the theme, the stylesheet and the demo's pages and examples - each hit with the exact follow-up call."),
+        ("GetBlowSetupGuide",
+            "The complete wiring for one render mode: server, wasm, auto, standalone-wasm or hybrid - the stylesheet link and the canvas height included."),
+        ("GetBlowGuideSection",
+            "One section of the reference guide, or the index of sections."),
+        ("GetBlowApi",
+            "One public type with every parameter, property and method, its real default and its documentation - or the index of types."),
+        ("GetBlowTheme",
+            "The <code>--bit-blow-*</code> custom properties with their light and dark values and what each one paints - or one of them in full."),
+        ("InspectBlowFlow",
+            "What the real canvas makes of a flow's nodes and edges - the problems it reports, its bounds and sub-flows, and optionally a layout - or a sample flow, to see the format."),
+        ("GetBlowSourceFile",
+            "One demo or library file verbatim - every page and example here is a working flow - or the index of files."),
+    ];
+
+    private static readonly (string Href, string Text)[] HttpExamples =
+    [
+        ("/api/mcp/SearchBlow?query=custom%20node%20handles", "/api/mcp/SearchBlow?query=custom node handles"),
+        ("/api/mcp/GetBlowApi?typeName=BlowCanvas", "/api/mcp/GetBlowApi?typeName=BlowCanvas"),
+        ("/api/mcp/GetBlowTheme", "/api/mcp/GetBlowTheme"),
+        ("/api/mcp/InspectBlowFlow", "/api/mcp/InspectBlowFlow"),
+        ("/api/mcp/GetBlowSourceFile?path=Demo/Client/Pages/CustomNodes.razor", "/api/mcp/GetBlowSourceFile?path=Demo/Client/Pages/CustomNodes.razor"),
+    ];
 }
diff --git a/src/Utilities/Blow/Demo/Client/Pages/MiniMapDemo.razor b/src/Utilities/Blow/Demo/Client/Pages/MiniMapDemo.razor
index 1fed53711c9..d4a68f4ef0f 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/MiniMapDemo.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/MiniMapDemo.razor
@@ -1,10 +1,10 @@
 @page "/minimap"
 
-<PageTitle>MiniMap Customization - bit Blow</PageTitle>
+<PageTitle>MiniMap Customization · Blow</PageTitle>
 
-<div class="demo-header">
-    <h3>MiniMap Customization</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>MiniMap Customization</h1>
+    <p class="bb-subtitle">
         The BlowMiniMap gained per-node styling and interactivity: <code>NodeColorFunc</code>,
         <code>NodeStrokeColorFunc</code>, <code>BorderRadius</code>, an SVG <code>NodeTemplate</code>, plus
         <code>Pannable</code> and <code>Zoomable</code>. Drag inside the minimap to pan and scroll over it to
@@ -14,34 +14,35 @@
 
 <DemoCode />
 
-<div class="example-toolbar">
-    <label><input type="checkbox" checked="@_pannable" @onchange="e => _pannable = (bool)e.Value!" /> pannable</label>
-    <label><input type="checkbox" checked="@_zoomable" @onchange="e => _zoomable = (bool)e.Value!" /> zoomable</label>
-    <label><input type="checkbox" checked="@_useTemplate" @onchange="e => _useTemplate = (bool)e.Value!" /> custom SVG node template</label>
-</div>
-
-<div class="demo-canvas" style="height: calc(100vh - 250px);">
-    <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
-        <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
-        <BlowControls />
-        @if (_useTemplate)
-        {
-            <BlowMiniMap Width="240" Height="180" Pannable="_pannable" Zoomable="_zoomable">
-                <NodeTemplate Context="node">
-                    <circle cx="@Inv(node.GetRect().Width / 2)" cy="@Inv(node.GetRect().Height / 2)"
-                            r="@Inv(Math.Min(node.GetRect().Width, node.GetRect().Height) / 2)"
-                            fill="@NodeColor(node)" stroke="@(node.Selected ? "#111827" : "transparent")" stroke-width="3" />
-                </NodeTemplate>
-            </BlowMiniMap>
-        }
-        else
-        {
-            <BlowMiniMap Width="240" Height="180" Pannable="_pannable" Zoomable="_zoomable"
-                     NodeColorFunc="NodeColor"
-                     NodeStrokeColorFunc="@(n => n.Selected ? "#111827" : "transparent")"
-                     NodeStrokeWidth="3" BorderRadius="6" />
-        }
-    </BlowCanvas>
+<div class="bb-demo blow-demo bb-page-wide">
+    <div class="bb-demo-bar example-toolbar">
+        <label><input type="checkbox" checked="@_pannable" @onchange="e => _pannable = (bool)e.Value!" /> pannable</label>
+        <label><input type="checkbox" checked="@_zoomable" @onchange="e => _zoomable = (bool)e.Value!" /> zoomable</label>
+        <label><input type="checkbox" checked="@_useTemplate" @onchange="e => _useTemplate = (bool)e.Value!" /> custom SVG node template</label>
+    </div>
+    <div class="demo-canvas">
+        <BlowCanvas Nodes="_nodes" Edges="_edges" FitViewOnInit="true">
+            <BlowBackground Variant="BlowBackgroundVariant.Dots" Gap="16" />
+            <BlowControls />
+            @if (_useTemplate)
+            {
+                <BlowMiniMap Width="240" Height="180" Pannable="_pannable" Zoomable="_zoomable">
+                    <NodeTemplate Context="node">
+                        <circle cx="@Inv(node.GetRect().Width / 2)" cy="@Inv(node.GetRect().Height / 2)"
+                                r="@Inv(Math.Min(node.GetRect().Width, node.GetRect().Height) / 2)"
+                                fill="@NodeColor(node)" stroke="@(node.Selected ? "var(--bit-blow-text)" : "transparent")" stroke-width="3" />
+                    </NodeTemplate>
+                </BlowMiniMap>
+            }
+            else
+            {
+                <BlowMiniMap Width="240" Height="180" Pannable="_pannable" Zoomable="_zoomable"
+                         NodeColorFunc="NodeColor"
+                         NodeStrokeColorFunc="@(n => n.Selected ? "var(--bit-blow-text)" : "transparent")"
+                         NodeStrokeWidth="3" BorderRadius="6" />
+            }
+        </BlowCanvas>
+    </div>
 </div>
 
 @code {
diff --git a/src/Utilities/Blow/Demo/Client/Pages/NotFound.razor b/src/Utilities/Blow/Demo/Client/Pages/NotFound.razor
index 091b6b8bc5e..3d94dd5f6ff 100644
--- a/src/Utilities/Blow/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Blow/Demo/Client/Pages/NotFound.razor
@@ -1,5 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
+<PageTitle>Not found · Blow</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Blow/Demo/Client/Routes.razor b/src/Utilities/Blow/Demo/Client/Routes.razor
index 4b567cd117d..989f92736d1 100644
--- a/src/Utilities/Blow/Demo/Client/Routes.razor
+++ b/src/Utilities/Blow/Demo/Client/Routes.razor
@@ -1,6 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h3" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/Blow/Demo/Server/Components/App.razor b/src/Utilities/Blow/Demo/Server/Components/App.razor
index 6145e44b852..5e3ddbff65c 100644
--- a/src/Utilities/Blow/Demo/Server/Components/App.razor
+++ b/src/Utilities/Blow/Demo/Server/Components/App.razor
@@ -4,17 +4,34 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="bit Blow (Bit.Blow) - a Blazor-native library for node-based UIs, editors, flow charts and diagrams, a Blazor counterpart to React Flow, with interaction, layout and geometry written in C#." />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Blow (Bit.Blow) - a Blazor-native library for node-based UIs, editors, flow charts and diagrams, a Blazor counterpart to React Flow, with interaction, layout and geometry written in C#." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Blow" />
+    <meta property="og:title" content="Blow - node-based editors and diagrams for Blazor" />
+    <meta property="og:description" content="The Blazor counterpart to React Flow: nodes, handles, edges, sub-flows, layout, undo and a minimap - with the interaction and the geometry written in C#." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
     @* The library's stylesheet. Unlike its script, it is not loaded on demand: without it the canvas,
-       its nodes and its add-ons render unstyled. *@
+       its nodes and its add-ons render unstyled. demo.css re-tints its --bit-blow-* properties from
+       :root down, a step more specific than the .bit-blow they are declared on, so it wins from
+       above this link as well. *@
     <link rel="stylesheet" href="@Assets["_content/Bit.Blow/bit-blow.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
     <link rel="stylesheet" href="@Assets["Bit.Blow.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -31,6 +48,7 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Blow/Demo/Server/Services/BlowSourceCatalog.cs b/src/Utilities/Blow/Demo/Server/Services/BlowSourceCatalog.cs
index 4de63ccf2f2..f3caaf31fb1 100644
--- a/src/Utilities/Blow/Demo/Server/Services/BlowSourceCatalog.cs
+++ b/src/Utilities/Blow/Demo/Server/Services/BlowSourceCatalog.cs
@@ -287,7 +287,8 @@ private static FrozenDictionary<string, BlowSourceFileDto> BuildRouteIndex()
     /// <summary>
     /// What a file is for: an example is one entry of the gallery, a page is one of the hand-written
     /// tours of a feature, the hosting files are the wiring every app needs once, a library file is
-    /// shipped by the package itself, and the rest is what the pages share.
+    /// shipped by the package itself, and the rest is what the pages share. The site's chrome - the
+    /// layouts and the catalog they are driven from - is hosting, not an example.
     /// </summary>
     private static string KindOf(string path)
     {
@@ -297,6 +298,7 @@ private static string KindOf(string path)
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
+            path.Equals("Demo/Client/DocsCatalog.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -461,7 +463,7 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"<ExampleScaffold\b[^>]*?\bSummary=""(?<text>[^""]*)""", RegexOptions.Singleline)]
     private static partial Regex ScaffoldSummaryRegex();
 
-    [GeneratedRegex(@"<div class=""demo-header"">\s*<h3>.*?</h3>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex DemoHeaderRegex();
 
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/app.css b/src/Utilities/Blow/Demo/Server/wwwroot/app.css
index 34725443cfc..7b51a42ea90 100644
--- a/src/Utilities/Blow/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/app.css
@@ -1,329 +1,2820 @@
-/* The demo site's own palette. Prefixed --demo-, not --bit-blow-: the library defines its theme tokens
-   under that prefix (on .bit-blow), and a page-level token of the same name with a different
-   meaning - a whole box-shadow where the library expects a colour - breaks whatever reads it. */
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
 :root {
-    --demo-bg: #f7f8fa;
-    --demo-surface: #ffffff;
-    --demo-border: #e3e6ea;
-    --demo-text: #1f2430;
-    --demo-muted: #6b7280;
-    --demo-primary: #6366f1;
-    --demo-primary-hover: #4f46e5;
-    --demo-primary-contrast: #ffffff;
-    --demo-radius: 10px;
-    --demo-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
-}
-
-* {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
-html, body {
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
     margin: 0;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    color: var(--demo-text);
-    background: var(--demo-bg);
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
 }
 
-h1, h2, h3, h4 {
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    line-height: 1.25;
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
 }
 
-/* Page headings take focus on navigation (FocusOnNavigate in App.razor) so a screen reader
-   starts reading at the new page; that focus is not something to draw a ring around. */
-h3:focus {
-    outline: none;
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
 }
 
 a {
-    color: var(--demo-primary);
+    color: var(--bb-primary);
     text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
 a:hover {
+    color: var(--bb-primary-hover);
     text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
 }
 
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
 kbd {
     display: inline-block;
-    padding: 1px 6px;
-    font-size: 0.78em;
-    font-family: inherit;
-    color: var(--demo-text);
-    background: #f1f2f4;
-    border: 1px solid var(--demo-border);
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
     border-bottom-width: 2px;
-    border-radius: 5px;
+    border-radius: var(--bb-radius);
 }
 
-code {
-    color: #c02d76;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
 }
 
-.text-muted {
-    color: var(--demo-muted);
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
 }
 
-/* Buttons */
-.btn {
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 6px;
-    font: inherit;
-    font-weight: 500;
-    line-height: 1;
-    padding: 8px 14px;
-    border: 1px solid var(--demo-border);
-    border-radius: 8px;
-    background: var(--demo-surface);
-    color: var(--demo-text);
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
     cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
 .btn:hover {
-    background: #f1f2f4;
+    text-decoration: none;
 }
 
-.btn:active {
-    transform: translateY(1px);
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
 }
 
-.btn:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
 }
 
-.btn-sm {
-    padding: 6px 10px;
-    font-size: 0.85rem;
-    border-radius: 7px;
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
 }
 
-.btn-primary {
-    background: var(--demo-primary);
-    border-color: var(--demo-primary);
-    color: var(--demo-primary-contrast);
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
 }
 
-.btn-primary:hover {
-    background: var(--demo-primary-hover);
-    border-color: var(--demo-primary-hover);
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-/* A quieter secondary action: no fill, muted text until hovered. */
-.btn-outline-secondary {
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
     background: transparent;
-    color: var(--demo-muted);
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
 }
 
-.btn-outline-secondary:hover {
-    background: #f1f2f4;
-    color: var(--demo-text);
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
 }
 
-.btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
 }
 
-.btn:disabled:active {
-    transform: none;
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-/* Blazor framework UI */
-#blazor-error-ui {
-    color-scheme: light only;
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
 
-.blazor-error-boundary {
-    background: #b32121;
-    padding: 1rem;
-    color: white;
-    border-radius: var(--demo-radius);
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
 }
 
-    .blazor-error-boundary::after {
-        content: "An error has occurred.";
-    }
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
 
-.loading-progress {
-    position: absolute;
-    display: block;
-    width: 8rem;
-    height: 8rem;
-    inset: 20vh 0 auto 0;
-    margin: 0 auto 0 auto;
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-    }
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
 
-        .loading-progress circle:last-child {
-            stroke: var(--demo-primary);
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
 
-.loading-progress-text {
-    position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
 }
 
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
 
-/* Demo page helpers */
-.demo-header {
-    margin-bottom: 1.1rem;
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
 }
 
-    .demo-header h3 {
-        margin: 0 0 0.4rem;
-        font-size: 1.4rem;
-    }
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
 
-    .demo-header p {
-        margin: 0;
-        max-width: 70ch;
-        line-height: 1.55;
-    }
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
 
-.demo-canvas {
-    height: calc(100vh - 230px);
-    min-height: 420px;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
-    box-shadow: var(--demo-shadow);
-    overflow: hidden;
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
 }
 
-/* Example pages: toolbar above the canvas */
-.example-toolbar {
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.65rem 1rem;
     align-items: center;
-    margin-bottom: 0.8rem;
-    padding: 0.6rem 0.8rem;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
-    font-size: 0.88rem;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
 }
 
-.example-toolbar label {
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
     display: inline-flex;
     align-items: center;
-    gap: 0.35rem;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.example-toolbar select,
-.example-toolbar input[type="text"],
-.example-toolbar input:not([type]) {
-    padding: 4px 6px;
-    border: 1px solid var(--demo-border);
-    border-radius: 6px;
-    font: inherit;
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
 }
 
-/* "View code" toggle + source panel */
-.demo-code {
-    margin-top: 1rem;
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
 }
 
-.demo-code__toggle {
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
-    font: inherit;
-    font-weight: 500;
-    font-size: 0.88rem;
-    padding: 6px 12px;
-    border: 1px solid var(--demo-border);
-    border-radius: 8px;
-    background: var(--demo-surface);
-    color: var(--demo-text);
-    cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.demo-code__toggle:hover {
-    background: #f1f2f4;
-    border-color: var(--demo-primary);
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
 }
 
-.demo-code__toggle:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
 }
 
-.demo-code__caret {
-    font-size: 0.8em;
-    color: var(--demo-muted);
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
 }
 
-.demo-code__glyph {
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    color: var(--demo-primary);
-    font-weight: 600;
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
 }
 
-.demo-code__pre {
-    margin: 0.7rem 0 0;
-    padding: 1rem 1.1rem;
-    max-height: 520px;
-    overflow: auto;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: #1e2430;
-    box-shadow: var(--demo-shadow);
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
 }
 
-.demo-code__code {
-    display: block;
-    color: #e6e9ef;
-    background: none;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.82rem;
-    line-height: 1.55;
-    white-space: pre;
-    tab-size: 4;
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
 }
 
-.demo-code__empty {
-    margin-top: 0.7rem;
-    font-size: 0.88rem;
-    color: var(--demo-muted);
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
 }
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/demo.css b/src/Utilities/Blow/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..56b471f8408
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,146 @@
+/* ============================================================================================
+   Blow demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Blow's own - the frame a flow runs in, the toolbar over it,
+   the examples gallery, the landing page's live flow - and it ties the library's own theme to the
+   site's: the canvas follows the light/dark toggle, and its selection colours are the bit brand.
+   Each page keeps the styles of its own nodes and panels next to its markup, written against the
+   library's --bit-blow-* properties, so they follow the colour mode with the canvas.
+   ============================================================================================ */
+
+/* ---------- The library's theme, tinted with the bit brand ----------
+
+   One accent paints the selection, the selection box, focus rings, resize controls and the line
+   drawn while connecting. :root in front of the class makes these outrank bit-blow.css, which
+   declares the same properties on .bit-blow and is linked after this file; the dark mode copies
+   --bit-blow-dark-accent over the three, so it is tinted through that. */
+:root .bit-blow {
+    --bit-blow-node-selected: #1276C6;
+    --bit-blow-edge-selected: #1276C6;
+    --bit-blow-connection-stroke: #1276C6;
+    --bit-blow-dark-accent: #4FA3F4;
+}
+
+/* ---------- Every flow follows the site's theme ----------
+
+   Under the dark site theme a flow takes the library's own dark palette - the very rule
+   ColorMode="Dark" applies with .bit-blow-dark, copied here because the pages leave ColorMode at its
+   default rather than each wiring it to the theme toggle. A canvas that picks its colour mode itself
+   (the Color Mode example, the Theming page) carries .own-color-mode and is left alone, so the mode
+   chosen there is the one on screen. */
+:root[bit-theme="dark"] .bit-blow:not(.own-color-mode) {
+    --bit-blow-bg: var(--bit-blow-dark-bg);
+    --bit-blow-node-bg: var(--bit-blow-dark-node-bg);
+    --bit-blow-node-border: var(--bit-blow-dark-node-border);
+    --bit-blow-node-color: var(--bit-blow-dark-node-color);
+    --bit-blow-node-selected: var(--bit-blow-dark-accent);
+    --bit-blow-edge-stroke: var(--bit-blow-dark-edge-stroke);
+    --bit-blow-edge-selected: var(--bit-blow-dark-accent);
+    --bit-blow-connection-stroke: var(--bit-blow-dark-accent);
+    --bit-blow-handle-bg: var(--bit-blow-dark-handle-bg);
+    --bit-blow-node-input-border: var(--bit-blow-dark-node-input-border);
+    --bit-blow-node-output-border: var(--bit-blow-dark-node-output-border);
+    --bit-blow-surface: var(--bit-blow-dark-surface);
+    --bit-blow-surface-hover: var(--bit-blow-dark-surface-hover);
+    --bit-blow-surface-muted: var(--bit-blow-dark-surface-muted);
+    --bit-blow-surface-muted-hover: var(--bit-blow-dark-surface-muted-hover);
+    --bit-blow-surface-translucent: var(--bit-blow-dark-surface-translucent);
+    --bit-blow-border: var(--bit-blow-dark-border);
+    --bit-blow-border-subtle: var(--bit-blow-dark-border-subtle);
+    --bit-blow-text: var(--bit-blow-dark-text);
+    --bit-blow-text-muted: var(--bit-blow-dark-text-muted);
+    --bit-blow-shadow: var(--bit-blow-dark-shadow);
+    --bit-blow-group-bg: var(--bit-blow-dark-group-bg);
+    --bit-blow-group-border: var(--bit-blow-dark-group-border);
+    --bit-blow-background-pattern: var(--bit-blow-dark-background-pattern);
+    --bit-blow-minimap-node: var(--bit-blow-dark-minimap-node);
+    --bit-blow-minimap-mask: var(--bit-blow-dark-minimap-mask);
+    color: var(--bit-blow-node-color);
+    color-scheme: dark;
+}
+
+/* ---------- The frame a flow runs in ----------
+
+   The kit's live-sample surface, with the canvas edge to edge inside it rather than on a padded
+   stage: a flow is the whole sample. The toolbar over it is the kit's demo bar, flush with the
+   frame. */
+.blow-demo {
+    padding: 0;
+    overflow: hidden;
+}
+
+.blow-demo > .bb-demo-bar {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-radius: 0;
+}
+
+/* A canvas fills its container, so the container is what has the height: as much of the window as
+   the header, the page's title block and the "View code" toggle leave, so the whole flow - the
+   controls and the minimap at its bottom included - is on screen without scrolling; within bounds
+   that keep a flow usable on a phone and stop it towering over a reader on a tall monitor. */
+.demo-canvas {
+    position: relative;
+    height: clamp(24rem, calc(100vh - 25rem), 46rem);
+}
+
+/* The toolbar's controls: labels hold their control and its value on one line, and the row wraps
+   on a narrow screen rather than pushing the page sideways. */
+.example-toolbar {
+    gap: .5rem 1rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.example-toolbar label {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    min-width: 0;
+}
+
+.example-toolbar input[type="range"] {
+    max-width: 10rem;
+}
+
+/* ---------- The "View code" toggle: the kit's secondary button, with the caret and the code glyph in it. ---------- */
+
+.demo-code__caret {
+    font-size: .8em;
+    color: var(--bb-text-soft);
+}
+
+.demo-code__glyph {
+    font-family: var(--bb-mono);
+    color: var(--bb-primary);
+}
+
+/* ---------- The examples gallery ---------- */
+
+.example-card {
+    gap: .25rem;
+}
+
+.example-card__title {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.example-card__summary {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+/* ---------- The landing page's hero: the live flow under its markup, inside the window frame. ---------- */
+
+.home-hero-flow {
+    position: relative;
+    height: 300px;
+    border-top: 1px solid var(--bb-border);
+}
+
+/* The getting-started page's first flow: the same frame as every other sample, a little shorter. */
+.demo-canvas.demo-canvas--short {
+    height: 22rem;
+}
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Blow/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/site.js b/src/Utilities/Blow/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Blow/Demo/Server/wwwroot/theme.js b/src/Utilities/Blow/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Blow/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Blow/README.md b/src/Utilities/Blow/README.md
index 3e118fae2b6..e902c9bb2a8 100644
--- a/src/Utilities/Blow/README.md
+++ b/src/Utilities/Blow/README.md
@@ -109,10 +109,11 @@ the first time it needs it. The full walkthrough is in [getting started](#gettin
 The demo site, [blow.bitplatform.dev](https://blow.bitplatform.dev), is a catalogue of more than eighty working
 examples under `/examples`, grouped the way this guide is: basics, nodes, edges, handles and connections,
 interaction, viewport and layout, state and API, and add-ons. Most of them are ports of React Flow's own examples,
-so a React Flow user can open the same example on both sides. A handful of hand-written tour pages sit next to the
-catalogue (`/custom-nodes`, `/edge-types`, `/custom-edges`, `/interactions`, `/labels-handles`, `/extras`,
-`/advanced`, `/connection-line`, `/add-node-on-drop`, `/floating-edges`, `/minimap`, `/drag-threshold`). Every
-page can show its own source.
+so a React Flow user can open the same example on both sides. A getting-started page (`/getting-started`) and a
+handful of hand-written tour pages sit next to the catalogue (`/basic-flow`, `/custom-nodes`, `/edge-types`,
+`/custom-edges`, `/interactions`, `/labels-handles`, `/extras`, `/advanced`, `/connection-line`, `/add-node-on-drop`,
+`/floating-edges`, `/minimap`, `/drag-threshold`), all of them reachable from the docs navigation and the search
+palette (`/` or Ctrl+K). Every page can show its own source, and every flow on the site follows its light/dark theme.
 
 To run it locally:
 
diff --git a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/DemoPagesTests.cs b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/DemoPagesTests.cs
index ca42de681b4..a68e7962368 100644
--- a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/DemoPagesTests.cs
+++ b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/DemoPagesTests.cs
@@ -35,8 +35,10 @@ public async Task Every_demo_page_loads_interactively_and_runs_every_button_with
                 $"{path} has {flows} flow(s) but never loaded bit-blow.js");
         }
 
-        // Every enabled button of the page must run without throwing: a dead or broken control is a demo bug.
-        var buttons = page.Locator(".content button:enabled:visible");
+        // Every enabled button of the page must run without throwing: a dead or broken control is a demo bug. The
+        // page is the docs column (or the landing page), not the site chrome around it; the copy buttons the site
+        // script hangs on its code blocks are that chrome too.
+        var buttons = page.Locator(":is(.bb-docs-content, .bb-landing) button:enabled:visible:not(.bb-copy-btn)");
         int count = Math.Min(await buttons.CountAsync(), 40);
         for (int i = 0; i < count; i++)
         {
@@ -68,11 +70,11 @@ public async Task The_examples_gallery_links_to_every_example_page()
         var expected = RepoLayout.DemoRoutes().Where(r => r.StartsWith("/examples/", StringComparison.Ordinal)).ToArray();
         Assert.IsTrue(expected.Length > 50, $"only {expected.Length} example pages were found in the sources");
 
-        // The cards on the index and the links in the gallery's own sidebar both have to reach every page.
-        foreach (var selector in new[] { "a.example-card", "a.ex-sublink" })
+        // The cards on the index and the example links in the docs navigation both have to reach every page.
+        foreach (var selector in new[] { "a.example-card", ".bb-docs-sidebar .bb-docs-section a" })
         {
             var links = await page.EvaluateAsync<string[]>(
-                "(s) => [...document.querySelectorAll(s)].map(a => new URL(a.href).pathname)", selector);
+                "(s) => [...document.querySelectorAll(s)].map(a => new URL(a.href).pathname).filter(p => p.startsWith('/examples/'))", selector);
             CollectionAssert.AreEquivalent(expected, links, $"the {selector} links do not match the example pages");
         }
     }
@@ -80,21 +82,25 @@ public async Task The_examples_gallery_links_to_every_example_page()
     [TestMethod]
     public async Task Navigating_between_the_demos_in_the_app_leaves_a_working_canvas_behind()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var problems = TrackProblems(page, BaseUrl);
 
-        // Client-side navigation through every main demo: each canvas is torn down (its resize observer and
-        // input guards disposed) and the next one set up, all in the same WebAssembly instance.
-        var links = page.Locator(".sidebar a.nav-link");
+        // Client-side navigation through every main demo - the introduction and the feature tours of the docs
+        // navigation: each canvas is torn down (its resize observer and input guards disposed) and the next one
+        // set up, all in the same WebAssembly instance.
+        var links = page.Locator(".bb-docs-sidebar :is(ul[aria-label='Introduction'], ul[aria-label='Feature Tours']) a");
         int count = await links.CountAsync();
         Assert.IsTrue(count > 5, $"the sidebar offers only {count} demos");
-        for (int i = 1; i < count; i++)
+        for (int i = 0; i < count; i++)
         {
+            var href = await links.Nth(i).GetAttributeAsync("href");
+            if (href == "/basic-flow") continue;
             await links.Nth(i).ClickAsync();
+            await page.WaitForURLAsync(BaseUrl + href);
             await WaitForQuietAsync(page);
         }
-        await links.Nth(0).ClickAsync();
-        await page.WaitForURLAsync(BaseUrl + "/");
+        await links.Filter(new LocatorFilterOptions { HasText = "Basic Flow" }).ClickAsync();
+        await page.WaitForURLAsync(BaseUrl + "/basic-flow");
         await WaitForFlowAsync(page);
         await ScrollFlowIntoViewAsync(page);
         await WaitForEdgesAnchoredAsync(page);
diff --git a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GestureTests.cs b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GestureTests.cs
index 76475b63561..a76cd8ac66d 100644
--- a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GestureTests.cs
+++ b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GestureTests.cs
@@ -16,7 +16,7 @@ public sealed class GestureTests : BlowTest
     [TestMethod]
     public async Task Dragging_a_node_moves_it_with_the_pointer_and_its_edges_follow()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         await WaitForEdgesAnchoredAsync(page);
 
         var before = await NodeBoxAsync(page, "2");
@@ -40,7 +40,7 @@ public async Task Dragging_a_node_moves_it_with_the_pointer_and_its_edges_follow
     [TestMethod]
     public async Task A_drag_keeps_following_the_pointer_after_it_leaves_the_canvas()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
         var node = await NodeBoxAsync(page, "2");
         var grab = node.Centre;
@@ -70,7 +70,7 @@ public async Task A_drag_keeps_following_the_pointer_after_it_leaves_the_canvas(
     [TestMethod]
     public async Task Dragging_from_a_source_handle_to_a_target_handle_connects_them()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         await WaitForEdgesAnchoredAsync(page);
 
         var source = await HandleCentreAsync(page, "3", "source");
@@ -105,7 +105,7 @@ public async Task Dragging_from_a_source_handle_to_a_target_handle_connects_them
     [TestMethod]
     public async Task A_connection_dropped_on_empty_space_is_abandoned()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
 
         await DragAsync(page, await HandleCentreAsync(page, "3", "source"), new Point(pane.Right - 60, pane.Bottom - 230));
@@ -117,11 +117,11 @@ public async Task A_connection_dropped_on_empty_space_is_abandoned()
     [TestMethod]
     public async Task The_wheel_zooms_about_the_cursor()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
         var before = await ViewportAsync(page);
 
-        var cursor = new Point(pane.X + pane.Width * 0.3, pane.Y + pane.Height * 0.6);
+        var cursor = new Point(pane.X + pane.Width * 0.3, pane.Y + pane.Height * 0.6).Snapped();
         await WheelAsync(page, cursor, -150);
 
         var after = await ViewportAsync(page);
@@ -141,7 +141,7 @@ public async Task The_wheel_zooms_about_the_cursor()
     [TestMethod]
     public async Task Dragging_the_background_pans_the_viewport()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
         var before = await ViewportAsync(page);
         var node = await NodeBoxAsync(page, "3");
@@ -160,11 +160,11 @@ public async Task Dragging_the_background_pans_the_viewport()
     [TestMethod]
     public async Task A_double_click_on_the_background_zooms_in_about_that_point()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
         var before = await ViewportAsync(page);
 
-        var at = EmptySpot(pane);
+        var at = EmptySpot(pane).Snapped();
         await page.Mouse.DblClickAsync((float)at.X, (float)at.Y);
         await EventuallyAsync(async () => (await ViewportAsync(page)).Zoom > before.Zoom, "the double click zoomed in");
 
@@ -177,7 +177,7 @@ public async Task A_double_click_on_the_background_zooms_in_about_that_point()
     [TestMethod]
     public async Task Shift_dragging_a_box_selects_the_nodes_it_catches_and_Delete_removes_them()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var two = await NodeBoxAsync(page, "2");
         var three = await NodeBoxAsync(page, "3");
 
@@ -205,7 +205,7 @@ public async Task Shift_dragging_a_box_selects_the_nodes_it_catches_and_Delete_r
     [TestMethod]
     public async Task Clicking_an_edge_selects_it_and_Delete_removes_only_that_edge()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         await WaitForEdgesAnchoredAsync(page);
 
         // The middle of the path, read from the painted geometry.
@@ -232,7 +232,7 @@ public async Task Clicking_an_edge_selects_it_and_Delete_removes_only_that_edge(
     [TestMethod]
     public async Task The_controls_zoom_in_zoom_out_and_fit_the_view()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
         var fitted = await ViewportAsync(page);
 
@@ -263,7 +263,7 @@ public async Task The_controls_zoom_in_zoom_out_and_fit_the_view()
     [TestMethod]
     public async Task The_minimap_mirrors_the_nodes_and_the_visible_area()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         Assert.AreEqual(4, await page.Locator(".bit-blow-minimap-node").CountAsync(), "one minimap rectangle per node");
 
         var pane = await PaneBoxAsync(page);
@@ -282,7 +282,7 @@ public async Task The_minimap_mirrors_the_nodes_and_the_visible_area()
     [TestMethod]
     public async Task Clicking_a_node_on_the_minimap_brings_it_to_the_middle_of_the_view()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
 
         // Out of the way first, so the click has somewhere to bring it back from.
@@ -300,7 +300,7 @@ await EventuallyAsync(async () => (await NodeBoxAsync(page, "4")).Contains(pane.
     [TestMethod]
     public async Task Clicking_the_minimap_centres_the_view_exactly_on_the_clicked_point()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var pane = await PaneBoxAsync(page);
 
         var rect = await BoxAsync(page, ".bit-blow-minimap-node:nth-of-type(4)");
diff --git a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GuardTests.cs b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GuardTests.cs
index 3cff5d468db..d0a026137d0 100644
--- a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GuardTests.cs
+++ b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/GuardTests.cs
@@ -70,7 +70,7 @@ public async Task Dragging_a_nopan_overlay_does_not_pan_the_flow()
     [TestMethod]
     public async Task A_wheel_over_the_flow_never_scrolls_the_page_but_one_over_its_controls_does()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         Assert.IsTrue(await page.EvaluateAsync<bool>("() => document.documentElement.scrollHeight > window.innerHeight + 40"),
             "the page is not tall enough to scroll");
         await page.EvaluateAsync("() => window.scrollTo(0, 0)");
diff --git a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/Infrastructure/BlowTest.cs b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/Infrastructure/BlowTest.cs
index 3b02328e754..efa7a0f1ecc 100644
--- a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/Infrastructure/BlowTest.cs
+++ b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/Infrastructure/BlowTest.cs
@@ -47,7 +47,7 @@ public async Task CloseContextsAsync()
 
     /// <summary>
     /// A fresh browser context, closed when the test ends. The suite is hermetic: a request that leaves the
-    /// demo's origin (the demo's web font, today) is answered with an empty response here, so a runner
+    /// demo's origin is answered with an empty response here, so a runner
     /// without internet access neither waits out a connection timeout nor logs a load error for it.
     /// </summary>
     protected async Task<IBrowserContext> NewContextAsync(BrowserNewContextOptions? options = null)
@@ -333,6 +333,14 @@ protected readonly record struct Point(double X, double Y)
     {
         public Point Offset(double dx, double dy) => new(X + dx, Y + dy);
 
+        /// <summary>
+        /// The nearest whole-pixel point. Chromium reports a mouse or wheel event at whole pixels, so a test that
+        /// asserts on exactly where the event landed has to aim at one: a pane at a fractional offset (a title
+        /// block above it whose line height is 25.6px puts it there) would otherwise be hit up to a pixel away
+        /// from the point the assertion computes with.
+        /// </summary>
+        public Point Snapped() => new(Math.Round(X), Math.Round(Y));
+
         public double DistanceTo(Point other) => Math.Sqrt((X - other.X) * (X - other.X) + (Y - other.Y) * (Y - other.Y));
 
         public override string ToString() => string.Create(CultureInfo.InvariantCulture, $"({X:0.#}, {Y:0.#})");
diff --git a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/KeyboardTests.cs b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/KeyboardTests.cs
index fcbb4ab0c70..a5a55fbffd6 100644
--- a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/KeyboardTests.cs
+++ b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/KeyboardTests.cs
@@ -30,6 +30,10 @@ public async Task Tab_reaches_a_node_Enter_selects_it_and_the_arrow_keys_move_it
         await page.Keyboard.PressAsync("Enter");
         await EventuallyAsync(async () => (await SelectedNodesAsync(page)).SequenceEqual([focused]), $"Enter selected node {focused}");
 
+        // Focus landing on a node within AutoPanMargin of the pane's edge pans it into view, an eased 200ms
+        // move (AutoPanOnNodeFocus): the node is measured once that has settled, not while it is still sliding.
+        await WaitForQuietAsync(page);
+
         var zoom = (await ViewportAsync(page)).Zoom;
         var before = await NodeBoxAsync(page, focused);
         var scrolled = await page.EvaluateAsync<double>("() => window.scrollY");
@@ -54,7 +58,7 @@ await EventuallyAsync(async () => Math.Abs((await NodeBoxAsync(page, focused)).Y
     [TestMethod]
     public async Task Escape_clears_the_selection()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var two = await NodeBoxAsync(page, "2");
         var three = await NodeBoxAsync(page, "3");
 
@@ -72,7 +76,7 @@ public async Task Escape_clears_the_selection()
     [TestMethod]
     public async Task Escape_abandons_a_drag_and_puts_the_node_back()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var before = await NodeBoxAsync(page, "3");
 
         await DragAsync(page, before.Centre, before.Centre.Offset(-90, 60), release: false);
diff --git a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/README.md b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/README.md
index 00a90db9af6..8d9f983df1e 100644
--- a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/README.md
+++ b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/README.md
@@ -25,7 +25,7 @@ an edge's path really runs through, the transform the viewport is painted with,
 | `GestureTests` | Dragging a node moves it with the pointer and its edges follow; a drag keeps following the pointer outside the pane (pointer capture) and ends on release; dragging from a source handle to a target handle draws a connection line, marks valid, invalid and originating handles, and creates an edge between the two handles; a drop on empty space is abandoned; the wheel zooms about the cursor; dragging the background pans; a double click zooms in about the point; Shift-drag box-selects and Delete removes the nodes and their edges; clicking an edge selects it and Delete removes only it; the controls zoom in, zoom out and fit the view; the minimap mirrors the nodes and the visible area and a click on it brings a node to the middle; the node resizer resizes a selected node (its edge following the moved handle) and can keep the aspect ratio. |
 | `KeyboardTests` | Tab reaches a node, Enter selects it, the arrow keys move it by the fine and the coarse step and announce it, without scrolling the page; Escape clears the selection; Escape abandons a drag and puts the node back; Backspace in a field inside a node edits the text instead of deleting the node, while Delete with the node itself focused does delete it. |
 | `GuardTests` | A drag in a `nodrag` area works the control and leaves the node alone, while its title still drags it; a wheel over a `nowheel` element scrolls it instead of zooming the flow; dragging a `nopan` overlay does not pan; a wheel the flow uses never scrolls the page, while one over the controls does. |
-| `DemoPagesTests` | Every demo page (the routes are read from the `@page` directives under `Demo/Client/Pages`, so a new page is swept without being listed) answers, becomes interactive, loads `bit-blow.js` when it has a flow, and runs every button on it without a console error, an unhandled exception, a failed request or the error banner; the examples gallery links to every example page; navigating through the demos in the app leaves a working canvas behind; "View code" shows the page's source. |
+| `DemoPagesTests` | Every demo page (the routes are read from the `@page` directives under `Demo/Client/Pages`, so a new page is swept without being listed) answers, becomes interactive, loads `bit-blow.js` when it has a flow, and runs every button on it without a console error, an unhandled exception, a failed request or the error banner; the examples gallery and the docs navigation both link to every example page; navigating through the tours in the app leaves a working canvas behind; "View code" shows the page's source. |
 
 One test is `[Ignore]`d for a known library limitation, with the reason in its attribute:
 `Clicking_the_minimap_centres_the_view_exactly_on_the_clicked_point` (the minimap maps a pointer by its nominal
@@ -76,7 +76,7 @@ runtime Playwright ships:
 The suite starts the demo server itself (`dotnet Bit.Blow.Demo.Server.dll --urls http://127.0.0.1:<free port>`,
 in the Development environment so the build output finds its static web assets), waits until it answers, shares
 it between all tests and stops it when the run ends. Each test gets a browser context of its own, in which every
-request that leaves the demo's origin (its web font) is answered with an empty response, so a machine without
+request that leaves the demo's origin is answered with an empty response, so a machine without
 internet access runs the suite just the same. The tests run one at a time: most of them measure where something
 landed a moment after a gesture, and a second page booting WebAssembly next to them is exactly the load that turns
 those waits into flakes.
diff --git a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/RenderingTests.cs b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/RenderingTests.cs
index 3f203db4f61..66f6b9e7a5a 100644
--- a/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/RenderingTests.cs
+++ b/src/Utilities/Blow/Tests/Bit.Blow.Tests.E2E/RenderingTests.cs
@@ -15,7 +15,7 @@ public sealed class RenderingTests : BlowTest
     [TestMethod]
     public async Task The_basic_flow_draws_its_edges_between_the_measured_handles()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         await WaitForEdgesAnchoredAsync(page);
 
         CollectionAssert.AreEquivalent(new[] { "1", "2", "3", "4" }, await IdsAsync(page));
@@ -45,7 +45,7 @@ public async Task The_basic_flow_draws_its_edges_between_the_measured_handles()
     [TestMethod]
     public async Task The_browser_layer_measures_nodes_and_handles_in_flow_units_at_any_zoom()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
 
         // Zoom in further, so screen pixels and flow units differ by a factor that is not the initial one.
         await WheelAsync(page, (await PaneBoxAsync(page)).Centre, -200);
@@ -76,7 +76,7 @@ public async Task The_browser_layer_measures_nodes_and_handles_in_flow_units_at_
     [TestMethod]
     public async Task The_browser_layer_finds_the_handle_under_a_point_and_nothing_elsewhere()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/basic-flow");
         var target = await HandleCentreAsync(page, "3", "target");
         var node = await NodeBoxAsync(page, "3");
 
diff --git a/src/Utilities/Bmage/Bit.Bmage/wwwroot/bit-bmage-editor.css b/src/Utilities/Bmage/Bit.Bmage/wwwroot/bit-bmage-editor.css
index fa3f638730a..5899f46d2eb 100644
--- a/src/Utilities/Bmage/Bit.Bmage/wwwroot/bit-bmage-editor.css
+++ b/src/Utilities/Bmage/Bit.Bmage/wwwroot/bit-bmage-editor.css
@@ -110,6 +110,10 @@
     background: var(--bmg-bg-subtle);
     border-bottom: 1px solid var(--bmg-border);
     flex-wrap: wrap;
+    /* The explicit min-height replaces the automatic minimum a flex item gets, so in an editor of
+       fixed height the column would squeeze a toolbar that has wrapped onto a second row and hide
+       half of its tools. The body below is what gives way instead. */
+    flex-shrink: 0;
 }
 
 .bmg-toolgroup {
diff --git a/src/Utilities/Bmage/Demo/Client/DocsCatalog.cs b/src/Utilities/Bmage/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..89db3874fda
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,206 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bmage.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bmage";
+
+    public const string PackageId = "Bit.Bmage";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bmage";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bmage is browser-side image processing for Blazor: load, crop, resize, adjust, annotate, redact and " +
+        "export images on the user's device from strongly typed C#, with a full editor component and a " +
+        "headless engine. Every sample on this site runs in your browser.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["crop", "webp", "exif", "editor", "batch"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/editor", "Editor"),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry. The MCP server reads the same
+/// list (Server/Services/BmageSourceCatalog.cs and BmageSearchIndex.cs): a page's description and
+/// keywords here are also what an AI agent is told about it when it looks for a worked example.
+/// </summary>
+public static class DocsCatalog
+{
+    // The page types are named through Pages. on purpose: Editor, Metadata and Capabilities are also
+    // namespaces of the library (Bit.Bmage.Editor, ...), and a bare name would bind to those first.
+    public static readonly DocsSection[] Sections =
+    [
+        new("Getting started",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register the services, add the editor stylesheet and process your first image.",
+                "install package nuget dotnet add register services addbitbmageservices stylesheet first image dispose object url",
+                typeof(Pages.GettingStarted)),
+            new("/hosting", "Hosting models",
+                "Setting Bmage up in a Blazor Web App and in standalone WebAssembly, prerendering, Interactive Server, AOT and server-side use.",
+                "hosting blazor web app standalone webassembly wasm server auto prerender prerendering aot runaotcompilation render mode program.cs index.html app.razor",
+                typeof(Pages.Hosting)),
+        ]),
+        new("Fundamentals",
+        [
+            new("/pipelines", "Pipelines",
+                "Immutable, composable lists of operations: geometry, resize modes, filters, smart cropping, the optimiser and execution options.",
+                "pipeline imagepipeline resize crop cover maxsize fit contain rotate flip smartcrop sharpen blur adjust optimiser optimize execute progress cancellation forscale",
+                typeof(Pages.Pipelines)),
+            new("/formats", "Formats",
+                "What decodes and encodes where, probing instead of assuming, fallbacks, size budgets, transparency and format detection.",
+                "format webp avif jpeg png bmp gif svg encode decode fallback quality maxfilesize budget transparency background detect identify",
+                typeof(Pages.Formats)),
+            new("/capabilities", "Capabilities",
+                "What this browser can actually decode, encode and render, probed live rather than guessed from a user agent.",
+                "capabilities probe browser canvas limit offscreencanvas webcodecs clipboard camera simd threads device pixel ratio environment",
+                typeof(Pages.Capabilities)),
+            new("/metadata", "Metadata and privacy",
+                "EXIF, GPS and the three metadata policies, reading and writing tags, and orientation - with a live inspector for your own photos.",
+                "metadata privacy exif gps location strip remove preserve stripsensitive orientation autoorient xmp icc camera",
+                typeof(Pages.Metadata)),
+        ]),
+        new("Workflows",
+        [
+            new("/avatar", "Avatar editor",
+                "Crop to a square or circle around the subject, resize, and compress to a byte budget with a WebP to JPEG fallback.",
+                "avatar profile picture circle square smart crop subject size budget webp fallback dominant colours",
+                typeof(Pages.Avatar)),
+            new("/annotate", "Screenshot annotation",
+                "Paste a screenshot, add arrows, numbered steps and text, then redact the parts that must not be shared.",
+                "screenshot annotate paste clipboard arrow step highlight redact redaction blur pixelate bug report",
+                typeof(Pages.Annotate)),
+            new("/optimize", "Upload optimisation",
+                "Cap dimensions, re-encode to a modern format, strip metadata, and see exactly how many bytes that saved.",
+                "optimise optimize upload compress shrink reencode webp quality bytes saved maxsize",
+                typeof(Pages.Optimize)),
+            new("/product", "Product images",
+                "Every size a catalogue needs from one upload, on a consistent background, without ever cropping the product.",
+                "product ecommerce catalogue sizes variants background padding contain thumbnails",
+                typeof(Pages.Product)),
+            new("/social", "Social images",
+                "Compose to a platform's exact canvas, apply a look, and burn in a caption with the browser's text engine.",
+                "social instagram story open graph caption text filter look vignette warmth canvas compose",
+                typeof(Pages.Social)),
+            new("/batch", "Batch processing",
+                "One pipeline over many files with bounded concurrency, live progress, cancellation and a per-file outcome.",
+                "batch bulk concurrency progress cancellation errors processbatchasync many files",
+                typeof(Pages.Batch)),
+        ]),
+        new("Components and APIs",
+        [
+            new("/editor", "The editor",
+                "The complete BmageEditor component: crop, adjust, filter, draw, annotate, undo and export - themed, localised and right-to-left.",
+                "editor bmageeditor component crop adjust filter draw annotate layers history undo redo theme localisation rtl strings toolbar panel keyboard",
+                typeof(Pages.Editor)),
+            new("/headless", "Headless API",
+                "The same engine with no components at all: thumbnails, crops, grading, drawing with ImageCanvas, and server-side use.",
+                "headless api no ui server console imagecanvas drawing thumbnail exif placeholder statistics addbitbmageheadlessservices",
+                typeof(Pages.Headless)),
+        ]),
+        new("Guides",
+        [
+            new("/performance", "Performance",
+                "Measured numbers, why WebAssembly needs AOT for pixel work, and how to keep pipelines fast - with a benchmark for this browser.",
+                "performance speed aot interpreter benchmark fast slow memory pooling fused resize box prepass",
+                typeof(Pages.Performance)),
+            new("/mcp-server", "MCP server",
+                "The demo's Model Context Protocol server: the tools, prompts and resources that let an AI agent write correct Bmage code - tried live.",
+                "mcp model context protocol ai agent llm tools prompts resources claude cursor copilot vs code server integration review measure",
+                typeof(Pages.McpServerPage)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>Finds the catalog entry for a base-relative path, or null when the page is not in the catalog.</summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bmage/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bmage/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bmage/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bmage/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bmage/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/Footer.razor b/src/Utilities/Bmage/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bmage/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/Header.razor b/src/Utilities/Bmage/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bmage/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bmage/Demo/Client/Layout/MainLayout.razor
index 28cf27d1fab..44980dda101 100644
--- a/src/Utilities/Bmage/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bmage/Demo/Client/Layout/MainLayout.razor
@@ -1,168 +1,30 @@
 @inherits LayoutComponentBase
-@implements IAsyncDisposable
-@inject NavigationManager Nav
-@inject IJSRuntime JS
 
-@* The docs shell: the skip link, the sticky header, the command palette, the nav panel, the
-   reading column with its breadcrumb and its pager, the "on this page" rail, and the footer.
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-   The home page is deliberately outside all of that. It is a landing page rather than a document:
-   no nav panel, no rail, no reading column - it lays out its own full-bleed sections. Only the
-   header, the palette and the footer are shared.
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-   The styles live in wwwroot/css/app.css and are written against the Fluent 2 tokens in
-   wwwroot/css/theme.css; nothing here is built from a component library, because the demo carries
-   no dependency other than Bit.Bmage itself. *@
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-<a class="skip-link" href="#main-content">Skip to main content</a>
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-@* data-interactive says when the prerendered markup has been taken over by the WebAssembly
-   runtime. The header's hydration hint is the visible half of the same fact; the attribute is the
-   half a script - the end-to-end tests among them - can wait on before dropping a file on a page
-   whose drop zone has no handler yet. *@
-<div class="app-shell" data-interactive="@(_isHydrating ? "false" : "true")">
-    <AppHeader IsHomePage="_isHomePage" IsHydrating="@_isHydrating"
-               IsNavOpen="_isNavOpen" OnToggleNav="ToggleNav"
-               OnOpenSearch="OpenPalette" ShortcutHint="@_shortcutHint" />
+    <Header />
 
-    <div class="layout-row">
-        @if (_isHomePage)
-        {
-            <div class="site-content home">
-                <main id="main-content">
-                    @Body
-                </main>
-
-                <AppFooter />
-            </div>
-        }
-        else
-        {
-            @* Only rendered at the widths where the panel is a drawer - CSS hides it above them -
-               and only while it is open, so it never covers a page that has nothing to close. *@
-            @if (_isNavOpen)
-            {
-                <button type="button" class="nav-panel-overlay" aria-label="Close navigation" @onclick="CloseNav"></button>
-            }
-
-            <AppNavPanel IsOpen="_isNavOpen" Disabled="@_isHydrating" />
-
-            <div class="site-content">
-                <div class="page-row">
-                    <main id="main-content" class="page-container">
-                        <DocBreadcrumb Current="_current" />
-
-                        @Body
-
-                        <DocPager Href="@_href" />
-                    </main>
-
-                    <SideRail />
-                </div>
-
-                <AppFooter />
-            </div>
-        }
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
     </div>
-</div>
-
-<CommandPalette IsOpen="_isPaletteOpen" OnClose="ClosePalette" />
-
-@code {
-    private bool _isNavOpen;
-    private bool _isHomePage;
-    private bool _isPaletteOpen;
-    private bool _shortcutsRegistered;
-    private string _href = "";
-    private string _shortcutHint = "Ctrl K";
-    private NavItem? _current;
-    private DotNetObjectReference<MainLayout>? _selfRef;
-
-    // The page is prerendered on the server and is inert until the WebAssembly runtime takes over.
-    // The header says so while that is true, and the interactive chrome stays disabled so a click
-    // that cannot do anything does not look broken.
-    private bool _isHydrating => RendererInfo.IsInteractive is false;
-
-    protected override void OnInitialized()
-    {
-        UpdateRoute();
-        Nav.LocationChanged += OnLocationChanged;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender is false || _isHydrating) return;
 
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-
-            // The same physical key is Ctrl on Windows and Linux and Cmd on a Mac, so the keycap
-            // in the header is filled in from the browser rather than guessed. Registering the
-            // listener returns it, which keeps the two from ever describing different keys.
-            _shortcutHint = await JS.InvokeAsync<string>("bmdRegisterShortcuts", _selfRef);
-            _shortcutsRegistered = true;
-            StateHasChanged();
-        }
-        catch
-        {
-            // The shortcut is an accelerator for something the header already offers as a button.
-            // Without the script the button still opens the palette and the keycap keeps the
-            // conservative default, which is right for every platform except one.
-        }
-    }
-
-    private void ToggleNav() => _isNavOpen = !_isNavOpen;
-
-    private void CloseNav() => _isNavOpen = false;
-
-    private void OpenPalette() => _isPaletteOpen = true;
-
-    private void ClosePalette() => _isPaletteOpen = false;
-
-    /// <summary>Raised by the global key listener in js/demo.js for the shortcut that opens search.</summary>
-    [JSInvokable]
-    public void OnSearchShortcut()
-    {
-        if (_isPaletteOpen) return;
-
-        _isPaletteOpen = true;
-        StateHasChanged();
-    }
-
-    // Following a link inside the drawer closes it: on the widths where the drawer exists it
-    // covers the page the reader just asked for.
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        _isNavOpen = false;
-        UpdateRoute();
-        StateHasChanged();
-    }
-
-    private void UpdateRoute()
-    {
-        _href = Nav.ToBaseRelativePath(Nav.Uri).TrimStart('/').Split('?', '#')[0];
-        _isHomePage = _href.Length == 0;
-        _current = NavItem.ByHref(_href);
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        Nav.LocationChanged -= OnLocationChanged;
-
-        if (_shortcutsRegistered)
-        {
-            try
-            {
-                await JS.InvokeVoidAsync("bmdUnregisterShortcuts");
-            }
-            catch
-            {
-                // Disposal races the page going away; the listener it would remove dies with the
-                // document either way.
-            }
-        }
-
-        _selfRef?.Dispose();
-    }
-}
+    <Footer />
+</div>
diff --git a/src/Utilities/Bmage/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bmage/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Annotate.razor b/src/Utilities/Bmage/Demo/Client/Pages/Annotate.razor
index a22c3feb223..6537bc4801c 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Annotate.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Annotate.razor
@@ -8,40 +8,41 @@
    listener, a clipboard button, and annotations placed from code - which is most of what a real
    app's integration would look like. *@
 
-<PageTitle>Screenshot annotation - Bit.Bmage</PageTitle>
-
-<h1>Screenshot annotation</h1>
-
-<p class="page-intro">
-    Paste a screenshot, point at the problem, and black out anything that must not leave the
-    building. Annotations stay <strong>editable objects</strong> until you export, so nothing is
-    baked in until you say so.
-</p>
+<PageTitle>Screenshot annotation · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Screenshot annotation</h1>
+    <p class="bb-subtitle">
+        Paste a screenshot, point at the problem, and black out anything that must not leave the
+        building. Annotations stay <strong>editable objects</strong> until you export, so nothing is
+        baked in until you say so.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Annotate a screenshot</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Annotate a screenshot</h3>
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
     @if (!HasImage)
     {
-        <div class="alert alert-info">
+        <div class="bb-note">
             Press <strong>Ctrl+V</strong> (<strong>&#8984;V</strong> on a Mac) anywhere on this page to
             bring in a screenshot, or drop an image on the editor below.
         </div>
     }
 
-    <div class="btn-row toolbar-row">
-        <button type="button" class="btn" disabled="@(_capabilities?.SupportsClipboardRead != true)" @onclick="PasteAsync"
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-secondary" disabled="@(_capabilities?.SupportsClipboardRead != true)" @onclick="PasteAsync"
                 title="Reads the clipboard directly; the browser asks for permission the first time">Paste from clipboard</button>
-        <button type="button" class="btn" disabled="@(HasImage || IsHydrating)" @onclick="UseSample">Use a sample image</button>
-        <button type="button" class="btn" disabled="@(!HasImage)" @onclick="AddSampleAnnotations">Add a worked example</button>
-        <button type="button" class="btn" disabled="@(!HasImage)" @onclick="Clear">Start over</button>
+        <button type="button" class="btn btn-secondary" disabled="@(HasImage || IsHydrating)" @onclick="UseSample">Use a sample image</button>
+        <button type="button" class="btn btn-secondary" disabled="@(!HasImage)" @onclick="AddSampleAnnotations">Add a worked example</button>
+        <button type="button" class="btn btn-secondary" disabled="@(!HasImage)" @onclick="Clear">Start over</button>
     </div>
 
-    <div class="editor-frame">
+    <div class="editor-frame bb-page-wide">
         <BmageEditor @ref="_editor"
                      Image="_source"
                      ExportOptions="ExportOptions"
@@ -50,8 +51,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Redaction that actually redacts</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Redaction that actually redacts</h3>
     <p>
         The redaction tool replaces the pixels underneath it, so the hidden content is genuinely gone
         from the exported file rather than covered by a layer someone can move. Solid blocks are the
@@ -59,7 +60,7 @@
         all doubt. Redactions are always drawn before other annotations, so an arrow you place on top
         is never blurred away.
     </p>
-    <div class="callout">
+    <div class="bb-note">
         <p>
             Redaction is about pixels; metadata is a separate leak. This page exports with
             <code>MetadataPolicy.Remove</code> - see <a href="/metadata">Metadata and privacy</a>.
@@ -68,8 +69,8 @@
     <CodeSnippet Code="@Snippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Pasting from anywhere on the page</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Pasting from anywhere on the page</h3>
     <p>
         <code>ListenForPasteAsync</code> listens for the browser's own paste event, which carries the
         image with it - so <strong>Ctrl+V</strong> works without the clipboard permission prompt.
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Avatar.razor b/src/Utilities/Bmage/Demo/Client/Pages/Avatar.razor
index 4ea53fe89e4..309c42c13a3 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Avatar.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Avatar.razor
@@ -9,161 +9,165 @@
    can write it, with a fallback where it cannot. Every option re-runs the whole pipeline on the
    decoded source, debounced so a slider drag queues one run rather than one per pixel of travel. *@
 
-<PageTitle>Avatar editor - Bit.Bmage</PageTitle>
-
-<h1>Avatar editor</h1>
-
-<p class="page-intro">
-    Upload, crop to a square or a circle, resize, and compress to a byte budget. The exported file
-    is <strong>WebP</strong> where the browser can write it and a fallback otherwise, with every
-    trace of location metadata removed.
-</p>
+<PageTitle>Avatar editor · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Avatar editor</h1>
+    <p class="bb-subtitle">
+        Upload, crop to a square or a circle, resize, and compress to a byte budget. The exported file
+        is <strong>WebP</strong> where the browser can write it and a fallback otherwise, with every
+        trace of location metadata removed.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Try it</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
-    <div class="split">
-        <div>
-            @if (_source is null)
-            {
-                <BmageDropZone Label="Drop a photo here, or click to choose one" OnFilesSelected="OnFilesSelected" />
-                <div class="sample-row">
-                    <button type="button" class="btn" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
-                    <span class="small muted">No photo to hand? A generated scene with a person in it works too.</span>
-                </div>
-            }
-            else
-            {
-                <div class="preview-row">
-                    <div>
-                        <p class="card-title">
-                            Result
-                            @if (_busy)
-                            {
-                                <span class="working" role="status">Working&hellip;</span>
-                            }
-                        </p>
-                        @* Clipped to the shape here as well as in the pixels, so the preview reads
-                           as an avatar would in an app; the exported file is round on its own. *@
-                        <div class="avatar-frame" style="width:@(PreviewSize)px; height:@(PreviewSize)px; border-radius:@(_circular ? "50%" : "0.75rem")">
-                            <ImagePreview Image="_result" Version="_resultVersion" Alt="Avatar preview" Class="avatar-image" />
-                        </div>
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="demo-split">
+            <div>
+                @if (_source is null)
+                {
+                    <BmageDropZone Label="Drop a photo here, or click to choose one" OnFilesSelected="OnFilesSelected" />
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-secondary" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
+                        <span class="demo-small bb-muted">No photo to hand? A generated scene with a person in it works too.</span>
                     </div>
-                    <div class="avatar-source">
-                        <p class="card-title">Source</p>
-                        <ImagePreview Image="_source" Alt="Uploaded photo" Style="max-height:200px" />
-                        <p class="small muted preview-meta">
-                            @_source.Width &times; @_source.Height
-                            @if (_sourceBytes > 0)
-                            {
-                                <text> &middot; @Display.Bytes(_sourceBytes)</text>
-                            }
-                        </p>
+                }
+                else
+                {
+                    <div class="preview-row">
+                        <div>
+                            <p class="bb-overline demo-label">
+                                Result
+                                @if (_busy)
+                                {
+                                    <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Working&hellip;</span>
+                                }
+                            </p>
+                            @* Clipped to the shape here as well as in the pixels, so the preview reads
+                               as an avatar would in an app; the exported file is round on its own. *@
+                            <div class="avatar-frame" style="width:@(PreviewSize)px; height:@(PreviewSize)px; border-radius:@(_circular ? "50%" : "0.75rem")">
+                                <ImagePreview Image="_result" Version="_resultVersion" Alt="Avatar preview" Class="avatar-image" />
+                            </div>
+                        </div>
+                        <div class="avatar-source">
+                            <p class="bb-overline demo-label">Source</p>
+                            <ImagePreview Image="_source" Alt="Uploaded photo" Style="max-height:200px" />
+                            <p class="demo-small bb-muted preview-meta">
+                                @_source.Width &times; @_source.Height
+                                @if (_sourceBytes > 0)
+                                {
+                                    <text> &middot; @Display.Bytes(_sourceBytes)</text>
+                                }
+                            </p>
+                        </div>
                     </div>
-                </div>
-            }
-        </div>
-
-        <div class="card">
-            <p class="card-title">Options</p>
-
-            <div class="field">
-                <label class="field-label" for="size">Output size <span class="field-value">@_size px</span></label>
-                <input id="size" type="range" min="64" max="1024" step="32" value="@_size"
-                       @oninput="OnSizeChanged" />
+                }
             </div>
 
-            <div class="field field-inline">
-                <input id="circular" type="checkbox" checked="@_circular" @onchange="OnCircularChanged" />
-                <label class="field-label" for="circular">Circular mask</label>
-            </div>
+            <div class="demo-panel">
+                <p class="bb-overline demo-label">Options</p>
 
-            <div class="field">
-                <label class="field-label" for="budget">Size budget <span class="field-value">@(_budgetKb) KB</span></label>
-                <input id="budget" type="range" min="10" max="500" step="10" value="@_budgetKb"
-                       @oninput="OnBudgetChanged" />
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="size">Output size <span class="demo-field-value">@_size px</span></label>
+                    <input id="size" type="range" min="64" max="1024" step="32" value="@_size"
+                           @oninput="OnSizeChanged" />
+                </div>
 
-            <div class="field" role="group" aria-labelledby="framing-label">
-                <span class="field-label" id="framing-label">Framing</span>
-                <div class="chip-row">
-                    <button type="button" class="chip" aria-pressed="@(_smart ? "true" : "false")" @onclick="() => SetSmart(true)">Smart</button>
-                    @foreach (var anchor in new[] { Anchor.Center, Anchor.Top, Anchor.Bottom })
-                    {
-                        <button type="button" class="chip" aria-pressed="@(!_smart && _anchor == anchor ? "true" : "false")"
-                                @onclick="() => SetAnchor(anchor)">@anchor</button>
-                    }
+                <div class="demo-field demo-field-inline">
+                    <input id="circular" type="checkbox" checked="@_circular" @onchange="OnCircularChanged" />
+                    <label class="demo-field-label" for="circular">Circular mask</label>
                 </div>
-                <span class="field-hint">
-                    Smart framing scores detail, colour and skin tones to find the subject, instead of
-                    assuming it is in the middle. Centre-cropping a portrait is how avatars lose the
-                    top of a head.
-                </span>
-            </div>
 
-            @if (_dominant.Count > 0)
-            {
-                <div class="field">
-                    <span class="field-label">Dominant colours</span>
-                    <div class="chip-row">
-                        @foreach (var colour in _dominant)
+                <div class="demo-field">
+                    <label class="demo-field-label" for="budget">Size budget <span class="demo-field-value">@(_budgetKb) KB</span></label>
+                    <input id="budget" type="range" min="10" max="500" step="10" value="@_budgetKb"
+                           @oninput="OnBudgetChanged" />
+                </div>
+
+                <div class="demo-field" role="group" aria-labelledby="framing-label">
+                    <span class="demo-field-label" id="framing-label">Framing</span>
+                    <div class="bb-segmented">
+                        <button type="button" aria-pressed="@(_smart ? "true" : "false")" @onclick="() => SetSmart(true)">Smart</button>
+                        @foreach (var anchor in new[] { Anchor.Center, Anchor.Top, Anchor.Bottom })
                         {
-                            <span class="chip" style="background:@colour.Color.ToHex(false); color:@(colour.Color.Luminance > 140 ? "#111" : "#fff"); border-color:transparent"
-                                  title="@colour.Color.ToHex(false)">
-                                @FormatShare(colour.Percent)
-                            </span>
+                            <button type="button" aria-pressed="@(!_smart && _anchor == anchor ? "true" : "false")"
+                                    @onclick="() => SetAnchor(anchor)">@anchor</button>
                         }
                     </div>
+                    <span class="bb-field-hint">
+                        Smart framing scores detail, colour and skin tones to find the subject, instead of
+                        assuming it is in the middle. Centre-cropping a portrait is how avatars lose the
+                        top of a head.
+                    </span>
                 </div>
-            }
 
-            @if (_encoded is not null)
-            {
-                <hr class="divider" />
-                <div class="stat-grid">
-                    <div class="stat">
-                        <span class="stat-label">Format</span>
-                        <span class="stat-value">@_encoded.Format.ToString().ToUpperInvariant()</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Size</span>
-                        <span class="stat-value @(_encoded.Length <= _budgetKb * 1024 ? "good" : "bad")">@Display.Bytes(_encoded.Length)</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Quality</span>
-                        <span class="stat-value">@(_encoded.Quality is { } q ? $"{q:0.00}" : "—")</span>
+                @if (_dominant.Count > 0)
+                {
+                    <div class="demo-field">
+                        <span class="demo-field-label">Dominant colours</span>
+                        <div class="demo-swatches">
+                            @foreach (var colour in _dominant)
+                            {
+                                <span class="demo-swatch" style="background:@colour.Color.ToHex(false); color:@(colour.Color.Luminance > 140 ? "#111" : "#fff")"
+                                      title="@colour.Color.ToHex(false)">
+                                    @FormatShare(colour.Percent)
+                                </span>
+                            }
+                        </div>
                     </div>
-                    <div class="stat">
-                        <span class="stat-label">Vs. upload</span>
-                        <span class="stat-value @(Display.IsSmaller(_sourceBytes, _encoded.Length) ? "good" : null)">@Display.Change(_sourceBytes, _encoded.Length)</span>
+                }
+
+                @if (_encoded is not null)
+                {
+                    <hr class="demo-divider" />
+                    <div class="bb-stats demo-stats-compact avatar-stats">
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Format</span>
+                            <span class="bb-stat-value">@_encoded.Format.ToString().ToUpperInvariant()</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Size</span>
+                            <span class="bb-stat-value @(_encoded.Length <= _budgetKb * 1024 ? "demo-good" : "demo-bad")">@Display.Bytes(_encoded.Length)</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Quality</span>
+                            <span class="bb-stat-value">@(_encoded.Quality is { } q ? $"{q:0.00}" : "—")</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Vs. upload</span>
+                            <span class="bb-stat-value @(Display.IsSmaller(_sourceBytes, _encoded.Length) ? "demo-good" : null)">@Display.Change(_sourceBytes, _encoded.Length)</span>
+                        </div>
                     </div>
+                }
+
+                <hr class="demo-divider" />
+                <div class="bb-toolbar">
+                    <button type="button" class="btn btn-primary" disabled="@(_encoded is null || _busy)" @onclick="Download">
+                        <Icon Path="@Icons.Download" />
+                        Download
+                    </button>
+                    <button type="button" class="btn btn-secondary" disabled="@(_source is null)" @onclick="Clear">Start over</button>
                 </div>
-            }
 
-            <hr class="divider" />
-            <div class="btn-row">
-                <button type="button" class="btn btn-accent" disabled="@(_encoded is null || _busy)" @onclick="Download">
-                    <Icon Path="@Icons.Download" />
-                    Download
-                </button>
-                <button type="button" class="btn" disabled="@(_source is null)" @onclick="Clear">Start over</button>
+                @if (_fallbackNotice is not null)
+                {
+                    <p class="demo-small bb-muted preview-meta">@_fallbackNotice</p>
+                }
             </div>
-
-            @if (_fallbackNotice is not null)
-            {
-                <p class="small muted preview-meta">@_fallbackNotice</p>
-            }
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>The pipeline behind this page</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The pipeline behind this page</h3>
     <p>
         A square crop around the subject, a high quality downscale and a gentle sharpen, then an
         encode that bisects on quality until the file fits the budget. The circular mask is applied
@@ -174,9 +178,9 @@
     <CodeSnippet Code="@Snippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>What to take from it</h2>
-    <ul>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What to take from it</h3>
+    <ul class="bb-detail-list">
         <li><strong>Frame the subject, not the centre.</strong> <code>SmartCrop</code> is a heuristic, not face recognition; if you have a detector, pass its rectangle to <code>SmartCrop.FindCrop</code> as <code>mustInclude</code>.</li>
         <li><strong>Budget in bytes, not quality.</strong> <code>MaxFileSize</code> reports the quality it settled on, and throws <code>ImageEncodeException</code> rather than handing back an oversized file when the target is impossible.</li>
         <li><strong>Remove metadata.</strong> An avatar is published to everyone; <code>MetadataPolicy.Remove</code> is the default for a reason. See <a href="/metadata">Metadata and privacy</a>.</li>
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Batch.razor b/src/Utilities/Bmage/Demo/Client/Pages/Batch.razor
index f627929d6b2..72a4b51fad8 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Batch.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Batch.razor
@@ -9,158 +9,162 @@
    cancellation, and hands back every item's own outcome, so one unreadable file is a row in the
    table rather than the end of the run. *@
 
-<PageTitle>Batch processing - Bit.Bmage</PageTitle>
-
-<h1>Batch processing</h1>
-
-<p class="page-intro">
-    The same pipeline over many files with <strong>bounded concurrency</strong>, live progress,
-    cancellation, and a per-file result rather than one failure aborting the run. This is the
-    headless batch API driving a UI, not a separate code path.
-</p>
+<PageTitle>Batch processing · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Batch processing</h1>
+    <p class="bb-subtitle">
+        The same pipeline over many files with <strong>bounded concurrency</strong>, live progress,
+        cancellation, and a per-file result rather than one failure aborting the run. This is the
+        headless batch API driving a UI, not a separate code path.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Try it</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
-    <div class="split">
-        <div>
-            <BmageDropZone Label="Drop several images here" Multiple="true" MaxFiles="200" OnFilesSelected="OnFilesSelected" />
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="demo-split">
+            <div>
+                <BmageDropZone Label="Drop several images here" Multiple="true" MaxFiles="200" OnFilesSelected="OnFilesSelected" />
 
-            @if (_running || _result is not null)
-            {
-                <div class="sample-row optimize-progress">
-                    <div class="progress" role="progressbar" aria-label="Batch progress" aria-valuenow="@_completed" aria-valuemin="0" aria-valuemax="@_total">
-                        <div class="progress-bar" style="width:@(_total == 0 ? 0 : _completed * 100 / _total)%"></div>
+                @if (_running || _result is not null)
+                {
+                    <div class="bb-toolbar optimize-progress">
+                        <div class="demo-progress" role="progressbar" aria-label="Batch progress" aria-valuenow="@_completed" aria-valuemin="0" aria-valuemax="@_total">
+                            <div class="demo-progress-bar" style="width:@(_total == 0 ? 0 : _completed * 100 / _total)%"></div>
+                        </div>
+                        <span class="demo-small bb-muted" role="status">@_completed of @_total</span>
+                        @if (_running)
+                        {
+                            <button type="button" class="btn btn-secondary demo-btn-sm" @onclick="Cancel">Stop</button>
+                        }
                     </div>
-                    <span class="small muted" role="status">@_completed of @_total</span>
-                    @if (_running)
-                    {
-                        <button type="button" class="btn btn-small" @onclick="Cancel">Stop</button>
-                    }
-                </div>
-            }
+                }
 
-            @if (_result is not null)
-            {
-                <div class="stat-grid results-stats">
-                    <div class="stat">
-                        <span class="stat-label">Succeeded</span>
-                        <span class="stat-value good">@_result.SuccessCount</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Failed</span>
-                        <span class="stat-value @(_result.FailureCount > 0 ? "bad" : null)">@_result.FailureCount</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Input</span>
-                        <span class="stat-value">@Display.Bytes(_result.TotalInputBytes)</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Output</span>
-                        <span class="stat-value">@Display.Bytes(_result.TotalOutputBytes)</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Elapsed</span>
-                        <span class="stat-value">@_result.Duration.TotalSeconds.ToString("0.0")s</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Per image</span>
-                        <span class="stat-value">@((_result.Results.Count == 0 ? 0 : _result.Duration.TotalMilliseconds / _result.Results.Count).ToString("0"))ms</span>
+                @if (_result is not null)
+                {
+                    <div class="bb-stats results-stats">
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Succeeded</span>
+                            <span class="bb-stat-value demo-good">@_result.SuccessCount</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Failed</span>
+                            <span class="bb-stat-value @(_result.FailureCount > 0 ? "demo-bad" : null)">@_result.FailureCount</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Input</span>
+                            <span class="bb-stat-value">@Display.Bytes(_result.TotalInputBytes)</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Output</span>
+                            <span class="bb-stat-value">@Display.Bytes(_result.TotalOutputBytes)</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Elapsed</span>
+                            <span class="bb-stat-value">@_result.Duration.TotalSeconds.ToString("0.0")s</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Per image</span>
+                            <span class="bb-stat-value">@((_result.Results.Count == 0 ? 0 : _result.Duration.TotalMilliseconds / _result.Results.Count).ToString("0"))ms</span>
+                        </div>
                     </div>
-                </div>
 
-                <div class="table-scroll results-table" tabindex="0" role="region" aria-label="Batch results">
-                    <table class="data">
-                        <thead>
-                            <tr>
-                                <th scope="col">File</th>
-                                <th scope="col">Result</th>
-                                <th scope="col" class="num">In</th>
-                                <th scope="col" class="num">Out</th>
-                                <th scope="col" class="num">Time</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @foreach (var item in _result.Results)
-                            {
+                    <div class="bb-scroll results-table" tabindex="0" role="region" aria-label="Batch results">
+                        <table class="bb-table">
+                            <thead>
                                 <tr>
-                                    <td>@(item.FileName ?? "—")</td>
-                                    <td>
-                                        @if (item.IsSuccess)
-                                        {
-                                            <span class="badge badge-yes">@item.Output!.Width×@item.Output.Height @item.Output.Format.ToString().ToUpperInvariant()</span>
-                                        }
-                                        else if (item.WasCancelled)
-                                        {
-                                            <span class="badge badge-neutral">stopped</span>
-                                        }
-                                        else
-                                        {
-                                            <span class="badge badge-no">@Describe(item.Error!)</span>
-                                        }
-                                    </td>
-                                    <td class="num">@Display.Bytes(item.Item.Data.Length)</td>
-                                    <td class="num">@(item.Output is null ? "—" : Display.Bytes(item.Output.Length))</td>
-                                    <td class="num">@item.Duration.TotalMilliseconds.ToString("0")ms</td>
+                                    <th scope="col">File</th>
+                                    <th scope="col">Result</th>
+                                    <th scope="col" class="demo-num">In</th>
+                                    <th scope="col" class="demo-num">Out</th>
+                                    <th scope="col" class="demo-num">Time</th>
                                 </tr>
-                            }
-                        </tbody>
-                    </table>
-                </div>
+                            </thead>
+                            <tbody>
+                                @foreach (var item in _result.Results)
+                                {
+                                    <tr>
+                                        <td>@(item.FileName ?? "—")</td>
+                                        <td>
+                                            @if (item.IsSuccess)
+                                            {
+                                                <span class="bb-badge bb-badge-success">@item.Output!.Width×@item.Output.Height @item.Output.Format.ToString().ToUpperInvariant()</span>
+                                            }
+                                            else if (item.WasCancelled)
+                                            {
+                                                <span class="bb-badge demo-badge-off">stopped</span>
+                                            }
+                                            else
+                                            {
+                                                <span class="bb-badge bb-badge-danger">@Describe(item.Error!)</span>
+                                            }
+                                        </td>
+                                        <td class="demo-num">@Display.Bytes(item.Item.Data.Length)</td>
+                                        <td class="demo-num">@(item.Output is null ? "—" : Display.Bytes(item.Output.Length))</td>
+                                        <td class="demo-num">@item.Duration.TotalMilliseconds.ToString("0")ms</td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
 
-                <div class="btn-row">
-                    <button type="button" class="btn btn-accent" disabled="@(_running || _result.SuccessCount == 0)" @onclick="DownloadAll">
-                        <Icon Path="@Icons.Download" />
-                        Download results
-                    </button>
-                </div>
-            }
-        </div>
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-primary" disabled="@(_running || _result.SuccessCount == 0)" @onclick="DownloadAll">
+                            <Icon Path="@Icons.Download" />
+                            Download results
+                        </button>
+                    </div>
+                }
+            </div>
 
-        <div class="card">
-            <p class="card-title">Pipeline</p>
+            <div class="demo-panel">
+                <p class="bb-overline demo-label">Pipeline</p>
 
-            <div class="field">
-                <label class="field-label" for="edge">Longest edge <span class="field-value">@_maxEdge px</span></label>
-                <input id="edge" type="range" min="240" max="3840" step="80" value="@_maxEdge" @oninput="e => SetInt(ref _maxEdge, e)" />
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="edge">Longest edge <span class="demo-field-value">@_maxEdge px</span></label>
+                    <input id="edge" type="range" min="240" max="3840" step="80" value="@_maxEdge" @oninput="e => SetInt(ref _maxEdge, e)" />
+                </div>
 
-            <div class="field">
-                <label class="field-label" for="conc">Concurrency <span class="field-value">@_concurrency</span></label>
-                <input id="conc" type="range" min="1" max="8" step="1" value="@_concurrency" @oninput="e => SetInt(ref _concurrency, e)" aria-describedby="conc-hint" />
-                <span class="field-hint" id="conc-hint">Each worker holds a decoded image, so this is a memory dial as much as a speed dial.</span>
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="conc">Concurrency <span class="demo-field-value">@_concurrency</span></label>
+                    <input id="conc" type="range" min="1" max="8" step="1" value="@_concurrency" @oninput="e => SetInt(ref _concurrency, e)" aria-describedby="conc-hint" />
+                    <span class="bb-field-hint" id="conc-hint">Each worker holds a decoded image, so this is a memory dial as much as a speed dial.</span>
+                </div>
 
-            <div class="field">
-                <label class="field-label" for="bformat">Format</label>
-                <select id="bformat" class="bmg-select" disabled="@(_capabilities is null)" @onchange="OnFormatChanged">
-                    @foreach (var format in AvailableFormats)
-                    {
-                        <option value="@format" selected="@(_format == format)">@format.ToString().ToUpperInvariant()</option>
-                    }
-                </select>
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="bformat">Format</label>
+                    <select id="bformat" disabled="@(_capabilities is null)" @onchange="OnFormatChanged">
+                        @foreach (var format in AvailableFormats)
+                        {
+                            <option value="@format" selected="@(_format == format)">@format.ToString().ToUpperInvariant()</option>
+                        }
+                    </select>
+                </div>
 
-            <div class="field field-inline">
-                <input id="grayscale" type="checkbox" checked="@_grayscale" @onchange="e => _grayscale = (bool)(e.Value ?? false)" />
-                <label class="field-label" for="grayscale">Convert to grayscale</label>
-            </div>
+                <div class="demo-field demo-field-inline">
+                    <input id="grayscale" type="checkbox" checked="@_grayscale" @onchange="e => _grayscale = (bool)(e.Value ?? false)" />
+                    <label class="demo-field-label" for="grayscale">Convert to grayscale</label>
+                </div>
 
-            <div class="field field-inline">
-                <input id="stopfirst" type="checkbox" checked="@_stopOnFirstError" @onchange="e => _stopOnFirstError = (bool)(e.Value ?? false)" />
-                <label class="field-label" for="stopfirst">Stop on first error</label>
+                <div class="demo-field demo-field-inline">
+                    <input id="stopfirst" type="checkbox" checked="@_stopOnFirstError" @onchange="e => _stopOnFirstError = (bool)(e.Value ?? false)" />
+                    <label class="demo-field-label" for="stopfirst">Stop on first error</label>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>The batch API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The batch API</h3>
     <p>
         <code>ProcessBatchAsync</code> is on <code>ImageProcessor</code>, which in a browser comes from
         <code>ImageProcessorFactory.GetAsync()</code> once the codec probe has run; on a server,
@@ -169,7 +173,7 @@
         <code>StopOnFirstError</code> is opt-in.
     </p>
     <CodeSnippet Code="@Snippet" Language="C#" Expanded="true" />
-    <div class="callout">
+    <div class="bb-note">
         <p>
             Size <code>MaxConcurrency</code> against memory, not cores: four workers on 24 megapixel
             photos is roughly 400 MB of live pixels. Two is a safe default on phones.
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Capabilities.razor b/src/Utilities/Bmage/Demo/Client/Pages/Capabilities.razor
index cf1389f5a98..d255bfb6719 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Capabilities.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Capabilities.razor
@@ -7,44 +7,45 @@
    live browser, so the prerendered page says it is probing and the numbers arrive once the runtime
    is interactive. *@
 
-<PageTitle>Capabilities - Bit.Bmage</PageTitle>
-
-<h1>Browser capabilities</h1>
-
-<p class="page-intro">
-    Every one of these is <strong>measured, not guessed</strong>. Format support is confirmed by
-    actually encoding a pixel and checking what came back, and the canvas limit is found by
-    allocating until the browser refuses.
-</p>
+<PageTitle>Capabilities · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Browser capabilities</h1>
+    <p class="bb-subtitle">
+        Every one of these is <strong>measured, not guessed</strong>. Format support is confirmed by
+        actually encoding a pixel and checking what came back, and the canvas limit is found by
+        allocating until the browser refuses.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>This browser</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> This browser</h3>
 
     @if (_capabilities is null)
     {
-        <p class="working" role="status">Probing this browser&hellip;</p>
+        <p class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Probing this browser&hellip;</p>
     }
     else
     {
-        <div class="grid">
-            <div class="card">
-                <p class="card-title">Environment</p>
-                <table class="data">
+        <div class="bb-grid capabilities-report">
+            <div class="bb-card">
+                <p class="bb-overline demo-label">Environment</p>
+                <table class="bb-table">
                     <tbody>
                         <tr><th scope="row">Runtime</th><td>@_capabilities.Environment</td></tr>
-                        <tr><th scope="row">Device pixel ratio</th><td class="num">@_capabilities.DevicePixelRatio.ToString("0.##")</td></tr>
-                        <tr><th scope="row">Logical processors</th><td class="num">@(_capabilities.HardwareConcurrency?.ToString() ?? "unknown")</td></tr>
-                        <tr><th scope="row">Device memory</th><td class="num">@(_capabilities.DeviceMemoryGb is { } gb ? $"{gb:0.#} GB" : "unknown")</td></tr>
-                        <tr><th scope="row">Max canvas edge</th><td class="num">@_capabilities.MaxCanvasDimension px</td></tr>
-                        <tr><th scope="row">Max canvas area</th><td class="num">@($"{_capabilities.MaxCanvasArea / 1_000_000.0:0.#} MP")</td></tr>
-                        <tr><th scope="row">Suggested working size</th><td class="num">@_capabilities.SuggestedMaxWorkingDimension px</td></tr>
+                        <tr><th scope="row">Device pixel ratio</th><td class="demo-num">@_capabilities.DevicePixelRatio.ToString("0.##")</td></tr>
+                        <tr><th scope="row">Logical processors</th><td class="demo-num">@(_capabilities.HardwareConcurrency?.ToString() ?? "unknown")</td></tr>
+                        <tr><th scope="row">Device memory</th><td class="demo-num">@(_capabilities.DeviceMemoryGb is { } gb ? $"{gb:0.#} GB" : "unknown")</td></tr>
+                        <tr><th scope="row">Max canvas edge</th><td class="demo-num">@_capabilities.MaxCanvasDimension px</td></tr>
+                        <tr><th scope="row">Max canvas area</th><td class="demo-num">@($"{_capabilities.MaxCanvasArea / 1_000_000.0:0.#} MP")</td></tr>
+                        <tr><th scope="row">Suggested working size</th><td class="demo-num">@_capabilities.SuggestedMaxWorkingDimension px</td></tr>
                     </tbody>
                 </table>
             </div>
 
-            <div class="card">
-                <p class="card-title">Formats</p>
-                <table class="data">
+            <div class="bb-card">
+                <p class="bb-overline demo-label">Formats</p>
+                <table class="bb-table">
                     <thead>
                         <tr><th scope="col">Format</th><th scope="col">Decode</th><th scope="col">Encode</th></tr>
                     </thead>
@@ -61,9 +62,9 @@
                 </table>
             </div>
 
-            <div class="card">
-                <p class="card-title">Platform features</p>
-                <table class="data">
+            <div class="bb-card">
+                <p class="bb-overline demo-label">Platform features</p>
+                <table class="bb-table">
                     <tbody>
                         @foreach (var (label, value) in Features)
                         {
@@ -76,8 +77,8 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Choosing a format from this</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Choosing a format from this</h3>
     <p>
         Never assume: ask for a preference order and take the best one this browser can actually
         write.
@@ -92,8 +93,8 @@
     <CodeSnippet Code="@Snippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Why probe at all</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Why probe at all</h3>
     <p>
         Browsers lie in a specific way: asked to encode a format they cannot write, they silently hand
         back a PNG. A library that trusted the request would label that PNG as AVIF and corrupt
@@ -158,5 +159,5 @@
     }
 
     private static MarkupString Badge(bool value)
-        => new(value ? "<span class=\"badge badge-yes\">yes</span>" : "<span class=\"badge badge-no\">no</span>");
+        => new(value ? "<span class=\"bb-badge bb-badge-success\">yes</span>" : "<span class=\"bb-badge bb-badge-danger\">no</span>");
 }
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Editor.razor b/src/Utilities/Bmage/Demo/Client/Pages/Editor.razor
index 40d6f9d6afe..8f52b3971fb 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Editor.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Editor.razor
@@ -6,44 +6,51 @@
    pipeline and a list of annotations) rather than a mutated bitmap. The rest of the page is the
    component's reference. *@
 
-<PageTitle>The editor - Bit.Bmage</PageTitle>
-
-<h1>The editor</h1>
-
-<p class="page-intro">
-    Everything in one component: crop, rotate, adjustments, filters, drawing, annotations, layers,
-    history and export. Drop an image on it, or open one from its own drop zone - then try the
-    <strong>theme</strong>, <strong>direction</strong> and <strong>language</strong> switches.
-</p>
-
-<div class="demo-section">
-    <h2>Try it</h2>
+<PageTitle>The editor · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>The editor</h1>
+    <p class="bb-subtitle">
+        Everything in one component: crop, rotate, adjustments, filters, drawing, annotations, layers,
+        history and export. Drop an image on it, or open one from its own drop zone - then try the
+        <strong>theme</strong>, <strong>direction</strong> and <strong>language</strong> switches.
+    </p>
+</div>
 
-    <div class="toolbar-row">
-        <div class="toolbar-group" role="group" aria-labelledby="editor-theme-label">
-            <span class="toolbar-label" id="editor-theme-label">Theme</span>
-            @foreach (var theme in new[] { "site", "light", "dark" })
-            {
-                <button type="button" class="chip" aria-pressed="@(_theme == theme ? "true" : "false")" @onclick="() => _theme = theme">@theme</button>
-            }
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
+
+    <div class="bb-toolbar">
+        <div class="demo-toolbar-group" role="group" aria-labelledby="editor-theme-label">
+            <span class="demo-toolbar-label" id="editor-theme-label">Theme</span>
+            <div class="bb-segmented">
+                @foreach (var theme in new[] { "site", "light", "dark" })
+                {
+                    <button type="button" aria-pressed="@(_theme == theme ? "true" : "false")" @onclick="() => _theme = theme">@theme</button>
+                }
+            </div>
         </div>
-        <div class="toolbar-group" role="group" aria-labelledby="editor-direction-label">
-            <span class="toolbar-label" id="editor-direction-label">Direction</span>
-            @foreach (var dir in new[] { "ltr", "rtl" })
-            {
-                <button type="button" class="chip" aria-pressed="@(_direction == dir ? "true" : "false")" @onclick="() => _direction = dir">@dir</button>
-            }
+        <div class="demo-toolbar-group" role="group" aria-labelledby="editor-direction-label">
+            <span class="demo-toolbar-label" id="editor-direction-label">Direction</span>
+            <div class="bb-segmented">
+                @foreach (var dir in new[] { "ltr", "rtl" })
+                {
+                    <button type="button" aria-pressed="@(_direction == dir ? "true" : "false")" @onclick="() => _direction = dir">@dir</button>
+                }
+            </div>
         </div>
-        <div class="toolbar-group" role="group" aria-labelledby="editor-language-label">
-            <span class="toolbar-label" id="editor-language-label">Language</span>
-            @foreach (var lang in Languages)
-            {
-                <button type="button" class="chip" lang="@lang.Value.Tag" aria-pressed="@(_language == lang.Key ? "true" : "false")" @onclick="() => SetLanguage(lang.Key)">@lang.Key</button>
-            }
+        <div class="demo-toolbar-group" role="group" aria-labelledby="editor-language-label">
+            <span class="demo-toolbar-label" id="editor-language-label">Language</span>
+            <div class="bb-segmented">
+                @foreach (var lang in Languages)
+                {
+                    <button type="button" lang="@lang.Value.Tag" aria-pressed="@(_language == lang.Key ? "true" : "false")" @onclick="() => SetLanguage(lang.Key)">@lang.Key</button>
+                }
+            </div>
         </div>
     </div>
 
-    <div class="editor-frame">
+    <div class="editor-frame bb-page-wide">
         <BmageEditor @ref="_editor"
                      Class="@ThemeClass"
                      Direction="@_direction"
@@ -54,8 +61,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>The document behind the editor</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The document behind the editor</h3>
     <p>
         This is the whole edit: a list of pixel operations and a list of annotation objects. It is a
         value, so it can be stored, sent to a server, replayed on the original file, or applied to a
@@ -63,23 +70,23 @@
     </p>
     @if (_document is null)
     {
-        <p class="small muted">Load an image into the editor above to see its document here.</p>
+        <p class="demo-small bb-muted">Load an image into the editor above to see its document here.</p>
     }
     else
     {
-        <pre class="code">@DocumentText</pre>
+        <pre class="demo-readout">@DocumentText</pre>
     }
 </div>
 
-<div class="demo-section">
-    <h2>Using it</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Using it</h3>
     <p>
         The simple path stays simple: the editor fills its container, so give it a height, and
         everything else has a working default. The advanced path is the same component with more
         parameters.
     </p>
     <CodeSnippet Code="@Snippet" Expanded="true" />
-    <div class="callout">
+    <div class="bb-note">
         <p>
             The editor needs the stylesheet <code>_content/Bit.Bmage/bit-bmage-editor.css</code>
             linked from <code>App.razor</code> or <code>index.html</code> - see
@@ -88,10 +95,10 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Parameters</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Editor parameters">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Parameters</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Editor parameters">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Parameter</th><th scope="col">Purpose</th></tr>
             </thead>
@@ -112,8 +119,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Driving it from code</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Driving it from code</h3>
     <p>
         Everything the built-in toolbar can do is a public method, and the same surface is handed to
         custom chrome through <code>BmageEditorContext</code> - so a toolbar you write can do
@@ -127,8 +134,8 @@
     <CodeSnippet Code="@TransientSnippet" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Replacing the chrome</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Replacing the chrome</h3>
     <p>
         <code>Toolbar</code>, <code>Panel</code> and <code>Footer</code> take a render fragment with a
         <code>BmageEditorContext</code>: the current tool and settings, the document, the annotations,
@@ -139,8 +146,8 @@
     <CodeSnippet Code="@ToolbarSnippet" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Theming</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Theming</h3>
     <p>
         Every colour and metric is a CSS custom property on <code>.bmg-editor</code>. Override the
         ones you care about - this site does exactly that to make the editor follow the theme switch
@@ -155,22 +162,22 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2 id="localisation">Localisation</h2>
+<div class="bb-card" id="localisation">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Localisation</h3>
     <p>
         <code>BmageEditorStrings</code> is a record with a property for every label, so a translation
         is an object rather than a resource file - and you can override only the words you care
         about. Number and size formatting are functions on the same record. For a right-to-left
         language set <code>Direction="rtl"</code>: the panel, the crop handles and the toolbar all
-        mirror. The Persian chip above switches both at once.
+        mirror. The Persian button above switches both at once.
     </p>
     <CodeSnippet Code="@LocalisationSnippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Tools and keyboard</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Editor tools">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Tools and keyboard</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Editor tools">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Tool</th><th scope="col">Behaviour</th></tr>
             </thead>
@@ -188,19 +195,19 @@
             </tbody>
         </table>
     </div>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Editor keyboard shortcuts">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Editor keyboard shortcuts">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Keys</th><th scope="col">Action</th></tr>
             </thead>
             <tbody>
-                <tr><th scope="row"><kbd class="kbd">Ctrl</kbd> / <kbd class="kbd">&#8984;</kbd> + <kbd class="kbd">Z</kbd></th><td>Undo</td></tr>
-                <tr><th scope="row"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">Shift</kbd> + <kbd class="kbd">Z</kbd>, <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">Y</kbd></th><td>Redo</td></tr>
-                <tr><th scope="row"><kbd class="kbd">Delete</kbd>, <kbd class="kbd">Backspace</kbd></th><td>Delete the selected annotation</td></tr>
+                <tr><th scope="row"><kbd>Ctrl</kbd> / <kbd>&#8984;</kbd> + <kbd>Z</kbd></th><td>Undo</td></tr>
+                <tr><th scope="row"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd>, <kbd>Ctrl</kbd> + <kbd>Y</kbd></th><td>Redo</td></tr>
+                <tr><th scope="row"><kbd>Delete</kbd>, <kbd>Backspace</kbd></th><td>Delete the selected annotation</td></tr>
                 <tr><th scope="row">Arrow keys</th><td>Nudge the selection by 1px, or 10px with Shift</td></tr>
-                <tr><th scope="row"><kbd class="kbd">Esc</kbd></th><td>Clear the selection, or cancel a pending crop</td></tr>
-                <tr><th scope="row"><kbd class="kbd">+</kbd>, <kbd class="kbd">-</kbd></th><td>Zoom</td></tr>
-                <tr><th scope="row"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">0</kbd></th><td>Fit to window</td></tr>
+                <tr><th scope="row"><kbd>Esc</kbd></th><td>Clear the selection, or cancel a pending crop</td></tr>
+                <tr><th scope="row"><kbd>+</kbd>, <kbd>-</kbd></th><td>Zoom</td></tr>
+                <tr><th scope="row"><kbd>Ctrl</kbd> + <kbd>0</kbd></th><td>Fit to window</td></tr>
             </tbody>
         </table>
     </div>
@@ -213,8 +220,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Large images</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Large images</h3>
     <p>
         By default the editor edits through a proxy no larger than 2048px on its longest edge and
         replays the edit at full resolution on export - for a 24 megapixel photo, a 25&times; cut in
@@ -245,7 +252,7 @@
         Metadata = MetadataPolicy.StripSensitive,
     };
 
-    // "site" leaves the class off, which is what lets editor-theme.css point the editor at the
+    // "site" leaves the class off, which is what lets wwwroot/demo.css point the editor at the
     // site's own tokens; the other two force the component's built-in palettes.
     private string ThemeClass => _theme switch
     {
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/ErrorPage.razor b/src/Utilities/Bmage/Demo/Client/Pages/ErrorPage.razor
index 4137178768f..1410c70bd4c 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/ErrorPage.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/ErrorPage.razor
@@ -1,30 +1,20 @@
 @page "/Error"
+@layout MainLayout
 
 @* Target of app.UseExceptionHandler("/Error") in the host's Program.cs. It lives in the client
    project on purpose: Routes.razor binds the router to this assembly only, so a page placed in
    the host project would never be matched and the re-executed request would end in a 404. *@
 
-<PageTitle>Error - Bit.Bmage</PageTitle>
-
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">500</span>
-
-    <h1>Something went wrong</h1>
+<PageTitle>Error · Bmage</PageTitle>
 
+<div class="bb-error">
+    <h1>500</h1>
     <p role="alert">
-        An error occurred while processing your request. Reloading usually clears it; if it does
+        Something went wrong while processing your request. Reloading usually clears it; if it does
         not, the repository is the place to tell us about it.
     </p>
-
-    <div class="hero-actions">
-        <a class="btn-primary" href="/">
-            Back to home
-            <Icon Path="@Icons.ArrowRight" />
-        </a>
-        <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-           href="https://github.com/bitfoundation/bitplatform/issues">
-            <span class="github-mark" aria-hidden="true"></span>
-            Report an issue
-        </a>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="https://github.com/bitfoundation/bitplatform/issues" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">Report an issue ↗</a>
     </div>
 </div>
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Formats.razor b/src/Utilities/Bmage/Demo/Client/Pages/Formats.razor
index b4854aea0a6..19ab1319e24 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Formats.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Formats.razor
@@ -7,43 +7,44 @@
    this browser offers and reports the sizes side by side - and, for a format the probe says it
    cannot write, shows the exception the exporter throws instead of a silently substituted PNG. *@
 
-<PageTitle>Formats - Bit.Bmage</PageTitle>
+<PageTitle>Formats · Bmage</PageTitle>
 
-<h1>Formats</h1>
-
-<p class="page-intro">
-    PNG, JPEG, BMP and GIF are decoded by C# that runs anywhere; WebP and AVIF come from the browser's
-    own codecs. Support varies by browser, version and platform, so Bmage <strong>probes instead of
-    assuming</strong> - and refuses to pass off a substitute as the format you asked for.
-</p>
+<div class="bb-intro">
+    <h1>Formats</h1>
+    <p class="bb-subtitle">
+        PNG, JPEG, BMP and GIF are decoded by C# that runs anywhere; WebP and AVIF come from the browser's
+        own codecs. Support varies by browser, version and platform, so Bmage <strong>probes instead of
+        assuming</strong> - and refuses to pass off a substitute as the format you asked for.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Encode one image every way</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Encode one image every way</h3>
     <p>
         The same 1200 &times; 800 scene, encoded at quality 0.82 in each format. A format this browser
         cannot write is attempted anyway, to show what the exporter does about it.
     </p>
-    <div class="sample-row">
-        <button type="button" class="btn btn-accent" disabled="@(_busy || IsHydrating)" @onclick="RunAsync">
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-primary" disabled="@(_busy || IsHydrating)" @onclick="RunAsync">
             <Icon Path="@Icons.Play" />
             Encode the sample
         </button>
         @if (_busy)
         {
-            <span class="working" role="status">Encoding&hellip;</span>
+            <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Encoding&hellip;</span>
         }
     </div>
 
     @if (_rows.Count > 0)
     {
-        <div class="table-scroll formats-results" tabindex="0" role="region" aria-label="Encoding results">
-            <table class="data">
+        <div class="bb-scroll formats-results" tabindex="0" role="region" aria-label="Encoding results">
+            <table class="bb-table">
                 <thead>
                     <tr>
                         <th scope="col">Format</th>
                         <th scope="col">Outcome</th>
-                        <th scope="col" class="num">Size</th>
-                        <th scope="col" class="num">Time</th>
+                        <th scope="col" class="demo-num">Size</th>
+                        <th scope="col" class="demo-num">Time</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -54,16 +55,16 @@
                             <td>
                                 @if (row.Error is null)
                                 {
-                                    <span class="badge badge-yes">@row.MimeType</span>
+                                    <span class="bb-badge bb-badge-success">@row.MimeType</span>
                                 }
                                 else
                                 {
-                                    <span class="badge badge-no">refused</span>
-                                    <span class="small muted formats-error">@row.Error</span>
+                                    <span class="bb-badge bb-badge-danger">refused</span>
+                                    <span class="demo-small bb-muted formats-error">@row.Error</span>
                                 }
                             </td>
-                            <td class="num">@(row.Bytes is { } b ? Display.Bytes(b) : "—")</td>
-                            <td class="num">@row.Elapsed.TotalMilliseconds.ToString("0") ms</td>
+                            <td class="demo-num">@(row.Bytes is { } b ? Display.Bytes(b) : "—")</td>
+                            <td class="demo-num">@row.Elapsed.TotalMilliseconds.ToString("0") ms</td>
                         </tr>
                     }
                 </tbody>
@@ -72,10 +73,10 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>What decodes and encodes where</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Format support">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What decodes and encodes where</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Format support">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Format</th><th scope="col">Managed decode</th><th scope="col">Managed encode</th><th scope="col">Browser decode</th><th scope="col">Browser encode</th></tr>
             </thead>
@@ -99,8 +100,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Never assume, always probe</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Never assume, always probe</h3>
     <p>
         Asked to encode a format they cannot write, browsers silently produce a PNG instead. Bmage
         probes by actually encoding a pixel and checking what came back, and detects the substitution
@@ -111,10 +112,10 @@
     <CodeSnippet Code="@FallbackSnippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Choosing a format</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Choosing a format">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Choosing a format</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Choosing a format">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Situation</th><th scope="col">Choose</th></tr>
             </thead>
@@ -134,8 +135,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Quality and size budgets</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Quality and size budgets</h3>
     <CodeSnippet Code="@BudgetSnippet" Language="C#" Expanded="true" />
     <p>
         <code>MaxFileSize</code> bisects on quality first, down to <code>MinQuality</code>, then shrinks
@@ -143,8 +144,8 @@
         so you can show it. When the target is impossible you get an <code>ImageEncodeException</code>
         explaining what the smallest attempt produced, rather than a silently oversized file.
     </p>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Size budget strategies">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Size budget strategies">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Strategy</th><th scope="col">Behaviour</th></tr>
             </thead>
@@ -157,8 +158,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Transparency without an alpha channel</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Transparency without an alpha channel</h3>
     <p>
         JPEG has no alpha channel. Exporting a transparent image as JPEG composites it over
         <code>ImageExportOptions.Background</code>, which defaults to white - without it, browsers
@@ -168,8 +169,8 @@
     <CodeSnippet Code="new ImageExportOptions { Format = ImageFormat.Jpeg, Background = new Rgba32(18, 18, 20) }" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Format detection</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Format detection</h3>
     <p>
         Content is trusted over file names and content types, because both can be wrong or hostile.
         <code>ImageProcessor.Identify</code> reads dimensions from the header without decoding any
@@ -180,8 +181,8 @@
     <CodeSnippet Code="@DetectSnippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>GIF and SVG</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> GIF and SVG</h3>
     <p>
         GIF decodes its first frame, with palettes, interlacing and transparency; animation is out of
         scope, and GIF encoding is supported by no browser canvas and is not implemented - use WebP or
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bmage/Demo/Client/Pages/GettingStarted.razor
index 939d4ab1da1..97559b8f3ac 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/GettingStarted.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/GettingStarted.razor
@@ -6,18 +6,19 @@
    image - with that first-image snippet runnable right here against the generated sample, so the
    page ends on something the reader has seen work rather than on something they have to trust. *@
 
-<PageTitle>Getting started - Bit.Bmage</PageTitle>
-
-<h1>Getting started</h1>
-
-<p class="page-intro">
-    Bmage is <strong>browser-side image processing for Blazor</strong>: load, transform, annotate and
-    export images on the user's device from strongly typed C#. Install the package, register the
-    services, and an image is three calls away.
-</p>
+<PageTitle>Getting started · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        Bmage is <strong>browser-side image processing for Blazor</strong>: load, transform, annotate and
+        export images on the user's device from strongly typed C#. Install the package, register the
+        services, and an image is three calls away.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Install the package</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install the package</h3>
     <p>
         One package holds everything: the engine, the browser codecs, loading and export, headless
         processing on a server, and the <code>BmageEditor</code> component. It depends only on
@@ -31,8 +32,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Register the services</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
     <p>
         In <code>Program.cs</code> of the project that runs in the browser. For a Blazor Web App using
         WebAssembly or Auto render modes that is the client project - and the server project too when
@@ -53,8 +54,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Add the stylesheet</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Add the stylesheet</h3>
     <p>
         Only the editor components need one. Link it from <code>App.razor</code> in a Blazor
         Web App, or from <code>wwwroot/index.html</code> in a standalone WebAssembly app. The browser
@@ -63,61 +64,61 @@
     <CodeSnippet Code="@StylesheetSnippet" Language="HTML" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Your first image</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Your first image</h3>
     <p>
         Decode with the browser's codecs (honouring the phone's EXIF rotation), process the decoded
         pixels, and encode - preferring WebP, falling back where it is unavailable.
     </p>
     <CodeSnippet Code="@FirstImageSnippet" Language="Razor" Expanded="true" />
 
-    <h3>Run it here</h3>
+    <h4>Run it here</h4>
     <p>
         The same pipeline, run in your browser against a generated 1200 &times; 800 scene - no upload
         involved.
     </p>
-    <div class="sample-row">
-        <button type="button" class="btn btn-accent" disabled="@(_busy || IsHydrating)" @onclick="RunAsync">
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-primary" disabled="@(_busy || IsHydrating)" @onclick="RunAsync">
             <Icon Path="@Icons.Play" />
             Run the snippet
         </button>
         @if (_busy)
         {
-            <span class="working" role="status">Running&hellip;</span>
+            <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Running&hellip;</span>
         }
     </div>
     @if (_error is not null)
     {
-        <div class="alert alert-error first-image-result" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error first-image-result" role="alert">@_error</div>
     }
     @if (_preview is not null && _encoded is not null)
     {
         <div class="preview-row first-image-result">
             <img class="preview-image first-image" src="@_preview" alt="The generated sample scene, processed by the snippet" />
-            <div class="stat-grid first-image-stats" role="status">
-                <div class="stat">
-                    <span class="stat-label">Output</span>
-                    <span class="stat-value">@_width &times; @_height</span>
+            <div class="bb-stats demo-stats-compact first-image-stats" role="status">
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Output</span>
+                    <span class="bb-stat-value">@_width &times; @_height</span>
                 </div>
-                <div class="stat">
-                    <span class="stat-label">Format</span>
-                    <span class="stat-value">@_encoded.Format.ToString().ToUpperInvariant()</span>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Format</span>
+                    <span class="bb-stat-value">@_encoded.Format.ToString().ToUpperInvariant()</span>
                 </div>
-                <div class="stat">
-                    <span class="stat-label">Size</span>
-                    <span class="stat-value">@Display.Bytes(_encoded.Length)</span>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Size</span>
+                    <span class="bb-stat-value">@Display.Bytes(_encoded.Length)</span>
                 </div>
-                <div class="stat">
-                    <span class="stat-label">Took</span>
-                    <span class="stat-value">@_elapsed.TotalMilliseconds.ToString("0") ms</span>
+                <div class="bb-stat">
+                    <span class="bb-stat-label">Took</span>
+                    <span class="bb-stat-value">@_elapsed.TotalMilliseconds.ToString("0") ms</span>
                 </div>
             </div>
         </div>
     }
 </div>
 
-<div class="demo-section">
-    <h2>Two things that are easy to miss</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Two things that are easy to miss</h3>
     <p>
         <strong>Dispose your images.</strong> An <code>ImageBuffer</code> holds pooled memory: a 4000
         &times; 3000 image is 48 MB. <code>using</code> returns it to the pool immediately instead of
@@ -133,8 +134,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>The full editor instead</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The full editor instead</h3>
     <p>
         If what you want is an editing UI rather than a pipeline, the editor is one component. It
         fills its container, and a container with no height collapses to nothing - so give it one.
@@ -146,8 +147,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>When things run</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> When things run</h3>
     <p>
         Browser features need a live browser. During prerendering there is not one yet, so call them
         from <code>OnAfterRenderAsync</code> or an event handler rather than from
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Headless.razor b/src/Utilities/Bmage/Demo/Client/Pages/Headless.razor
index dc7b4ba4b6d..5f003d4ef15 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Headless.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Headless.razor
@@ -8,44 +8,45 @@
    is how the library is used in an upload handler, a thumbnail service or a console tool - the
    editor is one consumer of this API, not the API itself. *@
 
-<PageTitle>Headless API - Bit.Bmage</PageTitle>
-
-<h1>The headless API</h1>
-
-<p class="page-intro">
-    Not a single component on this page uses the editor. Everything below is <strong>the same engine
-    driven from plain C#</strong>, which is how you would use it in an upload handler, a thumbnail
-    service, or a console tool.
-</p>
+<PageTitle>Headless API · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>The headless API</h1>
+    <p class="bb-subtitle">
+        Not a single component on this page uses the editor. Everything below is <strong>the same engine
+        driven from plain C#</strong>, which is how you would use it in an upload handler, a thumbnail
+        service, or a console tool.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Run every example</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Run every example</h3>
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
     <BmageDropZone Label="Drop an image to run every example against it" OnFilesSelected="OnFilesSelected" />
-    <div class="sample-row">
-        <button type="button" class="btn" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-secondary" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
         @if (_busy)
         {
-            <span class="working" role="status">Running example @(_examples.Count + 1) of @ExampleCount&hellip;</span>
+            <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Running example @(_examples.Count + 1) of @ExampleCount&hellip;</span>
         }
     </div>
 
     @if (_source is not null)
     {
-        <hr class="divider" />
-        <p class="card-title">Source</p>
+        <hr class="demo-divider" />
+        <p class="bb-overline demo-label">Source</p>
         <div class="preview-row">
             <ImagePreview Image="_source" Alt="Source image" Style="max-height:180px" />
-            <div class="table-scroll headless-source" tabindex="0" role="region" aria-label="Source image details">
-                <table class="data">
+            <div class="bb-scroll headless-source" tabindex="0" role="region" aria-label="Source image details">
+                <table class="bb-table">
                     <tbody>
-                        <tr><th scope="row">Dimensions</th><td class="num">@_source.Width &times; @_source.Height</td></tr>
-                        <tr><th scope="row">Pixels in memory</th><td class="num">@Display.Bytes(_source.ByteLength)</td></tr>
+                        <tr><th scope="row">Dimensions</th><td class="demo-num">@_source.Width &times; @_source.Height</td></tr>
+                        <tr><th scope="row">Pixels in memory</th><td class="demo-num">@Display.Bytes(_source.ByteLength)</td></tr>
                         <tr><th scope="row">Source format</th><td>@(_source.Metadata?.SourceFormat.ToString() ?? "unknown")</td></tr>
                         <tr><th scope="row">Transparency</th><td>@(_hasAlpha ? "yes" : "no")</td></tr>
                         @if (_exif is not null)
@@ -57,7 +58,7 @@
                                 <td>
                                     @if (_exif.Location is { } location)
                                     {
-                                        <span class="text-bad">@location.ToString() — removed on export</span>
+                                        <span class="demo-bad">@location.ToString() — removed on export</span>
                                     }
                                     else
                                     {
@@ -75,25 +76,25 @@
 
 @if (_source is not null)
 {
-    <div class="demo-section">
-        <h2>The results</h2>
-        <div class="grid">
+    <div class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The results</h3>
+        <div class="bb-grid headless-results">
             @foreach (var example in _examples)
             {
-                <div class="card" @key="example.Version">
-                    <p class="card-title">@example.Title</p>
+                <div class="bb-card headless-result" @key="example.Version">
+                    <p class="bb-card-title">@example.Title</p>
                     <ImagePreview Image="example.Image" Version="example.Version" Alt="@example.Title" Class="headless-preview" />
-                    <p class="small muted headless-description">@example.Description</p>
-                    <p class="small mono">@example.Image.Width &times; @example.Image.Height &middot; @Display.Bytes(example.Bytes)</p>
-                    <pre class="code">@example.Code</pre>
+                    <p class="demo-small bb-muted headless-description">@example.Description</p>
+                    <p class="demo-small bb-mono">@example.Image.Width &times; @example.Image.Height &middot; @Display.Bytes(example.Bytes)</p>
+                    <pre class="demo-readout">@example.Code</pre>
                 </div>
             }
         </div>
     </div>
 }
 
-<div class="demo-section">
-    <h2>No browser at all</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> No browser at all</h3>
     <p>
         The same package works in an ASP.NET Core endpoint or a console app. Register the headless
         services and you get the managed PNG, JPEG, BMP and GIF codecs with no JavaScript involved -
@@ -103,10 +104,10 @@
     <CodeSnippet Code="@ServerSnippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>The pieces</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Headless types">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The pieces</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Headless types">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Type</th><th scope="col">Purpose</th></tr>
             </thead>
@@ -125,8 +126,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Drawing without a UI</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Drawing without a UI</h3>
     <p>
         <code>ImageCanvas</code> is a complete drawing surface - the last example above was composed
         with it. Paths come from <code>PathBuilder</code> (lines, quadratic and cubic curves, arcs,
@@ -143,8 +144,8 @@
     <CodeSnippet Code="@FontSnippet" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Analysing an image</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Analysing an image</h3>
     <p>
         <code>ImageStatistics</code> samples on a regular grid by default, which keeps a 24 megapixel
         photo well under a frame while staying indistinguishable from a full pass. The dominant
@@ -159,8 +160,8 @@
     <CodeSnippet Code="@PlaceholderSnippet" Language="C#" />
 </div>
 
-<div class="demo-section">
-    <h2>Non-destructive editing without the editor</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Non-destructive editing without the editor</h3>
     <p>
         The editor's document model is public. A document is a value: serialise it, send it to a
         server, or apply it to a different image - rendering never modifies the source.
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Home.razor b/src/Utilities/Bmage/Demo/Client/Pages/Home.razor
index 140c3c92cfa..d323ccd5757 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Home.razor
@@ -1,276 +1,452 @@
 @page "/"
-@inject IJSRuntime JS
-
-@* The landing page. It is not a documentation page and does not get the docs shell around it -
-   no nav panel, no "on this page" rail, no reading column (see Layout/MainLayout.razor). Instead
-   it lays out its own full-bleed sections, alternating surfaces, and prints its own index into the
-   docs - which is the job the nav panel would otherwise be doing here.
-
-   Its argument is the workflows: every tile is a page that does a real job end to end in the
-   reader's own browser, so the page points at them rather than describing them at length.
-
-   Its styles live under "Landing page" in wwwroot/css/app.css. *@
+@layout MainLayout
+@implements IDisposable
 
 <PageTitle>Bmage - browser-side image processing for Blazor</PageTitle>
 
-<div class="homepage">
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with a
+   JavaScript image library → persona tiles → FAQ → final call to action. Everything else on the
+   site is a documentation page under DocsLayout. The hero's sample is a live pipeline rather than
+   a picture of one: the scene is drawn with the library's own canvas and processed by the library
+   in the reader's browser, and every look re-runs the code shown above it. *@
 
-    @* ── Hero ──────────────────────────────────────────────────────────────── *@
-    <section class="homepage-section hero-section">
-        <div class="homepage-section-content">
-            <div class="hero-copy">
-                <a class="hero-eyebrow" href="/editor">
-                    <Icon Path="@Icons.Sparkle" />
-                    A full image editor component, included
-                </a>
+<div class="bb-landing">
 
-                <h1>Images for Blazor, <span class="accent">processed in C#</span></h1>
+    @* ============================== Hero ============================== *@
 
-                <p class="hero-lead">
-                    Load, crop, resize, adjust, annotate, redact and export images entirely on the
-                    user's device, from strongly typed C#. No server round trips, no base64, no
-                    JavaScript image library.
-                </p>
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Images for Blazor,<br /><span class="bb-hero-accent">processed in C#.</span></h1>
+            <p class="bb-hero-sub">
+                Load, crop, resize, adjust, annotate, redact and export images entirely on the user's
+                device, from strongly typed C#. No server round trips, no base64, no JavaScript image
+                library - and a complete editor component when you want a UI instead of a pipeline.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bmage</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="editor" class="btn btn-secondary bb-btn-lg">Try the editor</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
 
-                <div class="hero-actions">
-                    <a class="btn-primary" href="/getting-started">
-                        Get started
-                        <Icon Path="@Icons.ArrowRight" />
-                    </a>
-                    <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-                       href="https://github.com/bitfoundation/bitplatform">
-                        <span class="github-mark" aria-hidden="true"></span>
-                        View on GitHub
-                    </a>
+        @* The sample, framed as a window: the pipeline on top, and what it produced underneath -
+           live, so the first thing a visitor can do here is change the look and watch it re-run. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">ProfilePhoto.razor</span>
                 </div>
-
-                <div class="install-line">
-                    <code><span class="prompt" aria-hidden="true">&gt;&nbsp;</span>@_install</code>
-                    <button type="button" class="install-copy" @onclick="CopyInstallAsync"
-                            aria-label="@(_installCopied ? "Install command copied to the clipboard" : "Copy the install command")">
-                        <Icon Path="@(_installCopied ? Icons.Check : Icons.Copy)" />
-                        @(_installCopied ? "Copied" : "Copy")
-                    </button>
+                <pre class="bb-code"><code>@((MarkupString)SyntaxHighlighter.Highlight(HeroCode, "C#"))</code></pre>
+                <div class="home-hero-live">
+                    <div class="home-hero-result">
+                        @if (_result is not null)
+                        {
+                            <ImagePreview Image="_result" Version="_version" Alt="@($"The generated scene, cropped around its subject with the {_look} look")" Class="home-hero-image" />
+                        }
+                        else
+                        {
+                            <div class="home-hero-image home-hero-placeholder" role="img" aria-label="The sample appears once the page is interactive">
+                                @(_busy ? "Running…" : "Runs in your browser")
+                            </div>
+                        }
+                    </div>
+                    <div class="home-hero-controls">
+                        <div class="bb-segmented" role="group" aria-label="Look">
+                            @foreach (var look in Looks)
+                            {
+                                <button type="button" aria-pressed="@(_look == look ? "true" : "false")"
+                                        disabled="@(IsHydrating || _busy)" @onclick="() => SetLookAsync(look)">@look</button>
+                            }
+                        </div>
+                        <p class="home-hero-caption" role="status">
+                            @if (_elapsed is { } elapsed && _result is not null)
+                            {
+                                <text>SmartCrop found the person in a generated @SceneWidth &times; @SceneHeight scene and framed a @_result.Width &times; @_result.Height avatar in @elapsed.TotalMilliseconds.ToString("0") ms - on this device.</text>
+                            }
+                            else
+                            {
+                                <text>The scene is drawn by the library's own canvas and processed in your browser.</text>
+                            }
+                        </p>
+                    </div>
                 </div>
             </div>
-
-            @* The hero says what the library does; this is where it is shown doing it - one tile per
-               workflow, each a link into a page that runs it on the reader's own image. *@
-            <nav class="hero-stage" aria-label="Workflows">
-                @foreach (var tile in _tiles)
-                {
-                    <a class="hero-tile" href="@($"/{tile.Href}")">
-                        <span class="hero-tile-icon">
-                            <Icon Path="@tile.Icon" />
-                        </span>
-                        <span class="hero-tile-title">@tile.Title</span>
-                        <span class="hero-tile-desc">@tile.Description</span>
-                    </a>
-                }
-            </nav>
         </div>
     </section>
 
-    @* ── Quick start ───────────────────────────────────────────────────────── *@
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Quick start</span>
-            <h2>One pipeline, start to finish</h2>
-            <p class="section-lead">
-                That runs in the browser. The original file never leaves it, the phone's rotation
-                is applied, the GPS coordinates are stripped, and the result is a WebP that fits the
-                size budget you asked for.
-            </p>
+    @* ============================== Proof strip ============================== *@
 
-            <div class="quick-start-body">
-                <CodeSnippet Code="@_quickStart" Language="C#" Expanded="true" />
-            </div>
+    <section class="bb-proof">
+        <div><strong>Engine in C#</strong><span>resampler, rasteriser, colour pipeline and four codecs</span></div>
+        <div><strong>On the device</strong><span>the original never leaves the browser</span></div>
+        <div><strong>WebP and AVIF</strong><span>from the browser's codecs, probed rather than assumed</span></div>
+        <div><strong>Private by default</strong><span>metadata is removed unless you keep it</span></div>
+    </section>
+
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>An image platform, not an interop wrapper</h2>
+        <p class="bb-section-sub">
+            Six decisions run through the whole library. Every tile links to the page that shows the
+            decision paying off - with a sample that runs on your own image.
+        </p>
+        <div class="bb-grid home-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Non-destructive by construction</h3>
+                <p class="bb-card-desc">
+                    An edit is an immutable <code>ImagePipeline</code> - a list of operations, not a mutated
+                    buffer. Undo costs a few hundred bytes, previews are cheap, and the optimiser fuses
+                    per-pixel steps into one pass.
+                </p>
+                <a href="pipelines" class="btn btn-outline">Pipelines →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> A complete editor component</h3>
+                <p class="bb-card-desc">
+                    <code>BmageEditor</code> crops, rotates, adjusts, filters, draws, annotates, redacts and
+                    exports - themed through CSS custom properties, localised, keyboard accessible and
+                    right-to-left aware.
+                </p>
+                <a href="editor" class="btn btn-outline">The editor →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Large images stay usable</h3>
+                <p class="bb-card-desc">
+                    Editing runs on a proxy sized for the display and replays at full resolution on
+                    export, so a 24 megapixel photo does not stall the interface.
+                </p>
+                <a href="performance" class="btn btn-outline">Performance →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Privacy is the default</h3>
+                <p class="bb-card-desc">
+                    Metadata is removed unless you ask for it, so GPS coordinates never leak into an
+                    exported avatar by accident - and the page proves it by reading the exported bytes back.
+                </p>
+                <a href="metadata" class="btn btn-outline">Metadata and privacy →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Nothing assumed about the browser</h3>
+                <p class="bb-card-desc">
+                    Format support is probed by encoding a pixel. When a browser would hand back a PNG for
+                    the AVIF you asked for, you get an exception, not a mislabelled file.
+                </p>
+                <a href="capabilities" class="btn btn-outline">Capabilities →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Headless first</h3>
+                <p class="bb-card-desc">
+                    Every capability works without the editor, so the same pipeline runs in an upload
+                    handler, a thumbnail service or a console tool with the managed codecs.
+                </p>
+                <a href="headless" class="btn btn-outline">Headless API →</a>
+            </section>
         </div>
     </section>
 
-    @* ── Why ───────────────────────────────────────────────────────────────── *@
-    <section class="homepage-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Why Bmage</span>
-            <h2>The engine is C#, the browser does what only it can</h2>
-            <p class="section-lead">
-                The resampler, the rasteriser, the colour pipeline, the TrueType text engine and the
-                PNG, JPEG, BMP and GIF codecs are implemented in the library. The browser is used for
-                what only it can do: WebP and AVIF, the clipboard, the camera, and drawing pixels on
-                screen.
-            </p>
+    @* ============================== Code walkthrough ============================== *@
 
-            <div class="stat-row">
-                @foreach (var stat in _stats)
-                {
-                    <div class="stat">
-                        <span class="stat-value">@stat.Value</span>
-                        <span class="stat-label">@stat.Label</span>
-                    </div>
-                }
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>One package, one registration</h3>
+                    <p>
+                        The engine, the browser codecs, loading and export, headless processing and the
+                        editor component are all in <code>Bit.Bmage</code>. One call registers the loader,
+                        the exporter and the capability probe.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code"><code>@((MarkupString)SyntaxHighlighter.Highlight(RegisterCode, "C#"))</code></pre>
             </div>
-
-            <p class="section-note">Everything in the box:</p>
-            <div class="badge-list">
-                @foreach (var feature in _features)
-                {
-                    <span class="badge">@feature</span>
-                }
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Decode, process, encode</h3>
+                    <p>
+                        The browser decodes the upload and applies the phone's rotation, a pipeline does the
+                        pixel work, and the exporter writes WebP where it can - falling back to JPEG where
+                        it cannot, rather than guessing.
+                    </p>
+                    <a href="pipelines">Pipelines →</a>
+                </div>
+                <pre class="bb-code"><code>@((MarkupString)SyntaxHighlighter.Highlight(ProcessCode, "C#"))</code></pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Or drop in the whole editor</h3>
+                    <p>
+                        When what you want is an editing UI rather than a pipeline, it is one component.
+                        It fills its container, so give the container a height.
+                    </p>
+                    <a href="editor">The editor →</a>
+                </div>
+                <pre class="bb-code"><code>@((MarkupString)SyntaxHighlighter.Highlight(EditorCode, "Razor"))</code></pre>
             </div>
         </div>
     </section>
 
-    @* ── What makes it different ───────────────────────────────────────────── *@
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Design</span>
-            <h2>What makes it different</h2>
-            <p class="section-lead">
-                Six decisions run through the whole library. Every card links to the page that shows
-                the decision paying off.
-            </p>
+    @* ============================== Comparison ============================== *@
 
-            <div class="feature-grid">
-                @foreach (var feature in _capabilities)
-                {
-                    <a class="feature-card" href="@($"/{feature.Href}")">
-                        <span class="feature-card-icon">
-                            <Icon Path="@feature.Icon" />
-                        </span>
-                        <h3>@feature.Title</h3>
-                        <p>@feature.Description</p>
-                    </a>
-                }
-            </div>
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not wrap a JavaScript image library?</h2>
+        <p class="bb-section-sub">
+            The usual way to crop an avatar in Blazor is to send the full-resolution file to a server, or
+            to put several JavaScript libraries behind hand-written interop. Bmage keeps the engine in C#
+            and uses the browser only for what only it can do.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A JavaScript image library compared with Bmage">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>JavaScript library over interop</th><th>Bmage</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Where the pixels are processed</td><td>In script, behind interop calls you write and maintain</td><td>In C# - the browser decodes, writes WebP and AVIF, and draws</td></tr>
+                    <tr><td>The API</td><td>Option bags and untyped results</td><td>An immutable <code>ImagePipeline</code> and typed export options</td></tr>
+                    <tr><td>Format support</td><td>Assumed, or read from the user agent</td><td>Probed by encoding a pixel; a substituted PNG is refused</td></tr>
+                    <tr><td>Metadata</td><td>Whatever the library passes through</td><td>Removed by default, with three explicit policies</td></tr>
+                    <tr><td>On a server</td><td>A second library, a second set of results</td><td>The same pipeline, headless, with the managed codecs</td></tr>
+                </tbody>
+            </table>
         </div>
     </section>
 
-    @* ── Every page ────────────────────────────────────────────────────────── *@
-    @* The landing page has no nav panel, so the full index of the docs lives here instead: a
-       reader who arrives at the root should be able to reach any page without first having to
-       find their way into them. It is grouped exactly as the panel groups it, from the same
-       list. *@
-    <section class="homepage-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Documentation</span>
-            <h2>Explore every page</h2>
-            <p class="section-lead">
-                @NavItem.Docs.Length pages, in the order they are meant to be read. Press
-                <span class="kbd">Ctrl K</span> anywhere on the site to jump straight to one.
-            </p>
+    @* ============================== Persona tiles ============================== *@
 
-            <div class="demo-index">
-                @foreach (var group in NavItem.Groups)
-                {
-                    <div class="demo-index-group">
-                        <h3>
-                            <Icon Path="@group.Icon" />
-                            @group.Category
-                        </h3>
-                        @foreach (var item in group.Items)
-                        {
-                            <a class="demo-index-link" href="@item.Url">@item.Title</a>
-                        }
-                    </div>
-                }
-            </div>
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bmage?</h3>
+                <p class="bb-card-desc">Install, register, and process your first image - with the snippet runnable on the page.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Building a feature?</h3>
+                <p class="bb-card-desc">Avatars, screenshots, upload optimisation, product and social images, batches - each a working page with its source.</p>
+                <a href="avatar" class="btn btn-outline">Open the workflows →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Processing on a server?</h3>
+                <p class="bb-card-desc">The engine has no UI dependency: register the headless services and run the same pipelines in an endpoint.</p>
+                <a href="headless" class="btn btn-outline">Headless API →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library - and runs its pipelines - instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
         </div>
     </section>
 
-    @* ── Closing call to action ────────────────────────────────────────────── *@
-    <section class="homepage-section alt-section cta-section">
-        <div class="homepage-section-content">
-            <h2>Start processing</h2>
-            <p class="section-lead">
-                Bmage is part of bit platform, free and open source. The whole engine lives in the
-                repository, so you can read it, file an issue against it, or send a pull request.
-            </p>
-            <div class="hero-actions">
-                <a class="btn-primary" href="/getting-started">
-                    Get started
-                    <Icon Path="@Icons.ArrowRight" />
-                </a>
-                <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-                   href="https://github.com/bitfoundation/bitplatform">
-                    <span class="github-mark" aria-hidden="true"></span>
-                    View on GitHub
-                </a>
-            </div>
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Does the image leave the user's device?</summary>
+                <p>
+                    Not on WebAssembly, which is where Bmage is meant to run: the file is decoded, processed
+                    and encoded in the browser, and only the result goes wherever your code sends it.
+                    Interactive Server works too, but there the pixels cross the circuit to be processed.
+                </p>
+            </details>
+            <details>
+                <summary>Which frameworks and render modes are supported?</summary>
+                <p>
+                    .NET 8, 9 and 10. Everything works on Blazor WebAssembly and on Interactive Auto once
+                    interactive; prerendering, ASP.NET Core and console hosts get the headless API with the
+                    managed PNG, JPEG, BMP and GIF codecs.
+                </p>
+            </details>
+            <details>
+                <summary>Is C# fast enough for pixel work in a browser?</summary>
+                <p>
+                    With ahead-of-time compilation, yes: WebAssembly then lands within 1.2 to 2.4&times; of
+                    desktop .NET. On Blazor's default IL interpreter pixel loops run 10 to 35&times; slower,
+                    so publish the browser project with <code>RunAOTCompilation</code>.
+                </p>
+            </details>
+            <details>
+                <summary>Can it write WebP and AVIF?</summary>
+                <p>
+                    Through the browser's own codecs, wherever the browser can - which Bmage probes rather
+                    than assumes. Ask for a preference order with <code>EncodeWithFallbackAsync</code>, or
+                    get an <code>ImageCapabilityException</code> instead of a silently substituted PNG.
+                </p>
+            </details>
+            <details>
+                <summary>What about animated GIFs and SVG?</summary>
+                <p>
+                    A GIF decodes to its first frame. SVG is refused with an explanatory error rather than
+                    rasterised, because rendering untrusted SVG can run scripts and fetch remote resources.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Start processing</h2>
+        <p class="bb-section-sub">One package and one service registration - and every image your users pick is yours to shape on their device.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bmage</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="avatar" class="btn btn-secondary bb-btn-lg">Browse the workflows</a>
         </div>
     </section>
 </div>
 
 @code {
-    /// <summary>A hero or feature tile: a headline capability, its one-line pitch and where it is shown.</summary>
-    private sealed record Tile(string Title, string Description, string Href, string Icon);
-
-    /// <summary>One of the numbers under the pitch, which is the part of it that can be checked.</summary>
-    private sealed record Stat(string Value, string Label);
-
-    private const string _install = "dotnet add package Bit.Bmage";
-
-    private bool _installCopied;
-
-    private readonly Stat[] _stats =
-    [
-        new(".NET 8+", "Targets .NET 8, 9 and 10"),
-        new("0", "JavaScript image libraries"),
-        new("9", "Worked workflows, with source"),
-        new("MIT", "Free and open source"),
-    ];
-
-    private readonly string[] _features =
-    [
-        "Crop", "Smart crop", "Resize", "Rotate", "Adjustments", "Filters", "Auto levels",
-        "Annotations", "Redaction", "Text", "Drawing", "Undo and redo", "WebP", "AVIF",
-        "Size budgets", "EXIF", "Metadata policies", "Batch", "Capability probing", "Headless",
-    ];
-
-    private readonly Tile[] _tiles =
-    [
-        new("Avatar editor", "Square or circle, sized to a byte budget.", "avatar", Icons.Person),
-        new("Screenshots", "Arrows, steps and redaction that sticks.", "annotate", Icons.Pen),
-        new("Upload optimisation", "Smaller files before they leave the device.", "optimize", Icons.Gauge),
-        new("Product images", "Every catalogue size from one upload.", "product", Icons.Tag),
-    ];
-
-    private readonly Tile[] _capabilities =
-    [
-        new("Non-destructive by construction", "An edit is a list of operations, not a mutated buffer. Undo costs a few hundred bytes, previews are cheap, and any earlier step can be changed.", "pipelines", Icons.Pipeline),
-        new("Real pixels, real C#", "The resampler, rasteriser, colour engine and four codecs are implemented in the library. The browser is used only for WebP and AVIF.", "headless", Icons.Code),
-        new("Large images stay usable", "Editing runs on a proxy sized for the display and replays at full resolution on export, so a 24 megapixel photo does not stall the UI.", "editor", Icons.Crop),
-        new("Privacy is the default", "Metadata is removed unless you ask for it. GPS coordinates never leak into an exported avatar by accident.", "metadata", Icons.Shield),
-        new("Nothing assumed about the browser", "Format support is probed by encoding a pixel. When AVIF is unavailable you are told, not silently handed a PNG.", "capabilities", Icons.Chip),
-        new("Headless first", "Every capability works without the editor component, so the same pipeline runs in an upload handler or a console tool.", "headless", Icons.Server),
-    ];
-
-    private async Task CopyInstallAsync()
+    private const int SceneWidth = 720;
+    private const int SceneHeight = 480;
+    private const int AvatarSize = 240;
+
+    private static readonly string[] Looks = ["Original", "Warm", "Mono", "Vintage"];
+
+    private ImageBuffer? _source;
+    private ImageBuffer? _result;
+    private long _version;
+    private string _look = "Vintage";
+    private bool _busy;
+    private TimeSpan? _elapsed;
+    // Identifies the newest run; a slower one that finishes after it is discarded.
+    private int _run;
+
+    private bool IsHydrating => RendererInfo.IsInteractive is false;
+
+    /// <summary>The builder calls of a look, as source text and as the pipeline they describe - one list, so the two cannot disagree.</summary>
+    private static (string[] Lines, Func<ImagePipeline, ImagePipeline> Apply) LookOf(string look) => look switch
+    {
+        "Warm" => ([".Temperature(0.3f)", ".Vibrance(0.25f)"], p => p.Temperature(0.3f).Vibrance(0.25f)),
+        "Mono" => ([".Grayscale()", ".Contrast(0.2f)"], p => p.Grayscale().Contrast(0.2f)),
+        "Vintage" => ([".Sepia(0.7f)", ".Vignette(0.5f)"], p => p.Sepia(0.7f).Vignette(0.5f)),
+        _ => ([], p => p),
+    };
+
+    private string HeroCode
+    {
+        get
+        {
+            var lines = LookOf(_look).Lines.Select(line => $"\n    {line}");
+            return $$"""
+                using var photo = await Loader.LoadAsync(e.File);
+
+                using var avatar = await ImagePipeline.Create()
+                    .AutoOrient()
+                    .SmartCrop(AspectRatio.Square)   // finds the subject
+                    .Resize({{AvatarSize}}, {{AvatarSize}}){{string.Concat(lines)}}
+                    .ExecuteAsync(photo);
+                """;
+        }
+    }
+
+    private const string RegisterCode = """
+        // Program.cs
+        using Bit.Bmage;
+
+        builder.Services.AddBitBmageServices();
+        """;
+
+    private const string ProcessCode = """
+        using var image = await Loader.LoadAsync(e.File);
+
+        using var processed = await ImagePipeline.Create()
+            .MaxSize(800, 800)
+            .Sharpen(0.3f)
+            .ExecuteAsync(image);
+
+        var encoded = await Exporter.EncodeWithFallbackAsync(
+            processed,
+            [ImageFormat.WebP, ImageFormat.Jpeg],
+            new ImageExportOptions { Quality = 0.85 });
+        """;
+
+    private const string EditorCode = """
+        <div style="height: 70vh">
+            <BmageEditor @ref="_editor" OnExported="OnExported" />
+        </div>
+        """;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        // The scene is drawn and processed in the browser, so it waits for the first interactive
+        // render; the prerendered page shows the code and a placeholder of the same size.
+        if (firstRender is false || IsHydrating) return;
+
+        _busy = true;
+        StateHasChanged();
+        // Let the busy state paint before the drawing work starts.
+        await Task.Yield();
+
+        _source = SampleImages.Landscape(SceneWidth, SceneHeight);
+        await RunAsync();
+    }
+
+    private async Task SetLookAsync(string look)
     {
+        _look = look;
+        await RunAsync();
+    }
+
+    private async Task RunAsync()
+    {
+        if (_source is not { } source) return;
+
+        var run = ++_run;
+        _busy = true;
+        ImageBuffer? next = null;
         try
         {
-            _installCopied = await JS.InvokeAsync<bool>("bmdCopyToClipboard", _install);
+            var started = System.Diagnostics.Stopwatch.StartNew();
+            var pipeline = LookOf(_look).Apply(ImagePipeline.Create()
+                .AutoOrient()
+                .SmartCrop(AspectRatio.Square)
+                .Resize(AvatarSize, AvatarSize));
+
+            next = await pipeline.ExecuteAsync(source);
+            started.Stop();
+            if (run != _run) return;
+
+            _result?.Dispose();
+            _result = next;
+            next = null;
+            _version++;
+            _elapsed = started.Elapsed;
         }
-        catch
+        finally
         {
-            // The command is printed next to the button, so a clipboard the browser refuses to
-            // hand over costs the reader a selection rather than the information.
-            _installCopied = false;
+            next?.Dispose();
+            if (run == _run)
+            {
+                _busy = false;
+                StateHasChanged();
+            }
         }
     }
 
-    private const string _quickStart = """
-        var result = await processor.ProcessAsync(
-            uploadedFile,
-            ImagePipeline.Create()
-                .AutoOrient()
-                .Cover(512, 512)
-                .Sharpen(0.3f),
-            new ImageExportOptions
-            {
-                Format      = ImageFormat.WebP,
-                Quality     = 0.82,
-                Metadata    = MetadataPolicy.StripSensitive,
-                MaxFileSize = 120 * 1024,
-            });
-        """;
+    public void Dispose()
+    {
+        _run++;
+        _source?.Dispose();
+        _result?.Dispose();
+    }
 }
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Hosting.razor b/src/Utilities/Bmage/Demo/Client/Pages/Hosting.razor
index 3be722e53a5..e078c789f7d 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Hosting.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Hosting.razor
@@ -4,20 +4,21 @@
    setup, copied from its Program.cs files and App.razor, so the snippets are known to work rather
    than paraphrased. *@
 
-<PageTitle>Hosting models - Bit.Bmage</PageTitle>
-
-<h1>Hosting models</h1>
-
-<p class="page-intro">
-    Bmage's engine is C# that runs wherever .NET does, and its browser integration runs wherever
-    Blazor has a browser to talk to. What changes between hosts is <strong>where the pixels
-    live</strong> - and, in a prerendered app, <strong>when</strong> there is a browser at all.
-</p>
+<PageTitle>Hosting models · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Hosting models</h1>
+    <p class="bb-subtitle">
+        Bmage's engine is C# that runs wherever .NET does, and its browser integration runs wherever
+        Blazor has a browser to talk to. What changes between hosts is <strong>where the pixels
+        live</strong> - and, in a prerendered app, <strong>when</strong> there is a browser at all.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>What works where</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Hosting models">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What works where</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Hosting models">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Model</th><th scope="col">What works</th><th scope="col">What to know</th></tr>
             </thead>
@@ -33,8 +34,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>In a Blazor Web App</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> In a Blazor Web App</h3>
     <p>
         A Web App has two projects and both build a service container: the client's runs in the
         browser, and the server's prerenders every page before the runtime has downloaded. Every
@@ -42,20 +43,20 @@
         prerender fails with a missing-service exception. This site keeps the registration in one
         extension method in the client project and calls it from both.
     </p>
-    <h3>The client project</h3>
+    <h4>The client project</h4>
     <p>
         Reference <code>Bit.Bmage</code> from the client, which is the project that runs in the
         browser.
     </p>
     <CodeSnippet Code="@ClientServicesSnippet" Language="C#" Expanded="true" />
     <CodeSnippet Code="@ClientProgramSnippet" Language="C#" />
-    <h3>The server project</h3>
+    <h4>The server project</h4>
     <p>
         The server references the client project, registers the same services for its prerender pass,
         and maps the client's assembly so its pages are routable.
     </p>
     <CodeSnippet Code="@ServerProgramSnippet" Language="C#" Expanded="true" />
-    <h3>App.razor</h3>
+    <h4>App.razor</h4>
     <p>
         The editor's stylesheet goes in the head, and the app renders in
         <code>InteractiveWebAssembly</code> (or <code>InteractiveAuto</code>), so the image work
@@ -64,8 +65,8 @@
     <CodeSnippet Code="@AppRazorSnippet" Language="Razor" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Prerendering</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Prerendering</h3>
     <p>
         During prerendering there is no browser, so <code>IJSRuntime</code> cannot be used. Rather
         than throwing, <code>IImageCapabilityProvider.GetAsync</code> returns the managed capability
@@ -76,13 +77,14 @@
     <CodeSnippet Code="@PrerenderSnippet" Language="Razor" Expanded="true" />
     <p>
         Buttons on a prerendered page are visible before the runtime that answers them has loaded. This
-        site disables its own until <code>RendererInfo.IsInteractive</code> is true, and the header
-        says <em>loading</em> in the meantime.
+        site disables its own until <code>RendererInfo.IsInteractive</code> is true, and its layout
+        carries the same fact as <code>data-interactive</code>, which is what its end-to-end tests
+        wait for before dropping a file on a page.
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Interactive Server</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Interactive Server</h3>
     <p>
         Everything works, because JavaScript interop works over the circuit. What changes is where the
         bytes travel: the browser decodes an image and the pixels are streamed to the server for
@@ -90,7 +92,7 @@
         is 48 MB in each direction - unremarkable on a local network, not over a poor mobile
         connection. If images are central to an Interactive Server app:
     </p>
-    <ul>
+    <ul class="bb-detail-list">
         <li>Constrain the working size aggressively: <code>options.MaxInteractiveDimension = 1200</code>.</li>
         <li>Use <code>DecodeOptions.MaxSize</code> so the browser downscales before the pixels are sent at all.</li>
         <li>Prefer the headless API on the server for bulk work, and use the browser only for what needs a browser.</li>
@@ -102,8 +104,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Standalone WebAssembly</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Standalone WebAssembly</h3>
     <p>
         One project, no prerendering: register the services in <code>Program.cs</code> and link the
         stylesheet from <code>wwwroot/index.html</code>.
@@ -112,8 +114,8 @@
     <CodeSnippet Code="@IndexHtmlSnippet" Language="HTML" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Compile ahead of time</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Compile ahead of time</h3>
     <p>
         All image processing is C#, and on Blazor's default IL interpreter it runs <strong>10 to 35
         times slower</strong> than compiled code. Compiling the browser project ahead of time brings it
@@ -121,7 +123,7 @@
         measurements.
     </p>
     <CodeSnippet Code="@AotSnippet" Language="XML" Expanded="true" />
-    <ul>
+    <ul class="bb-detail-list">
         <li>It needs the <code>wasm-tools</code> workload: <code>dotnet workload install wasm-tools</code>.</li>
         <li>It only applies to <code>dotnet publish</code>. <code>dotnet run</code> and the debugger always use the interpreter, so judge performance on a published build.</li>
         <li>The download grows (the runtime's <code>dotnet.native.wasm</code> went from 2.9 MB to 13 MB uncompressed) and publishing takes minutes rather than seconds.</li>
@@ -136,8 +138,8 @@
     <CodeSnippet Code="@ThisSiteAotSnippet" Language="XML" />
 </div>
 
-<div class="demo-section">
-    <h2>Without a browser</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Without a browser</h3>
     <p>
         On a server, in a console app or a background worker, register the headless services instead.
         There is no JavaScript and no probing, so <code>ImageProcessor</code> is registered directly.
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/McpServerPage.razor b/src/Utilities/Bmage/Demo/Client/Pages/McpServerPage.razor
index f754877e591..27204c93255 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/McpServerPage.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/McpServerPage.razor
@@ -9,22 +9,23 @@
    The tool, prompt and resource tables are fetched rather than written out, for the same reason:
    they come from GetMcpCatalog, which reflects over the attributes that declare them. *@
 
-<PageTitle>MCP server - Bit.Bmage</PageTitle>
-
-<h1>MCP server</h1>
-
-<p class="page-intro">
-    This site ships a <strong>Model Context Protocol</strong> server, so an AI agent writes Bmage
-    code from what the library <em>actually</em> is rather than from what it remembers. Half of its
-    tools answer from this build's own text - the guides, the XML documentation compiled into the
-    package, the source of every page you have been reading. The other half answer by
-    <strong>running the real engine on the server</strong>: how many bytes a pipeline really
-    produces, whether a size budget is reachable, what the optimiser does, and whether the export
-    still carries the GPS position.
-</p>
-
-<div class="demo-section">
-    <h2>Why an image library needs one</h2>
+<PageTitle>MCP server · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
+        This site ships a <strong>Model Context Protocol</strong> server, so an AI agent writes Bmage
+        code from what the library <em>actually</em> is rather than from what it remembers. Half of its
+        tools answer from this build's own text - the guides, the XML documentation compiled into the
+        package, the source of every page you have been reading. The other half answer by
+        <strong>running the real engine on the server</strong>: how many bytes a pipeline really
+        produces, whether a size budget is reachable, what the optimiser does, and whether the export
+        still carries the GPS position.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Why an image library needs one</h3>
     <p>
         Almost every way of getting image code wrong compiles. There is no warning for a capability
         probe that runs during prerendering, for a 48 MB buffer nobody disposes, or for an avatar
@@ -32,20 +33,20 @@
         directly:
     </p>
 
-    <div class="grid mcp-why">
+    <div class="bb-grid mcp-why">
         @foreach (var problem in Problems)
         {
-            <div class="card">
-                <p class="card-title">@problem.Symptom</p>
-                <p>@problem.Cause</p>
+            <div class="bb-card">
+                <p class="bb-card-title">@problem.Symptom</p>
+                <p class="bb-card-desc">@problem.Cause</p>
                 <code>@problem.Tool</code>
             </div>
         }
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Connect your agent</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect your agent</h3>
     <p>
         The server speaks MCP over HTTP. Point any MCP client at this site's endpoint, at the deployed
         <code>https://bmage.bitplatform.dev/mcp</code>, or at <code>https://bitplatform.dev/mcp</code>,
@@ -54,30 +55,30 @@
         which is what the panels further down this page call.
     </p>
 
-    <div class="field" role="group" aria-labelledby="mcp-endpoint-label">
-        <span class="field-label" id="mcp-endpoint-label">Endpoint</span>
-        <div class="chip-row">
+    <div class="demo-field" role="group" aria-labelledby="mcp-endpoint-label">
+        <span class="demo-field-label" id="mcp-endpoint-label">Endpoint</span>
+        <div class="bb-segmented">
             @foreach (var endpoint in Endpoints)
             {
-                <button type="button" class="chip" aria-pressed="@(_endpoint == endpoint.Name ? "true" : "false")"
+                <button type="button" aria-pressed="@(_endpoint == endpoint.Name ? "true" : "false")"
                         @onclick="() => _endpoint = endpoint.Name">
                     @endpoint.Name
                 </button>
             }
         </div>
-        <span class="field-hint">@CurrentEndpoint.Note</span>
+        <span class="bb-field-hint">@CurrentEndpoint.Note</span>
     </div>
 
     @* A tablist is one stop in the tab order: tab moves past the whole group, and the arrow keys move
        between the tabs inside it. The roles come with the behaviour they promise: every tab names the
        panel it controls, and only the selected one is tabbable. aria-selected is written out as a word
        rather than bound to the bool, because a false bool renders as no attribute at all. *@
-    <div class="chip-row mcp-tabs" role="tablist" aria-label="MCP client">
+    <div class="bb-tabs mcp-tabs" role="tablist" aria-label="MCP client">
         @foreach (var client in Clients)
         {
             var isSelected = _client == client.Name;
 
-            <button type="button" role="tab" class="chip"
+            <button type="button" role="tab"
                     id="@TabId(client.Name)"
                     aria-selected="@(isSelected ? "true" : "false")"
                     aria-controls="@PanelId(client.Name)"
@@ -96,14 +97,14 @@
     {
         <div role="tabpanel" id="@PanelId(client.Name)" aria-labelledby="@TabId(client.Name)"
              hidden="@(_client != client.Name)">
-            <p class="small muted">@client.Note</p>
+            <p class="demo-small bb-muted">@client.Note</p>
             <CodeSnippet Code="@client.Config(CurrentEndpoint.Key, CurrentEndpoint.Url)" Language="@client.Language" Expanded="true" />
         </div>
     }
 </div>
 
-<div class="demo-section">
-    <h2>The pipeline lab</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The pipeline lab</h3>
     <p>
         <code>RunBmagePipeline</code> runs a pipeline on the real engine against a generated test
         image - a photo with sensor grain, a flat-colour screenshot or a transparent graphic - and
@@ -112,184 +113,187 @@
         pipeline is the C# you would write; every <code>ImagePipeline</code> method is accepted.
     </p>
 
-    <div class="split">
-        <div>
-            <div class="field">
-                <label class="field-label" for="mcp-pipeline">Pipeline</label>
-                <textarea id="mcp-pipeline" class="mcp-input mcp-pipeline" rows="3" spellcheck="false"
-                          value="@_pipeline" @onchange="e => _pipeline = e.Value?.ToString() ?? string.Empty"
-                          disabled="@(_running || IsHydrating)"></textarea>
-            </div>
-
-            <div class="chip-row mcp-presets">
-                @foreach (var preset in Presets)
-                {
-                    <button type="button" class="chip" disabled="@(_running || IsHydrating)" @onclick="() => RunPresetAsync(preset)">
-                        @preset.Name
-                    </button>
-                }
-            </div>
-
-            @if (_runError is not null)
-            {
-                <div class="alert alert-error" role="alert">@_runError</div>
-            }
-            else if (_run?.Error is { } error)
-            {
-                @* The server read the pipeline and could not run it, and said why - a better message than
-                   anything this page could compose about it. *@
-                <div class="alert alert-error" role="alert">@error</div>
-            }
-            else if (_run is not null)
-            {
-                <div class="stat-grid mcp-run-stats">
-                    <div class="stat">
-                        <span class="stat-label">Output</span>
-                        <span class="stat-value">@_run.OutputWidth &times; @_run.OutputHeight</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Run</span>
-                        <span class="stat-value">@_run.ExecuteMilliseconds.ToString("0.#") ms</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Unoptimised</span>
-                        <span class="stat-value">@(_run.UnoptimizedMilliseconds is { } ms ? $"{ms:0.#} ms" : "same")</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Smallest file</span>
-                        <span class="stat-value">@SmallestFile</span>
-                    </div>
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="demo-split">
+            <div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="mcp-pipeline">Pipeline</label>
+                    <textarea id="mcp-pipeline" class="mcp-input mcp-pipeline" rows="3" spellcheck="false"
+                              value="@_pipeline" @onchange="e => _pipeline = e.Value?.ToString() ?? string.Empty"
+                              disabled="@(_running || IsHydrating)"></textarea>
                 </div>
 
-                <div class="table-scroll" tabindex="0" role="region" aria-label="Encoded sizes">
-                    <table class="data">
-                        <thead>
-                            <tr>
-                                <th scope="col">Format</th>
-                                <th scope="col" class="num">Quality</th>
-                                <th scope="col" class="num">Bytes</th>
-                                <th scope="col" class="num">Bits/px</th>
-                                <th scope="col" class="num">Encode</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @foreach (var encoding in _run.Encodings ?? [])
-                            {
-                                <tr>
-                                    <th scope="row">@encoding.Format.ToUpperInvariant()</th>
-                                    @if (encoding.Bytes is null)
-                                    {
-                                        <td colspan="4" class="small muted">@encoding.Note</td>
-                                    }
-                                    else
-                                    {
-                                        <td class="num">@(encoding.Quality?.ToString("0.##") ?? "lossless")</td>
-                                        <td class="num">@Display.Bytes(encoding.Bytes.Value)</td>
-                                        <td class="num">@encoding.BitsPerPixel?.ToString("0.##")</td>
-                                        <td class="num">@encoding.EncodeMilliseconds?.ToString("0.#") ms</td>
-                                    }
-                                </tr>
-                            }
-                            @foreach (var budget in _run.Budgets ?? [])
-                            {
-                                <tr>
-                                    <th scope="row">@budget.Format.ToUpperInvariant() &le; @Display.Bytes(budget.MaxFileSize)</th>
-                                    @if (budget.Met)
-                                    {
-                                        <td class="num">@(budget.Quality?.ToString("0.##") ?? "lossless")</td>
-                                        <td class="num text-good">@Display.Bytes(budget.Bytes ?? 0)</td>
-                                        <td colspan="2" class="small muted">@budget.Width &times; @budget.Height</td>
-                                    }
-                                    else
-                                    {
-                                        <td colspan="4" class="small text-bad">@budget.Error</td>
-                                    }
-                                </tr>
-                            }
-                        </tbody>
-                    </table>
-                </div>
-
-                <p class="card-title">What the optimiser runs</p>
-                <pre class="code mcp-operations">@string.Join("\n", (_run.OptimizedOperations ?? []).Select((op, i) => $"{i + 1}. {op}"))</pre>
-                <ul class="mcp-notes">
-                    @foreach (var note in _run.OptimizerNotes ?? [])
+                <div class="bb-toolbar mcp-presets">
+                    @foreach (var preset in Presets)
                     {
-                        <li>@note</li>
+                        <button type="button" class="btn btn-secondary demo-btn-sm" disabled="@(_running || IsHydrating)" @onclick="() => RunPresetAsync(preset)">
+                            @preset.Name
+                        </button>
                     }
-                </ul>
-
-                <p class="small mcp-reading">@_run.Reading</p>
+                </div>
 
-                @foreach (var warning in _run.Warnings ?? [])
+                @if (_runError is not null)
                 {
-                    <p class="small text-bad">@warning</p>
+                    <div class="bb-note bb-note-danger demo-error" role="alert">@_runError</div>
                 }
-            }
-        </div>
-
-        <div class="card">
-            <p class="card-title">
-                Run settings
-                @if (_running)
+                else if (_run?.Error is { } error)
                 {
-                    <span class="working" role="status">Running on the server&hellip;</span>
+                    @* The server read the pipeline and could not run it, and said why - a better message than
+                       anything this page could compose about it. *@
+                    <div class="bb-note bb-note-danger demo-error" role="alert">@error</div>
                 }
-            </p>
+                else if (_run is not null)
+                {
+                    <div class="bb-stats demo-stats-compact mcp-run-stats">
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Output</span>
+                            <span class="bb-stat-value">@_run.OutputWidth &times; @_run.OutputHeight</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Run</span>
+                            <span class="bb-stat-value">@_run.ExecuteMilliseconds.ToString("0.#") ms</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Unoptimised</span>
+                            <span class="bb-stat-value">@(_run.UnoptimizedMilliseconds is { } ms ? $"{ms:0.#} ms" : "same")</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Smallest file</span>
+                            <span class="bb-stat-value">@SmallestFile</span>
+                        </div>
+                    </div>
 
-            <div class="field" role="group" aria-labelledby="mcp-source-label">
-                <span class="field-label" id="mcp-source-label">Test image</span>
-                <div class="chip-row">
-                    @foreach (var source in Sources)
-                    {
-                        <button type="button" class="chip" aria-pressed="@(_source == source ? "true" : "false")"
-                                disabled="@_running" @onclick="() => _source = source">@source</button>
-                    }
-                </div>
-            </div>
+                    <div class="bb-scroll" tabindex="0" role="region" aria-label="Encoded sizes">
+                        <table class="bb-table">
+                            <thead>
+                                <tr>
+                                    <th scope="col">Format</th>
+                                    <th scope="col" class="demo-num">Quality</th>
+                                    <th scope="col" class="demo-num">Bytes</th>
+                                    <th scope="col" class="demo-num">Bits/px</th>
+                                    <th scope="col" class="demo-num">Encode</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                @foreach (var encoding in _run.Encodings ?? [])
+                                {
+                                    <tr>
+                                        <th scope="row">@encoding.Format.ToUpperInvariant()</th>
+                                        @if (encoding.Bytes is null)
+                                        {
+                                            <td colspan="4" class="demo-small bb-muted">@encoding.Note</td>
+                                        }
+                                        else
+                                        {
+                                            <td class="demo-num">@(encoding.Quality?.ToString("0.##") ?? "lossless")</td>
+                                            <td class="demo-num">@Display.Bytes(encoding.Bytes.Value)</td>
+                                            <td class="demo-num">@encoding.BitsPerPixel?.ToString("0.##")</td>
+                                            <td class="demo-num">@encoding.EncodeMilliseconds?.ToString("0.#") ms</td>
+                                        }
+                                    </tr>
+                                }
+                                @foreach (var budget in _run.Budgets ?? [])
+                                {
+                                    <tr>
+                                        <th scope="row">@budget.Format.ToUpperInvariant() &le; @Display.Bytes(budget.MaxFileSize)</th>
+                                        @if (budget.Met)
+                                        {
+                                            <td class="demo-num">@(budget.Quality?.ToString("0.##") ?? "lossless")</td>
+                                            <td class="demo-num demo-good">@Display.Bytes(budget.Bytes ?? 0)</td>
+                                            <td colspan="2" class="demo-small bb-muted">@budget.Width &times; @budget.Height</td>
+                                        }
+                                        else
+                                        {
+                                            <td colspan="4" class="demo-small demo-bad">@budget.Error</td>
+                                        }
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <p class="bb-overline demo-label">What the optimiser runs</p>
+                    <pre class="demo-readout mcp-operations">@string.Join("\n", (_run.OptimizedOperations ?? []).Select((op, i) => $"{i + 1}. {op}"))</pre>
+                    <ul class="mcp-notes">
+                        @foreach (var note in _run.OptimizerNotes ?? [])
+                        {
+                            <li>@note</li>
+                        }
+                    </ul>
 
-            <div class="field">
-                <label class="field-label" for="mcp-size">Source size <span class="field-value">@_width &times; @_height</span></label>
-                <select id="mcp-size" class="bmg-select" disabled="@_running" @onchange="OnSizeChanged">
-                    @foreach (var size in Sizes)
+                    <p class="demo-small mcp-reading">@_run.Reading</p>
+
+                    @foreach (var warning in _run.Warnings ?? [])
                     {
-                        <option value="@size" selected="@($"{_width}x{_height}" == size)">@size.Replace("x", " × ")</option>
+                        <p class="demo-small demo-bad">@warning</p>
                     }
-                </select>
+                }
             </div>
 
-            <div class="field" role="group" aria-labelledby="mcp-formats-label">
-                <span class="field-label" id="mcp-formats-label">Formats</span>
-                <div class="chip-row">
-                    @foreach (var format in Formats)
+            <div class="demo-panel">
+                <p class="bb-overline demo-label">
+                    Run settings
+                    @if (_running)
                     {
-                        <button type="button" class="chip" aria-pressed="@(_formats.Contains(format) ? "true" : "false")"
-                                disabled="@_running" @onclick="() => ToggleFormat(format)">@format</button>
+                        <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Running on the server&hellip;</span>
                     }
+                </p>
+
+                <div class="demo-field" role="group" aria-labelledby="mcp-source-label">
+                    <span class="demo-field-label" id="mcp-source-label">Test image</span>
+                    <div class="bb-segmented">
+                        @foreach (var source in Sources)
+                        {
+                            <button type="button" aria-pressed="@(_source == source ? "true" : "false")"
+                                    disabled="@_running" @onclick="() => _source = source">@source</button>
+                        }
+                    </div>
                 </div>
-            </div>
 
-            <div class="field">
-                <label class="field-label" for="mcp-qualities">Qualities</label>
-                <input id="mcp-qualities" type="text" value="@_qualities" disabled="@_running"
-                       @onchange="e => _qualities = e.Value?.ToString() ?? string.Empty" />
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="mcp-size">Source size <span class="demo-field-value">@_width &times; @_height</span></label>
+                    <select id="mcp-size" disabled="@_running" @onchange="OnSizeChanged">
+                        @foreach (var size in Sizes)
+                        {
+                            <option value="@size" selected="@($"{_width}x{_height}" == size)">@size.Replace("x", " × ")</option>
+                        }
+                    </select>
+                </div>
 
-            <div class="field">
-                <label class="field-label" for="mcp-budget">Size budget <span class="field-value">@(_budgetKb > 0 ? $"{_budgetKb} KB" : "none")</span></label>
-                <input id="mcp-budget" type="range" min="0" max="500" step="10" value="@_budgetKb" disabled="@_running"
-                       @oninput="OnBudgetChanged" />
-            </div>
+                <div class="demo-field" role="group" aria-labelledby="mcp-formats-label">
+                    <span class="demo-field-label" id="mcp-formats-label">Formats</span>
+                    <div class="bb-segmented">
+                        @foreach (var format in Formats)
+                        {
+                            <button type="button" aria-pressed="@(_formats.Contains(format) ? "true" : "false")"
+                                    disabled="@_running" @onclick="() => ToggleFormat(format)">@format</button>
+                        }
+                    </div>
+                </div>
 
-            <button type="button" class="btn btn-accent btn-block" disabled="@(_running || IsHydrating)" @onclick="RunAsync">
-                @(_running ? "Running..." : "Run it on the engine")
-            </button>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="mcp-qualities">Qualities</label>
+                    <input id="mcp-qualities" type="text" value="@_qualities" disabled="@_running"
+                           @onchange="e => _qualities = e.Value?.ToString() ?? string.Empty" />
+                </div>
+
+                <div class="demo-field">
+                    <label class="demo-field-label" for="mcp-budget">Size budget <span class="demo-field-value">@(_budgetKb > 0 ? $"{_budgetKb} KB" : "none")</span></label>
+                    <input id="mcp-budget" type="range" min="0" max="500" step="10" value="@_budgetKb" disabled="@_running"
+                           @oninput="OnBudgetChanged" />
+                </div>
+
+                <button type="button" class="btn btn-primary demo-btn-block" disabled="@(_running || IsHydrating)" @onclick="RunAsync">
+                    @(_running ? "Running..." : "Run it on the engine")
+                </button>
+            </div>
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>What leaves with the file</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> What leaves with the file</h3>
     <p>
         <code>CompareBmageMetadataPolicies</code> writes a phone photo - GPS position, serial number,
         owner, camera, lens, ISO, date and copyright - through the real encoder under each
@@ -297,29 +301,31 @@
         A privacy decision then rests on the exported bytes, not on what a policy's name suggests.
     </p>
 
-    <div class="btn-row toolbar-row">
-        @foreach (var format in MetadataFormats)
-        {
-            <button type="button" class="chip" aria-pressed="@(_metadataFormat == format ? "true" : "false")"
-                    disabled="@_comparing" @onclick="() => _metadataFormat = format">@format</button>
-        }
-        <button type="button" class="btn btn-accent" disabled="@(_comparing || IsHydrating)" @onclick="CompareAsync">
+    <div class="bb-toolbar">
+        <div class="bb-segmented" role="group" aria-label="Format to export">
+            @foreach (var format in MetadataFormats)
+            {
+                <button type="button" aria-pressed="@(_metadataFormat == format ? "true" : "false")"
+                        disabled="@_comparing" @onclick="() => _metadataFormat = format">@format</button>
+            }
+        </div>
+        <button type="button" class="btn btn-primary" disabled="@(_comparing || IsHydrating)" @onclick="CompareAsync">
             @(_comparing ? "Encoding..." : "Export it three ways")
         </button>
     </div>
 
     @if (_compareError is not null)
     {
-        <div class="alert alert-error" role="alert">@_compareError</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_compareError</div>
     }
     else if (_comparison?.Error is { } comparisonError)
     {
-        <div class="alert alert-error" role="alert">@comparisonError</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@comparisonError</div>
     }
     else if (_comparison is { Policies: { Length: > 0 } policies })
     {
-        <div class="table-scroll" tabindex="0" role="region" aria-label="Metadata kept per policy">
-            <table class="data">
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="Metadata kept per policy">
+            <table class="bb-table">
                 <thead>
                     <tr>
                         <th scope="col">Field</th>
@@ -354,12 +360,12 @@
             </table>
         </div>
 
-        <p class="small mcp-reading">@_comparison.Reading</p>
+        <p class="demo-small mcp-reading">@_comparison.Reading</p>
     }
 </div>
 
-<div class="demo-section">
-    <h2>Review your code</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Review your code</h3>
     <p>
         <code>ReviewBmageCode</code> is the pass that closes the loop after an agent writes code. Its
         rules look for the mistakes that compile cleanly - a capability probe in
@@ -368,28 +374,28 @@
         below has several on purpose.
     </p>
 
-    <div class="field">
-        <label class="field-label" for="mcp-review">Code</label>
+    <div class="demo-field">
+        <label class="demo-field-label" for="mcp-review">Code</label>
         <textarea id="mcp-review" class="mcp-input mcp-code" rows="12" spellcheck="false"
                   value="@_review" @onchange="e => _review = e.Value?.ToString() ?? string.Empty"
                   disabled="@(_reviewing || IsHydrating)"></textarea>
     </div>
 
-    <div class="btn-row">
-        <button type="button" class="btn btn-accent" disabled="@(_reviewing || IsHydrating)" @onclick="ReviewAsync">
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-primary" disabled="@(_reviewing || IsHydrating)" @onclick="ReviewAsync">
             @(_reviewing ? "Reviewing..." : "Review it")
         </button>
     </div>
 
     @if (_reviewError is not null)
     {
-        <div class="alert alert-error mcp-results" role="alert">@_reviewError</div>
+        <div class="bb-note bb-note-danger demo-error mcp-results" role="alert">@_reviewError</div>
     }
     else if (_findings is not null)
     {
         @if (_findings.Findings is null or { Length: 0 })
         {
-            <p class="small mcp-results">Nothing to report - all @(_findings.RulesApplied?.Length ?? 0) rules passed.</p>
+            <p class="demo-small mcp-results">Nothing to report - all @(_findings.RulesApplied?.Length ?? 0) rules passed.</p>
         }
         else
         {
@@ -398,11 +404,11 @@
                 {
                     <li class="mcp-finding @finding.Severity?.ToLowerInvariant()">
                         <span class="mcp-finding-head">
-                            <span class="badge @SeverityBadge(finding.Severity)">@finding.Severity</span>
+                            <span class="bb-badge @SeverityBadge(finding.Severity)">@finding.Severity</span>
                             <code>@finding.Rule</code>
                             @if (finding.Line is { } line)
                             {
-                                <span class="small muted">line @line</span>
+                                <span class="demo-small bb-muted">line @line</span>
                             }
                         </span>
                         <span class="mcp-finding-message">@finding.Message</span>
@@ -414,8 +420,8 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>One search across everything</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> One search across everything</h3>
     <p>
         An agent rarely knows which corpus holds the answer. <code>SearchBmage</code> covers every
         guide section, every public member of the package, the setup guides, the recipes, the
@@ -427,7 +433,7 @@
         <input type="search" class="mcp-input" value="@_query" disabled="@(_searching || IsHydrating)"
                @onchange="e => _query = e.Value?.ToString() ?? string.Empty"
                placeholder="avatar under 100 KB" aria-label="Search Bmage" />
-        <button type="button" class="btn btn-accent" disabled="@(_searching || IsHydrating)" @onclick="SearchAsync">
+        <button type="button" class="btn btn-primary" disabled="@(_searching || IsHydrating)" @onclick="SearchAsync">
             <Icon Path="@Icons.Search" />
             @(_searching ? "Searching..." : "Search")
         </button>
@@ -435,7 +441,7 @@
 
     @if (_searchError is not null)
     {
-        <div class="alert alert-error" role="alert">@_searchError</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_searchError</div>
     }
     else if (_hits is { Length: > 0 })
     {
@@ -443,7 +449,7 @@
             @foreach (var hit in _hits)
             {
                 <li>
-                    <span class="badge badge-neutral">@hit.Kind</span>
+                    <span class="bb-badge demo-badge-off">@hit.Kind</span>
                     <span class="mcp-hit-title">@hit.Title</span>
                     <code>@hit.Tool</code>
                 </li>
@@ -452,16 +458,16 @@
     }
     else if (_hits is not null)
     {
-        <p class="small muted">Nothing matched that.</p>
+        <p class="demo-small bb-muted">Nothing matched that.</p>
     }
 </div>
 
-<div class="demo-section">
-    <h2>Tools</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
     @if (_catalog is null)
     {
-        <p class="working" role="status">Loading the catalog&hellip;</p>
+        <p class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Loading the catalog&hellip;</p>
     }
     else
     {
@@ -470,8 +476,8 @@
             this table cannot fall out of step with the server, and neither can this count.
         </p>
 
-        <div class="table-scroll" tabindex="0" role="region" aria-label="MCP tools">
-            <table class="ref mcp-tools">
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="MCP tools">
+            <table class="bb-table mcp-tools">
                 <thead>
                     <tr><th scope="col">Tool</th><th scope="col">Parameters</th><th scope="col">What it answers</th></tr>
                 </thead>
@@ -479,18 +485,20 @@
                     @foreach (var tool in _catalog.Tools)
                     {
                         <tr>
-                            <th scope="row"><code>@tool.Name</code></th>
-                            <td class="mcp-params">
+                            <th scope="row" class="bb-table-key"><code>@tool.Name</code></th>
+                            <td>
                                 @if (tool.Parameters is null or { Length: 0 })
                                 {
-                                    <span class="muted">none</span>
+                                    <span class="bb-muted">none</span>
                                 }
                                 else
                                 {
-                                    @foreach (var parameter in tool.Parameters)
-                                    {
-                                        <code>@parameter</code>
-                                    }
+                                    <div class="mcp-params">
+                                        @foreach (var parameter in tool.Parameters)
+                                        {
+                                            <code>@parameter</code>
+                                        }
+                                    </div>
                                 }
                             </td>
                             <td>@Shorten(tool.Description)</td>
@@ -502,8 +510,8 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Prompts</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Prompts</h3>
     <p>
         Prompts are the workflows: the order to call the tools in for a whole task. They exist because
         the failure mode of an agent holding a shelf of tools is not ignorance - it is calling them in
@@ -512,15 +520,15 @@
 
     @if (_catalog is not null)
     {
-        <div class="grid">
+        <div class="bb-grid">
             @foreach (var prompt in _catalog.Prompts)
             {
-                <div class="card">
-                    <p class="card-title"><code>@prompt.Name</code></p>
-                    <p>@prompt.Description</p>
+                <div class="bb-card">
+                    <p class="bb-card-title"><code>@prompt.Name</code></p>
+                    <p class="bb-card-desc">@prompt.Description</p>
                     @if (prompt.Parameters is { Length: > 0 })
                     {
-                        <p class="small muted">@string.Join(" · ", prompt.Parameters)</p>
+                        <p class="demo-small bb-muted">@string.Join(" · ", prompt.Parameters)</p>
                     }
                 </div>
             }
@@ -528,8 +536,8 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>Resources</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Resources</h3>
     <p>
         The same knowledge as URIs, for clients that attach documentation to a conversation up front
         or let a person browse and pin it. They read the same catalogs the tools do, so neither can go
@@ -541,20 +549,20 @@
         <ul class="mcp-resources">
             @foreach (var resource in _catalog.Resources)
             {
-                <li><code>@resource.Name</code> <span class="small muted">@resource.Description</span></li>
+                <li><code>@resource.Name</code> <span class="demo-small bb-muted">@resource.Description</span></li>
             }
         </ul>
     }
 </div>
 
-<div class="demo-section">
-    <h2>How it stays true</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> How it stays true</h3>
     <p>
         Documentation that is written down separately drifts, and an agent cannot tell a stale answer
         from a fresh one. So nothing here is written down twice:
     </p>
 
-    <ul>
+    <ul class="bb-detail-list">
         <li>
             <strong>The API reference is reflected</strong> out of the shipped assembly and
             paired with the XML documentation compiled into it, with each type's namespace and
@@ -985,14 +993,14 @@
 
     /// <summary>Kept or removed; a sensitive field that was kept is the one that matters, so it reads as a failure.</summary>
     private static MarkupString Badge(bool kept, bool sensitive) => kept
-        ? new(sensitive ? "<span class=\"badge badge-no\">kept</span>" : "<span class=\"badge badge-neutral\">kept</span>")
-        : new(sensitive ? "<span class=\"badge badge-yes\">removed</span>" : "<span class=\"badge badge-neutral\">removed</span>");
+        ? new(sensitive ? "<span class=\"bb-badge bb-badge-danger\">kept</span>" : "<span class=\"bb-badge demo-badge-off\">kept</span>")
+        : new(sensitive ? "<span class=\"bb-badge bb-badge-success\">removed</span>" : "<span class=\"bb-badge demo-badge-off\">removed</span>");
 
     private static string SeverityBadge(string? severity) => severity switch
     {
-        "Error" => "badge-no",
-        "Warning" => "badge-warning",
-        _ => "badge-neutral"
+        "Error" => "bb-badge-danger",
+        "Warning" => "bb-badge-warn",
+        _ => "demo-badge-off"
     };
 
     private static string Shorten(string description)
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Metadata.razor b/src/Utilities/Bmage/Demo/Client/Pages/Metadata.razor
index fc027008981..48122e1f27c 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Metadata.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Metadata.razor
@@ -8,18 +8,19 @@
    carrying a camera, a serial number and a location) under each of the three policies, decodes
    every result again, and reports what actually survived in the bytes. *@
 
-<PageTitle>Metadata and privacy - Bit.Bmage</PageTitle>
-
-<h1>Metadata and privacy</h1>
-
-<p class="page-intro">
-    A photograph from a phone usually carries the location it was taken, the device's serial number
-    and the exact time. Pass the file through untouched and you have published all of that. Bmage
-    <strong>removes metadata by default</strong>; you have to ask for it to be kept.
-</p>
+<PageTitle>Metadata and privacy · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Metadata and privacy</h1>
+    <p class="bb-subtitle">
+        A photograph from a phone usually carries the location it was taken, the device's serial number
+        and the exact time. Pass the file through untouched and you have published all of that. Bmage
+        <strong>removes metadata by default</strong>; you have to ask for it to be kept.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>See what survives</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> See what survives</h3>
     <p>
         Drop a photo straight off a phone - or use a generated one that carries a camera, a serial
         number and GPS coordinates. It is exported as a JPEG under each policy, and each export is
@@ -28,15 +29,15 @@
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
     <BmageDropZone Label="Drop a photo here to inspect its metadata" OnFilesSelected="OnFilesSelected" />
-    <div class="sample-row">
-        <button type="button" class="btn" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a photo with metadata</button>
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-secondary" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a photo with metadata</button>
         @if (_busy)
         {
-            <span class="working" role="status">Exporting under each policy&hellip;</span>
+            <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Exporting under each policy&hellip;</span>
         }
     </div>
 
@@ -44,20 +45,20 @@
     {
         @if (_report.Original.Location is { } location)
         {
-            <div class="alert alert-error metadata-warning" role="status">
+            <div class="bb-note bb-note-warn metadata-warning" role="status">
                 This photo records where it was taken (@location). The default policy removes it on export.
             </div>
         }
         else if (_report.Original.IsEmpty)
         {
-            <div class="alert alert-info metadata-warning" role="status">
+            <div class="bb-note metadata-warning" role="status">
                 @_report.Name carries no EXIF metadata, so there is nothing for a policy to remove - try
                 a photo straight from a phone camera, or the generated one.
             </div>
         }
 
-        <div class="table-scroll metadata-report" tabindex="0" role="region" aria-label="Metadata by policy">
-            <table class="data">
+        <div class="bb-scroll metadata-report" tabindex="0" role="region" aria-label="Metadata by policy">
+            <table class="bb-table">
                 <thead>
                     <tr>
                         <th scope="col">Field</th>
@@ -80,15 +81,15 @@
                                 <td>
                                     @if (original is null)
                                     {
-                                        <span class="muted">—</span>
+                                        <span class="bb-muted">—</span>
                                     }
                                     else if (value is null)
                                     {
-                                        <span class="badge badge-neutral">removed</span>
+                                        <span class="bb-badge demo-badge-off">removed</span>
                                     }
                                     else
                                     {
-                                        <span class="badge @(field.Sensitive ? "badge-no" : "badge-yes")">kept</span>
+                                        <span class="bb-badge @(field.Sensitive ? "bb-badge-danger" : "bb-badge-success")">kept</span>
                                     }
                                 </td>
                             }
@@ -97,18 +98,18 @@
                 </tbody>
             </table>
         </div>
-        <p class="small muted">
+        <p class="demo-small bb-muted">
             Read back from the exported bytes, not predicted. A red <em>kept</em> is a field that can
             identify a person or a place.
         </p>
     }
 </div>
 
-<div class="demo-section">
-    <h2>The three policies</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The three policies</h3>
     <CodeSnippet Code="@PolicySnippet" Language="C#" Expanded="true" />
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Metadata policies">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Metadata policies">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Policy</th><th scope="col">Keeps</th><th scope="col">Removes</th></tr>
             </thead>
@@ -128,8 +129,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Reading what is there</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Reading what is there</h3>
     <CodeSnippet Code="@ReadSnippet" Language="C#" Expanded="true" />
     <p>
         The <a href="/headless">Headless API</a> page shows the pattern for warning users: read the
@@ -137,8 +138,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Writing metadata</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Writing metadata</h3>
     <CodeSnippet Code="@WriteSnippet" Language="C#" Expanded="true" />
     <p>
         <code>ExifValue.FromString</code> writes UTF-8. The EXIF specification calls the type ASCII, but
@@ -147,8 +148,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Orientation</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Orientation</h3>
     <p>
         Phones do not rotate pixels when you turn the device; they record a rotation flag. An image that
         looks upright in a photo viewer appears sideways on a canvas unless that flag is applied. Bmage
@@ -164,10 +165,10 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>What each format can carry</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Metadata support by format">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> What each format can carry</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Metadata support by format">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Format</th><th scope="col">EXIF</th><th scope="col">ICC</th><th scope="col">XMP</th></tr>
             </thead>
@@ -189,9 +190,9 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>A checklist for user uploads</h2>
-    <ol>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A checklist for user uploads</h3>
+    <ol class="bb-detail-list">
         <li>Leave the default <code>MetadataPolicy.Remove</code> unless you have a reason.</li>
         <li>If you keep metadata for a gallery, use <code>StripSensitive</code>, not <code>Preserve</code>.</li>
         <li>Tell users what is in their file before they publish it.</li>
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/NotFound.razor b/src/Utilities/Bmage/Demo/Client/Pages/NotFound.razor
new file mode 100644
index 00000000000..a3337113e75
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Client/Pages/NotFound.razor
@@ -0,0 +1,18 @@
+@page "/not-found"
+@layout MainLayout
+
+@* Target of app.UseStatusCodePagesWithReExecute("/not-found") in the host's Program.cs (a deep
+   link to an unknown URL matches no endpoint, so the server re-executes it here), and also the
+   router's NotFoundPage for routes missed during client-side navigation. *@
+
+<PageTitle>Not found · Bmage</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/NotFoundPage.razor b/src/Utilities/Bmage/Demo/Client/Pages/NotFoundPage.razor
deleted file mode 100644
index 874b281e141..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Pages/NotFoundPage.razor
+++ /dev/null
@@ -1,9 +0,0 @@
-@page "/not-found"
-
-@* Target of app.UseStatusCodePagesWithReExecute("/not-found") in the host's Program.cs (a deep
-   link to an unknown URL matches no endpoint, so the server re-executes it here), and also the
-   router's NotFoundPage for routes missed during client-side navigation. *@
-
-<PageTitle>Not found - Bit.Bmage</PageTitle>
-
-<NotFoundContent />
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Optimize.razor b/src/Utilities/Bmage/Demo/Client/Pages/Optimize.razor
index 01f63408d40..fd80046ed1d 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Optimize.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Optimize.razor
@@ -9,159 +9,163 @@
    large drop never holds every original in memory at once, and a file that fails is reported on
    its own row rather than ending the run. *@
 
-<PageTitle>Upload optimisation - Bit.Bmage</PageTitle>
-
-<h1>Upload optimisation</h1>
-
-<p class="page-intro">
-    The upload pipeline most applications actually need: cap the dimensions, re-encode to a modern
-    format, strip the metadata, and see exactly how many bytes that saved. Everything happens on the
-    user's device, so <strong>your servers never receive the 8 megapixel original</strong>.
-</p>
+<PageTitle>Upload optimisation · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Upload optimisation</h1>
+    <p class="bb-subtitle">
+        The upload pipeline most applications actually need: cap the dimensions, re-encode to a modern
+        format, strip the metadata, and see exactly how many bytes that saved. Everything happens on the
+        user's device, so <strong>your servers never receive the 8 megapixel original</strong>.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Try it</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
-    <div class="split">
-        <div>
-            <BmageDropZone Label="Drop images here, or click to choose them" Multiple="true" OnFilesSelected="OnFilesSelected" />
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="demo-split">
+            <div>
+                <BmageDropZone Label="Drop images here, or click to choose them" Multiple="true" OnFilesSelected="OnFilesSelected" />
 
-            @if (_running)
-            {
-                <div class="sample-row optimize-progress">
-                    <div class="progress" role="progressbar" aria-label="Optimising" aria-valuenow="@((int)(_progress * 100))" aria-valuemin="0" aria-valuemax="100">
-                        <div class="progress-bar" style="width:@((_progress * 100).ToString("0"))%"></div>
+                @if (_running)
+                {
+                    <div class="bb-toolbar optimize-progress">
+                        <div class="demo-progress" role="progressbar" aria-label="Optimising" aria-valuenow="@((int)(_progress * 100))" aria-valuemin="0" aria-valuemax="100">
+                            <div class="demo-progress-bar" style="width:@((_progress * 100).ToString("0"))%"></div>
+                        </div>
+                        <span class="demo-small bb-muted" role="status">Processing @_completed of @_total&hellip;</span>
+                        <button type="button" class="btn btn-secondary demo-btn-sm" @onclick="Cancel">Stop</button>
                     </div>
-                    <span class="small muted" role="status">Processing @_completed of @_total&hellip;</span>
-                    <button type="button" class="btn btn-small" @onclick="Cancel">Stop</button>
-                </div>
-            }
+                }
 
-            @if (_results.Count > 0)
-            {
-                <div class="stat-grid results-stats">
-                    <div class="stat">
-                        <span class="stat-label">Images</span>
-                        <span class="stat-value">@_results.Count</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Before</span>
-                        <span class="stat-value">@Display.Bytes(TotalBefore)</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">After</span>
-                        <span class="stat-value">@Display.Bytes(TotalAfter)</span>
-                    </div>
-                    <div class="stat">
-                        <span class="stat-label">Change</span>
-                        <span class="stat-value @(Display.IsSmaller(TotalBefore, TotalAfter) ? "good" : "bad")">@Display.Change(TotalBefore, TotalAfter)</span>
+                @if (_results.Count > 0)
+                {
+                    <div class="bb-stats results-stats">
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Images</span>
+                            <span class="bb-stat-value">@_results.Count</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Before</span>
+                            <span class="bb-stat-value">@Display.Bytes(TotalBefore)</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">After</span>
+                            <span class="bb-stat-value">@Display.Bytes(TotalAfter)</span>
+                        </div>
+                        <div class="bb-stat">
+                            <span class="bb-stat-label">Change</span>
+                            <span class="bb-stat-value @(Display.IsSmaller(TotalBefore, TotalAfter) ? "demo-good" : "demo-bad")">@Display.Change(TotalBefore, TotalAfter)</span>
+                        </div>
                     </div>
-                </div>
-            }
+                }
 
-            @if (_results.Count > 0 || _failures.Count > 0)
-            {
-                <div class="btn-row results-actions">
-                    <button type="button" class="btn btn-accent" disabled="@(_running || _results.Count == 0)" @onclick="DownloadAll">
-                        <Icon Path="@Icons.Download" />
-                        Download all
-                    </button>
-                    <button type="button" class="btn" disabled="@_running" @onclick="Clear">Clear</button>
-                </div>
+                @if (_results.Count > 0 || _failures.Count > 0)
+                {
+                    <div class="bb-toolbar results-actions">
+                        <button type="button" class="btn btn-primary" disabled="@(_running || _results.Count == 0)" @onclick="DownloadAll">
+                            <Icon Path="@Icons.Download" />
+                            Download all
+                        </button>
+                        <button type="button" class="btn btn-secondary" disabled="@_running" @onclick="Clear">Clear</button>
+                    </div>
 
-                <div class="table-scroll" tabindex="0" role="region" aria-label="Optimised files">
-                    <table class="data">
-                        <thead>
-                            <tr>
-                                <th scope="col">File</th>
-                                <th scope="col">Size</th>
-                                <th scope="col" class="num">Before</th>
-                                <th scope="col" class="num">After</th>
-                                <th scope="col" class="num">Change</th>
-                                <th scope="col"><span class="visually-hidden">Actions</span></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @foreach (var result in _results)
-                            {
-                                <tr>
-                                    <td>@result.Name</td>
-                                    <td class="mono">@result.Dimensions</td>
-                                    <td class="num">@Display.Bytes(result.OriginalBytes)</td>
-                                    <td class="num">@Display.Bytes(result.NewBytes)</td>
-                                    <td class="num @(Display.IsSmaller(result.OriginalBytes, result.NewBytes) ? "text-good" : "text-bad")">@Display.Change(result.OriginalBytes, result.NewBytes)</td>
-                                    <td><button type="button" class="btn btn-small" @onclick="() => Download(result)" aria-label="@($"Save {result.Name}")">Save</button></td>
-                                </tr>
-                            }
-                            @foreach (var failure in _failures)
-                            {
+                    <div class="bb-scroll" tabindex="0" role="region" aria-label="Optimised files">
+                        <table class="bb-table optimize-results">
+                            <thead>
                                 <tr>
-                                    <td>@failure.Name</td>
-                                    <td colspan="5" class="text-bad">@failure.Message</td>
+                                    <th scope="col">File</th>
+                                    <th scope="col">Size</th>
+                                    <th scope="col" class="demo-num">Before</th>
+                                    <th scope="col" class="demo-num">After</th>
+                                    <th scope="col" class="demo-num">Change</th>
+                                    <th scope="col"><span class="visually-hidden">Actions</span></th>
                                 </tr>
-                            }
-                        </tbody>
-                    </table>
-                </div>
-            }
-        </div>
-
-        <div class="card">
-            <p class="card-title">Pipeline</p>
-
-            <div class="field">
-                <label class="field-label" for="maxdim">Longest edge <span class="field-value">@_maxDimension px</span></label>
-                <input id="maxdim" type="range" min="320" max="4096" step="80" value="@_maxDimension" @oninput="e => Set(ref _maxDimension, e)" />
+                            </thead>
+                            <tbody>
+                                @foreach (var result in _results)
+                                {
+                                    <tr>
+                                        <td>@result.Name</td>
+                                        <td class="bb-mono">@result.Dimensions</td>
+                                        <td class="demo-num">@Display.Bytes(result.OriginalBytes)</td>
+                                        <td class="demo-num">@Display.Bytes(result.NewBytes)</td>
+                                        <td class="demo-num @(Display.IsSmaller(result.OriginalBytes, result.NewBytes) ? "demo-good" : "demo-bad")">@Display.Change(result.OriginalBytes, result.NewBytes)</td>
+                                        <td><button type="button" class="btn btn-secondary demo-btn-sm" @onclick="() => Download(result)" aria-label="@($"Save {result.Name}")">Save</button></td>
+                                    </tr>
+                                }
+                                @foreach (var failure in _failures)
+                                {
+                                    <tr>
+                                        <td>@failure.Name</td>
+                                        <td colspan="5" class="demo-bad">@failure.Message</td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                }
             </div>
 
-            <div class="field">
-                <label class="field-label" for="format">Format</label>
-                <select id="format" class="bmg-select" disabled="@(_capabilities is null)" @onchange="OnFormatChanged">
-                    @foreach (var format in AvailableFormats)
-                    {
-                        <option value="@format" selected="@(_format == format)">@format.ToString().ToUpperInvariant()</option>
-                    }
-                </select>
-            </div>
+            <div class="demo-panel">
+                <p class="bb-overline demo-label">Pipeline</p>
 
-            @if (_format.IsLossy())
-            {
-                <div class="field">
-                    <label class="field-label" for="quality">Quality <span class="field-value">@_quality.ToString("0.00")</span></label>
-                    <input id="quality" type="range" min="0.3" max="1" step="0.01" value="@_quality.ToString(System.Globalization.CultureInfo.InvariantCulture)" @oninput="OnQualityChanged" />
+                <div class="demo-field">
+                    <label class="demo-field-label" for="maxdim">Longest edge <span class="demo-field-value">@_maxDimension px</span></label>
+                    <input id="maxdim" type="range" min="320" max="4096" step="80" value="@_maxDimension" @oninput="e => Set(ref _maxDimension, e)" />
                 </div>
-            }
 
-            <div class="field">
-                <label class="field-label" for="metadata">Metadata</label>
-                <select id="metadata" class="bmg-select" @onchange="OnMetadataChanged">
-                    <option value="Remove" selected="@(_metadata == MetadataPolicy.Remove)">Remove everything</option>
-                    <option value="StripSensitive" selected="@(_metadata == MetadataPolicy.StripSensitive)">Keep camera, drop location</option>
-                    <option value="Preserve" selected="@(_metadata == MetadataPolicy.Preserve)">Keep everything</option>
-                </select>
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="format">Format</label>
+                    <select id="format" disabled="@(_capabilities is null)" @onchange="OnFormatChanged">
+                        @foreach (var format in AvailableFormats)
+                        {
+                            <option value="@format" selected="@(_format == format)">@format.ToString().ToUpperInvariant()</option>
+                        }
+                    </select>
+                </div>
 
-            <div class="field field-inline">
-                <input id="sharpen" type="checkbox" checked="@_sharpen" @onchange="e => _sharpen = (bool)(e.Value ?? false)" />
-                <label class="field-label" for="sharpen">Sharpen after downscaling</label>
-            </div>
+                @if (_format.IsLossy())
+                {
+                    <div class="demo-field">
+                        <label class="demo-field-label" for="quality">Quality <span class="demo-field-value">@_quality.ToString("0.00")</span></label>
+                        <input id="quality" type="range" min="0.3" max="1" step="0.01" value="@_quality.ToString(System.Globalization.CultureInfo.InvariantCulture)" @oninput="OnQualityChanged" />
+                    </div>
+                }
 
-            <div class="field">
-                <label class="field-label" for="concurrency">Concurrency <span class="field-value">@_concurrency</span></label>
-                <input id="concurrency" type="range" min="1" max="8" step="1" value="@_concurrency" @oninput="e => Set(ref _concurrency, e)" aria-describedby="concurrency-hint" />
-                <span class="field-hint" id="concurrency-hint">The batch API's MaxConcurrency, as in the snippet below; this page itself decodes one file at a time to keep memory flat. Higher is faster but holds more decoded images at once - two is a safe default on phones. <a href="/batch">Batch processing</a> runs it for real.</span>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="metadata">Metadata</label>
+                    <select id="metadata" @onchange="OnMetadataChanged">
+                        <option value="Remove" selected="@(_metadata == MetadataPolicy.Remove)">Remove everything</option>
+                        <option value="StripSensitive" selected="@(_metadata == MetadataPolicy.StripSensitive)">Keep camera, drop location</option>
+                        <option value="Preserve" selected="@(_metadata == MetadataPolicy.Preserve)">Keep everything</option>
+                    </select>
+                </div>
+
+                <div class="demo-field demo-field-inline">
+                    <input id="sharpen" type="checkbox" checked="@_sharpen" @onchange="e => _sharpen = (bool)(e.Value ?? false)" />
+                    <label class="demo-field-label" for="sharpen">Sharpen after downscaling</label>
+                </div>
+
+                <div class="demo-field">
+                    <label class="demo-field-label" for="concurrency">Concurrency <span class="demo-field-value">@_concurrency</span></label>
+                    <input id="concurrency" type="range" min="1" max="8" step="1" value="@_concurrency" @oninput="e => Set(ref _concurrency, e)" aria-describedby="concurrency-hint" />
+                    <span class="bb-field-hint" id="concurrency-hint">The batch API's MaxConcurrency, as in the snippet below; this page itself decodes one file at a time to keep memory flat. Higher is faster but holds more decoded images at once - two is a safe default on phones. <a href="/batch">Batch processing</a> runs it for real.</span>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>The code</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> The code</h3>
     <p>
         One pipeline, built once and reused for every file: nothing runs until it is executed, so it
         is safe to keep in a field. <code>MaxSize</code> only ever shrinks - a small image passes
@@ -171,9 +175,9 @@
     <CodeSnippet Code="@Snippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Choosing the numbers</h2>
-    <ul>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Choosing the numbers</h3>
+    <ul class="bb-detail-list">
         <li><strong>1920 on the long edge</strong> covers a full-width hero on most screens; product thumbnails and avatars want far less.</li>
         <li><strong>WebP at 0.8</strong> is typically 25 to 35% smaller than JPEG at similar quality. Where this browser cannot write it, the format list above simply does not offer it - the list is the capability probe's answer.</li>
         <li><strong>Re-encoding can grow a file.</strong> A small or already heavily compressed upload may come out larger; the table says so in red rather than claiming a saving. A real pipeline would keep the original in that case.</li>
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Performance.razor b/src/Utilities/Bmage/Demo/Client/Pages/Performance.razor
index c8353f30436..1c869936762 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Performance.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Performance.razor
@@ -6,44 +6,45 @@
    reader's browser, so whether the site they are on was compiled ahead of time shows up in their
    own measurements rather than in a claim. *@
 
-<PageTitle>Performance - Bit.Bmage</PageTitle>
+<PageTitle>Performance · Bmage</PageTitle>
 
-<h1>Performance</h1>
-
-<p class="page-intro">
-    Every number here was measured with BenchmarkDotNet, not estimated - and in the browser, they only
-    hold with <strong>ahead-of-time compilation</strong>. Read the first section before anything else.
-</p>
+<div class="bb-intro">
+    <h1>Performance</h1>
+    <p class="bb-subtitle">
+        Every number here was measured with BenchmarkDotNet, not estimated - and in the browser, they only
+        hold with <strong>ahead-of-time compilation</strong>. Read the first section before anything else.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Measure this browser</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Measure this browser</h3>
     <p>
         The operations from the table below, on a generated 1920 &times; 1080 image, best of three
         after a warm-up. Hundreds of milliseconds per row means the interpreter; tens means AOT.
         This site is published with AOT; under <code>dotnet run</code> it is interpreted, and the
         run takes minutes rather than seconds - which is the point.
     </p>
-    <div class="sample-row">
-        <button type="button" class="btn btn-accent" disabled="@(_busy || IsHydrating)" @onclick="RunAsync">
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-primary" disabled="@(_busy || IsHydrating)" @onclick="RunAsync">
             <Icon Path="@Icons.Gauge" />
             Run the benchmark
         </button>
         @if (_busy)
         {
-            <span class="working" role="status">Measuring @_current&hellip;</span>
+            <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Measuring @_current&hellip;</span>
         }
     </div>
 
     @if (_results.Count > 0)
     {
-        <div class="table-scroll perf-results" tabindex="0" role="region" aria-label="Benchmark results for this browser">
-            <table class="data">
+        <div class="bb-scroll perf-results" tabindex="0" role="region" aria-label="Benchmark results for this browser">
+            <table class="bb-table">
                 <thead>
                     <tr>
                         <th scope="col">Operation</th>
-                        <th scope="col" class="num">This browser</th>
-                        <th scope="col" class="num">Interpreter</th>
-                        <th scope="col" class="num">AOT</th>
+                        <th scope="col" class="demo-num">This browser</th>
+                        <th scope="col" class="demo-num">Interpreter</th>
+                        <th scope="col" class="demo-num">AOT</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -51,9 +52,9 @@
                     {
                         <tr>
                             <th scope="row">@result.Name</th>
-                            <td class="num"><strong>@result.Elapsed.TotalMilliseconds.ToString("0") ms</strong></td>
-                            <td class="num">@result.Interpreter ms</td>
-                            <td class="num">@result.Aot ms</td>
+                            <td class="demo-num"><strong>@result.Elapsed.TotalMilliseconds.ToString("0") ms</strong></td>
+                            <td class="demo-num">@result.Interpreter ms</td>
+                            <td class="demo-num">@result.Aot ms</td>
                         </tr>
                     }
                 </tbody>
@@ -62,23 +63,23 @@
     }
 </div>
 
-<div class="demo-section">
-    <h2>WebAssembly: compile ahead of time</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> WebAssembly: compile ahead of time</h3>
     <p>
         By default Blazor WebAssembly runs .NET code on an IL interpreter. Tight pixel loops are its
         worst case: every <code>Vector4</code> operation RyuJIT turns into one SIMD instruction becomes
         a separate interpreted step. Measured on a 1920 &times; 1080 image in Chrome, best of three after
         a warm-up:
     </p>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Interpreter against AOT">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Interpreter against AOT">
+        <table class="bb-table">
             <thead>
-                <tr><th scope="col">Operation</th><th scope="col" class="num">Interpreter</th><th scope="col" class="num">AOT</th><th scope="col" class="num">Desktop .NET</th></tr>
+                <tr><th scope="col">Operation</th><th scope="col" class="demo-num">Interpreter</th><th scope="col" class="demo-num">AOT</th><th scope="col" class="demo-num">Desktop .NET</th></tr>
             </thead>
             <tbody>
                 @foreach (var row in Reference)
                 {
-                    <tr><th scope="row">@row.Name</th><td class="num">@row.Interpreter ms</td><td class="num"><strong>@row.Aot ms</strong></td><td class="num">@row.Desktop ms</td></tr>
+                    <tr><th scope="row">@row.Name</th><td class="demo-num">@row.Interpreter ms</td><td class="demo-num"><strong>@row.Aot ms</strong></td><td class="demo-num">@row.Desktop ms</td></tr>
                 }
             </tbody>
         </table>
@@ -91,20 +92,20 @@
     <CodeSnippet Code="@AotSnippet" Language="XML" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Resizing</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Resizing</h3>
     <p>Downscaling to 1280px on the long edge, and generating a 200px thumbnail (desktop .NET 10, AVX2):</p>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Resize timings">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Resize timings">
+        <table class="bb-table">
             <thead>
-                <tr><th scope="col">Operation</th><th scope="col" class="num">1920&times;1080</th><th scope="col" class="num">3840&times;2160</th><th scope="col" class="num">6000&times;4000</th></tr>
+                <tr><th scope="col">Operation</th><th scope="col" class="demo-num">1920&times;1080</th><th scope="col" class="demo-num">3840&times;2160</th><th scope="col" class="demo-num">6000&times;4000</th></tr>
             </thead>
             <tbody>
-                <tr><th scope="row">Box</th><td class="num">15.0 ms</td><td class="num">35.4 ms</td><td class="num">127 ms</td></tr>
-                <tr><th scope="row">Bilinear</th><td class="num">17.4 ms</td><td class="num">40.2 ms</td><td class="num">114 ms</td></tr>
-                <tr><th scope="row">Bicubic</th><td class="num">21.9 ms</td><td class="num">49.0 ms</td><td class="num">124 ms</td></tr>
-                <tr><th scope="row">Lanczos3</th><td class="num">26.8 ms</td><td class="num">67.7 ms</td><td class="num">134 ms</td></tr>
-                <tr><th scope="row">Thumbnail to 200px (Auto)</th><td class="num">6.6 ms</td><td class="num">19.2 ms</td><td class="num">52.4 ms</td></tr>
+                <tr><th scope="row">Box</th><td class="demo-num">15.0 ms</td><td class="demo-num">35.4 ms</td><td class="demo-num">127 ms</td></tr>
+                <tr><th scope="row">Bilinear</th><td class="demo-num">17.4 ms</td><td class="demo-num">40.2 ms</td><td class="demo-num">114 ms</td></tr>
+                <tr><th scope="row">Bicubic</th><td class="demo-num">21.9 ms</td><td class="demo-num">49.0 ms</td><td class="demo-num">124 ms</td></tr>
+                <tr><th scope="row">Lanczos3</th><td class="demo-num">26.8 ms</td><td class="demo-num">67.7 ms</td><td class="demo-num">134 ms</td></tr>
+                <tr><th scope="row">Thumbnail to 200px (Auto)</th><td class="demo-num">6.6 ms</td><td class="demo-num">19.2 ms</td><td class="demo-num">52.4 ms</td></tr>
             </tbody>
         </table>
     </div>
@@ -117,26 +118,26 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Operations and pipelines</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Operation timings">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Operations and pipelines</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Operation timings">
+        <table class="bb-table">
             <thead>
-                <tr><th scope="col">Operation</th><th scope="col" class="num">1920&times;1080</th><th scope="col" class="num">3840&times;2160</th></tr>
+                <tr><th scope="col">Operation</th><th scope="col" class="demo-num">1920&times;1080</th><th scope="col" class="demo-num">3840&times;2160</th></tr>
             </thead>
             <tbody>
-                <tr><th scope="row">Crop</th><td class="num">0.04 ms</td><td class="num">0.41 ms</td></tr>
-                <tr><th scope="row">Rotate 90 (lossless)</th><td class="num">2.0 ms</td><td class="num">20.2 ms</td></tr>
-                <tr><th scope="row">Brightness (one pass)</th><td class="num">18.0 ms</td><td class="num">70.7 ms</td></tr>
-                <tr><th scope="row">Four adjustments, fused</th><td class="num">47.4 ms</td><td class="num">188.9 ms</td></tr>
-                <tr><th scope="row">Four adjustments, unfused</th><td class="num">76.7 ms</td><td class="num">292.3 ms</td></tr>
-                <tr><th scope="row">Gaussian blur, radius 8</th><td class="num">55.7 ms</td><td class="num">226.1 ms</td></tr>
-                <tr><th scope="row">Unsharp mask</th><td class="num">103.8 ms</td><td class="num">331.0 ms</td></tr>
-                <tr><th scope="row">Rotate 37&deg; (resampled)</th><td class="num">222.0 ms</td><td class="num">888.6 ms</td></tr>
+                <tr><th scope="row">Crop</th><td class="demo-num">0.04 ms</td><td class="demo-num">0.41 ms</td></tr>
+                <tr><th scope="row">Rotate 90 (lossless)</th><td class="demo-num">2.0 ms</td><td class="demo-num">20.2 ms</td></tr>
+                <tr><th scope="row">Brightness (one pass)</th><td class="demo-num">18.0 ms</td><td class="demo-num">70.7 ms</td></tr>
+                <tr><th scope="row">Four adjustments, fused</th><td class="demo-num">47.4 ms</td><td class="demo-num">188.9 ms</td></tr>
+                <tr><th scope="row">Four adjustments, unfused</th><td class="demo-num">76.7 ms</td><td class="demo-num">292.3 ms</td></tr>
+                <tr><th scope="row">Gaussian blur, radius 8</th><td class="demo-num">55.7 ms</td><td class="demo-num">226.1 ms</td></tr>
+                <tr><th scope="row">Unsharp mask</th><td class="demo-num">103.8 ms</td><td class="demo-num">331.0 ms</td></tr>
+                <tr><th scope="row">Rotate 37&deg; (resampled)</th><td class="demo-num">222.0 ms</td><td class="demo-num">888.6 ms</td></tr>
             </tbody>
         </table>
     </div>
-    <ul>
+    <ul class="bb-detail-list">
         <li><strong>Fusing adjustments is worth 1.55&times;.</strong> Four adjustments in one pass beat four passes, because the cost is reading and writing pixels rather than the arithmetic.</li>
         <li><strong>A right angle is 100&times; cheaper than an arbitrary one</strong>, because it moves pixels rather than resampling them. The optimiser routes multiples of 90&deg; to the lossless path automatically.</li>
         <li><strong>Blur is independent of radius</strong>: three box passes approximating a gaussian, so radius 40 costs the same as radius 4.</li>
@@ -144,19 +145,19 @@
     </ul>
 </div>
 
-<div class="demo-section">
-    <h2>Codecs</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Codec timings">
-        <table class="ref">
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Codecs</h3>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Codec timings">
+        <table class="bb-table">
             <thead>
-                <tr><th scope="col">Operation</th><th scope="col" class="num">1024&times;768</th><th scope="col" class="num">3840&times;2160</th><th scope="col" class="num">Allocated (4K)</th></tr>
+                <tr><th scope="col">Operation</th><th scope="col" class="demo-num">1024&times;768</th><th scope="col" class="demo-num">3840&times;2160</th><th scope="col" class="demo-num">Allocated (4K)</th></tr>
             </thead>
             <tbody>
-                <tr><th scope="row">PNG decode</th><td class="num">10.5 ms</td><td class="num">104 ms</td><td class="num">37 MB</td></tr>
-                <tr><th scope="row">JPEG decode</th><td class="num">10.7 ms</td><td class="num">117 ms</td><td class="num">14 MB</td></tr>
-                <tr><th scope="row">JPEG encode, quality 85</th><td class="num">17.0 ms</td><td class="num">175 ms</td><td class="num">6.7 MB</td></tr>
-                <tr><th scope="row">PNG encode, level 1</th><td class="num">25.1 ms</td><td class="num">252 ms</td><td class="num">98 MB</td></tr>
-                <tr><th scope="row">PNG encode, level 6</th><td class="num">82.1 ms</td><td class="num">848 ms</td><td class="num">46 MB</td></tr>
+                <tr><th scope="row">PNG decode</th><td class="demo-num">10.5 ms</td><td class="demo-num">104 ms</td><td class="demo-num">37 MB</td></tr>
+                <tr><th scope="row">JPEG decode</th><td class="demo-num">10.7 ms</td><td class="demo-num">117 ms</td><td class="demo-num">14 MB</td></tr>
+                <tr><th scope="row">JPEG encode, quality 85</th><td class="demo-num">17.0 ms</td><td class="demo-num">175 ms</td><td class="demo-num">6.7 MB</td></tr>
+                <tr><th scope="row">PNG encode, level 1</th><td class="demo-num">25.1 ms</td><td class="demo-num">252 ms</td><td class="demo-num">98 MB</td></tr>
+                <tr><th scope="row">PNG encode, level 6</th><td class="demo-num">82.1 ms</td><td class="demo-num">848 ms</td><td class="demo-num">46 MB</td></tr>
             </tbody>
         </table>
     </div>
@@ -167,8 +168,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Interactive editing</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Interactive editing</h3>
     <p>
         The editor works on a proxy no larger than 2048px on its longest edge and replays the edit at
         full resolution on export: for a 24 megapixel photo, a 25&times; reduction in the pixels each
@@ -178,9 +179,9 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Guidance</h2>
-    <ul>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Guidance</h3>
+    <ul class="bb-detail-list">
         <li><strong>Cap dimensions before anything else.</strong> Every later operation costs proportionally less.</li>
         <li><strong>Group adjustments together.</strong> Consecutive per-pixel operations fuse into one pass; a geometric operation between them prevents that.</li>
         <li><strong>Prefer right angles.</strong> <code>Rotate(90)</code> takes the lossless path; <code>Rotate(90.5)</code> resamples the whole image.</li>
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Pipelines.razor b/src/Utilities/Bmage/Demo/Client/Pages/Pipelines.razor
index f73fe9b032b..2a48f2d3caf 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Pipelines.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Pipelines.razor
@@ -6,18 +6,19 @@
    size it computes without touching a pixel, the pipeline the optimiser actually runs, and the
    result. Everything below is the reference for the operations those choices stand for. *@
 
-<PageTitle>Pipelines - Bit.Bmage</PageTitle>
-
-<h1>Pipelines</h1>
-
-<p class="page-intro">
-    An <code>ImagePipeline</code> is an <strong>immutable, ordered list of operations</strong>.
-    Building one does no work: it is a description of an edit that you can inspect, store, reuse
-    across images and threads, and execute when you are ready.
-</p>
+<PageTitle>Pipelines · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Pipelines</h1>
+    <p class="bb-subtitle">
+        An <code>ImagePipeline</code> is an <strong>immutable, ordered list of operations</strong>.
+        Building one does no work: it is a description of an edit that you can inspect, store, reuse
+        across images and threads, and execute when you are ready.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Build one</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Build one</h3>
     <p>
         Every choice below is a builder call. Each returns a new pipeline and leaves the old one as it
         was - which is what makes a pipeline safe to keep in a static field and reuse for every upload.
@@ -25,95 +26,98 @@
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
-    <div class="split">
-        <div>
-            @if (_preview is null)
-            {
-                <div class="sample-row">
-                    <button type="button" class="btn btn-accent" disabled="@(_busy || IsHydrating)" @onclick="StartAsync">
-                        <Icon Path="@Icons.Play" />
-                        Run on a sample image
-                    </button>
-                    <span class="small muted">A generated 1200 &times; 800 scene; every change re-runs the pipeline.</span>
-                </div>
-            }
-            else
-            {
-                <ImagePreview Image="_preview" Version="_previewVersion" Alt="The sample scene, processed by the pipeline" Class="pipeline-preview" />
-            }
-
-            <p class="card-title playground-label">
-                Pipeline
-                @if (_busy)
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="demo-split">
+            <div>
+                @if (_preview is null)
                 {
-                    <span class="working" role="status">Running&hellip;</span>
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-primary" disabled="@(_busy || IsHydrating)" @onclick="StartAsync">
+                            <Icon Path="@Icons.Play" />
+                            Run on a sample image
+                        </button>
+                        <span class="demo-small bb-muted">A generated 1200 &times; 800 scene; every change re-runs the pipeline.</span>
+                    </div>
+                }
+                else
+                {
+                    <ImagePreview Image="_preview" Version="_previewVersion" Alt="The sample scene, processed by the pipeline" Class="pipeline-preview" />
                 }
-            </p>
-            <pre class="code">@PipelineText</pre>
-
-            <div class="stat-grid playground-stats">
-                <div class="stat">
-                    <span class="stat-label">Output size</span>
-                    <span class="stat-value">@OutputSizeText</span>
-                </div>
-                <div class="stat">
-                    <span class="stat-label">Steps run</span>
-                    <span class="stat-value">@Optimized.Count of @Pipeline.Count</span>
-                </div>
-                <div class="stat">
-                    <span class="stat-label">Took</span>
-                    <span class="stat-value">@(_elapsed is { } e ? $"{e.TotalMilliseconds:0} ms" : "—")</span>
-                </div>
-            </div>
-
-            <p class="card-title playground-label">After the optimiser</p>
-            <pre class="code">@OptimizedText</pre>
-        </div>
 
-        <div class="card">
-            <p class="card-title">Geometry</p>
-            <div class="field" role="group" aria-label="Geometry">
-                <div class="chip-row">
-                    @foreach (var option in GeometryOptions)
+                <p class="bb-overline demo-label playground-label">
+                    Pipeline
+                    @if (_busy)
                     {
-                        <button type="button" class="chip" aria-pressed="@(_geometry == option ? "true" : "false")" @onclick="() => SetGeometry(option)">@option</button>
+                        <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Running&hellip;</span>
                     }
+                </p>
+                <pre class="demo-readout">@PipelineText</pre>
+
+                <div class="bb-stats demo-stats-compact playground-stats">
+                    <div class="bb-stat">
+                        <span class="bb-stat-label">Output size</span>
+                        <span class="bb-stat-value">@OutputSizeText</span>
+                    </div>
+                    <div class="bb-stat">
+                        <span class="bb-stat-label">Steps run</span>
+                        <span class="bb-stat-value">@Optimized.Count of @Pipeline.Count</span>
+                    </div>
+                    <div class="bb-stat">
+                        <span class="bb-stat-label">Took</span>
+                        <span class="bb-stat-value">@(_elapsed is { } e ? $"{e.TotalMilliseconds:0} ms" : "—")</span>
+                    </div>
                 </div>
+
+                <p class="bb-overline demo-label playground-label">After the optimiser</p>
+                <pre class="demo-readout">@OptimizedText</pre>
             </div>
 
-            <hr class="divider" />
-            <p class="card-title">Adjustments and filters</p>
-            @foreach (var step in Steps)
-            {
-                <div class="field field-inline">
-                    <input id="@($"step-{step.Id}")" type="checkbox" checked="@_enabled.Contains(step.Id)" @onchange="e => Toggle(step.Id, e)" />
-                    <label class="field-label" for="@($"step-{step.Id}")">@step.Label</label>
+            <div class="demo-panel">
+                <p class="bb-overline demo-label">Geometry</p>
+                <div class="demo-field" role="group" aria-label="Geometry">
+                    <div class="bb-segmented">
+                        @foreach (var option in GeometryOptions)
+                        {
+                            <button type="button" aria-pressed="@(_geometry == option ? "true" : "false")" @onclick="() => SetGeometry(option)">@option</button>
+                        }
+                    </div>
                 </div>
-            }
 
-            <hr class="divider" />
-            <div class="field field-inline">
-                <input id="step-noop" type="checkbox" checked="@_noOps" @onchange="e => { _noOps = (bool)(e.Value ?? false); Schedule(); }" />
-                <label class="field-label" for="step-noop">Add identity steps</label>
+                <hr class="demo-divider" />
+                <p class="bb-overline demo-label">Adjustments and filters</p>
+                @foreach (var step in Steps)
+                {
+                    <div class="demo-field demo-field-inline">
+                        <input id="@($"step-{step.Id}")" type="checkbox" checked="@_enabled.Contains(step.Id)" @onchange="e => Toggle(step.Id, e)" />
+                        <label class="demo-field-label" for="@($"step-{step.Id}")">@step.Label</label>
+                    </div>
+                }
+
+                <hr class="demo-divider" />
+                <div class="demo-field demo-field-inline">
+                    <input id="step-noop" type="checkbox" checked="@_noOps" @onchange="e => { _noOps = (bool)(e.Value ?? false); Schedule(); }" />
+                    <label class="demo-field-label" for="step-noop">Add identity steps</label>
+                </div>
+                <span class="bb-field-hint">
+                    <code>Brightness(0)</code> and <code>Contrast(0)</code> do nothing, and the optimiser
+                    drops them - watch the step count.
+                </span>
             </div>
-            <span class="field-hint">
-                <code>Brightness(0)</code> and <code>Contrast(0)</code> do nothing, and the optimiser
-                drops them - watch the step count.
-            </span>
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Building and inspecting</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Building and inspecting</h3>
     <CodeSnippet Code="@InspectSnippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Executing</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Executing</h3>
     <CodeSnippet Code="@ExecuteSnippet" Language="C#" Expanded="true" />
     <p>
         The source is never modified, and the returned buffer is yours to dispose.
@@ -121,8 +125,8 @@
         WebAssembly UI can repaint; <code>Execute</code> is the synchronous form, for use off the UI
         thread or on small images.
     </p>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Execution options">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Execution options">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Option</th><th scope="col">Meaning</th></tr>
             </thead>
@@ -145,8 +149,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Geometry</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Geometry</h3>
     <CodeSnippet Code="@GeometrySnippet" Language="C#" Expanded="true" />
     <p>
         <code>AutoOrient</code> is almost always the first thing you want. Phones record rotation in
@@ -154,26 +158,26 @@
         appear sideways on a canvas unless it is applied. The browser decoder applies it during
         decoding; <code>AutoOrient</code> handles the cases where it has not been.
     </p>
-    <h3>The six resize modes</h3>
+    <h4>The six resize modes</h4>
     <p>For a 1000 &times; 500 source asked to fit 400 &times; 400:</p>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Resize modes">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Resize modes">
+        <table class="bb-table">
             <thead>
-                <tr><th scope="col">Mode</th><th scope="col" class="num">Result</th><th scope="col">Behaviour</th></tr>
+                <tr><th scope="col">Mode</th><th scope="col" class="demo-num">Result</th><th scope="col">Behaviour</th></tr>
             </thead>
             <tbody>
-                <tr><th scope="row"><code>Fit</code></th><td class="num">400 &times; 200</td><td>Scale proportionally to fit inside. The default.</td></tr>
-                <tr><th scope="row"><code>Contain</code></th><td class="num">400 &times; 400</td><td>Like <code>Fit</code>, then pad to exactly the target with <code>background</code>.</td></tr>
-                <tr><th scope="row"><code>Cover</code></th><td class="num">400 &times; 400</td><td>Scale to fill, then crop the overflow according to <code>anchor</code>.</td></tr>
-                <tr><th scope="row"><code>Stretch</code></th><td class="num">400 &times; 400</td><td>Ignore the aspect ratio.</td></tr>
-                <tr><th scope="row"><code>Max</code></th><td class="num">400 &times; 200</td><td>Like <code>Fit</code>, but never enlarge a smaller image - the right choice for an upload cap.</td></tr>
-                <tr><th scope="row"><code>Min</code></th><td class="num">800 &times; 400</td><td>Scale so both dimensions are at least the target.</td></tr>
+                <tr><th scope="row"><code>Fit</code></th><td class="demo-num">400 &times; 200</td><td>Scale proportionally to fit inside. The default.</td></tr>
+                <tr><th scope="row"><code>Contain</code></th><td class="demo-num">400 &times; 400</td><td>Like <code>Fit</code>, then pad to exactly the target with <code>background</code>.</td></tr>
+                <tr><th scope="row"><code>Cover</code></th><td class="demo-num">400 &times; 400</td><td>Scale to fill, then crop the overflow according to <code>anchor</code>.</td></tr>
+                <tr><th scope="row"><code>Stretch</code></th><td class="demo-num">400 &times; 400</td><td>Ignore the aspect ratio.</td></tr>
+                <tr><th scope="row"><code>Max</code></th><td class="demo-num">400 &times; 200</td><td>Like <code>Fit</code>, but never enlarge a smaller image - the right choice for an upload cap.</td></tr>
+                <tr><th scope="row"><code>Min</code></th><td class="demo-num">800 &times; 400</td><td>Scale so both dimensions are at least the target.</td></tr>
             </tbody>
         </table>
     </div>
-    <h3>Resampling filters</h3>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Resampling filters">
-        <table class="ref">
+    <h4>Resampling filters</h4>
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Resampling filters">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Filter</th><th scope="col">Use it for</th></tr>
             </thead>
@@ -194,8 +198,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Smart cropping</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Smart cropping</h3>
     <p>
         A fixed anchor is wrong most of the time: centre-cropping a portrait to a square routinely cuts
         off the top of a head. <code>SmartCrop</code> scores candidate positions on a small downscaled
@@ -206,8 +210,8 @@
     <CodeSnippet Code="@SmartCropSnippet" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Adjustments and filters</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Adjustments and filters</h3>
     <CodeSnippet Code="@AdjustSnippet" Language="C#" Expanded="true" />
     <p>
         Amounts are consistently in [-1, 1] with 0 meaning no change, except where another unit is
@@ -222,11 +226,11 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>The optimiser</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The optimiser</h3>
     <p>It runs by default, and every rewrite is exact.</p>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Optimiser rules">
-        <table class="ref">
+    <div class="bb-scroll" tabindex="0" role="region" aria-label="Optimiser rules">
+        <table class="bb-table">
             <thead>
                 <tr><th scope="col">Rule</th><th scope="col">Effect</th></tr>
             </thead>
@@ -248,8 +252,8 @@
     </p>
 </div>
 
-<div class="demo-section">
-    <h2>Previewing at another resolution</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Previewing at another resolution</h3>
     <p>
         <code>ForScale</code> rescales every operation - crop rectangles, blur radii, pixelation block
         sizes, stroke widths, font sizes. This is how the editor previews full-resolution edits on a
@@ -259,8 +263,8 @@
     <CodeSnippet Code="var preview = pipeline.ForScale(0.25);" Language="C#" Expanded="true" />
 </div>
 
-<div class="demo-section">
-    <h2>Custom operations</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Custom operations</h3>
     <p>
         Implement <code>IImageOperation</code>, or derive from <code>PointOperation</code> if your
         operation maps each pixel independently - then it joins the single-pass run with the
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Product.razor b/src/Utilities/Bmage/Demo/Client/Pages/Product.razor
index 4bfe867edbd..4c6fd45d611 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Product.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Product.razor
@@ -8,131 +8,135 @@
    same pipeline shape against it, so the expensive part - the decode - happens once. Sizes larger
    than the source are skipped and said to be, because upscaling a product photo invents detail. *@
 
-<PageTitle>Product images - Bit.Bmage</PageTitle>
-
-<h1>Product images</h1>
-
-<p class="page-intro">
-    A catalogue needs the same photo at half a dozen sizes, on a consistent background, cropped the
-    same way every time. One upload produces <strong>the whole set</strong> here, in a single pass,
-    before anything is sent anywhere.
-</p>
+<PageTitle>Product images · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Product images</h1>
+    <p class="bb-subtitle">
+        A catalogue needs the same photo at half a dozen sizes, on a consistent background, cropped the
+        same way every time. One upload produces <strong>the whole set</strong> here, in a single pass,
+        before anything is sent anywhere.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Try it</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
-    <div class="split">
-        <div>
-            @if (_source is null)
-            {
-                <BmageDropZone Label="Drop a product photo here" OnFilesSelected="OnFilesSelected" />
-                <div class="sample-row">
-                    <button type="button" class="btn" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
-                </div>
-            }
-            else
-            {
-                @if (_busy)
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="demo-split">
+            <div>
+                @if (_source is null)
                 {
-                    <p class="working" role="status">Producing @(_variants.Count + 1) of @_planned&hellip;</p>
+                    <BmageDropZone Label="Drop a product photo here" OnFilesSelected="OnFilesSelected" />
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-secondary" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
+                    </div>
                 }
-
-                <div class="thumb-grid">
-                    @foreach (var variant in _variants)
+                else
+                {
+                    @if (_busy)
                     {
-                        <div class="thumb" @key="variant.Version">
-                            <ImagePreview Image="variant.Image" Version="variant.Version" Alt="@($"Product image, {variant.Name}")"
-                                          Class="thumb-image" />
-                            <div class="thumb-meta">
-                                <div class="thumb-name">@variant.Name</div>
-                                <div>@variant.Image.Width &times; @variant.Image.Height &middot; @Display.Bytes(variant.Bytes)</div>
-                                <button type="button" class="btn btn-small thumb-save" @onclick="() => Download(variant)" aria-label="@($"Save {variant.Name}")">Save</button>
-                            </div>
-                        </div>
+                        <p class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Producing @(_variants.Count + 1) of @_planned&hellip;</p>
                     }
-                </div>
 
-                <div class="btn-row results-actions">
-                    <button type="button" class="btn btn-accent" disabled="@(_busy || _variants.Count == 0)" @onclick="DownloadAll">
-                        <Icon Path="@Icons.Download" />
-                        Download all @_variants.Count
-                    </button>
-                    <button type="button" class="btn" @onclick="Clear">Start over</button>
-                </div>
-                <p class="small muted preview-meta">
-                    @if (_variants.Count > 0)
-                    {
-                        <text>Total output @Display.Bytes(_variants.Sum(v => v.Bytes))@(_sourceBytes > 0 ? $" from a {Display.Bytes(_sourceBytes)} upload" : null).</text>
-                    }
-                    else if (!_busy && _sizes.Count == 0)
-                    {
-                        <text>Pick at least one size.</text>
-                    }
-                    @if (_skipped.Count > 0)
-                    {
-                        <text> Skipped @string.Join(", ", _skipped.OrderByDescending(s => s)) because the source is only @_source.Width &times; @_source.Height and upscaling would invent detail.</text>
-                    }
-                </p>
-            }
-        </div>
+                    <div class="thumb-grid">
+                        @foreach (var variant in _variants)
+                        {
+                            <div class="thumb" @key="variant.Version">
+                                <ImagePreview Image="variant.Image" Version="variant.Version" Alt="@($"Product image, {variant.Name}")"
+                                              Class="thumb-image" />
+                                <div class="thumb-meta">
+                                    <div class="thumb-name">@variant.Name</div>
+                                    <div>@variant.Image.Width &times; @variant.Image.Height &middot; @Display.Bytes(variant.Bytes)</div>
+                                    <button type="button" class="btn btn-secondary demo-btn-sm thumb-save" @onclick="() => Download(variant)" aria-label="@($"Save {variant.Name}")">Save</button>
+                                </div>
+                            </div>
+                        }
+                    </div>
+
+                    <div class="bb-toolbar results-actions">
+                        <button type="button" class="btn btn-primary" disabled="@(_busy || _variants.Count == 0)" @onclick="DownloadAll">
+                            <Icon Path="@Icons.Download" />
+                            Download all @_variants.Count
+                        </button>
+                        <button type="button" class="btn btn-secondary" @onclick="Clear">Start over</button>
+                    </div>
+                    <p class="demo-small bb-muted preview-meta">
+                        @if (_variants.Count > 0)
+                        {
+                            <text>Total output @Display.Bytes(_variants.Sum(v => v.Bytes))@(_sourceBytes > 0 ? $" from a {Display.Bytes(_sourceBytes)} upload" : null).</text>
+                        }
+                        else if (!_busy && _sizes.Count == 0)
+                        {
+                            <text>Pick at least one size.</text>
+                        }
+                        @if (_skipped.Count > 0)
+                        {
+                            <text> Skipped @string.Join(", ", _skipped.OrderByDescending(s => s)) because the source is only @_source.Width &times; @_source.Height and upscaling would invent detail.</text>
+                        }
+                    </p>
+                }
+            </div>
 
-        <div class="card">
-            <p class="card-title">Recipe</p>
+            <div class="demo-panel">
+                <p class="bb-overline demo-label">Recipe</p>
 
-            <div class="field">
-                <label class="field-label" for="bg">Background</label>
-                <input id="bg" type="color" class="bmg-color" value="@_background.ToHex(false)" @onchange="OnBackgroundChanged" aria-describedby="bg-hint" />
-                <span class="field-hint" id="bg-hint">Applied behind transparent pixels and in the padding, so every tile matches.</span>
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="bg">Background</label>
+                    <input id="bg" type="color" class="bmg-color" value="@_background.ToHex(false)" @onchange="OnBackgroundChanged" aria-describedby="bg-hint" />
+                    <span class="bb-field-hint" id="bg-hint">Applied behind transparent pixels and in the padding, so every tile matches.</span>
+                </div>
 
-            <div class="field">
-                <label class="field-label" for="pad">Padding <span class="field-value">@_padding%</span></label>
-                <input id="pad" type="range" min="0" max="25" step="1" value="@_padding" @oninput="OnPaddingChanged" />
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="pad">Padding <span class="demo-field-value">@_padding%</span></label>
+                    <input id="pad" type="range" min="0" max="25" step="1" value="@_padding" @oninput="OnPaddingChanged" />
+                </div>
 
-            <div class="field">
-                <label class="field-label" for="ratio">Shape</label>
-                <select id="ratio" class="bmg-select" @onchange="OnRatioChanged">
-                    <option value="square" selected="@(_shape == "square")">Square (1:1)</option>
-                    <option value="portrait" selected="@(_shape == "portrait")">Portrait (3:4)</option>
-                    <option value="landscape" selected="@(_shape == "landscape")">Landscape (4:3)</option>
-                </select>
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="ratio">Shape</label>
+                    <select id="ratio" @onchange="OnRatioChanged">
+                        <option value="square" selected="@(_shape == "square")">Square (1:1)</option>
+                        <option value="portrait" selected="@(_shape == "portrait")">Portrait (3:4)</option>
+                        <option value="landscape" selected="@(_shape == "landscape")">Landscape (4:3)</option>
+                    </select>
+                </div>
 
-            <div class="field" role="group" aria-labelledby="sizes-label">
-                <span class="field-label" id="sizes-label">Sizes</span>
-                <div class="chip-row">
-                    @foreach (var size in AllSizes)
-                    {
-                        <button type="button" class="chip" aria-pressed="@(_sizes.Contains(size) ? "true" : "false")" @onclick="() => ToggleSize(size)">@size</button>
-                    }
+                <div class="demo-field" role="group" aria-labelledby="sizes-label">
+                    <span class="demo-field-label" id="sizes-label">Sizes</span>
+                    <div class="bb-segmented">
+                        @foreach (var size in AllSizes)
+                        {
+                            <button type="button" aria-pressed="@(_sizes.Contains(size) ? "true" : "false")" @onclick="() => ToggleSize(size)">@size</button>
+                        }
+                    </div>
                 </div>
-            </div>
 
-            <div class="field">
-                <label class="field-label" for="pformat">Format</label>
-                <select id="pformat" class="bmg-select" disabled="@(_capabilities is null)" @onchange="OnFormatChanged">
-                    @foreach (var format in AvailableFormats)
-                    {
-                        <option value="@format" selected="@(_format == format)">@format.ToString().ToUpperInvariant()</option>
-                    }
-                </select>
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="pformat">Format</label>
+                    <select id="pformat" disabled="@(_capabilities is null)" @onchange="OnFormatChanged">
+                        @foreach (var format in AvailableFormats)
+                        {
+                            <option value="@format" selected="@(_format == format)">@format.ToString().ToUpperInvariant()</option>
+                        }
+                    </select>
+                </div>
 
-            <button type="button" class="btn btn-accent btn-block" disabled="@(_source is null || _busy)" @onclick="Generate">
-                @(_busy ? "Working…" : "Regenerate")
-            </button>
+                <button type="button" class="btn btn-primary demo-btn-block" disabled="@(_source is null || _busy)" @onclick="Generate">
+                    @(_busy ? "Working…" : "Regenerate")
+                </button>
+            </div>
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>One source, many outputs</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> One source, many outputs</h3>
     <p>
         <code>Fit</code> rather than <code>Cover</code>: a product must never be cropped, so it is
         scaled to fit the padded area and centred on an <code>ImageCanvas</code> filled with the
diff --git a/src/Utilities/Bmage/Demo/Client/Pages/Social.razor b/src/Utilities/Bmage/Demo/Client/Pages/Social.razor
index e770fed7d49..86a8afca468 100644
--- a/src/Utilities/Bmage/Demo/Client/Pages/Social.razor
+++ b/src/Utilities/Bmage/Demo/Client/Pages/Social.razor
@@ -9,120 +9,124 @@
    pixels with the browser's own text engine through ImageCanvas - so system fonts, emoji and
    right-to-left scripts work without shipping a font file. *@
 
-<PageTitle>Social images - Bit.Bmage</PageTitle>
-
-<h1>Social images</h1>
-
-<p class="page-intro">
-    Compose to a platform's exact canvas, apply a look, and burn in a caption. The text is rendered by
-    the <strong>browser's own text engine</strong>, so system fonts, emoji and right-to-left scripts
-    all work without shipping a font file.
-</p>
+<PageTitle>Social images · Bmage</PageTitle>
+
+<div class="bb-intro">
+    <h1>Social images</h1>
+    <p class="bb-subtitle">
+        Compose to a platform's exact canvas, apply a look, and burn in a caption. The text is rendered by
+        the <strong>browser's own text engine</strong>, so system fonts, emoji and right-to-left scripts
+        all work without shipping a font file.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Try it</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
 
     @if (_error is not null)
     {
-        <div class="alert alert-error" role="alert">@_error</div>
+        <div class="bb-note bb-note-danger demo-error" role="alert">@_error</div>
     }
 
-    <div class="split">
-        <div>
-            @if (_source is null)
-            {
-                <BmageDropZone Label="Drop a photo here" OnFilesSelected="OnFilesSelected" />
-                <div class="sample-row">
-                    <button type="button" class="btn" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
-                </div>
-            }
-            else
-            {
-                <ImagePreview Image="_result" Version="_version" Alt="Composed social image" Class="social-preview" />
-                <div class="social-meta">
-                    <span class="small muted">
-                        @if (_result is not null)
-                        {
-                            <text>@_result.Width &times; @_result.Height</text>
-                        }
-                        @if (_encoded is not null)
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="demo-split">
+            <div>
+                @if (_source is null)
+                {
+                    <BmageDropZone Label="Drop a photo here" OnFilesSelected="OnFilesSelected" />
+                    <div class="bb-toolbar">
+                        <button type="button" class="btn btn-secondary" disabled="@(_busy || IsHydrating)" @onclick="UseSample">Use a sample image</button>
+                    </div>
+                }
+                else
+                {
+                    <ImagePreview Image="_result" Version="_version" Alt="Composed social image" Class="social-preview" />
+                    <div class="social-meta">
+                        <span class="demo-small bb-muted">
+                            @if (_result is not null)
+                            {
+                                <text>@_result.Width &times; @_result.Height</text>
+                            }
+                            @if (_encoded is not null)
+                            {
+                                <text> &middot; @Display.Bytes(_encoded.Length) @_encoded.Format.ToString().ToUpperInvariant()</text>
+                            }
+                            @if (_busy)
+                            {
+                                <span class="working" role="status"><span class="bb-spinner" aria-hidden="true"></span>Composing&hellip;</span>
+                            }
+                        </span>
+                        <div class="bb-toolbar">
+                            <button type="button" class="btn btn-primary" disabled="@(_encoded is null || _busy)" @onclick="Download">
+                                <Icon Path="@Icons.Download" />
+                                Download
+                            </button>
+                            <button type="button" class="btn btn-secondary" @onclick="Clear">Start over</button>
+                        </div>
+                    </div>
+                }
+            </div>
+
+            <div class="demo-panel">
+                <p class="bb-overline demo-label">Canvas</p>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="preset">Preset</label>
+                    <select id="preset" @onchange="OnPresetChanged">
+                        @foreach (var preset in Presets)
                         {
-                            <text> &middot; @Display.Bytes(_encoded.Length) @_encoded.Format.ToString().ToUpperInvariant()</text>
+                            <option value="@preset.Name" selected="@(_preset.Name == preset.Name)">@preset.Name (@preset.Width×@preset.Height)</option>
                         }
-                        @if (_busy)
+                    </select>
+                </div>
+
+                <hr class="demo-divider" />
+                <p class="bb-overline demo-label">Look</p>
+                <div class="demo-field" role="group" aria-labelledby="look-label">
+                    <span class="demo-field-label" id="look-label">Filter</span>
+                    <div class="bb-segmented">
+                        @foreach (var look in Looks)
                         {
-                            <span class="working" role="status">Composing&hellip;</span>
+                            <button type="button" aria-pressed="@(_look == look ? "true" : "false")" @onclick="() => SetLook(look)">@look</button>
                         }
-                    </span>
-                    <div class="btn-row">
-                        <button type="button" class="btn btn-accent" disabled="@(_encoded is null || _busy)" @onclick="Download">
-                            <Icon Path="@Icons.Download" />
-                            Download
-                        </button>
-                        <button type="button" class="btn" @onclick="Clear">Start over</button>
                     </div>
                 </div>
-            }
-        </div>
 
-        <div class="card">
-            <p class="card-title">Canvas</p>
-            <div class="field">
-                <label class="field-label" for="preset">Preset</label>
-                <select id="preset" class="bmg-select" @onchange="OnPresetChanged">
-                    @foreach (var preset in Presets)
-                    {
-                        <option value="@preset.Name" selected="@(_preset.Name == preset.Name)">@preset.Name (@preset.Width×@preset.Height)</option>
-                    }
-                </select>
-            </div>
-
-            <hr class="divider" />
-            <p class="card-title">Look</p>
-            <div class="field" role="group" aria-labelledby="look-label">
-                <span class="field-label" id="look-label">Filter</span>
-                <div class="chip-row">
-                    @foreach (var look in Looks)
-                    {
-                        <button type="button" class="chip" aria-pressed="@(_look == look ? "true" : "false")" @onclick="() => SetLook(look)">@look</button>
-                    }
+                <div class="demo-field">
+                    <label class="demo-field-label" for="warmth">Warmth <span class="demo-field-value">@_warmth.ToString("0.00")</span></label>
+                    <input id="warmth" type="range" min="-0.6" max="0.6" step="0.02" value="@_warmth.ToString(System.Globalization.CultureInfo.InvariantCulture)" @oninput="e => SetDouble(v => _warmth = (float)v, e)" />
                 </div>
-            </div>
-
-            <div class="field">
-                <label class="field-label" for="warmth">Warmth <span class="field-value">@_warmth.ToString("0.00")</span></label>
-                <input id="warmth" type="range" min="-0.6" max="0.6" step="0.02" value="@_warmth.ToString(System.Globalization.CultureInfo.InvariantCulture)" @oninput="e => SetDouble(v => _warmth = (float)v, e)" />
-            </div>
 
-            <div class="field">
-                <label class="field-label" for="vig">Vignette <span class="field-value">@_vignette.ToString("0.00")</span></label>
-                <input id="vig" type="range" min="0" max="1" step="0.02" value="@_vignette.ToString(System.Globalization.CultureInfo.InvariantCulture)" @oninput="e => SetDouble(v => _vignette = (float)v, e)" />
-            </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="vig">Vignette <span class="demo-field-value">@_vignette.ToString("0.00")</span></label>
+                    <input id="vig" type="range" min="0" max="1" step="0.02" value="@_vignette.ToString(System.Globalization.CultureInfo.InvariantCulture)" @oninput="e => SetDouble(v => _vignette = (float)v, e)" />
+                </div>
 
-            <hr class="divider" />
-            <p class="card-title">Caption</p>
-            <div class="field">
-                <label class="field-label" for="caption">Text</label>
-                <input id="caption" type="text" placeholder="Add a caption" value="@_caption" @oninput="OnCaptionChanged" />
-            </div>
-            <div class="field">
-                <label class="field-label" for="capsize">Size <span class="field-value">@_captionSize%</span></label>
-                <input id="capsize" type="range" min="3" max="14" step="1" value="@_captionSize" @oninput="e => SetDouble(v => _captionSize = (int)v, e)" />
-            </div>
-            <div class="field">
-                <label class="field-label" for="capcolor">Colour</label>
-                <input id="capcolor" type="color" class="bmg-color" value="@_captionColor.ToHex(false)" @onchange="OnCaptionColorChanged" />
-            </div>
-            <div class="field field-inline">
-                <input id="scrim" type="checkbox" checked="@_scrim" @onchange="OnScrimChanged" />
-                <label class="field-label" for="scrim">Darken behind the caption</label>
+                <hr class="demo-divider" />
+                <p class="bb-overline demo-label">Caption</p>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="caption">Text</label>
+                    <input id="caption" type="text" placeholder="Add a caption" value="@_caption" @oninput="OnCaptionChanged" />
+                </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="capsize">Size <span class="demo-field-value">@_captionSize%</span></label>
+                    <input id="capsize" type="range" min="3" max="14" step="1" value="@_captionSize" @oninput="e => SetDouble(v => _captionSize = (int)v, e)" />
+                </div>
+                <div class="demo-field">
+                    <label class="demo-field-label" for="capcolor">Colour</label>
+                    <input id="capcolor" type="color" class="bmg-color" value="@_captionColor.ToHex(false)" @onchange="OnCaptionColorChanged" />
+                </div>
+                <div class="demo-field demo-field-inline">
+                    <input id="scrim" type="checkbox" checked="@_scrim" @onchange="OnScrimChanged" />
+                    <label class="demo-field-label" for="scrim">Darken behind the caption</label>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Composing with the canvas API</h2>
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Composing with the canvas API</h3>
     <p>
         <code>Cover</code> fills the preset exactly, cropping the overflow rather than distorting.
         The look is a run of per-pixel adjustments, which the optimiser fuses into a single pass over
@@ -131,7 +135,7 @@
         the text that wraps.
     </p>
     <CodeSnippet Code="@Snippet" Language="C#" Expanded="true" />
-    <div class="callout">
+    <div class="bb-note">
         <p>
             <code>BrowserTextRasterizer</code> needs a browser. On a server, register a font with
             <code>FontTextRasterizer</code> instead - see the <a href="/headless">Headless API</a>.
diff --git a/src/Utilities/Bmage/Demo/Client/Routes.razor b/src/Utilities/Bmage/Demo/Client/Routes.razor
index fefb13d341a..1c3ab033f40 100644
--- a/src/Utilities/Bmage/Demo/Client/Routes.razor
+++ b/src/Utilities/Bmage/Demo/Client/Routes.razor
@@ -1,6 +1,14 @@
-<Router AppAssembly="typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFoundPage)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the error pages opt out with @layout MainLayout. After a navigation the page's
+   own H1 takes focus, so a screen reader starts reading at the new page.
+
+   NotFound is the router's page for a client-side navigation to an unknown route, and also the
+   target the host re-executes a deep link it could not route to (UseStatusCodePagesWithReExecute
+   in the server's Program.cs), so both kinds of miss render the same page. *@
+
+<Router AppAssembly="typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h1, h2" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/AppFooter.razor b/src/Utilities/Bmage/Demo/Client/Shared/AppFooter.razor
deleted file mode 100644
index ef9ce3bdb47..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/AppFooter.razor
+++ /dev/null
@@ -1,78 +0,0 @@
-@inject IJSRuntime JS
-
-@* The bit platform footer: who makes this, where to go next, and how to reach the team. *@
-
-<footer class="footer">
-    <section>
-        <div>
-            <div class="bit-logo" role="img" aria-label="bit platform"></div>
-            <p class="blurb">
-                Bmage is part of bit platform &mdash; a platform that simplifies the development
-                process for freelancers and software companies through its clean project templates
-                and easy-to-use one-click build and deployment feature.
-            </p>
-        </div>
-
-        <div class="link-columns">
-            <div class="link-column">
-                <h6>Learn</h6>
-                <a href="/getting-started">Get started</a>
-                <a href="/pipelines">Pipelines</a>
-                <a href="/editor">The editor</a>
-                <a href="/metadata">Metadata and privacy</a>
-            </div>
-
-            <div class="link-column">
-                <h6>Build</h6>
-                <a href="/avatar">Avatar editor</a>
-                <a href="/optimize">Upload optimisation</a>
-                <a href="/batch">Batch processing</a>
-                <a href="/headless">Headless API</a>
-            </div>
-
-            <div class="link-column">
-                <h6>Project</h6>
-                <a href="https://github.com/bitfoundation" target="_blank" rel="noopener noreferrer">GitHub org</a>
-                <a href="https://github.com/bitfoundation/bitplatform" target="_blank" rel="noopener noreferrer">Repository</a>
-                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
-                <button type="button" class="go-to-top" @onclick="GoToTop">
-                    <Icon Path="@Icons.ArrowUp" />
-                    Back to top
-                </button>
-            </div>
-        </div>
-    </section>
-
-    <section>
-        <div class="address-info">
-            <a class="address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
-            <div class="country">Netherlands</div>
-            <a class="tel" href="tel:+31684207362">+31 6 84207362</a>
-        </div>
-
-        <div>
-            <div class="social-link-group">
-                <a class="social-link twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
-                <a class="social-link github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
-                <a class="social-link youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
-                <a class="social-link linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
-            </div>
-            <div class="copy-right-txt">Copyright &copy; 2026 bit platform &middot; All rights reserved</div>
-        </div>
-    </section>
-</footer>
-
-@code {
-    private async Task GoToTop()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmdScrollToTop");
-        }
-        catch
-        {
-            // Scrolling back up is a convenience the page already offers through the scrollbar;
-            // if the script is unavailable there is nothing worth telling the reader about.
-        }
-    }
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/AppHeader.razor b/src/Utilities/Bmage/Demo/Client/Shared/AppHeader.razor
deleted file mode 100644
index 68256aebbdc..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/AppHeader.razor
+++ /dev/null
@@ -1,127 +0,0 @@
-@inject IJSRuntime JS
-
-@* The site header: the mark, the library's name and the two top-level destinations at one end;
-   the search, the repository and the theme switch at the other.
-
-   It is the one piece of chrome the landing page and the docs share, and it adapts to which of
-   the two it is sitting on: the menu button only exists on a docs page, because the landing page
-   has no nav panel to open. *@
-
-<header class="app-header">
-    <div class="app-header-inner">
-        <div class="header-start">
-            @* Only exists on a docs page, and only at the widths where the nav panel is a drawer;
-               CSS hides it above them. *@
-            @if (IsHomePage is false)
-            {
-                <button type="button" class="icon-btn menu-btn" @onclick="OnToggleNav"
-                        aria-label="Toggle navigation" aria-controls="nav-panel"
-                        aria-expanded="@(IsNavOpen ? "true" : "false")"
-                        disabled="@IsHydrating">
-                    <Icon Path="@Icons.Menu" />
-                </button>
-            }
-
-            <a class="header-brand" href="/" aria-label="Bmage home">
-                <span class="logo" aria-hidden="true"></span>
-                <span class="wordmark">Bmage</span>
-            </a>
-
-            <span class="header-version">@Version</span>
-
-            <nav class="header-links" aria-label="Sections">
-                <a class="link@(IsHomePage ? " active" : "")" href="/"
-                   aria-current="@(IsHomePage ? "page" : null)">Home</a>
-                <a class="link@(IsHomePage ? "" : " active")" href="/getting-started"
-                   aria-current="@(IsHomePage ? null : "page")">Docs</a>
-            </nav>
-        </div>
-
-        <div class="header-end">
-            @* The page is prerendered on the server, so it is visible - and inert - until the
-               WebAssembly runtime takes over. Say so instead of letting clicks silently do
-               nothing, and instead of leaving the still animations looking broken. *@
-            @if (IsHydrating)
-            {
-                <span class="hydrating" title="Prerendered HTML - the WebAssembly runtime is still loading.">
-                    <i></i><span>loading</span>
-                </span>
-            }
-
-            @* Below the width where it has room for its label it collapses to the icon, which is
-               why the accessible name is on the button rather than only in the text inside it. *@
-            <button type="button" class="header-search" @onclick="OnOpenSearch"
-                    aria-label="Search the docs" aria-keyshortcuts="Control+K Meta+K"
-                    disabled="@IsHydrating">
-                <Icon Path="@Icons.Search" />
-                <span class="search-label">Search docs</span>
-                <span class="kbd" aria-hidden="true">@ShortcutHint</span>
-            </button>
-
-            <a class="icon-btn" target="_blank" rel="noopener noreferrer"
-               aria-label="Bit.Bmage on GitHub (opens in a new tab)"
-               href="https://github.com/bitfoundation/bitplatform">
-                <span class="github-mark" aria-hidden="true"></span>
-            </a>
-
-            @* Exact complements: CSS shows the sun in the dark theme and the moon in the light
-               one, so exactly one of the pair is ever visible - including on the prerendered
-               document, which carries no data-theme attribute yet. *@
-            <button type="button" class="icon-btn dark-theme" @onclick="ToggleTheme"
-                    title="Switch to the light theme" aria-label="Switch to the light theme">
-                <Icon Path="@Icons.Sun" />
-            </button>
-            <button type="button" class="icon-btn light-theme" @onclick="ToggleTheme"
-                    title="Switch to the dark theme" aria-label="Switch to the dark theme">
-                <Icon Path="@Icons.Moon" />
-            </button>
-        </div>
-    </div>
-</header>
-
-@code {
-    /// <summary>The release the docs describe, shown next to the name.</summary>
-    private const string Version = "net8+";
-
-    /// <summary>True while the prerendered markup is on screen and the WebAssembly runtime is still loading.</summary>
-    [Parameter] public bool IsHydrating { get; set; }
-
-    /// <summary>Whether the nav drawer is currently open, for the menu button's aria-expanded.</summary>
-    [Parameter] public bool IsNavOpen { get; set; }
-
-    /// <summary>Raised by the menu button at the widths where the nav panel is a drawer.</summary>
-    [Parameter] public EventCallback OnToggleNav { get; set; }
-
-    /// <summary>Raised by the search button. The layout owns the palette, so it owns opening it.</summary>
-    [Parameter] public EventCallback OnOpenSearch { get; set; }
-
-    /// <summary>
-    /// The shortcut printed on the search button's keycap. The layout resolves it once from the
-    /// browser rather than guessing: the same physical key is Ctrl on Windows and Linux and Cmd on
-    /// a Mac, and a keycap showing the wrong one is worse than no keycap at all.
-    /// </summary>
-    [Parameter] public string ShortcutHint { get; set; } = "Ctrl K";
-
-    /// <summary>
-    /// True on the landing page. The layout owns this - it is the same flag that decides whether
-    /// the page gets the docs shell at all - so the two can never disagree about which of the
-    /// site's two faces is on screen.
-    /// </summary>
-    [Parameter] public bool IsHomePage { get; set; }
-
-    // The attribute the stylesheets key off is owned by the theme script, which also persists the
-    // choice; the component only asks it to flip. Nothing here has to know the resulting theme -
-    // the two buttons are shown and hidden by CSS.
-    private async Task ToggleTheme()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmdToggleTheme");
-        }
-        catch
-        {
-            // The theme is a preference, not a feature: if the script is missing there is nothing
-            // to report to the reader, and the page keeps working in whichever theme is applied.
-        }
-    }
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/AppNavPanel.razor b/src/Utilities/Bmage/Demo/Client/Shared/AppNavPanel.razor
deleted file mode 100644
index 059008897c5..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/AppNavPanel.razor
+++ /dev/null
@@ -1,81 +0,0 @@
-@* The docs navigation. A sticky column beside the content on wide screens and a drawer over it on
-   narrow ones - the switch is entirely in CSS, so the same markup and the same state serve both.
-
-   The index is grouped rather than flat. Twenty entries in one run is a list to be read from the
-   top, and a reader almost always arrives wanting one of them for a reason: to make something
-   spring, to make something leave, to make something follow the pointer. The groups say which is
-   which, and they come from NavItem itself, so a page is filed once. *@
-
-<nav id="nav-panel" class="nav-panel @(IsOpen ? "open" : null)" aria-label="Documentation">
-    <div class="nav-panel-search">
-        <Icon Path="@Icons.Search" />
-        <input type="search" placeholder="Filter pages" aria-label="Filter pages"
-               value="@_filter" @oninput="OnFilterInput" disabled="@Disabled" />
-    </div>
-
-    @foreach (var group in _visibleGroups)
-    {
-        <div class="nav-group">
-            @* The icon is the group's, not the page's: twenty rows of icons would be twenty things
-               to look past, but seven marks down the left of the panel give the eye somewhere to
-               land when it is looking for the right part of the docs rather than the right page. *@
-            <p class="nav-group-title" id="@GroupId(group.Category)">
-                <Icon Path="@group.Icon" />
-                @group.Category
-            </p>
-
-            <ul class="nav-panel-list" aria-labelledby="@GroupId(group.Category)">
-                @foreach (var item in group.Items)
-                {
-                    <li>
-                        @* Match.All throughout: every href is a distinct leaf route with nothing
-                           nested under it, and prefix matching would light up "Layout" the moment
-                           a "LayoutSomething" route existed. *@
-                        <NavLink href="@item.Href" Match="NavLinkMatch.All">
-                            @item.Title
-                        </NavLink>
-                    </li>
-                }
-            </ul>
-        </div>
-    }
-
-    @if (_visibleGroups.Length == 0)
-    {
-        <span class="nav-panel-empty" role="status">No page matches &ldquo;@_filter&rdquo;.</span>
-    }
-</nav>
-
-@code {
-    /// <summary>Whether the drawer is open. Ignored above the breakpoint, where the panel is always in place.</summary>
-    [Parameter] public bool IsOpen { get; set; }
-
-    /// <summary>Disables the filter box while the prerendered markup is still waiting for the runtime.</summary>
-    [Parameter] public bool Disabled { get; set; }
-
-    private string _filter = "";
-    private (string Category, string Icon, NavItem[] Items)[] _visibleGroups = NavItem.Groups;
-
-    private static string GroupId(string category)
-        => $"nav-group-{category.ToLowerInvariant().Replace(' ', '-')}";
-
-    private void OnFilterInput(ChangeEventArgs e)
-    {
-        _filter = e.Value?.ToString() ?? "";
-
-        if (_filter.Trim() is not { Length: > 0 } term)
-        {
-            _visibleGroups = NavItem.Groups;
-            return;
-        }
-
-        // A group whose every page has been filtered out is dropped rather than left as a heading
-        // over nothing - which would read as "these exist but are hidden" instead of "no match".
-        _visibleGroups =
-        [
-            .. NavItem.Groups
-                .Select(group => (group.Category, group.Icon, Items: group.Items.Where(i => i.Matches(term)).ToArray()))
-                .Where(group => group.Items.Length > 0)
-        ];
-    }
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/CodeSnippet.razor b/src/Utilities/Bmage/Demo/Client/Shared/CodeSnippet.razor
index 2151cb24713..e50294eb1d3 100644
--- a/src/Utilities/Bmage/Demo/Client/Shared/CodeSnippet.razor
+++ b/src/Utilities/Bmage/Demo/Client/Shared/CodeSnippet.razor
@@ -1,54 +1,46 @@
-@inject IJSRuntime JS
-
-@* A code sample, behind a toggle.
-
-   One frame around the toolbar and the code rather than a button floating above a slab: the bar
-   is the code box's own header, so opening a snippet grows a panel instead of adding a second
-   thing to the page. The copy button is there whether or not the code is showing - a reader who
-   wants the snippet in their editor should not first have to read it here.
+@* A code sample: SyntaxHighlighter's tokens inside the site kit's pre.bb-code, which is what gives
+   it the site's code surface - and the copy button site.js adds to every pre.bb-code. The token
+   colours are in wwwroot/demo.css.
 
    Snippets that are the point of their section - the install command, the Program.cs a reader is
-   about to paste - start open (Expanded); the full source behind a worked scenario starts closed,
-   so the scenario itself stays the first thing on the page. *@
-
-<div class="code-snippet @(_show ? "open" : null)">
-    <div class="code-snippet-bar">
-        <button type="button" class="code-toggle" @onclick="Toggle"
+   about to paste - are shown as they are (Expanded); the full source behind a worked scenario sits
+   behind a "Show code" toggle, so the scenario itself stays the first thing on the page. *@
+
+@if (Expanded)
+{
+    @* tabindex="0": a block wider than the column scrolls sideways, and a keyboard reader can only
+       scroll what can take focus. *@
+    <pre class="bb-code" tabindex="0"><code>@Highlighted</code></pre>
+}
+else
+{
+    <div class="bb-source">
+        <button type="button" class="btn btn-secondary" @onclick="() => _show = !_show"
                 aria-expanded="@(_show ? "true" : "false")" aria-controls="@_bodyId">
-            <span class="code-toggle-icon">
-                <Icon Path="@Icons.ChevronRight" />
-            </span>
+            <span class="demo-source-caret" aria-hidden="true">@(_show ? "▾" : "▸")</span>
+            <span class="demo-source-glyph" aria-hidden="true">&lt;/&gt;</span>
             @(_show ? "Hide code" : "Show code")
+            <span class="demo-source-lang">@Language</span>
         </button>
 
-        <span class="code-lang">@Language</span>
-
-        <button type="button" class="code-copy @(_copied ? "copied" : null)" @onclick="CopyAsync"
-                aria-label="@(_copied ? "Code copied to the clipboard" : "Copy the code to the clipboard")">
-            <Icon Path="@(_copied ? Icons.Check : Icons.Copy)" />
-            @(_copied ? "Copied" : "Copy")
-        </button>
+        @if (_show)
+        {
+            <pre class="bb-code" id="@_bodyId" tabindex="0"><code>@Highlighted</code></pre>
+        }
     </div>
-
-    @if (_show)
-    {
-        @* tabindex="0": a block wider than the column scrolls sideways, and a keyboard reader can
-           only scroll what can take focus. *@
-        <pre class="code-block" id="@_bodyId" tabindex="0"><code>@((MarkupString)SyntaxHighlighter.Highlight(Code.Trim('\n'), Language))</code></pre>
-    }
-</div>
+}
 
 @code {
     /// <summary>The source to display, copy/paste-ready.</summary>
     [Parameter, EditorRequired] public string Code { get; set; } = "";
 
     /// <summary>
-    /// The label printed on the bar, which also picks the highlighter: Razor (the default) and
-    /// C# are tokenised, anything else - a shell command, a JSON or XML file - is shown as written.
+    /// The language, which picks the highlighter: Razor (the default), HTML and XML are lexed as
+    /// markup and C# as C#; anything else - a shell command, CSS, JSON - is shown as written.
     /// </summary>
     [Parameter] public string Language { get; set; } = "Razor";
 
-    /// <summary>Whether the code starts open. Off for the full source behind a sample, on for a snippet that is the point of its section.</summary>
+    /// <summary>Whether the code is shown as it is rather than behind a toggle. On for a snippet that is the point of its section.</summary>
     [Parameter] public bool Expanded { get; set; }
 
     // The toggle points at the block it opens, so a screen reader following aria-controls lands on
@@ -57,27 +49,8 @@
     private readonly string _bodyId = $"code-{Guid.NewGuid():N}";
 
     private bool _show;
-    private bool _copied;
-
-    protected override void OnInitialized() => _show = Expanded;
-
-    private void Toggle()
-    {
-        _show = !_show;
-        _copied = false;
-    }
 
-    private async Task CopyAsync()
-    {
-        try
-        {
-            _copied = await JS.InvokeAsync<bool>("bmdCopyToClipboard", Code.Trim('\n'));
-        }
-        catch
-        {
-            // A clipboard the browser refuses to hand over is not something the reader can act on,
-            // and the code is on the page either way; the button simply does not confirm.
-            _copied = false;
-        }
-    }
+    // The samples are raw string literals, so they carry the source file's line endings; a trailing
+    // line break would otherwise render as an empty last line.
+    private MarkupString Highlighted => new(SyntaxHighlighter.Highlight(Code.ReplaceLineEndings("\n").Trim('\n'), Language));
 }
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/CommandPalette.razor b/src/Utilities/Bmage/Demo/Client/Shared/CommandPalette.razor
deleted file mode 100644
index ea37837a685..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/CommandPalette.razor
+++ /dev/null
@@ -1,200 +0,0 @@
-@inject IJSRuntime JS
-@inject NavigationManager Nav
-@implements IAsyncDisposable
-
-@* Every page of the docs, one keystroke away.
-
-   It searches the same NavItem list the nav panel renders, so a page is findable here for having
-   a nav entry rather than for being added to a second index that could fall behind it - and it
-   searches each entry's keywords as well as its title, because a reader looking for "stagger" or
-   "elastic" is naming the feature, not the page it happens to live on.
-
-   The keyboard is handled in js/demo.js rather than here. A Blazor @onkeydown handler cannot
-   decide per-event whether to preventDefault, so arrow keys either scroll the palette's own list
-   twice or the typed characters never reach the input; the listener there suppresses exactly the
-   four keys this dialog owns and leaves every other key alone. *@
-
-@if (IsOpen)
-{
-    <div class="palette-backdrop" @onclick="CloseAsync"></div>
-
-    <div class="palette" role="dialog" aria-modal="true" aria-label="Search the documentation">
-        <div class="palette-field">
-            <Icon Path="@Icons.Search" />
-            <input id="palette-input" type="text" autocomplete="off" spellcheck="false"
-                   role="combobox" aria-expanded="true" aria-controls="palette-results"
-                   aria-activedescendant="@(_matches.Length > 0 ? ItemId(_active) : null)"
-                   aria-label="Search the documentation"
-                   placeholder="Search pages, features, keywords..."
-                   value="@_term" @oninput="OnInput" />
-            <button type="button" class="icon-btn" @onclick="CloseAsync" aria-label="Close search">
-                <Icon Path="@Icons.Close" />
-            </button>
-        </div>
-
-        @if (_matches.Length == 0)
-        {
-            <p class="palette-empty" role="status">No page matches &ldquo;@_term&rdquo;.</p>
-        }
-        else
-        {
-            <ul class="palette-results" id="palette-results" role="listbox" aria-label="Results">
-                @{
-                    var index = 0;
-                    string? group = null;
-                }
-                @foreach (var item in _matches)
-                {
-                    @* The results stay grouped while nothing has been typed, so an empty palette
-                       reads as the table of contents it is. Once there is a term, the ranking is
-                       what matters and the group headings would only break it up. *@
-                    if (_term.Length == 0 && item.Category != group)
-                    {
-                        group = item.Category;
-                        <li class="palette-group" role="presentation">
-                            <Icon Path="@item.Icon" />
-                            @group
-                        </li>
-                    }
-
-                    var i = index++;
-                    <li class="palette-item @(i == _active ? "active" : null)"
-                        id="@ItemId(i)" role="option" aria-selected="@(i == _active)">
-                        <a href="@item.Url" tabindex="-1" @onclick="() => GoAsync(item)" @onclick:preventDefault>
-                            <span class="palette-title">@item.Title</span>
-                            <span class="palette-desc">@item.Description</span>
-                        </a>
-                    </li>
-                }
-            </ul>
-        }
-
-        <div class="palette-footer">
-            <span><span class="kbd">&uarr;</span><span class="kbd">&darr;</span> to move</span>
-            <span><span class="kbd">Enter</span> to open</span>
-            <span><span class="kbd">Esc</span> to close</span>
-        </div>
-    </div>
-}
-
-@code {
-    /// <summary>Whether the dialog is on screen. The layout owns it, because the header opens it.</summary>
-    [Parameter] public bool IsOpen { get; set; }
-
-    /// <summary>Raised when the palette closes itself - by Escape, by the backdrop or by a result.</summary>
-    [Parameter] public EventCallback OnClose { get; set; }
-
-    private string _term = "";
-    private int _active;
-    private bool _wasOpen;
-    private NavItem[] _matches = NavItem.Docs;
-    private DotNetObjectReference<CommandPalette>? _selfRef;
-
-    private static string ItemId(int index) => $"palette-item-{index}";
-
-    protected override async Task OnParametersSetAsync()
-    {
-        if (IsOpen == _wasOpen) return;
-
-        _wasOpen = IsOpen;
-
-        if (IsOpen)
-        {
-            // A palette that reopens holding the last search would show the reader results for a
-            // question they have already answered.
-            _term = "";
-            _active = 0;
-            _matches = NavItem.Docs;
-        }
-
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-            await JS.InvokeVoidAsync("bmdSetPaletteOpen", IsOpen, _selfRef);
-        }
-        catch
-        {
-            // Prerendering has no JS runtime, and the palette cannot be open there anyway: it is
-            // only ever opened from a click or a key, both of which need the runtime to have
-            // booted. Without the call the dialog still works from the pointer alone.
-        }
-    }
-
-    private void OnInput(ChangeEventArgs e)
-    {
-        _term = e.Value?.ToString()?.Trim() ?? "";
-        _matches = _term.Length == 0
-            ? NavItem.Docs
-            : [.. NavItem.Docs.Where(item => item.Matches(_term))];
-
-        // The selection always lands on the first result of the new set: keeping the old index
-        // would leave it pointing at whatever now happens to be in that position.
-        _active = 0;
-    }
-
-    /// <summary>
-    /// One of the four keys the dialog owns, forwarded by the listener in js/demo.js. Anything
-    /// else never reaches here and goes to the input, which is where typing belongs.
-    /// </summary>
-    [JSInvokable]
-    public async Task OnPaletteKey(string key)
-    {
-        switch (key)
-        {
-            case "down" when _matches.Length > 0:
-                _active = (_active + 1) % _matches.Length;
-                break;
-
-            case "up" when _matches.Length > 0:
-                _active = (_active - 1 + _matches.Length) % _matches.Length;
-                break;
-
-            case "enter" when _matches.Length > 0:
-                await GoAsync(_matches[_active]);
-                return;
-
-            case "close":
-                await CloseAsync();
-                return;
-
-            default:
-                return;
-        }
-
-        StateHasChanged();
-
-        try
-        {
-            // The selection can move past either end of the visible list, and a selection nobody
-            // can see is the same as no selection at all.
-            await JS.InvokeVoidAsync("bmdScrollPaletteActive");
-        }
-        catch
-        {
-            // Only the scroll is lost; the selection itself is still marked in the markup.
-        }
-    }
-
-    private async Task GoAsync(NavItem item)
-    {
-        await CloseAsync();
-        Nav.NavigateTo(item.Url);
-    }
-
-    private Task CloseAsync() => OnClose.InvokeAsync();
-
-    public async ValueTask DisposeAsync()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmdSetPaletteOpen", false, null);
-        }
-        catch
-        {
-            // Disposal races the page going away, and never has a JS runtime while prerendering;
-            // the listener it would remove dies with the document either way.
-        }
-
-        _selfRef?.Dispose();
-    }
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/DocBreadcrumb.razor b/src/Utilities/Bmage/Demo/Client/Shared/DocBreadcrumb.razor
deleted file mode 100644
index 771e1afd608..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/DocBreadcrumb.razor
+++ /dev/null
@@ -1,22 +0,0 @@
-@* Where in the docs the current page sits.
-
-   It earns its line only because the index is grouped: what it adds is the name of the group,
-   which is the one thing the page's own title cannot tell the reader. The group is not itself a
-   destination - there is no page listing one - so it is printed rather than linked, and only the
-   first crumb is somewhere to go. *@
-
-@if (Current is not null)
-{
-    <nav class="doc-breadcrumb" aria-label="Breadcrumb">
-        <a href="/getting-started">Docs</a>
-        <Icon Path="@Icons.ChevronRight" />
-        <span>@Current.Category</span>
-        <Icon Path="@Icons.ChevronRight" />
-        <span class="current" aria-current="page">@Current.Title</span>
-    </nav>
-}
-
-@code {
-    /// <summary>The page being shown, or null on a route that is not a demo page.</summary>
-    [Parameter] public NavItem? Current { get; set; }
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/DocPager.razor b/src/Utilities/Bmage/Demo/Client/Shared/DocPager.razor
deleted file mode 100644
index fdca0f67857..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/DocPager.razor
+++ /dev/null
@@ -1,47 +0,0 @@
-@* The pages either side of this one, at the foot of it.
-
-   The docs are written to be read in order - each page assumes the shape taught by the one before
-   it - so the end of a page should say what the next one is rather than sending the reader back
-   to the panel to work it out. Both entries come from NavItem, which is also what orders the
-   panel, so the two can never disagree about what "next" means. *@
-
-@if (_previous is not null || _next is not null)
-{
-    <nav class="doc-pager" aria-label="Page navigation">
-        @if (_previous is not null)
-        {
-            <a class="previous" href="@_previous.Url" rel="prev">
-                <span class="pager-dir">
-                    <Icon Path="@Icons.ArrowLeft" />
-                    Previous
-                </span>
-                <span class="pager-title">@_previous.Title</span>
-            </a>
-        }
-
-        @if (_next is not null)
-        {
-            @* The class, not the source order, puts this in the second column: a page with no
-               previous entry still has to leave the first column empty rather than sliding its
-               "next" into it, or the two ends of the sequence would point the same way. *@
-            <a class="next" href="@_next.Url" rel="next">
-                <span class="pager-dir">
-                    Next
-                    <Icon Path="@Icons.ArrowRight" />
-                </span>
-                <span class="pager-title">@_next.Title</span>
-            </a>
-        }
-    </nav>
-}
-
-@code {
-    /// <summary>The route being shown, relative to the app base and without its leading slash.</summary>
-    [Parameter] public string Href { get; set; } = "";
-
-    private NavItem? _previous;
-    private NavItem? _next;
-
-    protected override void OnParametersSet()
-        => (_previous, _next) = NavItem.Neighbours(Href);
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/Icons.cs b/src/Utilities/Bmage/Demo/Client/Shared/Icons.cs
index 9540de5fa52..f8da9155d42 100644
--- a/src/Utilities/Bmage/Demo/Client/Shared/Icons.cs
+++ b/src/Utilities/Bmage/Demo/Client/Shared/Icons.cs
@@ -1,104 +1,26 @@
 namespace Bit.Bmage.Demo.Client.Shared;
 
 /// <summary>
-/// The site's icon set: the inner markup of a 24×24 icon, without the <c>&lt;svg&gt;</c> element
-/// around it. <see cref="Icon"/> supplies that, along with the class the stylesheet paints them
-/// through.
+/// The icons the demo pages put on their buttons: the inner markup of a 24×24 icon, without the
+/// <c>&lt;svg&gt;</c> element around it. <see cref="Icon"/> supplies that, along with the class
+/// demo.css strokes them through.
 /// <para>
-/// They are drawn as strokes rather than filled outlines, at the weight Fluent's regular icons are
-/// drawn at, and they carry no colour of their own: <c>svg.icon</c> in app.css strokes them with
-/// <c>currentColor</c>, so an icon is the colour of whatever it sits inside and follows that thing
-/// through every theme, hover and disabled state without being re-authored.
-/// </para>
-/// <para>
-/// They live in C# rather than in a sprite or an icon font because the site is prerendered: markup
-/// that is part of the document costs no request, cannot arrive after the first paint, and cannot
-/// go missing behind a failed download - and an icon that fails to load in a header is a button
-/// with nothing in it.
+/// They carry no colour of their own: <c>svg.icon</c> is stroked with <c>currentColor</c>, so an
+/// icon is the colour of the button it sits in and follows it through every theme, hover and
+/// disabled state. The site's chrome draws its own icons (Layout/); these are the samples' only.
 /// </para>
 /// </summary>
 public static class Icons
 {
-    // ── Chrome ───────────────────────────────────────────────────────────────
-
-    public const string Search = """<circle cx="11" cy="11" r="7" /><path d="m16.2 16.2 4.3 4.3" />""";
-
-    public const string Menu = """<path d="M3.5 6.5h17M3.5 12h17M3.5 17.5h17" />""";
-
-    public const string Close = """<path d="m6 6 12 12M18 6 6 18" />""";
-
-    public const string Sun = """<circle cx="12" cy="12" r="4.25" /><path d="M12 2.75v2M12 19.25v2M2.75 12h2M19.25 12h2M5.4 5.4l1.4 1.4M17.2 17.2l1.4 1.4M18.6 5.4l-1.4 1.4M6.8 17.2l-1.4 1.4" />""";
-
-    public const string Moon = """<path d="M20.4 14.3A8.6 8.6 0 0 1 9.7 3.6 8.6 8.6 0 1 0 20.4 14.3Z" />""";
-
-    public const string ChevronRight = """<path d="m9.5 5.5 6.5 6.5-6.5 6.5" />""";
-
-    public const string ArrowRight = """<path d="M3.75 12h16.5m-6.25-6.25L20.25 12l-6.25 6.25" />""";
-
-    public const string ArrowLeft = """<path d="M20.25 12H3.75m6.25-6.25L3.75 12l6.25 6.25" />""";
-
-    public const string ArrowUp = """<path d="M12 20.25V3.75M5.75 10 12 3.75 18.25 10" />""";
-
-    public const string Copy = """<rect x="9" y="9" width="11.25" height="11.25" rx="2.25" /><path d="M5.25 15H4.5a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5v.75" />""";
-
-    public const string Check = """<path d="m4.75 12.5 4.75 4.75L19.25 6.5" />""";
-
-    public const string Link = """<path d="M10 14a4.25 4.25 0 0 0 6 0l2.75-2.75a4.25 4.25 0 0 0-6-6L11.5 6.5" /><path d="M14 10a4.25 4.25 0 0 0-6 0L5.25 12.75a4.25 4.25 0 0 0 6 6L12.5 17.5" />""";
-
+    /// <summary>Run a sample.</summary>
     public const string Play = """<path d="M7.75 4.75 19 12 7.75 19.25Z" />""";
 
+    /// <summary>Save a result to a file.</summary>
     public const string Download = """<path d="M12 3.75v11.5m-4.75-4.5L12 15.5l4.75-4.75" /><path d="M4.25 16.5v1.75a2 2 0 0 0 2 2h11.5a2 2 0 0 0 2-2V16.5" />""";
 
-    // ── Capabilities ─────────────────────────────────────────────────────────
-
-    /// <summary>An image: the frame, the sun and the hill every photo icon is drawn with.</summary>
-    public const string Image = """<rect x="3.25" y="4.25" width="17.5" height="15.5" rx="2.25" /><circle cx="8.75" cy="9.5" r="1.75" /><path d="m20.75 15.5-5-5-10.5 9.25" />""";
-
-    /// <summary>Cropping: two corner brackets crossing.</summary>
-    public const string Crop = """<path d="M6.75 2.75v13.5a1 1 0 0 0 1 1h13.5" /><path d="M2.75 6.75h13.5a1 1 0 0 1 1 1v13.5" />""";
-
-    /// <summary>Adjustments: a mixer's sliders.</summary>
-    public const string Sliders = """<path d="M3.5 7.5h9M16.5 7.5h4M3.5 16.5h3.5M11 16.5h9.5" /><circle cx="14.5" cy="7.5" r="2.25" /><circle cx="9" cy="16.5" r="2.25" />""";
-
-    /// <summary>Annotation: a pen drawing a line.</summary>
-    public const string Pen = """<path d="m14.75 5.25 4 4L8.5 19.5H4.5v-4Z" /><path d="m12.5 7.5 4 4" />""";
-
-    /// <summary>A pipeline: steps joined in order.</summary>
-    public const string Pipeline = """<rect x="2.75" y="9" width="5" height="6" rx="1.25" /><rect x="9.5" y="9" width="5" height="6" rx="1.25" /><rect x="16.25" y="9" width="5" height="6" rx="1.25" /><path d="M7.75 12h1.75M14.5 12h1.75" />""";
-
-    /// <summary>Privacy: a shield.</summary>
-    public const string Shield = """<path d="M12 3.25 19.25 6v5.5c0 4.5-3 7.75-7.25 9.25-4.25-1.5-7.25-4.75-7.25-9.25V6Z" /><path d="m9 12 2.25 2.25L15.25 10" />""";
-
-    /// <summary>Performance: a gauge.</summary>
+    /// <summary>Measure: a gauge.</summary>
     public const string Gauge = """<path d="M4.25 17.5a8.25 8.25 0 1 1 15.5 0" /><path d="m12 13.5 4-4.25" /><circle cx="12" cy="13.5" r="1.25" />""";
 
-    /// <summary>Batches: a stack of images.</summary>
-    public const string Stack = """<rect x="6.75" y="6.75" width="14" height="13.5" rx="2" /><path d="M3.25 15.75V5.25a2 2 0 0 1 2-2h10.5" /><path d="m20.75 16.25-4-4-7 6.75" />""";
-
-    /// <summary>Code without a UI: angle brackets.</summary>
-    public const string Code = """<path d="m8.25 7.25-5 4.75 5 4.75M15.75 7.25l5 4.75-5 4.75M13.5 4.75l-3 14.5" />""";
-
-    /// <summary>Capabilities: a chip being probed.</summary>
-    public const string Chip = """<rect x="6.25" y="6.25" width="11.5" height="11.5" rx="1.75" /><path d="M9.5 3v3.25M14.5 3v3.25M9.5 17.75V21M14.5 17.75V21M3 9.5h3.25M3 14.5h3.25M17.75 9.5H21M17.75 14.5H21" />""";
-
-    /// <summary>A profile picture.</summary>
-    public const string Person = """<circle cx="12" cy="8.5" r="3.75" /><path d="M4.75 20a7.25 7.25 0 0 1 14.5 0" />""";
-
-    /// <summary>A product label.</summary>
-    public const string Tag = """<path d="M3.25 12.5V4.25a1 1 0 0 1 1-1h8.25l8.25 8.25-9.25 9.25Z" /><circle cx="8" cy="8" r="1.5" />""";
-
-    /// <summary>A post, shared.</summary>
-    public const string Share = """<circle cx="17.5" cy="5.75" r="2.5" /><circle cx="6.5" cy="12" r="2.5" /><circle cx="17.5" cy="18.25" r="2.5" /><path d="m8.75 10.75 6.5-3.75M8.75 13.25l6.5 3.75" />""";
-
-    /// <summary>Hosting: a server and a window.</summary>
-    public const string Server = """<rect x="3.25" y="3.75" width="17.5" height="7" rx="1.75" /><rect x="3.25" y="13.25" width="17.5" height="7" rx="1.75" /><path d="M7 7.25h.01M7 16.75h.01" />""";
-
-    /// <summary>File formats: a document with a folded corner.</summary>
-    public const string File = """<path d="M13.75 3.25H6.5a1.75 1.75 0 0 0-1.75 1.75v14a1.75 1.75 0 0 0 1.75 1.75h11a1.75 1.75 0 0 0 1.75-1.75V8.75Z" /><path d="M13.75 3.25v5.5h5.5" />""";
-
-    /// <summary>Documentation.</summary>
-    public const string Book = """<path d="M4 5.75A2.5 2.5 0 0 1 6.5 3.25h13.25V18H6.5A2.5 2.5 0 0 0 4 20.5Z" /><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18h13.25v2.75H6.5A2.5 2.5 0 0 1 4 20.5Z" />""";
-
-    /// <summary>Anything new, and anything generated.</summary>
-    public const string Sparkle = """<path d="m11 3.5 1.9 5.6 5.6 1.9-5.6 1.9-1.9 5.6-1.9-5.6-5.6-1.9 5.6-1.9Z" /><path d="M18 15.5v4M20 17.5h-4" />""";
+    /// <summary>Search.</summary>
+    public const string Search = """<circle cx="11" cy="11" r="7" /><path d="m16.2 16.2 4.3 4.3" />""";
 }
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/NavItem.cs b/src/Utilities/Bmage/Demo/Client/Shared/NavItem.cs
deleted file mode 100644
index be1d24e1d3d..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/NavItem.cs
+++ /dev/null
@@ -1,178 +0,0 @@
-namespace Bit.Bmage.Demo.Client.Shared;
-
-/// <summary>
-/// One entry of the docs navigation. The list itself is <see cref="All"/>, and it is the site's
-/// single index: the nav panel groups it, the command palette searches it, the landing page prints
-/// it, the breadcrumb reads a page's category out of it and the pager walks it in order. A page
-/// therefore appears everywhere by having an entry here, and the five of them can never disagree
-/// about what the site contains.
-/// <para>
-/// It is also where the demo's MCP server gets the description, keywords and route it reports for a
-/// demo page in <c>GetBmageSourceFiles</c>, which is why each entry carries them alongside the file
-/// it is implemented in. A page therefore describes itself once, and the site's search, the nav
-/// panel and an AI agent looking for a worked example all read the same words.
-/// </para>
-/// </summary>
-/// <param name="Title">The label shown in the nav panel.</param>
-/// <param name="Href">The route, relative to the app base. Empty for the landing page.</param>
-/// <param name="Category">The group this page is filed under; see <see cref="Groups"/>.</param>
-/// <param name="Description">What the page demonstrates, in one sentence.</param>
-/// <param name="Keywords">Space-separated terms the page covers, for search and the MCP index.</param>
-/// <param name="Source">The page's file name under Client/Pages, for GetBmageSourceFile.</param>
-public sealed record NavItem(
-    string Title,
-    string Href,
-    string Category,
-    string Description,
-    string Keywords,
-    string Source)
-{
-    /// <summary>The path the MCP server hands this page's source out under.</summary>
-    public string SourcePath => $"Demo/Client/Pages/{Source}";
-
-    /// <summary>The route as a link target, which for the landing page is the app root.</summary>
-    public string Url => Href.Length == 0 ? "/" : $"/{Href}";
-
-    /// <summary>The icon the palette and the landing page show beside this page's group.</summary>
-    public string Icon => CategoryIcon(Category);
-
-    // The group names, written out once so a typo in an entry below cannot silently invent a new
-    // group, and in the order the docs are meant to be read.
-    private const string GettingStarted = "Getting started";
-    private const string Fundamentals = "Fundamentals";
-    private const string Workflows = "Workflows";
-    private const string Components = "Components and APIs";
-    private const string Guides = "Guides";
-
-    /// <summary>Every demo page, in the order they are meant to be read.</summary>
-    public static readonly NavItem[] All =
-    [
-        new("Home", "", GettingStarted,
-            "The landing page: what Bmage is, and the workflow tiles that link into the rest of the site.",
-            "home landing overview introduction start",
-            "Home.razor"),
-        new("Getting started", "getting-started", GettingStarted,
-            "Install the package, register the services, add the editor stylesheet and process your first image.",
-            "install package nuget dotnet add register services addbitbmageservices stylesheet first image dispose object url",
-            "GettingStarted.razor"),
-        new("Hosting models", "hosting", GettingStarted,
-            "Setting Bmage up in a Blazor Web App and in standalone WebAssembly, prerendering, Interactive Server, AOT and server-side use.",
-            "hosting blazor web app standalone webassembly wasm server auto prerender prerendering aot runaotcompilation render mode program.cs index.html app.razor",
-            "Hosting.razor"),
-        new("Pipelines", "pipelines", Fundamentals,
-            "Immutable, composable lists of operations: geometry, resize modes, filters, smart cropping, the optimiser and execution options.",
-            "pipeline imagepipeline resize crop cover maxsize fit contain rotate flip smartcrop sharpen blur adjust optimiser optimize execute progress cancellation forscale",
-            "Pipelines.razor"),
-        new("Formats", "formats", Fundamentals,
-            "What decodes and encodes where, probing instead of assuming, fallbacks, size budgets, transparency and format detection.",
-            "format webp avif jpeg png bmp gif svg encode decode fallback quality maxfilesize budget transparency background detect identify",
-            "Formats.razor"),
-        new("Capabilities", "capabilities", Fundamentals,
-            "What this browser can actually decode, encode and render, probed live rather than guessed from a user agent.",
-            "capabilities probe browser canvas limit offscreencanvas webcodecs clipboard camera simd threads device pixel ratio environment",
-            "Capabilities.razor"),
-        new("Metadata and privacy", "metadata", Fundamentals,
-            "EXIF, GPS and the three metadata policies, reading and writing tags, and orientation - with a live inspector for your own photos.",
-            "metadata privacy exif gps location strip remove preserve stripsensitive orientation autoorient xmp icc camera",
-            "Metadata.razor"),
-        new("Avatar editor", "avatar", Workflows,
-            "Crop to a square or circle around the subject, resize, and compress to a byte budget with a WebP to JPEG fallback.",
-            "avatar profile picture circle square smart crop subject size budget webp fallback dominant colours",
-            "Avatar.razor"),
-        new("Screenshot annotation", "annotate", Workflows,
-            "Paste a screenshot, add arrows, numbered steps and text, then redact the parts that must not be shared.",
-            "screenshot annotate paste clipboard arrow step highlight redact redaction blur pixelate bug report",
-            "Annotate.razor"),
-        new("Upload optimisation", "optimize", Workflows,
-            "Cap dimensions, re-encode to a modern format, strip metadata, and see exactly how many bytes that saved.",
-            "optimise optimize upload compress shrink reencode webp quality bytes saved maxsize",
-            "Optimize.razor"),
-        new("Product images", "product", Workflows,
-            "Every size a catalogue needs from one upload, on a consistent background, without ever cropping the product.",
-            "product ecommerce catalogue sizes variants background padding contain thumbnails",
-            "Product.razor"),
-        new("Social images", "social", Workflows,
-            "Compose to a platform's exact canvas, apply a look, and burn in a caption with the browser's text engine.",
-            "social instagram story open graph caption text filter look vignette warmth canvas compose",
-            "Social.razor"),
-        new("Batch processing", "batch", Workflows,
-            "One pipeline over many files with bounded concurrency, live progress, cancellation and a per-file outcome.",
-            "batch bulk concurrency progress cancellation errors processbatchasync many files",
-            "Batch.razor"),
-        new("The editor", "editor", Components,
-            "The complete BmageEditor component: crop, adjust, filter, draw, annotate, undo and export - themed, localised and right-to-left.",
-            "editor bmageeditor component crop adjust filter draw annotate layers history undo redo theme localisation rtl strings toolbar panel keyboard",
-            "Editor.razor"),
-        new("Headless API", "headless", Components,
-            "The same engine with no components at all: thumbnails, crops, grading, drawing with ImageCanvas, and server-side use.",
-            "headless api no ui server console imagecanvas drawing thumbnail exif placeholder statistics addbitbmageheadlessservices",
-            "Headless.razor"),
-        new("Performance", "performance", Guides,
-            "Measured numbers, why WebAssembly needs AOT for pixel work, and how to keep pipelines fast - with a benchmark for this browser.",
-            "performance speed aot interpreter benchmark fast slow memory pooling fused resize box prepass",
-            "Performance.razor"),
-        new("MCP server", "mcp-server", Guides,
-            "The demo's Model Context Protocol server: the tools, prompts and resources that let an AI agent write correct Bmage code - tried live.",
-            "mcp model context protocol ai agent llm tools prompts resources claude cursor copilot vs code server integration review measure",
-            "McpServerPage.razor"),
-    ];
-
-    /// <summary>
-    /// The pages a reader navigates between: everything in <see cref="All"/> except the landing
-    /// page, which is not a document and is reached from the header instead.
-    /// </summary>
-    public static readonly NavItem[] Docs = [.. All.Where(item => item.Href.Length > 0)];
-
-    /// <summary>
-    /// <see cref="Docs"/> in groups, in reading order. Both the order of the groups and the order
-    /// within them come from the order of <see cref="All"/>, so re-filing a page is a one-line
-    /// edit above and nothing here has to be kept in step with it.
-    /// </summary>
-    public static readonly (string Category, string Icon, NavItem[] Items)[] Groups =
-    [
-        .. Docs.GroupBy(item => item.Category)
-               .Select(group => (group.Key, CategoryIcon(group.Key), group.ToArray()))
-    ];
-
-    /// <summary>The entry for a route, or null when the route is not a demo page.</summary>
-    public static NavItem? ByHref(string href)
-        => Array.Find(All, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase));
-
-    /// <summary>
-    /// The pages either side of <paramref name="href"/> in reading order, for the pager at the
-    /// foot of every page. Both are null for a route that is not a demo page - the error and
-    /// not-found pages, which are not part of the sequence and have nowhere to go next.
-    /// </summary>
-    public static (NavItem? Previous, NavItem? Next) Neighbours(string href)
-    {
-        var index = Array.FindIndex(Docs, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase));
-        if (index < 0) return (null, null);
-
-        return (index > 0 ? Docs[index - 1] : null,
-                index < Docs.Length - 1 ? Docs[index + 1] : null);
-    }
-
-    /// <summary>
-    /// Whether this page answers to <paramref name="term"/>. Keywords are matched as well as the
-    /// title and the category: a reader searching for "exif" or "webp" is naming the feature, not
-    /// the page it happens to live on, and every entry carries the terms it covers.
-    /// </summary>
-    public bool Matches(string term)
-        => Title.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Category.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Keywords.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Description.Contains(term, StringComparison.OrdinalIgnoreCase);
-
-    // The one place a group is tied to a picture. Kept as a switch rather than as a field on the
-    // record so the entries above stay a list of prose, and so two pages in the same group cannot
-    // be given two different icons.
-    private static string CategoryIcon(string category) => category switch
-    {
-        GettingStarted => Icons.Play,
-        Fundamentals => Icons.Pipeline,
-        Workflows => Icons.Image,
-        Components => Icons.Code,
-        Guides => Icons.Book,
-        _ => Icons.Book,
-    };
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/NotFoundContent.razor b/src/Utilities/Bmage/Demo/Client/Shared/NotFoundContent.razor
deleted file mode 100644
index f5e869f0b52..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/NotFoundContent.razor
+++ /dev/null
@@ -1,21 +0,0 @@
-@* Rendered by NotFoundPage, which covers both a deep link the server could not route and
-   client-side navigation to an unknown route (via the router's NotFoundPage parameter). *@
-
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">404</span>
-
-    <h1>This page does not exist</h1>
-
-    <p>
-        There is nothing at this address. The documentation starts at getting started, and the search
-        in the header will find any page by name or by the feature it covers.
-    </p>
-
-    <div class="hero-actions">
-        <a class="btn-primary" href="/getting-started">
-            Read the docs
-            <Icon Path="@Icons.ArrowRight" />
-        </a>
-        <a class="btn-secondary" href="/">Back to home</a>
-    </div>
-</div>
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/SideRail.razor b/src/Utilities/Bmage/Demo/Client/Shared/SideRail.razor
deleted file mode 100644
index 223ba71d490..00000000000
--- a/src/Utilities/Bmage/Demo/Client/Shared/SideRail.razor
+++ /dev/null
@@ -1,119 +0,0 @@
-@inject IJSRuntime JS
-@inject NavigationManager Nav
-@implements IAsyncDisposable
-
-@* The "on this page" rail. It is built from the section headings found in the rendered page rather
-   than from a list each page has to maintain, so a page gets its entries by having sections. That
-   makes it empty until after the first render; the <nav> is rendered regardless to hold the column
-   open - dropping it would let the content column stretch and then snap back a frame later - but
-   its label and entries only appear once there is something to label. *@
-
-<nav class="side-rail" aria-label="On this page">
-    @if (_items.Length > 0)
-    {
-        <p class="side-rail-title">On this page</p>
-        <ul class="side-rail-list">
-            @foreach (var item in _items)
-            {
-                var isActive = item.Id == _activeId;
-                <li class="@(isActive ? "active" : null)">
-                    <a href="@($"#{item.Id}")" aria-current="@(isActive ? "location" : null)"
-                       @onclick="() => ScrollTo(item.Id)" @onclick:preventDefault>
-                        @item.Title
-                    </a>
-                </li>
-            }
-        </ul>
-    }
-</nav>
-
-@code {
-    /// <summary>One rail entry: the id of the heading it points at and the text shown for it.</summary>
-    public sealed record RailItem(string Id, string Title);
-
-    private RailItem[] _items = [];
-    private string? _activeId;
-    private bool _needsRefresh = true;
-    private DotNetObjectReference<SideRail>? _selfRef;
-
-    protected override void OnInitialized() => Nav.LocationChanged += OnLocationChanged;
-
-    // The headings of the page just navigated away from are gone, so the rail is emptied here and
-    // rebuilt from the new page's markup on the render that follows.
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        _items = [];
-        _activeId = null;
-        _needsRefresh = true;
-        StateHasChanged();
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (_needsRefresh is false) return;
-
-        _needsRefresh = false;
-
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-
-            // The heading anchors are hung by the same pass that collects the rail's entries, so
-            // the icon has to travel out to it. Handing it over keeps Shared/Icons.cs the one
-            // place the site's icons are drawn, rather than leaving a second copy of the path
-            // data in a script that nothing would ever update alongside it.
-            var items = await JS.InvokeAsync<RailItem[]>("bmdCollectSections", Icons.Link);
-            if (items.Length == 0) return;
-
-            _items = items;
-            await JS.InvokeVoidAsync("bmdObserveSections", _selfRef, items.Select(i => i.Id));
-            StateHasChanged();
-        }
-        catch
-        {
-            // Prerendering has no DOM to read and no JS runtime to read it with, and a browser that
-            // failed to load the script has nothing to collect either. The rail is a shortcut to
-            // content that is already on the page, so in both cases it simply stays empty.
-        }
-    }
-
-    /// <summary>Called by the scroll spy in demo.js as the reader moves between sections.</summary>
-    [JSInvokable]
-    public void SetActiveSection(string? id)
-    {
-        if (_activeId == id) return;
-
-        _activeId = id;
-        StateHasChanged();
-    }
-
-    private async Task ScrollTo(string id)
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmdScrollToSection", id);
-        }
-        catch
-        {
-            // The entries are real anchors, so the browser's own fragment navigation remains as the
-            // fallback; only the smooth scroll and the header offset are lost.
-        }
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        Nav.LocationChanged -= OnLocationChanged;
-
-        try
-        {
-            await JS.InvokeVoidAsync("bmdDisposeSections");
-        }
-        catch
-        {
-            // Disposal races the circuit going away (and never has a JS runtime while prerendering);
-            // the listener it would remove dies with the page either way.
-        }
-
-        _selfRef?.Dispose();
-    }
-}
diff --git a/src/Utilities/Bmage/Demo/Client/Shared/SyntaxHighlighter.cs b/src/Utilities/Bmage/Demo/Client/Shared/SyntaxHighlighter.cs
index e792ccd0b48..dff150ef463 100644
--- a/src/Utilities/Bmage/Demo/Client/Shared/SyntaxHighlighter.cs
+++ b/src/Utilities/Bmage/Demo/Client/Shared/SyntaxHighlighter.cs
@@ -7,7 +7,9 @@ namespace Bit.Bmage.Demo.Client.Shared;
 /// Produces HTML with <c>&lt;span class="tok-*"&gt;</c> token wrappers (already HTML-encoded)
 /// and wraps the lines that belong to a Bmage component tag (<c>&lt;BmageEditor&gt;</c>,
 /// <c>&lt;BmageDropZone&gt;</c>) in a <c>hl-line</c> span so they stand out among the surrounding
-/// markup. Razor and XML are lexed as markup, C# as C# from the first character, and anything else
+/// markup. The lines are joined with real newlines, so the text of the rendered block - which is
+/// what the copy button site.js adds to every <c>pre.bb-code</c> puts on the clipboard - is the
+/// source as written. The token colours are in wwwroot/demo.css. Razor and XML are lexed as markup, C# as C# from the first character, and anything else
 /// (a shell command, CSS, JSON) is encoded and shown as written.
 /// It is intentionally pragmatic - it covers the constructs used by the demo snippets rather
 /// than being a fully spec-compliant Razor lexer.
@@ -79,15 +81,12 @@ private string Render()
             for (int k = 0; k < lines.Count; k++)
             {
                 var ln = lines[k];
-                // Each line is rendered as its own block-level span. Empty lines get a
-                // zero-width space so they keep their height. Newlines are intentionally
-                // NOT emitted: the block layout provides the line breaks, and a literal
-                // '\n' next to a display:block span would render as an extra blank line.
-                var cls = ln.Hl ? "code-line hl-line" : "code-line";
-                outSb.Append("<span class=\"").Append(cls).Append("\">");
-                if (ln.Sb.Length == 0) outSb.Append("\u200b");
+                // A plain newline between lines rather than a block per line: the block is a <pre>,
+                // so the newline is the line break, and it survives into the copied text. Only a
+                // line that belongs to a Bmage component tag gets a wrapper, to tint it.
+                if (k > 0) outSb.Append('\n');
+                if (ln.Hl) outSb.Append("<span class=\"hl-line\">").Append(ln.Sb).Append("</span>");
                 else outSb.Append(ln.Sb);
-                outSb.Append("</span>");
             }
             return outSb.ToString();
         }
diff --git a/src/Utilities/Bmage/Demo/Server/Components/App.razor b/src/Utilities/Bmage/Demo/Server/Components/App.razor
index 461326ef985..6af459a1be0 100644
--- a/src/Utilities/Bmage/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bmage/Demo/Server/Components/App.razor
@@ -2,19 +2,14 @@
 <html lang="en">
 
 <head>
-    <base href="/" />
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#FFFFFF" />
+    <base href="/" />
     @* No static <title> here: every page supplies its own through <PageTitle>, and with
        prerendering the HeadOutlet emits a real <title> element into this head. A second,
        earlier one would win in the served HTML (browsers and crawlers take the first). *@
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Bit.Bmage - browser-side image processing for Blazor: load, crop, resize, adjust, annotate, redact and export images on the user's device from strongly typed C#, with an editor component and a headless API." />
-    <meta name="color-scheme" content="light dark" />
-    @* Painted behind the browser's own chrome on the platforms that colour it. Two declarations,
-       one per scheme, so the bar matches the theme the page is actually in - the values are the
-       --bmd-clr-bg-1 of each theme in theme.css, which a meta tag cannot read a variable for. *@
-    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#1F1F1F" media="(prefers-color-scheme: dark)" />
 
     @* What a link to the site looks like when it is shared. *@
     <meta property="og:type" content="website" />
@@ -23,34 +18,23 @@
     <meta property="og:description" content="Crop, resize, adjust, annotate, redact and export images in the browser from C#. No server round trips, no base64, no JavaScript image library." />
     <meta name="twitter:card" content="summary" />
 
+    <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles, which also point the editor's --bmg-* custom properties at the site's
+       theme so the editor follows the header's light/dark switch. *@
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* The editor component's own stylesheet. It is the one thing the editor asks of its host, and
+       only a host that uses the editor links it; the browser bridge script (bit-bmage.js) is
+       imported on demand by the library and needs no tag of its own. *@
+    <link rel="stylesheet" href="@Assets["_content/Bit.Bmage/bit-bmage-editor.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Bmage.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
+    <ImportMap />
     <link rel="icon" href="favicon.ico" type="image/x-icon" />
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
-    <link rel="stylesheet" href="css/theme.css" />
-    <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="css/bmage-samples.css" />
-    @* The editor component's own stylesheet. It is the one thing the editor asks of its host,
-       and only a host that uses the editor links it; the browser bridge script (bit-bmage.js) is imported on demand by the library and
-       needs no tag of its own. editor-theme.css comes after it on purpose: it points the editor's
-       --bmg-* custom properties at this site's theme, so the editor follows the header's theme
-       switch instead of the operating system's. *@
-    <link rel="stylesheet" href="_content/Bit.Bmage/bit-bmage-editor.css" />
-    <link rel="stylesheet" href="css/editor-theme.css" />
-
-    @* The theme is applied here, in the head, rather than from js/demo.js at the end of the body:
-       the stylesheets key off the data-theme attribute, and setting it after the first paint would
-       show the reader a flash of the other theme. This is the same decision js/demo.js makes for
-       the app's lifetime - see window.bmdTheme there - kept short enough to inline. *@
-    <script>
-        (function () {
-            var stored = null;
-            try { stored = localStorage.getItem('bmd-theme'); } catch (e) { /* no stored preference */ }
-            var theme = (stored === 'light' || stored === 'dark')
-                ? stored
-                : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-            document.documentElement.setAttribute('data-theme', theme);
-        })();
-    </script>
-
     @* Same render mode as the app itself, so <PageTitle> keeps working after hydration. *@
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
 </head>
@@ -59,19 +43,15 @@
     @* Prerendered on the server, then hydrated by the WebAssembly runtime. Bmage's image work is
        C# running on the user's device, so none of it can happen during the prerender pass: every
        page is readable straight from the served HTML, and its drop zones, sliders and editors come
-       alive once the runtime is interactive. See Layout/MainLayout.razor for the
-       RendererInfo-driven hydration hint. *@
+       alive once the runtime is interactive - Layout/MainLayout.razor's data-interactive says when. *@
     <Routes @rendermode="InteractiveWebAssembly" />
-
-    <div id="blazor-error-ui">
+    <div id="blazor-error-ui" data-nosnippet>
         An unhandled error has occurred.
         <a href="." class="reload">Reload</a>
-        <span class="dismiss">🗙</span>
+        <span class="dismiss">&#128473;</span>
     </div>
-
-    @* Loaded before the Blazor script so the window.bmd* helpers exist by the time the app boots. *@
-    <script src="js/demo.js"></script>
-    <script src="_framework/blazor.web.js"></script>
+    <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bmage/Demo/Server/Controllers/McpController.cs b/src/Utilities/Bmage/Demo/Server/Controllers/McpController.cs
index f130303a71b..7f0aa2d47e0 100644
--- a/src/Utilities/Bmage/Demo/Server/Controllers/McpController.cs
+++ b/src/Utilities/Bmage/Demo/Server/Controllers/McpController.cs
@@ -261,9 +261,9 @@ public BmageApiDetailsResultDto GetBmageApiDetails(
     [HttpGet]
     [McpServerTool(Name = nameof(GetBmageSourceFiles), Title = "List the demo source files",
                    ReadOnly = true, Destructive = false, Idempotent = true, OpenWorld = false)]
-    [Description("Lists the working Bit.Bmage source files this server can hand out: every page of the demo site - one per feature, each a complete working example (avatar, upload optimisation, screenshot annotation, batch, the editor, headless use, metadata, formats, pipelines) - plus the layout, the shared components and the host wiring. Demo pages carry the route they are served at and the terms they cover. Use it to pick the path to pass to GetBmageSourceFile.")]
+    [Description("Lists the working Bit.Bmage source files this server can hand out: every page of the demo site - one per feature, each a complete working example (avatar, upload optimisation, screenshot annotation, batch, the editor, headless use, metadata, formats, pipelines) - plus the shared components, the documentation site's own shell and the host wiring. Demo pages carry the route they are served at and the terms they cover. Use it to pick the path to pass to GetBmageSourceFile.")]
     public BmageSourceFileDto[] GetBmageSourceFiles(
-        [Description("Optional. 'Demo page' for only the feature pages, 'Host' for the server wiring, 'Demo' for the layout and shared components, or any substring of a path, a title or a page's keywords. Omitted, every file is returned.")] string? filter = null)
+        [Description("Optional. 'Demo page' for only the feature pages, 'Host' for the server wiring, 'Demo' for the shared components and the site's page catalog, 'Site chrome' for the documentation site's header, nav, search palette and footer, or any substring of a path, a title or a page's keywords. Omitted, every file is returned.")] string? filter = null)
     {
         var files = BmageSourceCatalog.SourceFiles;
 
diff --git a/src/Utilities/Bmage/Demo/Server/Dtos/BmageMcpDtos.cs b/src/Utilities/Bmage/Demo/Server/Dtos/BmageMcpDtos.cs
index 77d27fcf7f0..0a1b7ae4f6a 100644
--- a/src/Utilities/Bmage/Demo/Server/Dtos/BmageMcpDtos.cs
+++ b/src/Utilities/Bmage/Demo/Server/Dtos/BmageMcpDtos.cs
@@ -190,7 +190,7 @@ public record BmageSourceFileDto
     /// <summary>The path to pass to GetBmageSourceFile.</summary>
     public required string Path { get; init; }
 
-    /// <summary>"Demo page", "Demo" or "Host".</summary>
+    /// <summary>"Demo page", "Demo", "Host" or "Site chrome" (the documentation site's own shell, under Demo/Client/Layout/).</summary>
     public required string Kind { get; init; }
 
     /// <summary>What the file is. For a demo page, what the page demonstrates.</summary>
@@ -198,12 +198,12 @@ public record BmageSourceFileDto
 
     public required int Lines { get; init; }
 
-    /// <summary>The demo page's title, e.g. "Avatar editor". Null for a file that is not a demo page.</summary>
+    /// <summary>The demo page's title, e.g. "Avatar editor". Null for a file that is not a documentation page.</summary>
     public string? Title { get; init; }
 
     /// <summary>
-    /// The route the demo page is served at, e.g. "avatar" - empty for the landing page, null for a
-    /// file that is not a demo page.
+    /// The route the demo page is served at, e.g. "avatar" - null for a file that is not a
+    /// documentation page (the landing page included).
     /// </summary>
     public string? Slug { get; init; }
 
diff --git a/src/Utilities/Bmage/Demo/Server/Services/BmageSearchIndex.cs b/src/Utilities/Bmage/Demo/Server/Services/BmageSearchIndex.cs
index 7850e9bba6e..c34e408a930 100644
--- a/src/Utilities/Bmage/Demo/Server/Services/BmageSearchIndex.cs
+++ b/src/Utilities/Bmage/Demo/Server/Services/BmageSearchIndex.cs
@@ -1,6 +1,6 @@
 using System.Text;
 using Bit.Bmage.Demo.Server.Dtos;
-using Bit.Bmage.Demo.Client.Shared;
+using Bit.Bmage.Demo.Client;
 
 namespace Bit.Bmage.Demo.Server.Services;
 
@@ -285,13 +285,15 @@ private static Entry[] Build()
             }
         }
 
-        foreach (var page in NavItem.All)
+        foreach (var page in DocsCatalog.AllPages)
         {
             entries.Add(new Entry("Demo page", page.Title, "Live example",
-                $"GetBmageSourceFile(path: \"{page.SourcePath}\")", page.Description, page.Keywords));
+                $"GetBmageSourceFile(path: \"{BmageSourceCatalog.SourcePathOf(page)}\")", page.Description, page.Keywords));
         }
 
-        foreach (var file in BmageSourceCatalog.SourceFiles)
+        // The site's own shell is not an example of anything an agent would write with Bit.Bmage;
+        // a search for "palette" or "header" should not hand it back as one.
+        foreach (var file in BmageSourceCatalog.SourceFiles.Where(file => file.Kind != BmageSourceCatalog.SiteChromeKind))
         {
             entries.Add(new Entry("Source file", file.Path, file.Kind,
                 $"GetBmageSourceFile(path: \"{file.Path}\")", file.Description ?? string.Empty, string.Empty));
diff --git a/src/Utilities/Bmage/Demo/Server/Services/BmageSourceCatalog.cs b/src/Utilities/Bmage/Demo/Server/Services/BmageSourceCatalog.cs
index 24d749f8733..dfe6b875cf3 100644
--- a/src/Utilities/Bmage/Demo/Server/Services/BmageSourceCatalog.cs
+++ b/src/Utilities/Bmage/Demo/Server/Services/BmageSourceCatalog.cs
@@ -2,7 +2,7 @@
 using System.Reflection;
 using System.Collections.Frozen;
 using Bit.Bmage.Demo.Server.Dtos;
-using Bit.Bmage.Demo.Client.Shared;
+using Bit.Bmage.Demo.Client;
 using System.Text.RegularExpressions;
 
 namespace Bit.Bmage.Demo.Server.Services;
@@ -41,6 +41,29 @@ public static partial class BmageSourceCatalog
     /// <summary>Every embedded source file, described.</summary>
     public static BmageSourceFileDto[] SourceFiles => _sourceFileList.Value;
 
+    /// <summary>
+    /// The <see cref="BmageSourceFileDto.Kind"/> of the documentation site's own shell - the header,
+    /// the nav panel, the search palette and the footer under Demo/Client/Layout/. They are embedded
+    /// with the rest of the client, but they are the site rather than a worked example of Bit.Bmage,
+    /// so the search index leaves them out.
+    /// </summary>
+    public const string SiteChromeKind = "Site chrome";
+
+    /// <summary>
+    /// The embedded path of a documentation page's source, e.g. <c>Demo/Client/Pages/Avatar.razor</c>
+    /// for the page at <c>/avatar</c>. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the page type's namespace past the client's root, one folder a
+    /// segment - the same derivation the "Edit this page on GitHub" link under every page uses.
+    /// </summary>
+    public static string SourcePathOf(DocsPageInfo page)
+    {
+        var root = typeof(DocsCatalog).Namespace!;
+        var name = page.PageType.FullName!;
+        var relative = name.StartsWith(root + ".", StringComparison.Ordinal) ? name[(root.Length + 1)..] : page.PageType.Name;
+
+        return $"Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+
     /// <summary>
     /// The order docs/README.md lists the guides in, which is the order they are meant to be read.
     /// A document that is not in it is listed after these rather than left out.
@@ -288,10 +311,11 @@ private static FrozenDictionary<string, string> BuildSourceFiles()
 
     private static BmageSourceFileDto[] BuildSourceFileList()
     {
-        // A demo page describes itself in the navigation, in a sentence written to say what the page
-        // demonstrates. Scraping the file for a description instead reaches whatever comment comes
-        // first, which for a page is usually a note about prerendering, not what the page is for.
-        var pages = NavItem.All.ToDictionary(page => Normalize(page.SourcePath), StringComparer.OrdinalIgnoreCase);
+        // A demo page describes itself in the site's catalog (Demo/Client/DocsCatalog.cs), in a
+        // sentence written to say what the page demonstrates. Scraping the file for a description
+        // instead reaches whatever comment comes first, which for a page is usually a note about
+        // prerendering, not what the page is for.
+        var pages = DocsCatalog.AllPages.ToDictionary(page => Normalize(SourcePathOf(page)), StringComparer.OrdinalIgnoreCase);
 
         return [.. _sourceFiles.Value
             .Select(file =>
@@ -303,11 +327,12 @@ private static BmageSourceFileDto[] BuildSourceFileList()
                     Path = file.Key,
                     Kind = file.Key.Contains("/Pages/", StringComparison.OrdinalIgnoreCase) ? "Demo page"
                          : file.Key.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ? "Host"
+                         : file.Key.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ? SiteChromeKind
                          : "Demo",
                     Description = page?.Description ?? DescribeSource(file.Key, file.Value),
                     Lines = CountLines(file.Value),
                     Title = page?.Title,
-                    Slug = page?.Href,
+                    Slug = page?.Url.TrimStart('/'),
                     Keywords = page?.Keywords
                 };
             })
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/app.css b/src/Utilities/Bmage/Demo/Server/wwwroot/app.css
new file mode 100644
index 00000000000..7b51a42ea90
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Server/wwwroot/app.css
@@ -0,0 +1,2820 @@
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/css/app.css b/src/Utilities/Bmage/Demo/Server/wwwroot/css/app.css
deleted file mode 100644
index 6d13944a3e4..00000000000
--- a/src/Utilities/Bmage/Demo/Server/wwwroot/css/app.css
+++ /dev/null
@@ -1,2020 +0,0 @@
-/* Bit.Bmage Demo - base and site chrome.
-
-   The docs shell: the skip link, the header, the command palette, the navigation panel, the
-   reading column with its breadcrumb and pager, the "on this page" rail, the footer and the
-   landing page. Page-level styles - sections, the sample controls, previews, tables and code
-   boxes - live in bmage-samples.css.
-
-   Everything here is written by hand against the Fluent 2 tokens in theme.css rather than built
-   from a component library, because the demo carries no dependency other than Bit.Bmage itself:
-   that is the promise the library makes, and a docs site that had to install a design system to
-   demonstrate it would be arguing against its own point.
-
-   Two rules hold the file together:
-
-     * No raw values. A colour, a radius, a duration or a step of spacing comes from a token, so
-       the whole site re-themes from one file and nothing can drift.
-     * Chrome only. Nothing in here reaches inside a sample or the editor component. What a page
-       renders as its working surface belongs to that page, and the shell must never be the reason
-       it looks different from what a reader's own app would show. */
-
-/* ── Base ──────────────────────────────────────────────────────────────────── */
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-* {
-    -webkit-text-size-adjust: none;
-    -webkit-font-smoothing: antialiased;
-    -webkit-tap-highlight-color: transparent;
-}
-
-html {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    scroll-behavior: smooth;
-    /* Anything the browser scrolls to - a fragment link, a control receiving focus - has to land
-       below the sticky header rather than under it. WCAG 2.2 "Focus Not Obscured (Minimum)". */
-    scroll-padding-top: calc(var(--bmd-layout-header) + var(--bmd-layout-header-gap));
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-}
-
-body {
-    width: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: var(--bmd-fnt-family-base);
-    font-size: var(--bmd-fnt-size-400);
-    line-height: var(--bmd-fnt-line-prose);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-3);
-}
-
-code, kbd, pre, samp {
-    font-family: var(--bmd-fnt-family-mono);
-}
-
-h1, h2, h3, h4, h5, h6, p {
-    margin: 0;
-}
-
-h1, h2, h3, h4 {
-    font-family: var(--bmd-fnt-family-display);
-    /* Fluent 2 sets its display sizes tight and slightly negative-tracked; the ramp only reads as
-       a ramp if the headings keep that treatment while the prose below them does not. */
-    letter-spacing: -0.01em;
-    text-wrap: balance;
-}
-
-a {
-    color: var(--bmd-clr-brand-fg);
-    text-underline-offset: 0.125em;
-}
-
-a:hover {
-    color: var(--bmd-clr-brand-fg-hover);
-}
-
-a:active {
-    color: var(--bmd-clr-brand-fg-pressed);
-}
-
-code {
-    color: var(--bmd-clr-fg-1);
-}
-
-img, svg {
-    max-width: 100%;
-}
-
-/* Icons. One set, stroked at Fluent's regular weight and drawn in the colour of whatever it sits
-   inside, so an icon never has to be re-coloured for a theme, a hover state or a surface. The
-   geometry is authored in Shared/Icons.cs and rendered by Shared/Icon.razor; every rule that sizes
-   an icon below sets only its width and height and leaves the paint here. */
-svg.icon {
-    flex: none;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-/* Scoped to the docs chrome on purpose: a scrollbar inside the editor belongs to the component
-   being demonstrated and should look like whatever it renders. */
-html, body, .site-content, .nav-panel, .side-rail, .palette-results, pre {
-    scrollbar-width: thin;
-    scrollbar-color: var(--bmd-clr-stroke-1) transparent;
-}
-
-/* Headings take focus only programmatically - FocusOnNavigate moves it to the page's heading after
-   every navigation, so a screen reader starts reading at the new page rather than at the header.
-   They are not controls, so they carry no focus ring: one drawn round the title of every page the
-   reader arrives at would read as a selection, not as a place. */
-h1:focus, h2:focus,
-h1:focus-visible, h2:focus-visible {
-    outline: none;
-}
-
-/* Fluent 2's focus indicator: a solid two-pixel stroke in the theme's highest-contrast neutral,
-   held one step off the control so it never sits on top of the control's own border. Declared
-   once, for every focusable thing in the chrome. The editor's own focus ring is left alone - it
-   belongs to the component being demonstrated, and a second outline over it would show readers
-   something the component does not actually render. */
-.skip-link:focus-visible,
-.app-header a:focus-visible,
-.app-header button:focus-visible,
-.nav-panel a:focus-visible,
-.nav-panel button:focus-visible,
-.nav-panel input:focus-visible,
-.side-rail a:focus-visible,
-.doc-breadcrumb a:focus-visible,
-.doc-pager a:focus-visible,
-.footer a:focus-visible,
-.footer button:focus-visible,
-.homepage a:focus-visible,
-.homepage button:focus-visible,
-.palette a:focus-visible,
-.palette button:focus-visible,
-.error-page a:focus-visible {
-    outline: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    outline-offset: var(--bmd-strk-thick);
-    border-radius: var(--bmd-crn-medium);
-}
-
-/* ── Skip link ─────────────────────────────────────────────────────────────── */
-
-/* The nav panel puts fifteen links between the top of the document and the first word of the
-   page. This is the way past them for anyone driving the site from the keyboard. */
-.skip-link {
-    position: fixed;
-    z-index: 2000;
-    top: var(--bmd-sp-s);
-    inset-inline-start: var(--bmd-sp-s);
-    padding: var(--bmd-sp-s) var(--bmd-sp-l);
-    font-size: var(--bmd-fnt-size-300);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-300);
-    text-decoration: none;
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-radius: var(--bmd-crn-medium);
-    box-shadow: var(--bmd-shdw-16);
-    transform: translateY(-200%);
-}
-
-.skip-link:focus-visible {
-    transform: translateY(0);
-}
-
-/* ── Shell ─────────────────────────────────────────────────────────────────── */
-
-.app-shell {
-    width: 100%;
-    min-height: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-}
-
-.layout-row {
-    flex: 1 1 auto;
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    min-height: 0;
-}
-
-.site-content {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    background-color: var(--bmd-clr-bg-3);
-}
-
-/* The reading column and the "on this page" rail sit side by side; min-width:0 is what lets a wide
-   example or a long code line scroll inside the column instead of stretching it and pushing the
-   rail off screen. */
-.page-row {
-    width: 100%;
-    flex: 1 1 auto;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: var(--bmd-sp-xxl);
-    margin: 0 auto;
-    max-width: calc(var(--bmd-layout-max) - var(--bmd-layout-nav));
-    padding-inline: var(--bmd-sp-xxxl);
-}
-
-.page-container {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: 100%;
-    max-width: var(--bmd-layout-content);
-    padding: var(--bmd-sp-4xl) 0 var(--bmd-sp-6xl);
-}
-
-@media (max-width: 63.9375rem) {
-    .page-row {
-        padding-inline: var(--bmd-sp-xxl);
-    }
-
-    .page-container {
-        padding: var(--bmd-sp-xxxl) 0 var(--bmd-sp-5xl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .page-row {
-        padding-inline: var(--bmd-sp-l);
-    }
-
-    .page-container {
-        padding: var(--bmd-sp-xxl) 0 var(--bmd-sp-4xl);
-    }
-}
-
-/* ── Header ────────────────────────────────────────────────────────────────── */
-
-/* Fluent's acrylic, near enough: the header is a translucent pane over whatever is scrolling
-   underneath it, and it grows a shadow the moment there is something underneath it to lift away
-   from (js/demo.js sets data-scrolled). */
-.app-header {
-    top: 0;
-    z-index: 1000;
-    width: 100%;
-    position: sticky;
-    backdrop-filter: blur(1.25rem) saturate(1.6);
-    -webkit-backdrop-filter: blur(1.25rem) saturate(1.6);
-    background-color: color-mix(in srgb, var(--bmd-clr-bg-1) 85%, transparent);
-    border-bottom: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    transition: box-shadow var(--bmd-dur-normal) var(--bmd-crv-easy-ease);
-}
-
-.app-header[data-scrolled="true"] {
-    box-shadow: var(--bmd-shdw-4);
-}
-
-/* A browser without backdrop-filter would show the page scrolling through the bar. Paint it. */
-@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    .app-header {
-        background-color: var(--bmd-clr-bg-1);
-    }
-}
-
-.app-header-inner {
-    gap: var(--bmd-sp-s);
-    display: flex;
-    flex-wrap: nowrap;
-    margin-inline: auto;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--bmd-layout-header);
-    max-width: var(--bmd-layout-max);
-    padding-inline: var(--bmd-sp-xl);
-}
-
-.header-start,
-.header-end {
-    display: flex;
-    flex: 0 1 auto;
-    min-width: 0;
-    align-items: center;
-}
-
-.header-start {
-    gap: var(--bmd-sp-xs);
-}
-
-.header-end {
-    gap: var(--bmd-sp-xs);
-    flex-shrink: 0;
-}
-
-/* The mark and the library's name, as one link. The name is set in the brand colour so the bar
-   states which of the bit sites this is - the mark alone is shared with all of them. */
-.header-brand {
-    gap: var(--bmd-sp-mnudge);
-    display: flex;
-    flex: none;
-    align-items: center;
-    text-decoration: none;
-    padding: var(--bmd-sp-xs) var(--bmd-sp-s);
-    margin-inline-end: var(--bmd-sp-m);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.header-brand .logo {
-    flex: none;
-    width: 1.75rem;
-    height: 1.75rem;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.header-brand .wordmark {
-    flex: none;
-    font-family: var(--bmd-fnt-family-display);
-    font-size: var(--bmd-fnt-size-500);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-500);
-    letter-spacing: -0.02em;
-    color: var(--bmd-clr-fg-1);
-}
-
-.header-brand:hover .wordmark {
-    color: var(--bmd-clr-brand-fg);
-}
-
-/* The release the docs describe, next to the name that describes it. */
-.header-version {
-    flex: none;
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    padding: var(--bmd-sp-xxs) var(--bmd-sp-snudge);
-    color: var(--bmd-clr-brand-fg);
-    background-color: var(--bmd-clr-brand-wash);
-    border-radius: var(--bmd-crn-circular);
-}
-
-@media (max-width: 35.9375rem) {
-    .header-version {
-        display: none;
-    }
-}
-
-.header-links {
-    gap: var(--bmd-sp-xxs);
-    display: flex;
-    align-items: center;
-}
-
-/* Fluent's tab treatment: the label carries the state, and a rounded indicator under the selected
-   one says where you are without a second colour or a box. */
-.header-links .link {
-    position: relative;
-    display: flex;
-    cursor: pointer;
-    white-space: nowrap;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bmd-fnt-size-300);
-    font-weight: var(--bmd-fnt-weight-medium);
-    line-height: var(--bmd-fnt-line-300);
-    padding: var(--bmd-sp-s) var(--bmd-sp-m);
-    color: var(--bmd-clr-fg-2);
-    border-radius: var(--bmd-crn-medium);
-    transition: color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.header-links .link:hover {
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-.header-links .link:active {
-    background-color: var(--bmd-clr-bg-1-pressed);
-}
-
-.header-links .link.active {
-    color: var(--bmd-clr-fg-1);
-    font-weight: var(--bmd-fnt-weight-semibold);
-}
-
-.header-links .link.active::after {
-    content: '';
-    left: var(--bmd-sp-m);
-    right: var(--bmd-sp-m);
-    bottom: calc(var(--bmd-sp-s) * -1);
-    height: var(--bmd-strk-thicker);
-    position: absolute;
-    background-color: var(--bmd-clr-brand-stroke);
-    border-radius: var(--bmd-crn-circular);
-}
-
-@media (max-width: 47.9375rem) {
-    .header-links {
-        display: none;
-    }
-}
-
-/* The command palette's handle. It states its own shortcut, because a shortcut nobody can see is
-   a shortcut nobody uses. */
-.header-search {
-    gap: var(--bmd-sp-s);
-    display: flex;
-    flex: 0 1 15rem;
-    min-width: 0;
-    cursor: pointer;
-    text-align: start;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    height: 2rem;
-    padding: 0 var(--bmd-sp-s) 0 var(--bmd-sp-mnudge);
-    margin-inline-end: var(--bmd-sp-s);
-    color: var(--bmd-clr-fg-3);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-bottom-color: var(--bmd-clr-stroke-accessible);
-    border-radius: var(--bmd-crn-medium);
-    transition: border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.header-search:hover:not(:disabled) {
-    color: var(--bmd-clr-fg-2);
-    border-color: var(--bmd-clr-stroke-accessible);
-}
-
-.header-search:disabled {
-    cursor: default;
-    color: var(--bmd-clr-fg-disabled);
-    background-color: var(--bmd-clr-bg-disabled);
-}
-
-.header-search .search-label {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.header-search svg {
-    flex: none;
-    width: 1rem;
-    height: 1rem;
-}
-
-/* A keycap, Fluent-style: the neutral surface one step up from the control it sits in. */
-.kbd {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bmd-sp-xxs);
-    font-family: var(--bmd-fnt-family-base);
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-200);
-    padding: var(--bmd-sp-xxs) var(--bmd-sp-xs);
-    color: var(--bmd-clr-fg-3);
-    background-color: var(--bmd-clr-bg-4);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-small);
-}
-
-@media (max-width: 63.9375rem) {
-    .header-search {
-        flex: none;
-        width: 2rem;
-        padding: 0;
-        justify-content: center;
-    }
-
-    .header-search .search-label,
-    .header-search .kbd {
-        display: none;
-    }
-}
-
-/* Fluent's subtle icon button: no border and no fill until it is pointed at. */
-.icon-btn {
-    padding: 0;
-    flex: none;
-    width: 2rem;
-    height: 2rem;
-    cursor: pointer;
-    display: flex;
-    border: none;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    color: var(--bmd-clr-fg-2);
-    border-radius: var(--bmd-crn-medium);
-    transition: background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.icon-btn:hover {
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-.icon-btn:active {
-    background-color: var(--bmd-clr-bg-1-pressed);
-}
-
-.icon-btn:disabled {
-    cursor: default;
-    color: var(--bmd-clr-fg-disabled);
-    background-color: transparent;
-}
-
-.icon-btn svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-/* The two theme buttons are exact complements, so exactly one of the pair is visible in every
-   possible state - including the prerendered document, which carries no data-theme attribute
-   yet, and would otherwise show both or neither. */
-:root[data-theme$='dark'] .light-theme {
-    display: none;
-}
-
-:root:not([data-theme$='dark']) .dark-theme {
-    display: none;
-}
-
-:root[data-theme$='dark'] .logo,
-:root[data-theme$='dark'] .footer .bit-logo {
-    background-image: url('../images/bit-logo-dark.svg');
-}
-
-:root:not([data-theme$='dark']) .logo,
-:root:not([data-theme$='dark']) .footer .bit-logo {
-    background-image: url('../images/bit-logo-light.svg');
-}
-
-/* The nav drawer's handle. It only exists at the widths where the panel is a drawer. */
-.menu-btn {
-    display: none;
-    margin-inline-end: var(--bmd-sp-xs);
-}
-
-@media (max-width: 63.9375rem) {
-    .menu-btn {
-        display: flex;
-    }
-}
-
-@media (max-width: 29.9375rem) {
-    .app-header-inner {
-        padding-inline: var(--bmd-sp-s);
-    }
-}
-
-/* The narrowest phones have room for the mark, the search and the two controls, but not for the
-   name as well. The mark carries the identity there, and nowhere wider - a header that does not
-   say which site it is has given up the one job it cannot delegate. */
-@media (max-width: 22.5rem) {
-    .header-brand .wordmark {
-        display: none;
-    }
-}
-
-/* Hydration hint - rendered by MainLayout only while RendererInfo.IsInteractive is false, i.e. on
-   the prerendered HTML the server sends before the WebAssembly runtime boots. */
-.hydrating {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bmd-sp-snudge);
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-200);
-    white-space: nowrap;
-    padding-inline: var(--bmd-sp-s);
-    color: var(--bmd-clr-fg-3);
-}
-
-.hydrating i {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: var(--bmd-crn-circular);
-    background-color: var(--bmd-clr-brand-bg);
-    animation: bmd-hydrating-pulse 1s var(--bmd-crv-easy-ease) infinite;
-}
-
-@keyframes bmd-hydrating-pulse {
-    0%, 100% { opacity: 0.25; }
-    50% { opacity: 1; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .hydrating i {
-        animation: none;
-    }
-}
-
-@media (max-width: 35.9375rem) {
-    .hydrating span {
-        display: none;
-    }
-}
-
-/* ── Command palette ───────────────────────────────────────────────────────── */
-
-/* Every page of the docs, one keystroke away. It is the same NavItem list the nav panel renders,
-   so a page is searchable here for having a nav entry rather than for being added to a second
-   index that could fall behind it. */
-.palette-backdrop {
-    inset: 0;
-    z-index: 1900;
-    position: fixed;
-    background-color: var(--bmd-clr-bg-overlay);
-    animation: bmd-fade-in var(--bmd-dur-fast) var(--bmd-crv-decelerate-mid);
-}
-
-.palette {
-    top: 12vh;
-    left: 50%;
-    z-index: 2000;
-    position: fixed;
-    width: min(40rem, calc(100vw - 2rem));
-    max-height: min(28rem, 70vh);
-    display: flex;
-    flex-flow: column nowrap;
-    overflow: hidden;
-    transform: translateX(-50%);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-xlarge);
-    box-shadow: var(--bmd-shdw-64);
-    animation: bmd-palette-in var(--bmd-dur-normal) var(--bmd-crv-decelerate-mid);
-}
-
-@keyframes bmd-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@keyframes bmd-palette-in {
-    from { opacity: 0; transform: translate(-50%, -0.75rem) scale(0.98); }
-    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .palette-backdrop,
-    .palette {
-        animation: none;
-    }
-}
-
-.palette-field {
-    gap: var(--bmd-sp-m);
-    display: flex;
-    flex: none;
-    align-items: center;
-    padding: var(--bmd-sp-l) var(--bmd-sp-xl);
-    border-bottom: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.palette-field svg {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--bmd-clr-fg-3);
-}
-
-.palette-field input {
-    flex: 1 1 auto;
-    min-width: 0;
-    border: none;
-    outline: none;
-    background: none;
-    font-family: inherit;
-    font-size: var(--bmd-fnt-size-500);
-    line-height: var(--bmd-fnt-line-500);
-    color: var(--bmd-clr-fg-1);
-}
-
-.palette-field input::placeholder {
-    color: var(--bmd-clr-fg-3);
-}
-
-.palette-results {
-    flex: 1 1 auto;
-    min-height: 0;
-    margin: 0;
-    padding: var(--bmd-sp-s);
-    list-style: none;
-    overflow: hidden auto;
-}
-
-.palette-group {
-    gap: var(--bmd-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bmd-clr-fg-3);
-    padding: var(--bmd-sp-m) var(--bmd-sp-m) var(--bmd-sp-xs);
-}
-
-.palette-group svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.palette-item a {
-    display: block;
-    cursor: pointer;
-    text-decoration: none;
-    padding: var(--bmd-sp-s) var(--bmd-sp-m);
-    border-radius: var(--bmd-crn-medium);
-    color: var(--bmd-clr-fg-1);
-}
-
-.palette-item a:hover {
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-/* The keyboard's selection, which is a different thing from the pointer's hover: it has to be
-   visible without a pointer anywhere near it. */
-.palette-item.active a {
-    background-color: var(--bmd-clr-brand-wash);
-    box-shadow: inset var(--bmd-strk-thicker) 0 0 var(--bmd-clr-brand-stroke);
-}
-
-.palette-item .palette-title {
-    display: block;
-    font-size: var(--bmd-fnt-size-300);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-1);
-}
-
-.palette-item .palette-desc {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-3);
-}
-
-.palette-empty {
-    padding: var(--bmd-sp-4xl) var(--bmd-sp-xl);
-    text-align: center;
-    font-size: var(--bmd-fnt-size-300);
-    color: var(--bmd-clr-fg-3);
-}
-
-.palette-footer {
-    gap: var(--bmd-sp-l);
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: var(--bmd-sp-s) var(--bmd-sp-xl);
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-200);
-    color: var(--bmd-clr-fg-3);
-    background-color: var(--bmd-clr-bg-2);
-    border-top: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.palette-footer span {
-    gap: var(--bmd-sp-xs);
-    display: inline-flex;
-    align-items: center;
-}
-
-@media (max-width: 35.9375rem) {
-    .palette-footer {
-        display: none;
-    }
-}
-
-/* ── Nav panel ─────────────────────────────────────────────────────────────── */
-
-.nav-panel {
-    top: var(--bmd-layout-header);
-    z-index: 900;
-    flex: 0 0 var(--bmd-layout-nav);
-    position: sticky;
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-    padding: var(--bmd-sp-l) var(--bmd-sp-m) var(--bmd-sp-xxxl);
-    scrollbar-width: thin;
-    background-color: var(--bmd-clr-bg-1);
-    height: calc(100vh - var(--bmd-layout-header));
-    border-inline-end: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.nav-panel-search {
-    position: relative;
-    margin-bottom: var(--bmd-sp-l);
-}
-
-.nav-panel-search svg {
-    top: 50%;
-    width: 1rem;
-    height: 1rem;
-    position: absolute;
-    pointer-events: none;
-    inset-inline-start: var(--bmd-sp-s);
-    transform: translateY(-50%);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* Fluent's input: a hairline box whose bottom edge is drawn in the accessible neutral, so the
-   field reads as a field even at rest, and thickens into the brand colour on focus. */
-.nav-panel-search input {
-    width: 100%;
-    outline: none;
-    height: 2rem;
-    font-family: inherit;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    padding: 0 var(--bmd-sp-s) 0 var(--bmd-sp-xxl);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-bottom-color: var(--bmd-clr-stroke-accessible);
-    border-radius: var(--bmd-crn-medium);
-    transition: border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.nav-panel-search input::placeholder {
-    color: var(--bmd-clr-fg-3);
-}
-
-.nav-panel-search input:hover {
-    border-color: var(--bmd-clr-stroke-accessible);
-}
-
-.nav-panel-search input:focus {
-    border-color: var(--bmd-clr-stroke-1);
-    border-bottom-color: var(--bmd-clr-brand-stroke);
-    box-shadow: inset 0 -0.0625rem 0 var(--bmd-clr-brand-stroke);
-}
-
-.nav-panel-search input:disabled {
-    cursor: default;
-    color: var(--bmd-clr-fg-disabled);
-    background-color: var(--bmd-clr-bg-disabled);
-}
-
-/* The index is grouped rather than flat: a reader almost always arrives wanting one page for a
-   reason - to set the library up, to understand a concept, or to copy a whole workflow - and the
-   groups say which is which. */
-.nav-group {
-    margin-bottom: var(--bmd-sp-l);
-}
-
-.nav-group-title {
-    gap: var(--bmd-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bmd-clr-fg-3);
-    padding: var(--bmd-sp-s) var(--bmd-sp-m) var(--bmd-sp-xs);
-}
-
-.nav-group-title svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.nav-panel-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.nav-panel-list a {
-    gap: var(--bmd-sp-s);
-    display: flex;
-    position: relative;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    padding: var(--bmd-sp-snudge) var(--bmd-sp-m);
-    margin-bottom: var(--bmd-strk-thick);
-    color: var(--bmd-clr-fg-2);
-    border-radius: var(--bmd-crn-medium);
-    transition: background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.nav-panel-list a:hover {
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-.nav-panel-list a:active {
-    background-color: var(--bmd-clr-bg-1-pressed);
-}
-
-/* Fluent's selected nav item: a tinted row with a short rounded indicator at the inline start,
-   inset from the row's own edges so it reads as a marker rather than as a border. */
-.nav-panel-list a.active {
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-.nav-panel-list a.active::before {
-    content: '';
-    top: 20%;
-    bottom: 20%;
-    position: absolute;
-    width: var(--bmd-strk-thicker);
-    inset-inline-start: 0;
-    border-radius: var(--bmd-crn-circular);
-    background-color: var(--bmd-clr-brand-stroke);
-}
-
-.nav-panel-empty {
-    display: block;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-prose);
-    padding: var(--bmd-sp-m);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* Below the panel's breakpoint it becomes a drawer over the page, opened from the header's menu
-   button - the same move the "on this page" rail makes into the reader's own scrollbar. */
-.nav-panel-overlay {
-    display: none;
-}
-
-@media (max-width: 63.9375rem) {
-    /* visibility, not just the off-screen transform: a translated drawer is still focusable, so
-       without it the closed panel's search box and every nav link stay in the tab order of the
-       page they are covering. Transitioning it keeps the panel painted for the whole slide out,
-       because visibility only flips to hidden once the transform has finished. */
-    /* It opens below the header rather than over it, so the button that opened it is still on
-       screen and is also the button that closes it. A drawer that covers its own handle leaves
-       the reader guessing at the overlay. */
-    .nav-panel {
-        left: 0;
-        z-index: 1200;
-        position: fixed;
-        top: var(--bmd-layout-header);
-        height: calc(100dvh - var(--bmd-layout-header));
-        width: min(20rem, 85vw);
-        flex-basis: 0;
-        visibility: hidden;
-        padding-top: var(--bmd-sp-xxl);
-        transform: translateX(-100%);
-        box-shadow: var(--bmd-shdw-64);
-        transition: transform var(--bmd-dur-normal) var(--bmd-crv-decelerate-mid),
-                    visibility var(--bmd-dur-normal);
-    }
-
-    .nav-panel.open {
-        visibility: visible;
-        transform: translateX(0);
-    }
-
-    .nav-panel-overlay {
-        inset: var(--bmd-layout-header) 0 0 0;
-        z-index: 1100;
-        display: block;
-        border: none;
-        padding: 0;
-        position: fixed;
-        background-color: var(--bmd-clr-bg-overlay);
-    }
-}
-
-/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
-
-/* Where in the docs this page sits. Worth the line only because the index is grouped: it names
-   the group, which is the piece the page's own title cannot say. */
-.doc-breadcrumb {
-    gap: var(--bmd-sp-xs);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bmd-sp-m);
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-3);
-}
-
-.doc-breadcrumb a {
-    text-decoration: none;
-    color: var(--bmd-clr-fg-3);
-    padding: var(--bmd-sp-xxs) var(--bmd-sp-xs);
-    border-radius: var(--bmd-crn-small);
-}
-
-.doc-breadcrumb a:hover {
-    color: var(--bmd-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.doc-breadcrumb svg {
-    flex: none;
-    width: 0.75rem;
-    height: 0.75rem;
-    color: var(--bmd-clr-fg-4);
-}
-
-.doc-breadcrumb .current {
-    color: var(--bmd-clr-fg-2);
-    padding: var(--bmd-sp-xxs) var(--bmd-sp-xs);
-}
-
-/* ── Pager ─────────────────────────────────────────────────────────────────── */
-
-/* The docs are written to be read in order, so the end of a page says what the next one is. It is
-   built from the same NavItem list the panel renders, so the two can never disagree. */
-.doc-pager {
-    gap: var(--bmd-sp-l);
-    display: grid;
-    margin-top: var(--bmd-sp-4xl);
-    padding-top: var(--bmd-sp-xxl);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-top: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.doc-pager a {
-    gap: var(--bmd-sp-xxs);
-    display: flex;
-    flex-flow: column nowrap;
-    text-decoration: none;
-    padding: var(--bmd-sp-m) var(--bmd-sp-l);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-medium);
-    transition: border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                box-shadow var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.doc-pager a:hover {
-    border-color: var(--bmd-clr-brand-stroke);
-    box-shadow: var(--bmd-shdw-4);
-}
-
-.doc-pager a.next {
-    grid-column: 2;
-    text-align: end;
-}
-
-.doc-pager .pager-dir {
-    gap: var(--bmd-sp-xs);
-    display: flex;
-    align-items: center;
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-200);
-    color: var(--bmd-clr-fg-3);
-}
-
-.doc-pager a.next .pager-dir {
-    justify-content: flex-end;
-}
-
-.doc-pager .pager-dir svg {
-    width: 0.75rem;
-    height: 0.75rem;
-}
-
-.doc-pager .pager-title {
-    font-size: var(--bmd-fnt-size-400);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-400);
-    color: var(--bmd-clr-brand-fg);
-}
-
-@media (max-width: 35.9375rem) {
-    .doc-pager {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .doc-pager a.next {
-        grid-column: 1;
-    }
-}
-
-/* ── "On this page" rail ───────────────────────────────────────────────────── */
-
-/* Navigation, not content, so it only earns its space where there is space to spare. */
-.side-rail {
-    overflow: auto;
-    position: sticky;
-    height: fit-content;
-    flex: 0 0 var(--bmd-layout-rail);
-    top: calc(var(--bmd-layout-header) + var(--bmd-sp-4xl));
-    padding-bottom: var(--bmd-sp-xxxl);
-    max-height: calc(100vh - var(--bmd-layout-header) - var(--bmd-sp-6xl));
-}
-
-.side-rail-title {
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding: var(--bmd-sp-xs) var(--bmd-sp-m);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* The hairline is the rail's spine: it ties the entries together and, being the only rule in the
-   margin, marks the column as secondary without adding another box to the page. */
-.side-rail-list {
-    padding: 0;
-    list-style: none;
-    margin: var(--bmd-sp-s) 0 0;
-    border-inline-start: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.side-rail-list li {
-    position: relative;
-    overflow-wrap: anywhere;
-}
-
-.side-rail-list a {
-    display: block;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    padding: var(--bmd-sp-snudge) var(--bmd-sp-m);
-    color: var(--bmd-clr-fg-3);
-    transition: color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.side-rail-list a:hover {
-    color: var(--bmd-clr-fg-1);
-}
-
-/* The current section: its entry takes the brand colour and some weight, and its stretch of the
-   spine lights up in the same colour - drawn as an overlay on the list's own hairline so active
-   and inactive entries keep exactly the same geometry. */
-.side-rail-list li.active::before {
-    content: '';
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    width: var(--bmd-strk-thick);
-    inset-inline-start: calc(var(--bmd-strk-thin) * -1);
-    border-radius: var(--bmd-crn-circular);
-    background-color: var(--bmd-clr-brand-stroke);
-}
-
-.side-rail-list li.active a {
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-brand-fg);
-}
-
-@media (max-width: 84.375rem) {
-    .side-rail {
-        display: none;
-    }
-}
-
-/* ── Footer ────────────────────────────────────────────────────────────────── */
-
-.footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    background-color: var(--bmd-clr-bg-1);
-    border-top: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.footer section {
-    width: 100%;
-    position: relative;
-    max-width: var(--bmd-layout-max);
-    padding: var(--bmd-sp-6xl) var(--bmd-sp-xxxl);
-}
-
-.footer section:first-child {
-    display: grid;
-    gap: var(--bmd-sp-4xl);
-    align-items: start;
-    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
-}
-
-.footer section:last-child {
-    gap: var(--bmd-sp-xxl);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--bmd-sp-xxl) var(--bmd-sp-xxxl);
-    border-top: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.footer a {
-    text-decoration: none;
-}
-
-.footer .blurb {
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-prose);
-    max-width: var(--bmd-layout-measure);
-    color: var(--bmd-clr-fg-3);
-}
-
-.footer .bit-logo {
-    width: 2rem;
-    height: 1.6875rem;
-    margin-bottom: var(--bmd-sp-l);
-    background-size: contain;
-    background-position: left center;
-    background-repeat: no-repeat;
-}
-
-.footer .link-columns {
-    gap: var(--bmd-sp-xxl);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-}
-
-.footer .link-column {
-    display: flex;
-    gap: var(--bmd-sp-xs);
-    flex-flow: column nowrap;
-    align-items: flex-start;
-}
-
-.footer .link-column h6 {
-    font-size: var(--bmd-fnt-size-300);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-300);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    margin-bottom: var(--bmd-sp-xs);
-    color: var(--bmd-clr-fg-3);
-}
-
-.footer .link-column a {
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-500);
-    color: var(--bmd-clr-fg-2);
-}
-
-.footer .link-column a:hover {
-    color: var(--bmd-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .go-to-top {
-    gap: var(--bmd-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bmd-fnt-size-300);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-300);
-    padding: var(--bmd-sp-s) var(--bmd-sp-m);
-    color: var(--bmd-clr-fg-2);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-radius: var(--bmd-crn-medium);
-    transition: background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.footer .go-to-top:hover {
-    color: var(--bmd-clr-fg-1);
-    border-color: var(--bmd-clr-stroke-accessible);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-.footer .go-to-top svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.footer .address-info {
-    display: flex;
-    gap: var(--bmd-sp-xxs);
-    flex-flow: column nowrap;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-500);
-    color: var(--bmd-clr-fg-3);
-}
-
-.footer .address-info .address,
-.footer .address-info .tel,
-.footer .address-info .country {
-    padding-inline-start: var(--bmd-sp-xl);
-    background-repeat: no-repeat;
-    background-position-y: 0.3125rem;
-}
-
-.footer .address-info .address,
-.footer .address-info .tel {
-    color: var(--bmd-clr-fg-2);
-}
-
-.footer .address-info .address:hover,
-.footer .address-info .tel:hover {
-    color: var(--bmd-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .address-info .address {
-    background-image: url('../images/footer/location-icon.svg');
-}
-
-.footer .address-info .tel {
-    background-image: url('../images/footer/tel-icon.svg');
-}
-
-.footer .social-link-group {
-    gap: var(--bmd-sp-m);
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-.footer .social-link {
-    cursor: pointer;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--bmd-crn-circular);
-    background-color: var(--bmd-clr-fg-4);
-    background-size: 1.125rem;
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                transform var(--bmd-dur-faster) var(--bmd-crv-decelerate-mid);
-}
-
-.footer .social-link:hover {
-    transform: translateY(-0.125rem);
-}
-
-.footer .twitter-link { background-image: url('../images/footer/twitter-icon.svg'); }
-.footer .twitter-link:hover { background-color: #1DA1F2; }
-.footer .github-link { background-image: url('../images/footer/github-icon.svg'); }
-.footer .github-link:hover { background-color: #24292F; }
-.footer .youtube-link { background-image: url('../images/footer/youtube-icon.svg'); }
-.footer .youtube-link:hover { background-color: #FF0000; }
-.footer .linkedin-link { background-image: url('../images/footer/linkedin-icon.svg'); }
-.footer .linkedin-link:hover { background-color: #0077B5; }
-
-.footer .copy-right-txt {
-    line-height: var(--bmd-fnt-line-300);
-    margin-top: var(--bmd-sp-m);
-    font-size: var(--bmd-fnt-size-200);
-    text-align: end;
-    color: var(--bmd-clr-fg-3);
-}
-
-@media (max-width: 63.9375rem) {
-    .footer section,
-    .footer section:last-child {
-        padding-inline: var(--bmd-sp-xxl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .footer section {
-        padding-block: var(--bmd-sp-4xl);
-    }
-
-    .footer section:first-child {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .footer section:last-child {
-        align-items: flex-start;
-        flex-flow: column nowrap;
-        justify-content: flex-start;
-    }
-
-    .footer .social-link-group {
-        justify-content: flex-start;
-    }
-
-    .footer .copy-right-txt {
-        text-align: start;
-    }
-}
-
-/* ── Landing page ──────────────────────────────────────────────────────────── */
-
-/* The landing page is not a document, so it does not get the docs' reading column: it owns the
-   full width and lays out its own sections, which alternate surfaces and are separated by the
-   same hairline the rest of the chrome uses instead of shadows. The layout renders it without the
-   nav panel and the rail entirely - see Layout/MainLayout.razor. */
-
-.site-content.home {
-    background-color: var(--bmd-clr-bg-1);
-}
-
-.homepage {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-}
-
-.homepage-section {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-.homepage-section.alt-section {
-    background-color: var(--bmd-clr-bg-3);
-    border-top: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-bottom: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.homepage-section-content {
-    width: 100%;
-    margin: 0 auto;
-    max-width: var(--bmd-layout-max);
-    padding: var(--bmd-sp-7xl) var(--bmd-sp-xxxl);
-}
-
-.section-eyebrow {
-    display: block;
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    margin-bottom: var(--bmd-sp-m);
-    color: var(--bmd-clr-brand-fg);
-}
-
-.homepage h2 {
-    font-size: var(--bmd-fnt-size-800);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-800);
-    margin-bottom: var(--bmd-sp-m);
-    color: var(--bmd-clr-fg-1);
-}
-
-.homepage .section-lead {
-    line-height: var(--bmd-fnt-line-prose);
-    font-size: var(--bmd-fnt-size-400);
-    margin-bottom: var(--bmd-sp-4xl);
-    max-width: var(--bmd-layout-measure);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* A line of prose introducing the thing directly under it, rather than the section around it. */
-.homepage .section-note {
-    line-height: var(--bmd-fnt-line-prose);
-    font-size: var(--bmd-fnt-size-400);
-    margin: var(--bmd-sp-4xl) 0 var(--bmd-sp-l);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* ── Landing hero ─────────────────────────────────────────────────────────── */
-
-/* What the library is on one side, what it does on the other. */
-.hero-section {
-    position: relative;
-    overflow: hidden;
-}
-
-/* A single wash of the brand behind the headline. It is the one decorative thing on the page, and
-   it is there so the hero does not read as the first card of a stack of cards. */
-.hero-section::before {
-    content: '';
-    position: absolute;
-    top: -20rem;
-    inset-inline-start: 50%;
-    width: 75rem;
-    height: 45rem;
-    pointer-events: none;
-    transform: translateX(-70%);
-    background: radial-gradient(closest-side, var(--bmd-clr-brand-wash), transparent);
-}
-
-.hero-section .homepage-section-content {
-    gap: var(--bmd-sp-6xl);
-    display: grid;
-    position: relative;
-    align-items: center;
-    padding-top: var(--bmd-sp-6xl);
-    padding-bottom: var(--bmd-sp-6xl);
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-}
-
-.hero-eyebrow {
-    gap: var(--bmd-sp-s);
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: var(--bmd-sp-xl);
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    padding: var(--bmd-sp-xs) var(--bmd-sp-m);
-    text-decoration: none;
-    color: var(--bmd-clr-brand-fg);
-    background-color: var(--bmd-clr-brand-wash);
-    border-radius: var(--bmd-crn-circular);
-}
-
-.hero-eyebrow svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.hero-copy h1 {
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: 1.05;
-    margin-bottom: var(--bmd-sp-xl);
-    letter-spacing: -0.03em;
-    font-size: clamp(2.75rem, 5.5vw, var(--bmd-fnt-size-1000));
-    color: var(--bmd-clr-fg-1);
-}
-
-/* The one word of the headline that is the product's name takes the brand gradient; the rest of
-   the line stays in the text colour, so the headline is still a headline rather than an object. */
-/* Solid, not a gradient: any ramp from the brand violet to the accent orange passes through a
-   muddy middle, and the middle of this headline is where the words are. Fluent does not tint type
-   anyway - it states things in one colour. */
-.hero-copy h1 .accent {
-    color: var(--bmd-clr-brand-fg);
-}
-
-.hero-lead {
-    line-height: var(--bmd-fnt-line-prose);
-    font-size: var(--bmd-fnt-size-500);
-    margin-bottom: var(--bmd-sp-xxl);
-    max-width: 34rem;
-    color: var(--bmd-clr-fg-3);
-}
-
-.hero-actions {
-    gap: var(--bmd-sp-m);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bmd-sp-xxl);
-}
-
-/* Fluent's primary button. */
-.btn-primary,
-.btn-secondary {
-    gap: var(--bmd-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    font-family: inherit;
-    font-weight: var(--bmd-fnt-weight-semibold);
-    font-size: var(--bmd-fnt-size-400);
-    line-height: var(--bmd-fnt-line-400);
-    text-decoration: none;
-    /* 44px tall: the minimum a finger can reliably hit. */
-    min-height: 2.75rem;
-    padding: var(--bmd-sp-m) var(--bmd-sp-xxl);
-    border-radius: var(--bmd-crn-medium);
-    transition: background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.btn-primary {
-    color: var(--bmd-clr-brand-fg-on-bg);
-    background-color: var(--bmd-clr-brand-bg);
-    border: var(--bmd-strk-thin) solid transparent;
-}
-
-.btn-primary:hover {
-    color: var(--bmd-clr-brand-fg-on-bg);
-    background-color: var(--bmd-clr-brand-bg-hover);
-}
-
-.btn-primary:active {
-    background-color: var(--bmd-clr-brand-bg-pressed);
-}
-
-/* Fluent's secondary button: the neutral surface with a hairline, not an outlined copy of the
-   primary. Two buttons in the brand colour side by side would say neither is the main one. */
-.btn-secondary {
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-}
-
-.btn-secondary:hover {
-    color: var(--bmd-clr-fg-1);
-    border-color: var(--bmd-clr-stroke-accessible);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-.btn-secondary:active {
-    background-color: var(--bmd-clr-bg-1-pressed);
-}
-
-.btn-primary svg,
-.btn-secondary svg {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.github-mark {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    background-color: currentColor;
-    -webkit-mask: url('../images/github-mark.svg') center / contain no-repeat;
-    mask: url('../images/github-mark.svg') center / contain no-repeat;
-}
-
-/* The install line, as a thing to copy rather than a thing to read. */
-.install-line {
-    gap: var(--bmd-sp-m);
-    display: flex;
-    max-width: 26rem;
-    align-items: center;
-    padding: var(--bmd-sp-s) var(--bmd-sp-s) var(--bmd-sp-s) var(--bmd-sp-l);
-    background-color: var(--bmd-clr-bg-3);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.install-line code {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: auto hidden;
-    white-space: nowrap;
-    font-family: var(--bmd-fnt-family-mono);
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-1);
-}
-
-.install-line code .prompt {
-    user-select: none;
-    color: var(--bmd-clr-fg-4);
-}
-
-.install-copy {
-    gap: var(--bmd-sp-xs);
-    display: inline-flex;
-    flex: none;
-    cursor: pointer;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    padding: var(--bmd-sp-xs) var(--bmd-sp-s);
-    color: var(--bmd-clr-fg-2);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-radius: var(--bmd-crn-small);
-    transition: color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.install-copy:hover {
-    color: var(--bmd-clr-brand-fg);
-    border-color: var(--bmd-clr-brand-stroke);
-}
-
-.install-copy svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* The hero says what the library does; the stage shows it - one tile per workflow the site walks
-   through, each a link into the page that does it. */
-.hero-stage {
-    gap: var(--bmd-sp-l);
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.hero-tile {
-    gap: var(--bmd-sp-xs);
-    display: flex;
-    cursor: pointer;
-    padding: var(--bmd-sp-xxl);
-    text-decoration: none;
-    flex-flow: column nowrap;
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-large);
-    box-shadow: var(--bmd-shdw-4);
-}
-
-.hero-tile-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--bmd-sp-s);
-    color: var(--bmd-clr-brand-fg);
-    background-color: var(--bmd-clr-brand-wash);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.hero-tile-icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.hero-tile-title {
-    font-size: var(--bmd-fnt-size-400);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-400);
-    color: var(--bmd-clr-fg-1);
-}
-
-.hero-tile-desc {
-    line-height: var(--bmd-fnt-line-300);
-    font-size: var(--bmd-fnt-size-200);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* The quick-start code. Held to the width of the prose above it: a code box stretched across a
-   1200-pixel section is a line of code followed by a field of nothing. */
-.quick-start-body {
-    max-width: 46rem;
-}
-
-/* ── Landing sections ─────────────────────────────────────────────────────── */
-
-/* The numbers that make the pitch concrete, above the prose that explains it. */
-.stat-row {
-    gap: var(--bmd-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-}
-
-.stat {
-    padding: var(--bmd-sp-xl);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-large);
-}
-
-.stat-value {
-    display: block;
-    font-family: var(--bmd-fnt-family-display);
-    font-size: var(--bmd-fnt-size-700);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-700);
-    letter-spacing: -0.02em;
-    color: var(--bmd-clr-brand-fg);
-}
-
-.stat-label {
-    display: block;
-    margin-top: var(--bmd-sp-xs);
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* What is in the box: one card per capability, each a link into the demo that proves it. */
-.feature-grid {
-    gap: var(--bmd-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
-}
-
-.feature-card {
-    display: block;
-    padding: var(--bmd-sp-xxl);
-    text-decoration: none;
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-large);
-    transition: border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                box-shadow var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.feature-card:hover {
-    border-color: var(--bmd-clr-brand-stroke);
-    box-shadow: var(--bmd-shdw-8);
-}
-
-.feature-card-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--bmd-sp-m);
-    color: var(--bmd-clr-brand-fg);
-    background-color: var(--bmd-clr-brand-wash);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.feature-card-icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.feature-card h3 {
-    font-size: var(--bmd-fnt-size-500);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-500);
-    margin-bottom: var(--bmd-sp-s);
-    color: var(--bmd-clr-fg-1);
-}
-
-.feature-card p {
-    line-height: var(--bmd-fnt-line-prose);
-    font-size: var(--bmd-fnt-size-300);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* The full index of the docs, grouped the way the nav panel groups it - because the landing page
-   has no nav panel, and a reader who arrives at the root should be able to reach any page without
-   first having to find their way into the docs. */
-/* Columns rather than a grid: the groups are different lengths, and a grid would leave a band of
-   empty space under every short one. Multi-column flows them instead, so the block ends level. */
-.demo-index {
-    columns: 16rem 4;
-    column-gap: var(--bmd-sp-4xl);
-}
-
-.demo-index-group {
-    break-inside: avoid;
-    margin-bottom: var(--bmd-sp-xxl);
-}
-
-.demo-index-group h3 {
-    gap: var(--bmd-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding-bottom: var(--bmd-sp-s);
-    margin-bottom: var(--bmd-sp-s);
-    color: var(--bmd-clr-fg-3);
-    border-bottom: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.demo-index-group h3 svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--bmd-clr-brand-fg);
-}
-
-.demo-index-link {
-    display: block;
-    text-decoration: none;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    padding: var(--bmd-sp-snudge) var(--bmd-sp-s);
-    margin-inline-start: calc(var(--bmd-sp-s) * -1);
-    color: var(--bmd-clr-fg-2);
-    border-radius: var(--bmd-crn-medium);
-    transition: color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.demo-index-link:hover {
-    color: var(--bmd-clr-brand-fg);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-/* The closing call to action, on the brand rather than on a neutral: it is the last thing on the
-   page and the only place the site asks for something. */
-.cta-section .homepage-section-content {
-    text-align: center;
-}
-
-.cta-section .hero-actions {
-    margin-bottom: 0;
-    justify-content: center;
-}
-
-.cta-section .section-lead {
-    margin-inline: auto;
-}
-
-@media (max-width: 63.9375rem) {
-    .homepage-section-content {
-        padding: var(--bmd-sp-6xl) var(--bmd-sp-xxl);
-    }
-
-    .hero-section .homepage-section-content {
-        gap: var(--bmd-sp-4xl);
-        padding-top: var(--bmd-sp-4xl);
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .homepage-section-content {
-        padding: var(--bmd-sp-4xl) var(--bmd-sp-l);
-    }
-
-    .homepage h2 {
-        font-size: var(--bmd-fnt-size-700);
-        line-height: var(--bmd-fnt-line-700);
-    }
-
-    .hero-stage {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .hero-actions .btn-primary,
-    .hero-actions .btn-secondary {
-        flex: 1 1 12rem;
-    }
-}
-
-/* ── Error and not-found pages ─────────────────────────────────────────────── */
-
-.error-page {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    flex-flow: column nowrap;
-    padding: var(--bmd-sp-7xl) 0 var(--bmd-sp-6xl);
-}
-
-.error-page .error-code {
-    font-family: var(--bmd-fnt-family-display);
-    font-size: var(--bmd-fnt-size-1000);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.03em;
-    color: var(--bmd-clr-brand-fg);
-}
-
-.error-page h1 {
-    font-size: var(--bmd-fnt-size-800);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-800);
-    margin: var(--bmd-sp-l) 0 var(--bmd-sp-m);
-    color: var(--bmd-clr-fg-1);
-}
-
-.error-page p {
-    max-width: 34rem;
-    font-size: var(--bmd-fnt-size-400);
-    line-height: var(--bmd-fnt-line-prose);
-    margin-bottom: var(--bmd-sp-xxl);
-    color: var(--bmd-clr-fg-3);
-}
-
-.error-page .hero-actions {
-    justify-content: center;
-    margin-bottom: 0;
-}
-
-/* ── Blazor error UI ───────────────────────────────────────────────────────── */
-
-#blazor-error-ui {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    display: none;
-    position: fixed;
-    z-index: 1500;
-    font-size: var(--bmd-fnt-size-300);
-    padding: var(--bmd-sp-m) var(--bmd-sp-4xl) var(--bmd-sp-m) var(--bmd-sp-xl);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-5);
-    border-top: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    box-shadow: var(--bmd-shdw-16);
-}
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: var(--bmd-sp-m);
-    top: var(--bmd-sp-s);
-}
-
-.blazor-error-boundary {
-    padding: var(--bmd-sp-l);
-    color: #FFFFFF;
-    background: #B32121;
-    border-radius: var(--bmd-crn-medium);
-}
-
-.blazor-error-boundary::after {
-    content: "An error has occurred."
-}
-
-/* No .loading-progress rules here on purpose: the app is prerendered, so the first paint is the
-   real page rather than a boot spinner. The header shows a "loading" hint while the WebAssembly
-   runtime downloads - see .hydrating above. */
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/css/bmage-samples.css b/src/Utilities/Bmage/Demo/Server/wwwroot/css/bmage-samples.css
deleted file mode 100644
index 03b0089f780..00000000000
--- a/src/Utilities/Bmage/Demo/Server/wwwroot/css/bmage-samples.css
+++ /dev/null
@@ -1,1399 +0,0 @@
-/* Bit.Bmage Demo - page chrome and sample styles.
-
-   Everything a demo page draws inside the reading column: its title and lead, the section cards,
-   the controls a worked example is driven with, the previews and tables it reports back in, and
-   the code boxes. The tokens these are written against live in theme.css, and the shell around
-   them in app.css.
-
-   The line this file will not cross: it styles the frame around a sample and the controls that
-   drive it, never the pixels it produces. A preview is shown at its real colours on a checkerboard,
-   because transparency is part of the output and a page that hid it would be misreporting it. */
-
-/* ── Page title and lead ───────────────────────────────────────────────────── */
-
-/* Every page opens the same way: a title, then a paragraph of prose - not another frame. */
-.page-container > h1 {
-    font-family: var(--bmd-fnt-family-display);
-    font-size: var(--bmd-fnt-size-900);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-900);
-    letter-spacing: -0.03em;
-    margin-bottom: var(--bmd-sp-l);
-    overflow-wrap: anywhere;
-    text-wrap: balance;
-    color: var(--bmd-clr-fg-1);
-}
-
-/* The lead is set one step up the ramp from the body of the page, so a reader who only reads the
-   first paragraph still gets the whole answer to "what is this page for". */
-.page-intro {
-    line-height: var(--bmd-fnt-line-prose);
-    font-size: var(--bmd-fnt-size-500);
-    margin-bottom: var(--bmd-sp-4xl);
-    max-width: var(--bmd-layout-measure);
-    color: var(--bmd-clr-fg-3);
-}
-
-.page-intro strong {
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-fg-2);
-}
-
-@media (max-width: 47.9375rem) {
-    .page-container > h1 {
-        font-size: var(--bmd-fnt-size-800);
-        line-height: var(--bmd-fnt-line-800);
-    }
-
-    .page-intro {
-        font-size: var(--bmd-fnt-size-400);
-        margin-bottom: var(--bmd-sp-xxxl);
-    }
-}
-
-/* ── Section cards ─────────────────────────────────────────────────────────── */
-
-/* A hairline-bordered surface carrying Fluent's lightest elevation. On a documentation page the
-   same card repeats a dozen times, so anything heavier reads as noise long before it reads as
-   depth - but a flat card on a flat canvas leaves the page with no layers at all.
-
-   It is also a size container: the two-column workbench inside a section (.split) decides when to
-   stack from the width the section actually has, not from the window's - the nav panel and the
-   rail take a different share of the window at every breakpoint, and only the section knows what
-   is left. */
-.demo-section {
-    container-type: inline-size;
-    padding: var(--bmd-sp-xxxl);
-    margin-bottom: var(--bmd-sp-xxl);
-    /* Clear of the sticky header when the rail jumps to this section. */
-    scroll-margin-top: calc(var(--bmd-layout-header) + var(--bmd-layout-header-gap));
-    color: var(--bmd-clr-fg-2);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-large);
-    box-shadow: var(--bmd-shdw-2);
-}
-
-.demo-section:last-child {
-    margin-bottom: 0;
-}
-
-/* The heading sits over a hairline, so the eye can find the boundary between sections while
-   scrolling a long page instead of relying on whitespace alone. */
-.demo-section h2 {
-    position: relative;
-    font-family: var(--bmd-fnt-family-display);
-    font-size: var(--bmd-fnt-size-600);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-600);
-    letter-spacing: -0.02em;
-    padding-bottom: var(--bmd-sp-m);
-    margin-bottom: var(--bmd-sp-l);
-    scroll-margin-top: calc(var(--bmd-layout-header) + var(--bmd-layout-header-gap));
-    overflow-wrap: anywhere;
-    color: var(--bmd-clr-fg-1);
-    border-bottom: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-/* Every section is addressable, so a reader can link a colleague at the one paragraph that
-   answers their question. The link is added to the heading by js/demo.js, which is also what
-   gives the heading the id the "on this page" rail points at - so a section is linkable for the
-   same reason it is listed, and the two can never disagree. */
-.heading-anchor {
-    position: absolute;
-    top: 0;
-    inset-inline-start: -1.5rem;
-    width: 1.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--bmd-fnt-line-600);
-    opacity: 0;
-    text-decoration: none;
-    color: var(--bmd-clr-fg-4);
-    transition: opacity var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.demo-section h2:hover .heading-anchor,
-.heading-anchor:focus-visible {
-    opacity: 1;
-}
-
-.heading-anchor:hover {
-    color: var(--bmd-clr-brand-fg);
-}
-
-.heading-anchor:focus-visible {
-    outline: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    outline-offset: var(--bmd-strk-thin);
-    border-radius: var(--bmd-crn-small);
-}
-
-.heading-anchor svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* Below the width where the reading column has a margin to hang the anchor in, it would sit off
-   the edge of the card. */
-@media (max-width: 63.9375rem) {
-    .heading-anchor {
-        display: none;
-    }
-}
-
-.demo-section h3 {
-    font-family: var(--bmd-fnt-family-display);
-    font-size: var(--bmd-fnt-size-500);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-500);
-    letter-spacing: -0.01em;
-    margin: var(--bmd-sp-xxl) 0 var(--bmd-sp-s);
-    color: var(--bmd-clr-fg-1);
-}
-
-.demo-section h3:first-child {
-    margin-top: 0;
-}
-
-.demo-section p,
-.demo-section > ul,
-.demo-section > ol {
-    line-height: var(--bmd-fnt-line-prose);
-    font-size: var(--bmd-fnt-size-400);
-    margin-bottom: var(--bmd-sp-xl);
-    max-width: var(--bmd-layout-measure);
-    color: var(--bmd-clr-fg-2);
-}
-
-.demo-section > ul,
-.demo-section > ol {
-    padding-inline-start: var(--bmd-sp-xxl);
-}
-
-.demo-section li + li {
-    margin-top: var(--bmd-sp-xs);
-}
-
-.demo-section strong {
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-fg-1);
-}
-
-.demo-section em {
-    font-style: italic;
-}
-
-.demo-section a {
-    text-decoration: underline;
-}
-
-.demo-section a:focus-visible,
-.page-intro a:focus-visible {
-    outline: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    outline-offset: var(--bmd-strk-thin);
-    border-radius: var(--bmd-crn-small);
-}
-
-/* An inline code span, wherever a page sets one in prose. */
-.page-intro code,
-.demo-section code {
-    display: inline;
-    font-size: 0.875em;
-    padding: 0.0625rem 0.25rem;
-    overflow-wrap: anywhere;
-    font-family: var(--bmd-fnt-family-mono);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-3);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-small);
-}
-
-@media (max-width: 47.9375rem) {
-    .demo-section {
-        padding: var(--bmd-sp-xl);
-    }
-}
-
-/* A note set apart from the prose around it: a caveat, a rule of thumb, the one thing to remember
-   from a section. The brand edge says "this is the important bit" without another colour. */
-.callout {
-    margin: 0 0 var(--bmd-sp-xl);
-    padding: var(--bmd-sp-m) var(--bmd-sp-l);
-    max-width: var(--bmd-layout-measure);
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-prose);
-    color: var(--bmd-clr-fg-2);
-    background-color: var(--bmd-clr-brand-wash);
-    border-inline-start: var(--bmd-strk-thicker) solid var(--bmd-clr-brand-stroke);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.demo-section .callout p {
-    margin: 0;
-    font-size: inherit;
-}
-
-/* ── Reference tables ──────────────────────────────────────────────────────── */
-
-/* A table wider than the column scrolls inside its own box rather than pushing the page sideways,
-   which at 320 pixels is the difference between a table and a broken layout. */
-.table-scroll {
-    max-width: 100%;
-    overflow-x: auto;
-    margin-bottom: var(--bmd-sp-xl);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.table-scroll:focus-visible {
-    outline: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    outline-offset: var(--bmd-strk-thin);
-}
-
-.table-scroll > table {
-    margin: 0;
-}
-
-table.ref,
-table.data {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-2);
-}
-
-table.ref th,
-table.ref td,
-table.data th,
-table.data td {
-    text-align: start;
-    vertical-align: top;
-    padding: var(--bmd-sp-s) var(--bmd-sp-m);
-    border-bottom: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-table.ref tr:last-child > *,
-table.data tr:last-child > * {
-    border-bottom: none;
-}
-
-table.ref thead th,
-table.data thead th {
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    white-space: nowrap;
-    color: var(--bmd-clr-fg-3);
-    background-color: var(--bmd-clr-bg-2);
-}
-
-table.ref tbody th,
-table.data tbody th {
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-fg-1);
-}
-
-table.ref td code,
-table.ref th code {
-    white-space: nowrap;
-}
-
-table.data td.num,
-table.data th.num,
-table.ref td.num,
-table.ref th.num {
-    text-align: end;
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
-}
-
-/* ── Code boxes ────────────────────────────────────────────────────────────── */
-
-/* One frame around the toolbar and the code, rather than a button floating above a slab: the bar
-   is the code box's own header, so opening a snippet grows a panel instead of adding a second
-   thing to the page. */
-.code-snippet {
-    margin: 0 0 var(--bmd-sp-xl);
-    overflow: hidden;
-    background-color: var(--bmd-clr-bg-3);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.code-snippet:last-child {
-    margin-bottom: 0;
-}
-
-.code-snippet-bar {
-    gap: var(--bmd-sp-s);
-    display: flex;
-    align-items: center;
-    padding: var(--bmd-sp-xs) var(--bmd-sp-s);
-}
-
-.code-snippet.open .code-snippet-bar {
-    border-bottom: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.code-toggle,
-.code-copy {
-    gap: var(--bmd-sp-xs);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    font-weight: var(--bmd-fnt-weight-semibold);
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-300);
-    font-family: inherit;
-    padding: var(--bmd-sp-xs) var(--bmd-sp-s);
-    border: var(--bmd-strk-thin) solid transparent;
-    background: transparent;
-    color: var(--bmd-clr-fg-2);
-    border-radius: var(--bmd-crn-small);
-    transition: color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.code-toggle:hover,
-.code-copy:hover {
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-3-hover);
-}
-
-.code-toggle[aria-expanded="true"] {
-    color: var(--bmd-clr-fg-1);
-}
-
-.code-toggle:focus-visible,
-.code-copy:focus-visible,
-.code-block:focus-visible {
-    outline: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    outline-offset: calc(var(--bmd-strk-thick) * -1);
-}
-
-.code-toggle svg,
-.code-copy svg {
-    flex: none;
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* The chevron turns rather than being swapped for a different glyph, so the control reads as one
-   thing in two states instead of as two controls. */
-.code-toggle-icon {
-    display: inline-flex;
-    transition: transform var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.code-toggle[aria-expanded="true"] .code-toggle-icon {
-    transform: rotate(90deg);
-}
-
-/* The language, and the spring that pushes the copy button to the far end of the bar. */
-.code-lang {
-    flex: 1 1 auto;
-    text-align: end;
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bmd-clr-fg-4);
-}
-
-.code-copy.copied {
-    color: var(--bmd-clr-brand-fg);
-}
-
-.code-block {
-    margin: 0;
-    width: 100%;
-    display: block;
-    overflow: auto;
-    direction: ltr;
-    white-space: pre;
-    line-height: 1.6;
-    font-size: var(--bmd-fnt-size-300);
-    max-height: 32rem;
-    font-family: var(--bmd-fnt-family-mono);
-    padding: var(--bmd-sp-l);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-3);
-}
-
-.code-block code {
-    display: block;
-    padding: 0;
-    border: none;
-    color: inherit;
-    background: none;
-    font-size: inherit;
-    line-height: inherit;
-    font-family: inherit;
-}
-
-.code-block::-webkit-scrollbar {
-    width: 0.5rem;
-}
-
-.code-block::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
-}
-
-.code-block::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-
-.code-block::-webkit-scrollbar-thumb {
-    border-radius: var(--bmd-crn-circular);
-    background-color: var(--bmd-clr-stroke-1);
-}
-
-.code-block::-webkit-scrollbar-thumb:hover {
-    background-color: var(--bmd-clr-stroke-accessible);
-}
-
-.code-block::-webkit-scrollbar-button {
-    display: none;
-}
-
-/* ── Syntax highlighting tokens ────────────────────────────────────────────── */
-
-.code-block .tok-com  { color: var(--bmd-tok-com); font-style: italic; }
-.code-block .tok-tag  { color: var(--bmd-tok-tag); }
-.code-block .tok-attr { color: var(--bmd-tok-attr); }
-.code-block .tok-str  { color: var(--bmd-tok-str); }
-.code-block .tok-key  { color: var(--bmd-tok-key); }
-.code-block .tok-type { color: var(--bmd-tok-type); }
-.code-block .tok-num  { color: var(--bmd-tok-num); }
-.code-block .tok-raz  { color: var(--bmd-tok-raz); }
-
-/* Each source line is its own block so highlighted and plain lines share uniform spacing. */
-.code-block .code-line {
-    display: block;
-}
-
-/* Lines where a Bmage component is used, so they stand out from the markup around them. */
-.code-block .hl-line {
-    display: block;
-    margin: 0 calc(var(--bmd-sp-l) * -1);
-    padding: 0 var(--bmd-sp-l);
-    background-color: var(--bmd-clr-brand-wash);
-    box-shadow: inset var(--bmd-strk-thicker) 0 0 var(--bmd-clr-brand-stroke);
-}
-
-/* A short, live readout set as code: the document behind the editor, the steps of a pipeline, the
-   snippet under a headless example. Plain text that changes as the reader works, so it is not
-   highlighted - and it wraps rather than scrolls, because it is read, not copied. */
-pre.code {
-    margin: 0;
-    padding: var(--bmd-sp-m) var(--bmd-sp-l);
-    overflow-x: auto;
-    direction: ltr;
-    font-family: var(--bmd-fnt-family-mono);
-    font-size: var(--bmd-fnt-size-200);
-    line-height: 1.6;
-    white-space: pre;
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-3);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-medium);
-}
-
-/* ── Badges ────────────────────────────────────────────────────────────────── */
-
-.badge-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bmd-sp-s);
-}
-
-/* Fluent's outlined badge: quiet, sized to sit under a paragraph without competing with it. The
-   yes/no pair reports a probe result, so it carries the status colours rather than the brand. */
-.badge {
-    display: inline-block;
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    font-size: var(--bmd-fnt-size-200);
-    padding: var(--bmd-sp-xxs) var(--bmd-sp-s);
-    color: var(--bmd-clr-brand-fg);
-    background-color: var(--bmd-clr-brand-wash);
-    border: var(--bmd-strk-thin) solid transparent;
-    border-radius: var(--bmd-crn-circular);
-}
-
-.badge-yes {
-    color: var(--bmd-clr-success);
-    background-color: color-mix(in srgb, var(--bmd-clr-success) 14%, transparent);
-}
-
-.badge-no {
-    color: var(--bmd-clr-danger);
-    background-color: color-mix(in srgb, var(--bmd-clr-danger) 12%, transparent);
-}
-
-.badge-neutral {
-    color: var(--bmd-clr-fg-3);
-    background-color: var(--bmd-clr-bg-4);
-}
-
-/* ── Workbench layout ──────────────────────────────────────────────────────── */
-
-/* A worked example's two halves: the image on one side, the controls that shape it on the other.
-   It stacks when the section - not the window - is too narrow for both. */
-.split {
-    display: grid;
-    gap: var(--bmd-sp-xxl);
-    align-items: start;
-    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
-}
-
-@container (max-width: 40rem) {
-    .split {
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-
-/* A group of equal cards: the headless examples, the capability tables. */
-.grid {
-    display: grid;
-    gap: var(--bmd-sp-l);
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
-}
-
-/* A card inside a section: the controls panel, one headless example, one capability table. One
-   surface step down from the section around it, the same relationship the section has to the page. */
-.card {
-    min-width: 0;
-    padding: var(--bmd-sp-l);
-    background-color: var(--bmd-clr-bg-2);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-large);
-}
-
-.demo-section .card-title,
-.card-title {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--bmd-sp-s);
-    margin: 0 0 var(--bmd-sp-m);
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bmd-clr-fg-3);
-}
-
-.demo-section .card p {
-    font-size: var(--bmd-fnt-size-300);
-    margin-bottom: var(--bmd-sp-m);
-}
-
-.card + .card {
-    margin-top: var(--bmd-sp-l);
-}
-
-.grid > .card + .card,
-.split > .card + .card {
-    margin-top: 0;
-}
-
-/* The row of buttons that brings in an image or acts on the result. */
-.btn-row,
-.sample-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--bmd-sp-s);
-}
-
-.sample-row {
-    margin-top: var(--bmd-sp-m);
-}
-
-.demo-section .sample-row .small {
-    margin: 0;
-}
-
-.toolbar-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--bmd-sp-s) var(--bmd-sp-l);
-    margin-bottom: var(--bmd-sp-l);
-}
-
-.toolbar-group {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--bmd-sp-xs);
-}
-
-.toolbar-label {
-    margin-inline-end: var(--bmd-sp-xs);
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-fg-3);
-}
-
-.divider {
-    height: 0;
-    margin: var(--bmd-sp-l) 0;
-    border: none;
-    border-top: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-/* ── Controls ──────────────────────────────────────────────────────────────── */
-
-/* Fluent's standard button at its control height: the neutral surface with a hairline, and the
-   brand fill only for the one action a panel exists to take. */
-.btn {
-    gap: var(--bmd-sp-xs);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    min-height: 2rem;
-    padding: var(--bmd-sp-xs) var(--bmd-sp-m);
-    font-family: inherit;
-    font-size: var(--bmd-fnt-size-300);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-300);
-    text-decoration: none;
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-radius: var(--bmd-crn-medium);
-    transition: background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.btn:hover:not(:disabled) {
-    border-color: var(--bmd-clr-stroke-accessible);
-    background-color: var(--bmd-clr-bg-1-hover);
-}
-
-.btn:active:not(:disabled) {
-    background-color: var(--bmd-clr-bg-1-pressed);
-}
-
-.btn.btn-accent {
-    color: var(--bmd-clr-brand-fg-on-bg);
-    background-color: var(--bmd-clr-brand-bg);
-    border-color: transparent;
-}
-
-.btn.btn-accent:hover:not(:disabled) {
-    background-color: var(--bmd-clr-brand-bg-hover);
-}
-
-.btn.btn-accent:active:not(:disabled) {
-    background-color: var(--bmd-clr-brand-bg-pressed);
-}
-
-.btn:disabled {
-    cursor: default;
-    color: var(--bmd-clr-fg-disabled);
-    background-color: var(--bmd-clr-bg-disabled);
-    border-color: var(--bmd-clr-stroke-2);
-}
-
-.btn.btn-small {
-    min-height: 1.625rem;
-    padding: 0 var(--bmd-sp-s);
-    font-size: var(--bmd-fnt-size-200);
-}
-
-.btn.btn-block {
-    width: 100%;
-}
-
-.btn svg {
-    flex: none;
-    width: 1rem;
-    height: 1rem;
-}
-
-/* A toggle that is one of a set: a size to produce, a filter to apply, a theme. Its pressed state
-   is aria-pressed, which is both what a screen reader announces and what paints it - so the two
-   cannot disagree. */
-.chip-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bmd-sp-xs);
-}
-
-.chip {
-    display: inline-flex;
-    align-items: center;
-    min-height: 1.75rem;
-    cursor: pointer;
-    padding: 0 var(--bmd-sp-mnudge);
-    font-family: inherit;
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-medium);
-    line-height: var(--bmd-fnt-line-200);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-radius: var(--bmd-crn-circular);
-    transition: background-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease),
-                border-color var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-.chip:hover:not(:disabled) {
-    border-color: var(--bmd-clr-stroke-accessible);
-}
-
-button.chip[aria-pressed="true"] {
-    color: var(--bmd-clr-brand-accent-contrast);
-    background-color: var(--bmd-clr-brand-accent);
-    border-color: var(--bmd-clr-brand-accent);
-}
-
-.chip:disabled {
-    cursor: default;
-    color: var(--bmd-clr-fg-disabled);
-}
-
-/* A swatch reporting a colour rather than a control: the dominant colours of an upload. */
-span.chip {
-    cursor: default;
-    font-variant-numeric: tabular-nums;
-}
-
-.btn:focus-visible,
-.chip:focus-visible,
-.field input:focus-visible,
-.field select:focus-visible {
-    outline: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    outline-offset: var(--bmd-strk-thin);
-}
-
-/* A labelled control in a panel. The label carries the current value at its far end, so a slider
-   reads as "Output size  256 px" without a second line. */
-.field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--bmd-sp-xs);
-    margin-bottom: var(--bmd-sp-l);
-}
-
-.field:last-child {
-    margin-bottom: 0;
-}
-
-.field-label {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: var(--bmd-sp-s);
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-200);
-    color: var(--bmd-clr-fg-2);
-}
-
-.field-value {
-    font-weight: var(--bmd-fnt-weight-regular);
-    font-variant-numeric: tabular-nums;
-    color: var(--bmd-clr-fg-1);
-}
-
-.field input[type="range"] {
-    width: 100%;
-    height: 1.5rem;
-    margin: 0;
-    accent-color: var(--bmd-clr-brand-accent);
-}
-
-.field input[type="checkbox"] {
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    flex: none;
-    accent-color: var(--bmd-clr-brand-accent);
-}
-
-.field input[type="text"],
-.field select {
-    width: 100%;
-    height: 2rem;
-    padding: 0 var(--bmd-sp-s);
-    font: inherit;
-    font-size: var(--bmd-fnt-size-300);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-bottom-color: var(--bmd-clr-stroke-accessible);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.field-inline {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--bmd-sp-s);
-}
-
-.field-inline .field-label {
-    margin: 0;
-}
-
-.field-hint {
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-3);
-}
-
-/* ── Results ───────────────────────────────────────────────────────────────── */
-
-.stat-grid {
-    display: grid;
-    gap: var(--bmd-sp-m);
-    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
-}
-
-.stat-grid .stat {
-    display: flex;
-    flex-direction: column;
-    gap: var(--bmd-sp-xxs);
-    min-width: 0;
-}
-
-.stat-grid .stat-label {
-    font-size: var(--bmd-fnt-size-100);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-100);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bmd-clr-fg-3);
-}
-
-.stat-grid .stat-value {
-    font-family: var(--bmd-fnt-family-display);
-    font-size: var(--bmd-fnt-size-500);
-    font-weight: var(--bmd-fnt-weight-semibold);
-    line-height: var(--bmd-fnt-line-500);
-    font-variant-numeric: tabular-nums;
-    overflow-wrap: anywhere;
-    color: var(--bmd-clr-fg-1);
-}
-
-.stat-value.good,
-.text-good {
-    color: var(--bmd-clr-success);
-}
-
-.stat-value.bad,
-.text-bad {
-    color: var(--bmd-clr-danger);
-}
-
-/* What a pipeline produced, at its real colours. The checkerboard is under every preview because
-   transparency is part of the output - a round avatar's corners, a rotated photo's wedges - and a
-   preview painted on white would report them as white. */
-.preview-image {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--bmd-crn-medium);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    background-color: #FFFFFF;
-    background-image:
-        linear-gradient(45deg, #E3E3E3 25%, transparent 25%),
-        linear-gradient(-45deg, #E3E3E3 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #E3E3E3 75%),
-        linear-gradient(-45deg, transparent 75%, #E3E3E3 75%);
-    background-size: 1rem 1rem;
-    background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0;
-}
-
-div.preview-image[aria-busy="true"] {
-    min-height: 8rem;
-}
-
-.preview-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: var(--bmd-sp-xxl);
-}
-
-.preview-meta {
-    margin-top: var(--bmd-sp-s);
-}
-
-.thumb-grid {
-    display: grid;
-    gap: var(--bmd-sp-m);
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
-}
-
-.thumb {
-    overflow: hidden;
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.thumb-meta {
-    padding: var(--bmd-sp-s);
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-300);
-    color: var(--bmd-clr-fg-3);
-}
-
-.thumb-name {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-fg-1);
-}
-
-.progress {
-    height: 0.375rem;
-    overflow: hidden;
-    background-color: var(--bmd-clr-bg-5);
-    border-radius: var(--bmd-crn-circular);
-}
-
-.progress-bar {
-    height: 100%;
-    background-color: var(--bmd-clr-brand-accent);
-    transition: width var(--bmd-dur-fast) var(--bmd-crv-easy-ease);
-}
-
-/* An outcome the reader has to see: a file that could not be read, a budget that cannot be met.
-   role="alert" on the element is what announces it; the colour only repeats it. */
-.alert {
-    margin-bottom: var(--bmd-sp-l);
-    padding: var(--bmd-sp-m) var(--bmd-sp-l);
-    font-size: var(--bmd-fnt-size-300);
-    line-height: var(--bmd-fnt-line-prose);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.alert-error {
-    color: var(--bmd-clr-danger);
-    border-color: color-mix(in srgb, var(--bmd-clr-danger) 55%, transparent);
-    background-color: color-mix(in srgb, var(--bmd-clr-danger) 8%, transparent);
-}
-
-.alert-info {
-    color: var(--bmd-clr-fg-2);
-    border-color: color-mix(in srgb, var(--bmd-clr-brand-stroke) 55%, transparent);
-    background-color: var(--bmd-clr-brand-wash);
-}
-
-.muted {
-    color: var(--bmd-clr-fg-3);
-}
-
-.demo-section .small,
-.small {
-    font-size: var(--bmd-fnt-size-200);
-    line-height: var(--bmd-fnt-line-300);
-}
-
-.mono {
-    font-family: var(--bmd-fnt-family-mono);
-    font-size: var(--bmd-fnt-size-200);
-}
-
-/* Shown next to a result while it is being recomputed, so a slow run never looks like a frozen
-   page. It is a status, so the element carrying it is role="status". */
-.working {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bmd-sp-snudge);
-    font-size: var(--bmd-fnt-size-200);
-    font-weight: var(--bmd-fnt-weight-regular);
-    letter-spacing: normal;
-    text-transform: none;
-    color: var(--bmd-clr-fg-3);
-}
-
-.working::before {
-    content: "";
-    width: 0.75rem;
-    height: 0.75rem;
-    border: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-2);
-    border-top-color: var(--bmd-clr-brand-accent);
-    border-radius: var(--bmd-crn-circular);
-    animation: bmd-spin 0.8s linear infinite;
-}
-
-@keyframes bmd-spin {
-    to { transform: rotate(360deg); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .working::before {
-        animation-duration: 2.4s;
-    }
-}
-
-.visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-}
-
-/* ── The editor's frame ────────────────────────────────────────────────────── */
-
-/* The editor fills its container, so the page gives it one. Never taller than the window under the
-   header, so the whole working surface - toolbar, canvas, panel - is on screen at once once it has
-   been scrolled to; and it scrolls to just under the header rather than under it. */
-.editor-frame {
-    height: clamp(24rem, calc(100dvh - var(--bmd-layout-header) - var(--bmd-sp-xxxl)), 40rem);
-    scroll-margin-top: calc(var(--bmd-layout-header) + var(--bmd-sp-l));
-}
-
-@media (max-width: 47.9375rem) {
-    /* Below the editor's own breakpoint its panel moves under the canvas, so the frame needs the
-       height of both. */
-    .editor-frame {
-        height: 46rem;
-    }
-}
-
-/* ── Page specifics ────────────────────────────────────────────────────────── */
-
-/* Avatar: the result is clipped to its shape as an app would show it - the exported pixels are
-   round on their own, this only keeps the square preview box from framing them as a square. */
-.avatar-frame {
-    overflow: hidden;
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-}
-
-.avatar-frame .avatar-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border: none;
-    border-radius: 0;
-}
-
-.avatar-source {
-    flex: 1 1 12rem;
-    min-width: 0;
-}
-
-/* Results under a drop zone: the progress row, the totals, the actions and the per-file table each
-   get the same breathing room from the thing above them. */
-.optimize-progress .progress {
-    flex: 1 1 8rem;
-}
-
-.results-stats,
-.results-actions,
-.results-table,
-.formats-results,
-.metadata-report,
-.perf-results,
-.metadata-warning,
-.first-image-result {
-    margin-top: var(--bmd-sp-l);
-}
-
-.results-actions + .table-scroll {
-    margin-top: var(--bmd-sp-l);
-}
-
-/* Product: every size shown whole, letterboxed on the stage colour, so a tall variant and a wide
-   one read as the same product at different sizes. */
-.thumb .thumb-image {
-    width: 100%;
-    height: 8rem;
-    object-fit: contain;
-    border: none;
-    border-radius: 0;
-}
-
-.thumb-save {
-    margin-top: var(--bmd-sp-snudge);
-}
-
-/* Social: tall presets (a story is 9:16) are held to the window, so the whole composition and its
-   controls stay in view together. */
-.social-preview {
-    max-height: 60vh;
-    margin-inline: auto;
-}
-
-.social-meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--bmd-sp-s);
-    margin-top: var(--bmd-sp-m);
-}
-
-/* Headless: the source's facts sit beside it, and every example card shows its result whole. */
-.headless-source {
-    flex: 1 1 16rem;
-    min-width: 0;
-    margin-bottom: 0;
-}
-
-.headless-preview {
-    width: 100%;
-    max-height: 12.5rem;
-    object-fit: contain;
-}
-
-.demo-section .headless-description {
-    margin: var(--bmd-sp-s) 0 var(--bmd-sp-xs);
-}
-
-.card pre.code {
-    margin-top: var(--bmd-sp-s);
-    white-space: pre-wrap;
-}
-
-/* Pipelines: the playground's readouts. */
-.pipeline-preview {
-    max-height: 22rem;
-    margin-inline: auto;
-}
-
-.demo-section .playground-label {
-    margin-top: var(--bmd-sp-l);
-}
-
-.playground-stats {
-    margin-top: var(--bmd-sp-l);
-}
-
-/* Getting started: the snippet's output beside its numbers. */
-.first-image {
-    flex: 0 1 20rem;
-    min-width: 0;
-}
-
-.first-image-stats {
-    flex: 1 1 14rem;
-}
-
-/* Formats: an exporter's refusal is long - it names the format it was handed instead - so it wraps
-   under the badge rather than stretching the table. */
-.formats-error {
-    display: block;
-    margin-top: var(--bmd-sp-xs);
-    max-width: 32rem;
-}
-
-/* MCP server: the panels that call the demo's own /api/mcp endpoints. */
-.mcp-why .card p:last-of-type {
-    margin-bottom: var(--bmd-sp-s);
-}
-
-/* The client tabs are chips that carry a tab's selection rather than a toggle's pressed state. */
-.mcp-tabs {
-    margin: var(--bmd-sp-l) 0 var(--bmd-sp-s);
-}
-
-button.chip[aria-selected="true"] {
-    color: var(--bmd-clr-brand-accent-contrast);
-    background-color: var(--bmd-clr-brand-accent);
-    border-color: var(--bmd-clr-brand-accent);
-}
-
-/* Free text sent to a tool: a pipeline, a piece of code, a search. Monospace where it is code, so
-   what the reader types lines up the way it will in their editor. */
-.mcp-input {
-    width: 100%;
-    min-width: 0;
-    padding: var(--bmd-sp-s);
-    font: inherit;
-    font-size: var(--bmd-fnt-size-300);
-    color: var(--bmd-clr-fg-1);
-    background-color: var(--bmd-clr-bg-1);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-1);
-    border-bottom-color: var(--bmd-clr-stroke-accessible);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.mcp-input:focus-visible {
-    outline: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    outline-offset: var(--bmd-strk-thin);
-}
-
-textarea.mcp-input {
-    resize: vertical;
-    line-height: 1.55;
-    font-family: var(--bmd-fnt-family-mono);
-    font-size: var(--bmd-fnt-size-200);
-    white-space: pre;
-    overflow-x: auto;
-}
-
-.mcp-pipeline {
-    min-height: 6.5rem;
-}
-
-.mcp-code {
-    min-height: 16rem;
-}
-
-.mcp-presets {
-    margin-bottom: var(--bmd-sp-l);
-}
-
-.mcp-run-stats {
-    margin-bottom: var(--bmd-sp-l);
-}
-
-.mcp-operations {
-    margin-bottom: var(--bmd-sp-s);
-    white-space: pre-wrap;
-}
-
-.mcp-notes,
-.mcp-resources {
-    margin: 0 0 var(--bmd-sp-m);
-    padding-inline-start: var(--bmd-sp-l);
-    font-size: var(--bmd-fnt-size-300);
-}
-
-.mcp-notes li + li,
-.mcp-resources li + li {
-    margin-top: var(--bmd-sp-xs);
-}
-
-/* A resource's description quotes URIs such as bmage://source/Demo%2FClient%2F..., one unbreakable
-   word wider than a phone; it breaks anywhere rather than pushing the page sideways. */
-.mcp-resources li {
-    min-width: 0;
-    overflow-wrap: anywhere;
-}
-
-.demo-section .mcp-reading {
-    max-width: var(--bmd-layout-measure);
-    color: var(--bmd-clr-fg-2);
-}
-
-.mcp-results {
-    margin-top: var(--bmd-sp-l);
-}
-
-/* One finding per row, its severity on the leading edge so a list of them sorts itself by eye. */
-.mcp-findings {
-    list-style: none;
-    margin: var(--bmd-sp-l) 0 0;
-    padding: 0;
-    display: grid;
-    gap: var(--bmd-sp-s);
-}
-
-.mcp-finding {
-    display: flex;
-    flex-direction: column;
-    gap: var(--bmd-sp-xs);
-    min-width: 0;
-    padding: var(--bmd-sp-m) var(--bmd-sp-l);
-    font-size: var(--bmd-fnt-size-300);
-    background-color: var(--bmd-clr-bg-2);
-    border: var(--bmd-strk-thin) solid var(--bmd-clr-stroke-2);
-    border-inline-start: var(--bmd-strk-thicker) solid var(--bmd-clr-stroke-1);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.mcp-finding.error {
-    border-inline-start-color: var(--bmd-clr-danger);
-}
-
-.mcp-finding.warning {
-    border-inline-start-color: color-mix(in srgb, var(--bmd-clr-danger) 50%, #E8A317);
-}
-
-.mcp-finding.suggestion {
-    border-inline-start-color: var(--bmd-clr-brand-stroke);
-}
-
-.mcp-finding-head {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--bmd-sp-s);
-}
-
-.mcp-finding-message {
-    color: var(--bmd-clr-fg-2);
-}
-
-.mcp-finding-fix {
-    color: var(--bmd-clr-fg-1);
-    font-weight: var(--bmd-fnt-weight-semibold);
-}
-
-.badge-warning {
-    color: color-mix(in srgb, var(--bmd-clr-danger) 50%, #E8A317);
-    background-color: color-mix(in srgb, color-mix(in srgb, var(--bmd-clr-danger) 50%, #E8A317) 14%, transparent);
-}
-
-.mcp-search {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bmd-sp-s);
-    margin-bottom: var(--bmd-sp-l);
-}
-
-.mcp-search .mcp-input {
-    flex: 1 1 14rem;
-    width: auto;
-}
-
-.mcp-hits {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: var(--bmd-sp-xs);
-}
-
-.mcp-hits li {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: var(--bmd-sp-xs) var(--bmd-sp-m);
-    min-width: 0;
-    padding: var(--bmd-sp-s) var(--bmd-sp-m);
-    background-color: var(--bmd-clr-bg-2);
-    border-radius: var(--bmd-crn-medium);
-}
-
-.mcp-hit-title {
-    font-weight: var(--bmd-fnt-weight-semibold);
-    color: var(--bmd-clr-fg-1);
-    overflow-wrap: anywhere;
-}
-
-/* The parameters stack in their cell; a tool with seven of them is a column, not a paragraph. */
-.mcp-params {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--bmd-sp-xxs);
-}
-
-table.ref.mcp-tools td code,
-table.ref.mcp-tools th code {
-    white-space: normal;
-    overflow-wrap: anywhere;
-}
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/css/editor-theme.css b/src/Utilities/Bmage/Demo/Server/wwwroot/css/editor-theme.css
deleted file mode 100644
index cba4ea92592..00000000000
--- a/src/Utilities/Bmage/Demo/Server/wwwroot/css/editor-theme.css
+++ /dev/null
@@ -1,50 +0,0 @@
-/* Bit.Bmage Demo - the bridge from the site's theme to the editor's.
-
-   The Bmage editor is themed entirely through custom properties on .bmg-editor (see
-   _content/Bit.Bmage/bit-bmage-editor.css), and out of the box it follows the operating
-   system's prefers-color-scheme. This site has a theme switch of its own in the header, so an
-   editor left on the defaults would be dark on a light page whenever the two disagree. This file
-   is the fix a real host would write too: it points the editor's tokens at the site's semantic
-   tokens, which already follow data-theme on <html>.
-
-   It is also the demonstration of the editor's theming contract - nothing below reaches for a
-   class inside the component, only for the variables the component publishes.
-
-   Two scopes:
-
-     * :root, so the drop zone and the selects the scenario pages use outside an editor
-       (BmageDropZone, .bmg-select, .bmg-color) pick the tokens up by inheritance.
-     * .bmg-editor without a forced theme. The editor declares its defaults on itself, so
-       inheritance from :root cannot reach inside it; this selector outranks both its defaults and
-       its prefers-color-scheme block (two classes against three), while an editor given
-       bmg-theme-light or bmg-theme-dark - as the editor page's theme chips do - keeps the
-       component's own palette, which is the point of those classes. */
-
-:root,
-.bmg-editor:not(.bmg-theme-light):not(.bmg-theme-dark) {
-    --bmg-bg: var(--bmd-clr-bg-1);
-    --bmg-bg-subtle: var(--bmd-clr-bg-2);
-    --bmg-bg-sunken: var(--bmd-clr-bg-4);
-    --bmg-canvas-bg: var(--bmd-clr-stage);
-    --bmg-border: var(--bmd-clr-stroke-1);
-
-    --bmg-text: var(--bmd-clr-fg-1);
-    --bmg-text-muted: var(--bmd-clr-fg-3);
-
-    --bmg-accent: var(--bmd-clr-brand-accent);
-    --bmg-accent-text: var(--bmd-clr-brand-accent-contrast);
-    --bmg-accent-subtle: var(--bmd-clr-brand-wash);
-    --bmg-danger: var(--bmd-clr-danger);
-
-    --bmg-radius: var(--bmd-crn-large);
-    --bmg-radius-sm: var(--bmd-crn-medium);
-    --bmg-focus-ring: var(--bmd-strk-thick) solid var(--bmd-clr-stroke-focus);
-    --bmg-shadow: var(--bmd-shdw-4);
-    --bmg-transition: var(--bmd-dur-faster) var(--bmd-crv-easy-ease);
-}
-
-/* The editor sets its own system font stack; the site's is the same family of faces, named so the
-   component and the page around it render their labels identically on every platform. */
-.bmg-editor {
-    font-family: var(--bmd-fnt-family-base);
-}
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/css/theme.css b/src/Utilities/Bmage/Demo/Server/wwwroot/css/theme.css
deleted file mode 100644
index a2de12c3923..00000000000
--- a/src/Utilities/Bmage/Demo/Server/wwwroot/css/theme.css
+++ /dev/null
@@ -1,388 +0,0 @@
-/* Bit.Bmage Demo - design tokens.
-
-   The demo carries no dependency other than Bit.Bmage itself, so the design system it is built on
-   is written out here rather than pulled from a component library. It is Microsoft's Fluent 2,
-   transcribed - the same transcription the Bmotion demo uses, so the bit platform's library sites
-   read as one family: the neutral ramps, the type ramp, the corner radii, the elevation shadows and
-   the motion curves all carry Fluent's own names and Fluent's own values.
-
-   Three layers, in the order a token should be reached for:
-
-     1. Ramps      --bmd-brand-10..160, --bmd-grey-*.  Raw colour. Never used outside this file.
-     2. Semantic   --bmd-clr-*, --bmd-fnt-*, --bmd-crn-*, --bmd-shdw-*, --bmd-dur-*, --bmd-crv-*.
-                   What a token is *for*. This is the layer to write CSS against.
-     3. Bridges    the --bmg-* custom properties of the bit-bmage-editor.css stylesheet, set in
-                   editor-theme.css from the semantic layer, so the editor component and the page
-                   around it are painted from one palette.
-
-   The prefix is --bmd- (Bmage demo) rather than the library's own --bmg-: the site's tokens and
-   the component's tokens are different things, and keeping their names apart is what lets the
-   bridge in editor-theme.css map one onto the other without either shadowing the other.
-
-   The brand ramp is a violet, so a reader moving between bit's library sites can tell which one
-   they are on at a glance; the shade every text and link uses clears 4.5:1 on both of the surfaces
-   this site paints, in both themes.
-
-   The theme is selected by the data-theme attribute on <html>, which the bootstrap script in
-   App.razor sets before first paint (see js/demo.js). The bare :root selector carries the light
-   palette so a document with no attribute at all - the pre-hydration prerender, or a browser with
-   JS disabled - still renders a complete theme rather than unstyled markup. */
-
-/* ── 1. Ramps ──────────────────────────────────────────────────────────────── */
-
-:root {
-    /* Brand. A violet ramp in Fluent's sixteen steps, anchored at shade 80. Shade 70 is the text
-       shade on the light surfaces (8.2:1 on white), shade 110 on the dark ones (5.7:1 on the
-       dark card). */
-    --bmd-brand-10: #140E26;
-    --bmd-brand-20: #1E1538;
-    --bmd-brand-30: #2A1C4F;
-    --bmd-brand-40: #352266;
-    --bmd-brand-50: #41297E;
-    --bmd-brand-60: #4C2F96;
-    --bmd-brand-70: #5935AE;
-    --bmd-brand-80: #6941C6;
-    --bmd-brand-90: #7C58D3;
-    --bmd-brand-100: #9172E0;
-    --bmd-brand-110: #A08AE6;
-    --bmd-brand-120: #AE9DEB;
-    --bmd-brand-130: #C0B2F0;
-    --bmd-brand-140: #D3C8F5;
-    --bmd-brand-150: #E5DEFA;
-    --bmd-brand-160: #F4F1FD;
-
-    /* Neutrals. Fluent's grey ramp, named by lightness the way Fluent names it. */
-    --bmd-grey-0: #000000;
-    --bmd-grey-8: #141414;
-    --bmd-grey-10: #1A1A1A;
-    --bmd-grey-12: #1F1F1F;
-    --bmd-grey-14: #242424;
-    --bmd-grey-16: #292929;
-    --bmd-grey-20: #333333;
-    --bmd-grey-24: #3D3D3D;
-    --bmd-grey-26: #424242;
-    --bmd-grey-30: #4D4D4D;
-    --bmd-grey-38: #616161;
-    --bmd-grey-44: #707070;
-    --bmd-grey-50: #808080;
-    --bmd-grey-60: #999999;
-    --bmd-grey-68: #ADADAD;
-    --bmd-grey-78: #C7C7C7;
-    --bmd-grey-82: #D1D1D1;
-    --bmd-grey-84: #D6D6D6;
-    --bmd-grey-88: #E0E0E0;
-    --bmd-grey-90: #E6E6E6;
-    --bmd-grey-92: #EBEBEB;
-    --bmd-grey-94: #F0F0F0;
-    --bmd-grey-96: #F5F5F5;
-    --bmd-grey-98: #FAFAFA;
-    --bmd-grey-100: #FFFFFF;
-
-    /* The hues outside the brand: bit's accent orange, which the hero uses as the far end of a
-       gradient from the violet, and the two status colours a processing result is reported in -
-       bytes saved, or an error. */
-    --bmd-peach-light: #FFC7AC;
-    --bmd-peach: #FD7F36;
-    --bmd-peach-dark: #C25520;
-    --bmd-green-light: #3CC77E;
-    --bmd-green-dark: #107C41;
-    --bmd-red-light: #F87C7C;
-    --bmd-red-dark: #B42318;
-}
-
-/* ── 2. Semantic - light ───────────────────────────────────────────────────── */
-
-:root,
-:root[data-theme="light"] {
-    color-scheme: light;
-
-    /* Brand. Backgrounds take shade 80 and darken on interaction, exactly as Fluent does; text
-       and links take shade 70, which is the shade that clears 4.5:1 on both of the surfaces this
-       site paints - the white card and the grey canvas behind it. */
-    --bmd-clr-brand-bg: var(--bmd-brand-80);
-    --bmd-clr-brand-bg-hover: var(--bmd-brand-70);
-    --bmd-clr-brand-bg-pressed: var(--bmd-brand-60);
-    --bmd-clr-brand-bg-subtle: var(--bmd-brand-160);
-    --bmd-clr-brand-fg: var(--bmd-brand-70);
-    --bmd-clr-brand-fg-hover: var(--bmd-brand-60);
-    --bmd-clr-brand-fg-pressed: var(--bmd-brand-50);
-    --bmd-clr-brand-fg-on-bg: var(--bmd-grey-100);
-    --bmd-clr-brand-stroke: var(--bmd-brand-80);
-
-    /* The dual-role accent, which Fluent itself does not have: one shade that works both as a
-       fill and as text, in both themes - a pressed chip, a progress bar, a selected option. The
-       chrome uses the split pair above instead, which is what Fluent itself does. */
-    --bmd-clr-brand-accent: var(--bmd-brand-80);
-    --bmd-clr-brand-accent-hover: var(--bmd-brand-70);
-    --bmd-clr-brand-accent-pressed: var(--bmd-brand-60);
-    --bmd-clr-brand-accent-contrast: var(--bmd-grey-100);
-
-    /* Status. Success and danger are text colours as much as fills - a "42% smaller" in a table -
-       so each is the shade that reads on the card. */
-    --bmd-clr-success: var(--bmd-green-dark);
-    --bmd-clr-danger: var(--bmd-red-dark);
-
-    /* The stage an image is shown on: a mid neutral, so neither a white product shot nor a black
-       night sky disappears into it. The editor's canvas area uses the same. */
-    --bmd-clr-stage: var(--bmd-grey-44);
-
-    /* Neutral backgrounds. Background1 is the raised surface - a card, the header, the nav panel;
-       the canvas the whole page is painted on is Background3, one step down from it. */
-    --bmd-clr-bg-1: var(--bmd-grey-100);
-    --bmd-clr-bg-1-hover: var(--bmd-grey-96);
-    --bmd-clr-bg-1-pressed: var(--bmd-grey-88);
-    --bmd-clr-bg-2: var(--bmd-grey-98);
-    --bmd-clr-bg-3: var(--bmd-grey-96);
-    --bmd-clr-bg-3-hover: var(--bmd-grey-92);
-    --bmd-clr-bg-4: var(--bmd-grey-94);
-    --bmd-clr-bg-5: var(--bmd-grey-92);
-    --bmd-clr-bg-disabled: var(--bmd-grey-94);
-    --bmd-clr-bg-inverted: var(--bmd-grey-14);
-    --bmd-clr-bg-overlay: rgba(0, 0, 0, 0.4);
-
-    /* Neutral foregrounds. */
-    --bmd-clr-fg-1: var(--bmd-grey-14);
-    --bmd-clr-fg-2: var(--bmd-grey-26);
-    --bmd-clr-fg-3: var(--bmd-grey-38);
-    --bmd-clr-fg-4: var(--bmd-grey-44);
-    --bmd-clr-fg-disabled: var(--bmd-grey-68);
-    --bmd-clr-fg-inverted: var(--bmd-grey-100);
-
-    /* Neutral strokes. Stroke2 draws the hairlines that separate the site's surfaces; Stroke1
-       draws the edge of a control; StrokeAccessible is the one that clears 3:1 against both
-       surfaces, so it is what a control's own border becomes on hover. */
-    --bmd-clr-stroke-1: var(--bmd-grey-82);
-    --bmd-clr-stroke-2: var(--bmd-grey-88);
-    --bmd-clr-stroke-3: var(--bmd-grey-94);
-    --bmd-clr-stroke-accessible: var(--bmd-grey-38);
-    --bmd-clr-stroke-focus: var(--bmd-grey-14);
-
-    /* Fluent's elevation set. The alpha pairs are Fluent's own: a tight ambient shadow under a
-       wider directional one, so a raised surface reads as raised at any size. */
-    --bmd-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bmd-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bmd-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bmd-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bmd-shdw-28: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.24), 0 0 0.5rem rgba(0, 0, 0, 0.2);
-    --bmd-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.24), 0 0 0.5rem rgba(0, 0, 0, 0.2);
-
-    /* The tint a brand-coloured surface is washed with. color-mix keeps it tied to the accent
-       rather than freezing one theme's hex value. */
-    --bmd-clr-brand-wash: color-mix(in srgb, var(--bmd-brand-80) 10%, transparent);
-
-    /* Syntax highlighting for the code boxes. The token set is the demo's own (see
-       Shared/SyntaxHighlighter.cs); only the colours are themed, and they are tuned against
-       --bmd-clr-bg-3, which is the surface a <pre> is painted on. */
-    --bmd-tok-com: #3E7A34;
-    --bmd-tok-tag: #1F5FA8;
-    --bmd-tok-attr: #1A6FA8;
-    --bmd-tok-str: #A63A20;
-    --bmd-tok-key: #1F5FA8;
-    --bmd-tok-type: #197066;
-    --bmd-tok-num: #4F6E1E;
-    --bmd-tok-raz: #8A3D9C;
-}
-
-/* ── 2. Semantic - dark ────────────────────────────────────────────────────── */
-
-/* Fluent's dark theme is a neutral grey theme rather than a tinted one, and it inverts the
-   surface relationship rather than the ramp: the canvas is the darkest surface and a card sits
-   above it, one step lighter. Everything below mirrors the light block role for role. */
-
-:root[data-theme="dark"] {
-    color-scheme: dark;
-
-    --bmd-clr-brand-bg: var(--bmd-brand-70);
-    --bmd-clr-brand-bg-hover: var(--bmd-brand-80);
-    --bmd-clr-brand-bg-pressed: var(--bmd-brand-60);
-    --bmd-clr-brand-bg-subtle: var(--bmd-brand-20);
-    --bmd-clr-brand-fg: var(--bmd-brand-110);
-    --bmd-clr-brand-fg-hover: var(--bmd-brand-120);
-    --bmd-clr-brand-fg-pressed: var(--bmd-brand-130);
-    --bmd-clr-brand-fg-on-bg: var(--bmd-grey-100);
-    --bmd-clr-brand-stroke: var(--bmd-brand-110);
-
-    /* The dual-role accent flips to the light end of the ramp here, and takes near-black as its
-       contrast colour: on a dark canvas the shade that reads as text is the light one. */
-    --bmd-clr-brand-accent: var(--bmd-brand-110);
-    --bmd-clr-brand-accent-hover: var(--bmd-brand-120);
-    --bmd-clr-brand-accent-pressed: var(--bmd-brand-130);
-    --bmd-clr-brand-accent-contrast: var(--bmd-grey-14);
-
-    --bmd-clr-success: var(--bmd-green-light);
-    --bmd-clr-danger: var(--bmd-red-light);
-
-    --bmd-clr-stage: var(--bmd-grey-16);
-
-    --bmd-clr-bg-1: var(--bmd-grey-12);
-    --bmd-clr-bg-1-hover: var(--bmd-grey-16);
-    --bmd-clr-bg-1-pressed: var(--bmd-grey-20);
-    --bmd-clr-bg-2: var(--bmd-grey-10);
-    --bmd-clr-bg-3: var(--bmd-grey-8);
-    --bmd-clr-bg-3-hover: var(--bmd-grey-12);
-    --bmd-clr-bg-4: var(--bmd-grey-16);
-    --bmd-clr-bg-5: var(--bmd-grey-20);
-    --bmd-clr-bg-disabled: var(--bmd-grey-16);
-    --bmd-clr-bg-inverted: var(--bmd-grey-96);
-    --bmd-clr-bg-overlay: rgba(0, 0, 0, 0.65);
-
-    --bmd-clr-fg-1: var(--bmd-grey-100);
-    --bmd-clr-fg-2: var(--bmd-grey-84);
-    --bmd-clr-fg-3: var(--bmd-grey-68);
-    --bmd-clr-fg-4: var(--bmd-grey-60);
-    --bmd-clr-fg-disabled: var(--bmd-grey-38);
-    --bmd-clr-fg-inverted: var(--bmd-grey-14);
-
-    --bmd-clr-stroke-1: var(--bmd-grey-30);
-    --bmd-clr-stroke-2: var(--bmd-grey-20);
-    --bmd-clr-stroke-3: var(--bmd-grey-16);
-    --bmd-clr-stroke-accessible: var(--bmd-grey-68);
-    --bmd-clr-stroke-focus: var(--bmd-grey-100);
-
-    /* Fluent deepens the alphas so an elevated surface still reads against a near-black canvas,
-       where a light-theme shadow would vanish. */
-    --bmd-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bmd-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bmd-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bmd-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bmd-shdw-28: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.4), 0 0 0.5rem rgba(0, 0, 0, 0.28);
-    --bmd-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.4), 0 0 0.5rem rgba(0, 0, 0, 0.28);
-
-    --bmd-clr-brand-wash: color-mix(in srgb, var(--bmd-brand-110) 16%, transparent);
-
-    --bmd-tok-com: #6A9955;
-    --bmd-tok-tag: #569CD6;
-    --bmd-tok-attr: #9CDCFE;
-    --bmd-tok-str: #CE9178;
-    --bmd-tok-key: #569CD6;
-    --bmd-tok-type: #4EC9B0;
-    --bmd-tok-num: #B5CEA8;
-    --bmd-tok-raz: #C586C0;
-}
-
-/* ── 2. Semantic - shape, type, motion and layout ──────────────────────────── */
-
-/* The parts of Fluent that do not change with the palette. */
-
-:root {
-    /* Corner radius. Fluent 2's scale - the step up from Fluent 1's near-square 2px is the most
-       visible single thing about the newer system, so it is taken as written. */
-    --bmd-crn-none: 0;
-    --bmd-crn-small: 0.125rem;
-    --bmd-crn-medium: 0.25rem;
-    --bmd-crn-large: 0.375rem;
-    --bmd-crn-xlarge: 0.5rem;
-    --bmd-crn-circular: 62.4375rem;
-
-    /* Stroke width. */
-    --bmd-strk-thin: 0.0625rem;
-    --bmd-strk-thick: 0.125rem;
-    --bmd-strk-thicker: 0.1875rem;
-
-    /* Spacing. Fluent's ramp, and the only source of a margin or a padding in this site. */
-    --bmd-sp-none: 0;
-    --bmd-sp-xxs: 0.125rem;
-    --bmd-sp-xs: 0.25rem;
-    --bmd-sp-snudge: 0.375rem;
-    --bmd-sp-s: 0.5rem;
-    --bmd-sp-mnudge: 0.625rem;
-    --bmd-sp-m: 0.75rem;
-    --bmd-sp-l: 1rem;
-    --bmd-sp-xl: 1.25rem;
-    --bmd-sp-xxl: 1.5rem;
-    --bmd-sp-xxxl: 2rem;
-    --bmd-sp-4xl: 2.5rem;
-    --bmd-sp-5xl: 3rem;
-    --bmd-sp-6xl: 4rem;
-    --bmd-sp-7xl: 5rem;
-
-    /* Type. Segoe UI Variable is Fluent 2's typeface and ships with Windows 11; the rest of the
-       stack is the platform's own UI face, so the site is never the reason a font is downloaded. */
-    --bmd-fnt-family-base: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bmd-fnt-family-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bmd-fnt-family-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-    /* Fluent's type ramp. The sizes are the ramp as published; the leading on the two body sizes
-       is opened up from Fluent's own because this site is read as prose rather than scanned as an
-       application surface, and 22px on 16px is tight for a paragraph. */
-    --bmd-fnt-size-100: 0.625rem;   /* Caption2   10 */
-    --bmd-fnt-size-200: 0.75rem;    /* Caption1   12 */
-    --bmd-fnt-size-300: 0.875rem;   /* Body1      14 */
-    --bmd-fnt-size-400: 1rem;       /* Body2      16 */
-    --bmd-fnt-size-500: 1.25rem;    /* Subtitle1  20 */
-    --bmd-fnt-size-600: 1.5rem;     /* Title3     24 */
-    --bmd-fnt-size-700: 1.75rem;    /* Title2     28 */
-    --bmd-fnt-size-800: 2rem;       /* Title1     32 */
-    --bmd-fnt-size-900: 2.5rem;     /* LargeTitle 40 */
-    --bmd-fnt-size-1000: 4.25rem;   /* Display    68 */
-
-    --bmd-fnt-line-100: 0.875rem;
-    --bmd-fnt-line-200: 1rem;
-    --bmd-fnt-line-300: 1.25rem;
-    --bmd-fnt-line-400: 1.375rem;
-    --bmd-fnt-line-500: 1.75rem;
-    --bmd-fnt-line-600: 2rem;
-    --bmd-fnt-line-700: 2.25rem;
-    --bmd-fnt-line-800: 2.5rem;
-    --bmd-fnt-line-900: 3.25rem;
-    --bmd-fnt-line-1000: 5.75rem;
-
-    /* Prose leading, used wherever a run of text is longer than a label. */
-    --bmd-fnt-line-prose: 1.625;
-
-    --bmd-fnt-weight-regular: 400;
-    --bmd-fnt-weight-medium: 500;
-    --bmd-fnt-weight-semibold: 600;
-    --bmd-fnt-weight-bold: 700;
-
-    /* Motion. Fluent's duration ramp and its curve set - a decelerating curve for anything
-       entering, an accelerating one for anything leaving, and easyEase for a state change that
-       does neither. */
-    --bmd-dur-ultra-fast: 50ms;
-    --bmd-dur-faster: 100ms;
-    --bmd-dur-fast: 150ms;
-    --bmd-dur-normal: 200ms;
-    --bmd-dur-gentle: 250ms;
-    --bmd-dur-slow: 300ms;
-    --bmd-dur-slower: 400ms;
-    --bmd-dur-ultra-slow: 500ms;
-
-    --bmd-crv-accelerate-max: cubic-bezier(0.9, 0.1, 1, 0.2);
-    --bmd-crv-accelerate-mid: cubic-bezier(1, 0, 1, 1);
-    --bmd-crv-accelerate-min: cubic-bezier(0.8, 0, 0.78, 1);
-    --bmd-crv-decelerate-max: cubic-bezier(0.1, 0.9, 0.2, 1);
-    --bmd-crv-decelerate-mid: cubic-bezier(0, 0, 0, 1);
-    --bmd-crv-decelerate-min: cubic-bezier(0.33, 0, 0.1, 1);
-    --bmd-crv-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
-    --bmd-crv-linear: cubic-bezier(0, 0, 1, 1);
-
-    /* Layout. The decisions a design system leaves to the product: how wide the reading column
-       runs, how far prose may stretch before it gets hard to follow, and how much room the two
-       sticky columns take. */
-    --bmd-layout-max: 90rem;        /* 1440px - the outer rail-to-rail width */
-    --bmd-layout-content: 53rem;    /* 848px  - the article column */
-    --bmd-layout-measure: 72ch;
-    --bmd-layout-header: 3.5rem;    /* 56px - every sticky offset below is derived from this */
-    --bmd-layout-nav: 16.5rem;      /* 264px */
-    --bmd-layout-rail: 15rem;       /* 240px */
-    /* Breathing room between the sticky header and whatever has been scrolled to. WCAG 2.2's
-       "focus not obscured" is why this is a token rather than a number: the header, the
-       scroll-padding on <html> and the rail's own jump all have to agree on it. */
-    --bmd-layout-header-gap: 1.5rem;
-}
-
-/* Every transition on the site is chrome, so a reader who has asked for less motion gets none of
-   it. The durations are collapsed rather than the transitions deleted, so nothing that waits on a
-   transitionend is left waiting. */
-@media (prefers-reduced-motion: reduce) {
-    :root {
-        --bmd-dur-ultra-fast: 0.01ms;
-        --bmd-dur-faster: 0.01ms;
-        --bmd-dur-fast: 0.01ms;
-        --bmd-dur-normal: 0.01ms;
-        --bmd-dur-gentle: 0.01ms;
-        --bmd-dur-slow: 0.01ms;
-        --bmd-dur-slower: 0.01ms;
-        --bmd-dur-ultra-slow: 0.01ms;
-    }
-}
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/demo.css b/src/Utilities/Bmage/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..e6d2cc47f04
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,887 @@
+/* ============================================================================================
+   Bmage demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is this site's own - the syntax highlighter's tokens, the
+   workbenches the scenario pages are built from (an image beside its controls), the previews and
+   readouts they report back in, and the bridge that points the editor component's custom
+   properties at the site's theme. It is written against the kit's --bb-* names, so it follows the
+   light/dark theme with no rules of its own for either, except where a value has no token.
+
+   The line this file will not cross: it styles the frame around a sample and the controls that
+   drive it, never the pixels it produces. A preview is shown at its real colours on a
+   checkerboard, because transparency is part of the output and a page that hid it would be
+   misreporting it.
+   ============================================================================================ */
+
+/* ---------- Values the kit has no token for ---------- */
+
+:root {
+    /* The stage an image is shown on: a mid neutral, so neither a white product shot nor a black
+       night sky disappears into it. The editor's canvas area uses the same. */
+    --demo-stage: #707070;
+
+    /* The transparency checkerboard under every preview. */
+    --demo-checker-a: #FFFFFF;
+    --demo-checker-b: #E3E3E3;
+
+    /* The highlighter tells more kinds apart than the kit's four (keyword, string, comment,
+       parameter), so the extra ones get colours of their own, picked to hold their contrast on
+       --bb-code-bg in both themes. */
+    --demo-code-type: #8250DF;
+    --demo-code-number: #CF222E;
+    --demo-code-razor: #A21CAF;
+}
+
+:root[bit-theme="dark"] {
+    --demo-stage: #292D32;
+    --demo-checker-a: #2A2F35;
+    --demo-checker-b: #1E2328;
+    --demo-code-type: #D2A8FF;
+    --demo-code-number: #FF7B72;
+    --demo-code-razor: #F0ABFC;
+}
+
+/* ---------- The editor component, on the site's theme ----------
+
+   The Bmage editor is themed entirely through custom properties on .bmg-editor (see
+   _content/Bit.Bmage/bit-bmage-editor.css), and out of the box it follows the operating system's
+   prefers-color-scheme. This site has a theme switch of its own in the header, so an editor left
+   on the defaults would be dark on a light page whenever the two disagree. These rules are the fix
+   a real host would write too: they point the editor's tokens at the site's, which already follow
+   bit-theme on <html> - and they are the demonstration of the editor's theming contract, because
+   nothing below reaches for a class inside the component, only for the variables it publishes.
+
+   Two scopes:
+
+     * :root, so the drop zones and colour wells the scenario pages use outside an editor
+       (BmageDropZone, .bmg-color) pick the tokens up by inheritance.
+     * .bmg-editor without a forced theme. The editor declares its defaults on itself, so
+       inheritance from :root cannot reach inside it; this selector outranks both its defaults and
+       its prefers-color-scheme block, whichever stylesheet loads last, while an editor given
+       bmg-theme-light or bmg-theme-dark - as the editor page's theme buttons do - keeps the
+       component's own palette, which is the point of those classes. */
+
+:root,
+.bmg-editor:not(.bmg-theme-light):not(.bmg-theme-dark) {
+    --bmg-bg: var(--bb-surface);
+    --bmg-bg-subtle: var(--bb-surface-sunken);
+    --bmg-bg-sunken: var(--bb-surface-2);
+    --bmg-canvas-bg: var(--demo-stage);
+    --bmg-border: var(--bb-border);
+
+    --bmg-text: var(--bb-text);
+    --bmg-text-muted: var(--bb-text-muted);
+
+    --bmg-accent: var(--bb-primary);
+    --bmg-accent-text: var(--bb-primary-text);
+    --bmg-accent-subtle: var(--bb-primary-soft);
+    --bmg-danger: var(--bb-danger);
+
+    --bmg-radius: var(--bb-radius-lg);
+    --bmg-radius-sm: var(--bb-radius);
+    --bmg-focus-ring: 2px solid var(--fl-stroke-focus-outer);
+    --bmg-shadow: var(--bb-shadow-card);
+    --bmg-transition: var(--fl-duration-faster) var(--fl-curve-easy-ease);
+}
+
+/* The editor sets its own system font stack; the site's is the same family of faces, named so the
+   component and the page around it render their labels identically on every platform. html in
+   front so the rule wins over the component's own, which is linked after this file. */
+html .bmg-editor {
+    font-family: var(--bb-font-sans);
+}
+
+/* ---------- Code: SyntaxHighlighter's tokens on the kit's code surface ---------- */
+
+.bb-code .tok-com { color: var(--bb-code-comment); font-style: italic; }
+.bb-code .tok-tag,
+.bb-code .tok-key { color: var(--bb-code-keyword); }
+.bb-code .tok-attr { color: var(--bb-code-param); }
+.bb-code .tok-str { color: var(--bb-code-string); }
+.bb-code .tok-type { color: var(--demo-code-type); }
+.bb-code .tok-num { color: var(--demo-code-number); }
+.bb-code .tok-raz { color: var(--demo-code-razor); font-weight: var(--fl-weight-semibold); }
+
+/* The lines where a Bmage component is used, so they stand out from the markup around them. The
+   tint runs out to the block's padding on both sides; top-aligned so the line keeps the height of
+   the plain ones around it. */
+.bb-code .hl-line {
+    display: inline-block;
+    vertical-align: top;
+    min-width: calc(100% + 4rem);
+    min-height: 1lh;
+    margin: 0 -3rem 0 -1rem;
+    padding: 0 3rem 0 calc(1rem - 3px);
+    background: color-mix(in srgb, var(--bb-primary) 9%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+}
+
+/* The "Show code" toggle in front of a collapsed snippet. */
+.demo-source-caret {
+    font-size: .8em;
+    color: var(--bb-text-soft);
+}
+
+.demo-source-glyph {
+    font-family: var(--bb-mono);
+    color: var(--bb-primary);
+}
+
+.demo-source-lang {
+    padding-inline-start: .5rem;
+    margin-inline-start: .125rem;
+    border-inline-start: 1px solid var(--bb-border);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    letter-spacing: .04em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A short, live readout set as code: the document behind the editor, the steps of a pipeline, the
+   snippet under a headless example. Plain text that changes as the reader works, so it is not
+   highlighted, and it carries no copy button - it is read, not taken. */
+.demo-readout {
+    margin: 0 0 1rem;
+    padding: .75rem 1rem;
+    overflow-x: auto;
+    direction: ltr;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-card .bb-card .demo-readout {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+/* ---------- Icons on the samples' buttons ---------- */
+
+svg.icon {
+    width: 1em;
+    height: 1em;
+    flex: none;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+/* ---------- Tables ----------
+
+   The reference tables lead each row with a <th scope="row"> rather than a cell, which the kit's
+   table leaves to the browser; it gets the identifier column's treatment here. */
+.bb-table tbody th {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    text-align: start;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+    /* A row header is a name: it wraps between its words, never inside one. */
+    overflow-wrap: normal;
+}
+
+/* The capability report's values are names too - "BrowserWebAssembly" broken in half reads as two
+   words - and its tables are short enough to fit their tile without breaking them. */
+.capabilities-report .bb-table td {
+    overflow-wrap: normal;
+}
+
+.bb-table tbody tr:first-child th {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover th {
+    background: var(--bb-surface-hover);
+}
+
+.bb-table td code,
+.bb-table th code {
+    white-space: nowrap;
+}
+
+.bb-table .demo-num {
+    text-align: end;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ---------- The workbench: an image beside the controls that shape it ----------
+
+   The image takes what is left once the controls have their column, and the two stack when the
+   frame - not the window - is too narrow for both: the main column may not shrink below just over
+   half the frame, so the controls wrap under it instead. */
+.demo-split {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1.5rem;
+}
+
+.demo-split > :first-child {
+    flex: 999 1 0;
+    min-inline-size: min(100%, 55%);
+}
+
+.demo-split > :last-child {
+    flex: 1 1 17rem;
+    min-width: 0;
+}
+
+/* The controls: one surface step down from the frame around them. */
+.demo-panel {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.demo-panel > :last-child {
+    margin-bottom: 0;
+}
+
+/* The small label over a group of controls or a result, with a status beside it. */
+.demo-label {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin-bottom: .75rem;
+}
+
+.demo-divider {
+    margin: 1rem 0;
+}
+
+/* A row of buttons under a drop zone. */
+.bmg-dropzone + .bb-toolbar {
+    margin-top: .75rem;
+}
+
+/* A labelled group of toggles in a toolbar: the editor page's theme, direction and language. */
+.demo-toolbar-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+}
+
+.demo-toolbar-label {
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* ---------- Controls ---------- */
+
+/* A labelled control in a panel. The label carries the current value at its far end, so a slider
+   reads as "Output size  256 px" without a second line. */
+.demo-field {
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    margin-bottom: 1rem;
+}
+
+.demo-field:last-child {
+    margin-bottom: 0;
+}
+
+.demo-field-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.demo-field-value {
+    font-weight: var(--fl-weight-regular);
+    font-variant-numeric: tabular-nums;
+    color: var(--bb-text-muted);
+}
+
+.demo-field > select,
+.demo-field > input[type="text"],
+.demo-field > input[type="range"],
+.demo-field > textarea {
+    width: 100%;
+}
+
+/* A choice inside a panel spans the panel, two options to a row, so a group too long for one row
+   reads as one control rather than as a row and a stray. */
+.demo-panel .bb-segmented {
+    display: flex;
+}
+
+.demo-panel .bb-segmented > button {
+    flex: 1 1 40%;
+}
+
+.demo-field-inline {
+    flex-direction: row;
+    align-items: center;
+    gap: .5rem;
+}
+
+.demo-field-inline .demo-field-label {
+    font-weight: var(--fl-weight-regular);
+    cursor: pointer;
+}
+
+/* A smaller button, for an action on a row of a table or a tile. */
+.btn.demo-btn-sm {
+    min-height: 1.625rem;
+    padding: .125rem .5rem;
+    font-size: var(--fl-font-size-100);
+}
+
+.btn.demo-btn-block {
+    width: 100%;
+}
+
+/* ---------- Results ---------- */
+
+/* Stats inside a narrow panel: more to a row, at a size the column has room for. */
+.bb-stats.demo-stats-compact {
+    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
+}
+
+.demo-stats-compact .bb-stat {
+    padding: .625rem .75rem;
+}
+
+.demo-stats-compact .bb-stat-value {
+    font-size: var(--fl-font-size-400);
+}
+
+.demo-good {
+    color: var(--bb-success-text);
+}
+
+.demo-bad {
+    color: var(--bb-danger-text);
+}
+
+/* A state that is off, next to the tinted badges of states that are on. */
+.bb-badge.demo-badge-off {
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-muted);
+    box-shadow: inset 0 0 0 1px var(--bb-border);
+}
+
+/* A swatch reporting a colour rather than a control: the dominant colours of an upload. Its own
+   background and text colour are set inline, from the colour it reports. */
+.demo-swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+.demo-swatch {
+    display: inline-flex;
+    align-items: center;
+    min-height: 1.75rem;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bb-text) 12%, transparent);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    font-variant-numeric: tabular-nums;
+}
+
+.demo-small {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+.bb-docs-content > .bb-card > p.demo-small {
+    font-size: var(--fl-font-size-200);
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+/* Shown next to a result while it is being recomputed, so a slow run never looks like a frozen
+   page. It is a status, so the element carrying it is role="status". It can sit inside an
+   overline label, so it resets the label's lettering. */
+.working {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    margin: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-regular);
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--bb-text-muted);
+}
+
+.working .bb-spinner {
+    width: .875rem;
+    height: .875rem;
+}
+
+/* What a pipeline produced, at its real colours, on the checkerboard. */
+.preview-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--bb-radius);
+    border: 1px solid var(--bb-border);
+    background-color: var(--demo-checker-a);
+    background-image:
+        linear-gradient(45deg, var(--demo-checker-b) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--demo-checker-b) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--demo-checker-b) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--demo-checker-b) 75%);
+    background-size: 1rem 1rem;
+    background-position: 0 0, 0 .5rem, .5rem -.5rem, -.5rem 0;
+}
+
+div.preview-image[aria-busy="true"] {
+    min-height: 8rem;
+}
+
+.preview-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1.5rem;
+}
+
+.preview-meta {
+    margin-top: .5rem;
+}
+
+.thumb-grid {
+    display: grid;
+    gap: .75rem;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
+}
+
+.thumb {
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.thumb .thumb-image {
+    width: 100%;
+    height: 8rem;
+    object-fit: contain;
+    border: none;
+    border-radius: 0;
+}
+
+.thumb-meta {
+    padding: .5rem;
+    font-size: var(--fl-font-size-100);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+}
+
+.thumb-name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.thumb-save {
+    margin-top: .375rem;
+}
+
+.demo-progress {
+    height: .375rem;
+    overflow: hidden;
+    background: var(--bb-surface-2);
+    border-radius: var(--bb-radius-pill);
+}
+
+.demo-progress-bar {
+    height: 100%;
+    background: var(--bb-primary);
+    transition: width var(--fl-duration-fast) var(--fl-curve-easy-ease);
+}
+
+.optimize-progress .demo-progress {
+    flex: 1 1 8rem;
+}
+
+/* Results under a drop zone or a run button: the progress row, the totals, the actions and the
+   per-file table each get the same breathing room from the thing above them. */
+.results-stats,
+.results-actions,
+.results-table,
+.formats-results,
+.metadata-report,
+.perf-results,
+.metadata-warning,
+.first-image-result {
+    margin-top: 1rem;
+}
+
+/* ---------- The editor's frame ----------
+
+   The editor fills its container, so the page gives it one. Never taller than the window under the
+   header, so the whole working surface - toolbar, canvas, panel - is on screen at once once it has
+   been scrolled to; and it scrolls to just under the header rather than under it. */
+.editor-frame {
+    height: clamp(24rem, calc(100dvh - var(--bb-header-height) - 2rem), 40rem);
+    scroll-margin-top: calc(var(--bb-header-height) + 1rem);
+}
+
+@media (max-width: 47.9375rem) {
+    /* Below the editor's own breakpoint its panel moves under the canvas, so the frame needs the
+       height of both. */
+    .editor-frame {
+        height: 46rem;
+    }
+}
+
+/* ---------- Page specifics ---------- */
+
+/* Avatar: the result is clipped to its shape as an app would show it - the exported pixels are
+   round on their own, this only keeps the square preview box from framing them as a square. */
+.avatar-frame {
+    overflow: hidden;
+    border: 1px solid var(--bb-border);
+}
+
+.avatar-frame .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border: none;
+    border-radius: 0;
+}
+
+.avatar-source {
+    flex: 1 1 12rem;
+    min-width: 0;
+}
+
+/* Social: tall presets (a story is 9:16) are held to the window, so the whole composition and its
+   controls stay in view together. */
+.social-preview {
+    max-height: 60vh;
+    margin-inline: auto;
+}
+
+.social-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: .5rem;
+    margin-top: .75rem;
+}
+
+.social-meta .bb-toolbar {
+    margin: 0;
+}
+
+/* Headless: the source's facts sit beside it, and every example tile shows its result whole. */
+.headless-source {
+    flex: 1 1 16rem;
+    min-width: 0;
+    margin-bottom: 0;
+}
+
+.headless-preview {
+    width: 100%;
+    max-height: 12.5rem;
+    object-fit: contain;
+}
+
+.headless-description {
+    margin: .5rem 0 .25rem;
+}
+
+/* Pipelines: the playground's readouts. */
+.pipeline-preview {
+    max-height: 22rem;
+    margin-inline: auto;
+}
+
+.playground-label {
+    margin-top: 1rem;
+}
+
+.playground-stats {
+    margin-top: 1rem;
+}
+
+/* Getting started: the snippet's output beside its numbers. */
+.first-image {
+    flex: 0 1 20rem;
+    min-width: 0;
+}
+
+.first-image-stats {
+    flex: 1 1 14rem;
+}
+
+/* Formats: an exporter's refusal is long - it names the format it was handed instead - so it wraps
+   under the badge rather than stretching the table. */
+.formats-error {
+    display: block;
+    margin-top: .25rem;
+    max-width: 32rem;
+    white-space: normal;
+}
+
+/* ---------- MCP server: the panels that call the demo's own /api/mcp endpoints ---------- */
+
+.mcp-why .bb-card code {
+    align-self: flex-start;
+    margin-top: auto;
+}
+
+.mcp-tabs {
+    margin: 1rem 0 .75rem;
+}
+
+/* Free text sent to a tool: a pipeline, a piece of code. Monospace, so what the reader types lines
+   up the way it will in their editor. */
+textarea.mcp-input {
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.55;
+    white-space: pre;
+    overflow-x: auto;
+}
+
+.mcp-pipeline {
+    min-height: 6.5rem;
+}
+
+.mcp-code {
+    min-height: 16rem;
+}
+
+.mcp-presets {
+    margin-bottom: 1rem;
+}
+
+.mcp-run-stats {
+    margin-bottom: 1rem;
+}
+
+.mcp-operations {
+    margin-bottom: .5rem;
+    white-space: pre-wrap;
+}
+
+.mcp-notes,
+.mcp-resources {
+    margin: 0 0 .75rem;
+    padding-inline-start: 1rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+}
+
+.mcp-notes li + li,
+.mcp-resources li + li {
+    margin-top: .25rem;
+}
+
+/* A resource's description quotes URIs such as bmage://source/Demo%2FClient%2F..., one unbreakable
+   word wider than a phone; it breaks anywhere rather than pushing the page sideways. */
+.mcp-resources li {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.mcp-reading {
+    max-width: var(--bb-measure);
+    color: var(--bb-text-muted);
+}
+
+.mcp-results {
+    margin-top: 1rem;
+}
+
+/* One finding per row, its severity on the leading edge so a list of them sorts itself by eye. */
+.mcp-findings {
+    list-style: none;
+    margin: 1rem 0 0;
+    padding: 0;
+    display: grid;
+    gap: .5rem;
+}
+
+.mcp-finding {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-inline-start: 3px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+}
+
+.mcp-finding.error {
+    border-inline-start-color: var(--bb-danger);
+}
+
+.mcp-finding.warning {
+    border-inline-start-color: var(--bb-warning);
+}
+
+.mcp-finding.suggestion {
+    border-inline-start-color: var(--bb-primary);
+}
+
+.mcp-finding-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+}
+
+.mcp-finding-message {
+    color: var(--bb-text-muted);
+}
+
+.mcp-finding-fix {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.mcp-search {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin-bottom: 1rem;
+}
+
+.mcp-search .mcp-input {
+    flex: 1 1 14rem;
+}
+
+.mcp-hits {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: .25rem;
+}
+
+.mcp-hits li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: .25rem .75rem;
+    min-width: 0;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+}
+
+.mcp-hit-title {
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+}
+
+/* The parameters stack in their cell; a tool with seven of them is a column, not a paragraph. */
+.mcp-params {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .125rem;
+}
+
+/* A parameter is one token - "maxFileSize?: long?" broken over two lines reads as two. */
+.mcp-params code {
+    white-space: nowrap;
+}
+
+/* ---------- The landing page ---------- */
+
+/* Six capability tiles read as two rows of three rather than a row of four and a row of two. */
+.bb-grid.home-grid {
+    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
+}
+
+/* ---------- The landing page's hero: the live pipeline under its code, in the window frame ---------- */
+
+.home-hero-live {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem 1.25rem;
+    padding: 1rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.home-hero-result {
+    flex: none;
+}
+
+.home-hero-image {
+    width: 10rem;
+    height: 10rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+/* The same shape while the runtime is still loading, so nothing moves when the image arrives. */
+.home-hero-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    text-align: center;
+    background: var(--bb-surface-sunken);
+    border: 1px dashed var(--bb-border-strong);
+    color: var(--bb-text-soft);
+    font-size: var(--fl-font-size-100);
+    box-shadow: none;
+}
+
+.home-hero-controls {
+    flex: 1 1 14rem;
+    min-width: 0;
+}
+
+.home-hero-caption {
+    margin: .625rem 0 0;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.55;
+}
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/js/demo.js b/src/Utilities/Bmage/Demo/Server/wwwroot/js/demo.js
deleted file mode 100644
index 4425dfaab42..00000000000
--- a/src/Utilities/Bmage/Demo/Server/wwwroot/js/demo.js
+++ /dev/null
@@ -1,376 +0,0 @@
-// Browser-side helpers for the demo shell. They live in a plain script (not a module) because the
-// components call them by name through IJSRuntime.InvokeAsync, and the file is loaded from
-// App.razor before blazor.web.js so every function exists by the time the WebAssembly runtime
-// hydrates the prerendered markup.
-//
-// Nothing here touches an image. Every pixel on this site is decoded, processed and encoded by
-// Bit.Bmage, whose own browser bridge (_content/Bit.Bmage/bit-bmage.js) the library imports on
-// demand; a second image helper hiding in the chrome would be the demo arguing against its own
-// point. What this file does is the handful of things a component cannot: read the document,
-// listen to the window, and talk to the clipboard.
-
-// ── Theme ────────────────────────────────────────────────────────────────────
-//
-// The stylesheets key off the data-theme attribute on <html>. This half of the file is also
-// inlined into the <head> by App.razor and runs before the first paint, so the stored theme is
-// applied to the document rather than swapped in afterwards - which would show the reader a flash
-// of the wrong one.
-
-window.bmdTheme = {
-    KEY: 'bmd-theme',
-
-    // The stored choice if there is one, otherwise whatever the operating system asks for. Reading
-    // localStorage can throw outright (a browser with site data blocked), so a failure here falls
-    // through to the system preference rather than taking the page down with it.
-    preferred() {
-        let stored = null;
-        try { stored = localStorage.getItem(window.bmdTheme.KEY); } catch { /* no stored preference */ }
-        if (stored === 'light' || stored === 'dark') return stored;
-        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-
-    current() {
-        return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
-    },
-
-    apply(theme) {
-        document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : 'light');
-    },
-
-    set(theme) {
-        window.bmdTheme.apply(theme);
-        try { localStorage.setItem(window.bmdTheme.KEY, theme); } catch { /* preference is not persisted */ }
-    },
-};
-
-window.bmdToggleTheme = function () {
-    const next = window.bmdTheme.current() === 'dark' ? 'light' : 'dark';
-    window.bmdTheme.set(next);
-    return next;
-};
-
-window.bmdTheme.apply(window.bmdTheme.preferred());
-
-// ── Layout metrics ───────────────────────────────────────────────────────────
-//
-// The header's height and the gap under it are tokens in theme.css. Everything that has to clear
-// the header reads them from there rather than repeating the number, so the CSS and this file can
-// only ever agree.
-
-window.bmdMetrics = {
-    rem(name, fallback) {
-        const root = getComputedStyle(document.documentElement);
-        const value = parseFloat(root.getPropertyValue(name));
-        return (isNaN(value) ? fallback : value) * parseFloat(root.fontSize || '16');
-    },
-
-    headerOffset() {
-        return window.bmdMetrics.rem('--bmd-layout-header', 3.5)
-             + window.bmdMetrics.rem('--bmd-layout-header-gap', 1.5);
-    },
-};
-
-// ── Header ───────────────────────────────────────────────────────────────────
-//
-// The header is a translucent pane. It grows a shadow the moment there is something scrolled
-// underneath it to lift away from, and loses it again at the top of the page - so the elevation
-// says "there is more above" rather than being decoration that is always on.
-
-window.bmdHeader = {
-    onScroll: null,
-
-    update() {
-        const header = document.querySelector('.app-header');
-        if (!header) return;
-        header.setAttribute('data-scrolled', window.scrollY > 4 ? 'true' : 'false');
-    },
-};
-
-(function watchHeader() {
-    let queued = false;
-    window.bmdHeader.onScroll = function () {
-        if (queued) return;
-        queued = true;
-        requestAnimationFrame(() => {
-            queued = false;
-            window.bmdHeader.update();
-        });
-    };
-
-    window.addEventListener('scroll', window.bmdHeader.onScroll, { passive: true });
-    document.addEventListener('DOMContentLoaded', window.bmdHeader.update);
-    window.bmdHeader.update();
-})();
-
-// ── "On this page" rail ──────────────────────────────────────────────────────
-//
-// The rail is built from the section headings actually present in the rendered page, so a demo
-// page earns its entries by having sections rather than by maintaining a second list of them.
-
-window.bmdSections = {
-    ids: [],
-    dotNetRef: null,
-    activeId: null,
-    onScroll: null,
-
-    // The last heading that has passed under the header is the one being read. Falls back to the
-    // first entry so a page scrolled to the very top still marks its opening section.
-    update() {
-        const offset = window.bmdMetrics.headerOffset();
-        let current = window.bmdSections.ids[0] || null;
-
-        for (const id of window.bmdSections.ids) {
-            const el = document.getElementById(id);
-            if (!el) continue;
-            if (el.getBoundingClientRect().top - offset <= 1) current = id;
-        }
-
-        if (current === window.bmdSections.activeId) return;
-
-        window.bmdSections.activeId = current;
-        window.bmdSections.dotNetRef?.invokeMethodAsync('SetActiveSection', current);
-    },
-};
-
-// Returns the section headings of the current page, giving any that lack one a stable id derived
-// from its text so the rail's links survive a re-render - and hanging a link on each, so a reader
-// can send a colleague the one section that answers their question. A section is addressable for
-// exactly the same reason it is listed in the rail, which is why both happen here.
-window.bmdCollectSections = function (anchorIcon) {
-    const headings = document.querySelectorAll('.page-container .demo-section > h2');
-    const items = [];
-    const used = new Set();
-
-    headings.forEach((h, index) => {
-        let id = h.id;
-        if (!id) {
-            const slug = (h.textContent || '').trim().toLowerCase()
-                .replace(/[^a-z0-9]+/g, '-')
-                .replace(/^-+|-+$/g, '');
-            id = slug || `section-${index + 1}`;
-            while (used.has(id)) id = `${id}-${index + 1}`;
-            h.id = id;
-        }
-        used.add(id);
-
-        const title = (h.textContent || '').trim();
-        items.push({ id, title });
-
-        // The icon's geometry is handed in by the caller rather than written out here: it lives in
-        // Shared/Icons.cs with the rest of the set, and a second copy in this file is a copy that
-        // would never be updated alongside it. Without one the anchor is simply not hung - it is a
-        // shortcut to an id that the heading has either way.
-        if (anchorIcon && !h.querySelector('.heading-anchor')) {
-            const anchor = document.createElement('a');
-            anchor.className = 'heading-anchor';
-            anchor.href = `#${id}`;
-            anchor.setAttribute('aria-label', `Link to "${title}"`);
-            anchor.innerHTML = '<svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
-                + anchorIcon + '</svg>';
-            h.prepend(anchor);
-        }
-    });
-
-    return items;
-};
-
-// The caller has just collected the sections to build the rail from, so it hands the ids straight
-// over rather than making this walk the same headings a second time. Collecting them here is only
-// the fallback for a caller that has not.
-window.bmdObserveSections = function (dotNetRef, ids) {
-    window.bmdDisposeSections();
-
-    window.bmdSections.dotNetRef = dotNetRef;
-    window.bmdSections.ids = ids ?? window.bmdCollectSections().map(i => i.id);
-    window.bmdSections.activeId = null;
-
-    // A passive listener with the work deferred to the next frame: scroll fires far more often than
-    // the rail can meaningfully change, and this is running alongside the image work the page
-    // exists to demonstrate.
-    let queued = false;
-    window.bmdSections.onScroll = function () {
-        if (queued) return;
-        queued = true;
-        requestAnimationFrame(() => {
-            queued = false;
-            window.bmdSections.update();
-        });
-    };
-
-    window.addEventListener('scroll', window.bmdSections.onScroll, { passive: true });
-    window.addEventListener('resize', window.bmdSections.onScroll, { passive: true });
-    window.bmdSections.update();
-};
-
-window.bmdDisposeSections = function () {
-    if (window.bmdSections.onScroll) {
-        window.removeEventListener('scroll', window.bmdSections.onScroll);
-        window.removeEventListener('resize', window.bmdSections.onScroll);
-    }
-
-    window.bmdSections.onScroll = null;
-    window.bmdSections.dotNetRef = null;
-    window.bmdSections.ids = [];
-    window.bmdSections.activeId = null;
-};
-
-// scrollIntoView would put the heading under the sticky header, so the position is computed instead
-// and the header's height taken off it. The CSS scroll-padding covers the browser's own fragment
-// navigation; this covers the rail's.
-window.bmdScrollToSection = function (id) {
-    const el = document.getElementById(id);
-    if (!el) return;
-
-    const top = el.getBoundingClientRect().top + window.scrollY - window.bmdMetrics.headerOffset();
-    window.scrollTo({ top, behavior: 'smooth' });
-};
-
-window.bmdScrollToTop = function () {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-};
-
-// ── Keyboard shortcuts and the command palette ───────────────────────────────
-//
-// One listener, on the document, for the whole site. It owns exactly two things: the shortcut that
-// opens the palette, and - while the palette is open - the four keys that dialog needs. Everything
-// else falls straight through, which is why this is here rather than in an @onkeydown handler: a
-// Blazor handler cannot decide per event whether to preventDefault, so it would have to suppress
-// either every key or none of them, and both break typing into the palette's own input.
-
-window.bmdShortcuts = {
-    dotNetRef: null,
-    paletteRef: null,
-    paletteOpen: false,
-    onKeyDown: null,
-    returnFocusTo: null,
-
-    isMac() {
-        const platform = navigator.userAgentData?.platform || navigator.platform || '';
-        return /mac|iphone|ipad|ipod/i.test(platform);
-    },
-
-    // A key pressed while the reader is typing somewhere is theirs, not ours - with the single
-    // exception of the palette shortcut, which is a chord nothing else claims.
-    isTyping(target) {
-        if (!target) return false;
-        if (target.isContentEditable) return true;
-        return /^(input|textarea|select)$/i.test(target.tagName || '');
-    },
-};
-
-/// Installs the listener and returns the label for the header's keycap, so the shortcut and the
-/// key it advertises are decided in the same place.
-window.bmdRegisterShortcuts = function (dotNetRef) {
-    window.bmdUnregisterShortcuts();
-
-    window.bmdShortcuts.dotNetRef = dotNetRef;
-
-    window.bmdShortcuts.onKeyDown = function (e) {
-        if ((e.ctrlKey || e.metaKey) && !e.altKey && (e.key === 'k' || e.key === 'K')) {
-            e.preventDefault();
-            window.bmdShortcuts.dotNetRef?.invokeMethodAsync('OnSearchShortcut');
-            return;
-        }
-
-        // The bare slash is the other search shortcut readers reach for, but only when they are
-        // not already typing - otherwise it would eat the character.
-        if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey
-            && !window.bmdShortcuts.paletteOpen && !window.bmdShortcuts.isTyping(e.target)) {
-            e.preventDefault();
-            window.bmdShortcuts.dotNetRef?.invokeMethodAsync('OnSearchShortcut');
-            return;
-        }
-
-        if (!window.bmdShortcuts.paletteOpen) return;
-
-        const keys = { ArrowDown: 'down', ArrowUp: 'up', Enter: 'enter', Escape: 'close' };
-        const action = keys[e.key];
-        if (!action) return;
-
-        e.preventDefault();
-        window.bmdShortcuts.paletteRef?.invokeMethodAsync('OnPaletteKey', action);
-    };
-
-    document.addEventListener('keydown', window.bmdShortcuts.onKeyDown);
-
-    return window.bmdShortcuts.isMac() ? '⌘ K' : 'Ctrl K';
-};
-
-window.bmdUnregisterShortcuts = function () {
-    if (window.bmdShortcuts.onKeyDown) {
-        document.removeEventListener('keydown', window.bmdShortcuts.onKeyDown);
-    }
-
-    window.bmdShortcuts.onKeyDown = null;
-    window.bmdShortcuts.dotNetRef = null;
-};
-
-// Called by the palette as it opens and closes. It takes the focus on the way in and gives it back
-// on the way out - a dialog that leaves the reader's place behind is a dialog that costs more to
-// dismiss than it did to open - and holds the page still underneath it while it is up.
-window.bmdSetPaletteOpen = function (open, paletteRef) {
-    window.bmdShortcuts.paletteOpen = !!open;
-    window.bmdShortcuts.paletteRef = open ? paletteRef : null;
-
-    if (open) {
-        window.bmdShortcuts.returnFocusTo = document.activeElement;
-        document.body.style.overflow = 'hidden';
-
-        // The input does not exist yet: this runs from the component's parameter pass, which is
-        // before the render that creates it. Two frames is enough for Blazor to have applied the
-        // edit, and each attempt is cheap.
-        let attempts = 0;
-        const focus = () => {
-            const input = document.getElementById('palette-input');
-            if (input) { input.focus(); return; }
-            if (attempts++ < 10) requestAnimationFrame(focus);
-        };
-        requestAnimationFrame(focus);
-        return;
-    }
-
-    document.body.style.overflow = '';
-
-    const back = window.bmdShortcuts.returnFocusTo;
-    window.bmdShortcuts.returnFocusTo = null;
-    // Not if the reader has already moved on - navigating away from the palette puts focus where
-    // the new page wants it, and dragging it back to a header button would undo that.
-    if (back && document.body.contains(back) && document.activeElement === document.body) {
-        back.focus();
-    }
-};
-
-// The selection can move past either end of the visible list, and a selection nobody can see is
-// the same as no selection at all.
-window.bmdScrollPaletteActive = function () {
-    const active = document.querySelector('.palette-item.active');
-    active?.scrollIntoView({ block: 'nearest' });
-};
-
-// ── Clipboard ────────────────────────────────────────────────────────────────
-//
-// Backs the "Copy" buttons of Shared/CodeSnippet.razor and the landing page's install line.
-
-window.bmdCopyToClipboard = async function (text) {
-    try {
-        if (navigator.clipboard && window.isSecureContext) {
-            await navigator.clipboard.writeText(text);
-            return true;
-        }
-    } catch { /* fall through to legacy path */ }
-    const ta = document.createElement('textarea');
-    try {
-        ta.value = text;
-        ta.style.position = 'fixed';
-        ta.style.opacity = '0';
-        document.body.appendChild(ta);
-        ta.focus();
-        ta.select();
-        return document.execCommand('copy');
-    } catch {
-        return false;
-    } finally {
-        // Always remove the textarea, even if focus/select/execCommand throws.
-        if (ta.parentNode) document.body.removeChild(ta);
-    }
-};
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/site.js b/src/Utilities/Bmage/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bmage/Demo/Server/wwwroot/theme.js b/src/Utilities/Bmage/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bmage/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/BrowserTests.cs b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/BrowserTests.cs
index e3604683bbb..cf1281b259a 100644
--- a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/BrowserTests.cs
+++ b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/BrowserTests.cs
@@ -16,8 +16,8 @@ public class CapabilityTests : DemoTest
     public async Task DetectsFormatsByActuallyEncoding()
     {
         var page = await OpenAsync("capabilities");
-        await page.WaitForSelectorAsync("table.data", new PageWaitForSelectorOptions { Timeout = 60_000 });
-        var text = (await page.Locator(".grid").InnerTextAsync()).Replace("\t", " ");
+        await page.WaitForSelectorAsync(".capabilities-report table", new PageWaitForSelectorOptions { Timeout = 60_000 });
+        var text = (await page.Locator(".capabilities-report").InnerTextAsync()).Replace("\t", " ");
 
         // Every browser that can run Blazor can do these; if the probe says otherwise it is broken.
         Assert.Contains("PNG", text, StringComparison.Ordinal);
@@ -30,8 +30,8 @@ public async Task DetectsFormatsByActuallyEncoding()
     public async Task ReportsTheRuntimeAsWebAssembly()
     {
         var page = await OpenAsync("capabilities");
-        await page.WaitForSelectorAsync("table.data", new PageWaitForSelectorOptions { Timeout = 60_000 });
-        var text = await page.Locator(".grid").InnerTextAsync();
+        await page.WaitForSelectorAsync(".capabilities-report table", new PageWaitForSelectorOptions { Timeout = 60_000 });
+        var text = await page.Locator(".capabilities-report").InnerTextAsync();
         Assert.Contains("BrowserWebAssembly", text, StringComparison.Ordinal);
     }
 
@@ -39,8 +39,8 @@ public async Task ReportsTheRuntimeAsWebAssembly()
     public async Task FindsARealisticCanvasLimit()
     {
         var page = await OpenAsync("capabilities");
-        await page.WaitForSelectorAsync("table.data", new PageWaitForSelectorOptions { Timeout = 60_000 });
-        var text = await page.Locator(".grid").InnerTextAsync();
+        await page.WaitForSelectorAsync(".capabilities-report table", new PageWaitForSelectorOptions { Timeout = 60_000 });
+        var text = await page.Locator(".capabilities-report").InnerTextAsync();
         var match = Regex.Match(text, @"MAX CANVAS EDGE\s+(\d+)", RegexOptions.IgnoreCase);
         Assert.IsTrue(match.Success, "The canvas limit was not reported");
         var limit = int.Parse(match.Groups[1].Value);
@@ -59,11 +59,11 @@ public async Task DecodesProcessesAndEncodesThroughTheBrowser()
         try
         {
             await page.SetInputFilesAsync("input[type=file]", file);
-            await page.WaitForSelectorAsync(".stat-grid", new PageWaitForSelectorOptions { Timeout = 60_000 });
+            await page.WaitForSelectorAsync(".avatar-stats", new PageWaitForSelectorOptions { Timeout = 60_000 });
             await page.WaitForFunctionAsync("() => document.querySelectorAll('img.preview-image').length >= 2", null,
                 new PageWaitForFunctionOptions { Timeout = 60_000 });
 
-            var stats = await page.Locator(".stat-grid").InnerTextAsync();
+            var stats = await page.Locator(".avatar-stats").InnerTextAsync();
             // A gradient at 256px must compress to something far smaller than the source PNG.
             Assert.Contains("KB", stats, StringComparison.Ordinal);
             Assert.DoesNotContain("0 B", stats, StringComparison.Ordinal);
@@ -123,8 +123,8 @@ public async Task ReportsAClearErrorForAFileThatIsNotAnImage()
         try
         {
             await page.SetInputFilesAsync("input[type=file]", file);
-            await page.WaitForSelectorAsync(".alert-error", new PageWaitForSelectorOptions { Timeout = 60_000 });
-            var message = await page.Locator(".alert-error").InnerTextAsync();
+            await page.WaitForSelectorAsync(".demo-error", new PageWaitForSelectorOptions { Timeout = 60_000 });
+            var message = await page.Locator(".demo-error").InnerTextAsync();
             Assert.IsFalse(string.IsNullOrWhiteSpace(message));
         }
         finally
@@ -202,6 +202,34 @@ public async Task RendersTheFullToolbarAndPanel()
         Assert.Contains("Export", tabs);
     }
 
+    [TestMethod]
+    public async Task AWrappedToolbarKeepsItsFullHeightInAnEditorOfFixedHeight()
+    {
+        var page = await OpenEditorWithImageAsync();
+
+        // A host that fixes the editor's size and is narrower than the tools, so the toolbar wraps onto
+        // a second row. The editor is a column, and the toolbar must not be the part of it that gives way.
+        var heights = await page.EvaluateAsync<JsonElement>("""
+            async () => {
+                const host = document.querySelector('.bmg-editor').parentElement;
+                host.style.width = '420px';
+                host.style.height = '360px';
+                await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+                const toolbar = document.querySelector('.bmg-toolbar');
+                const tools = [...toolbar.querySelectorAll('.bmg-tool')];
+                return {
+                    toolbar: toolbar.getBoundingClientRect().height,
+                    content: toolbar.scrollHeight,
+                    rows: new Set(tools.map(t => Math.round(t.getBoundingClientRect().top))).size
+                };
+            }
+            """);
+
+        Assert.IsGreaterThan(1, heights.GetProperty("rows").GetInt32(), "The toolbar did not wrap, so the test proves nothing.");
+        Assert.IsGreaterThanOrEqualTo(heights.GetProperty("content").GetDouble() - 1, heights.GetProperty("toolbar").GetDouble(),
+            "The wrapped toolbar was squeezed below its content, hiding part of its tools.");
+    }
+
     [TestMethod]
     public async Task AnnotationsAppearInTheLayerListAndOnThePixels()
     {
@@ -357,7 +385,7 @@ public async Task PageLoadsWithoutErrors(string route)
         await page.WaitForTimeoutAsync(2000);
 
         Assert.IsEmpty(errors, string.Join(" | ", errors));
-        Assert.IsEmpty(await page.Locator(".alert-error").AllInnerTextsAsync());
+        Assert.IsEmpty(await page.Locator(".demo-error").AllInnerTextsAsync());
         Assert.IsFalse(string.IsNullOrWhiteSpace(await page.Locator("h1").First.InnerTextAsync()));
     }
 
diff --git a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/DemoRegressionTests.cs b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/DemoRegressionTests.cs
index f340cd92ae1..085f529afc2 100644
--- a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/DemoRegressionTests.cs
+++ b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/DemoRegressionTests.cs
@@ -27,8 +27,8 @@ private static async Task DragAsync(IPage page, float x0, float y0, float x1, fl
         await page.WaitForTimeoutAsync(800);
     }
 
-    /// <summary>The live document readout under the editor; on the editor page it is the only <c>pre.code</c>.</summary>
-    private static Task<string> ReadDocumentAsync(IPage page) => page.Locator("pre.code").First.InnerTextAsync();
+    /// <summary>The live document readout under the editor; on the editor page it is the only <c>pre.demo-readout</c>.</summary>
+    private static Task<string> ReadDocumentAsync(IPage page) => page.Locator("pre.demo-readout").First.InnerTextAsync();
 
     [TestMethod]
     public async Task TheImageIsFittedInsideTheEditingArea()
@@ -176,8 +176,8 @@ public async Task OptimisingReportsFilesThatFailEvenWhenAllOfThemDo()
         try
         {
             await page.SetInputFilesAsync("input[type=file]", path);
-            await page.WaitForSelectorAsync("table.data", new PageWaitForSelectorOptions { Timeout = 60_000 });
-            Assert.Contains("Not a readable image", await page.Locator("table.data").InnerTextAsync(), StringComparison.Ordinal);
+            await page.WaitForSelectorAsync("table.optimize-results", new PageWaitForSelectorOptions { Timeout = 60_000 });
+            Assert.Contains("Not a readable image", await page.Locator("table.optimize-results").InnerTextAsync(), StringComparison.Ordinal);
         }
         finally
         {
@@ -198,8 +198,8 @@ public async Task TheSampleImageRunsEveryHeadlessExample()
     {
         var page = await OpenAsync("headless");
         await page.GetByRole(AriaRole.Button, new PageGetByRoleOptions { Name = "Use a sample image" }).ClickAsync();
-        await page.WaitForFunctionAsync("() => document.querySelectorAll('.grid .card img').length === 7 && !document.querySelector('.working')", null,
+        await page.WaitForFunctionAsync("() => document.querySelectorAll('.headless-results .headless-result img').length === 7 && !document.querySelector('.working')", null,
             new PageWaitForFunctionOptions { Timeout = 180_000 });
-        Assert.AreEqual(7, await page.Locator(".grid .card").CountAsync());
+        Assert.AreEqual(7, await page.Locator(".headless-results .headless-result").CountAsync());
     }
 }
diff --git a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/Infrastructure/DemoTest.cs b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/Infrastructure/DemoTest.cs
index 8854519ae2b..78d5004013d 100644
--- a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/Infrastructure/DemoTest.cs
+++ b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.E2E/Infrastructure/DemoTest.cs
@@ -69,7 +69,7 @@ protected async Task GotoAsync(IPage page, string route)
 
     /// <summary>Waits until the prerendered markup has been taken over by the WebAssembly runtime.</summary>
     protected static Task WaitForInteractiveAsync(IPage page) =>
-        page.WaitForSelectorAsync(".app-shell[data-interactive='true']", new PageWaitForSelectorOptions { Timeout = 120_000 });
+        page.WaitForSelectorAsync(".page[data-interactive='true']", new PageWaitForSelectorOptions { Timeout = 120_000 });
 
     /// <summary>
     /// Drops the sample image on the editor's own file input and waits for its first preview, which is
diff --git a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/RecipeCatalogTests.cs b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/RecipeCatalogTests.cs
index b93fe1d2ca8..2810fb44a7e 100644
--- a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/RecipeCatalogTests.cs
+++ b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/RecipeCatalogTests.cs
@@ -1,5 +1,5 @@
 using System.Text.RegularExpressions;
-using Bit.Bmage.Demo.Client.Shared;
+using Bit.Bmage.Demo.Client;
 
 namespace Bit.Bmage.Tests.Mcp.Services;
 
@@ -41,7 +41,7 @@ public void Recipes_PointAtDemoPagesThatExist()
     {
         foreach (var recipe in BmageRecipeCatalog.All.Where(recipe => recipe.SeeAlso is not null))
         {
-            Assert.IsNotNull(NavItem.ByHref(recipe.SeeAlso!.TrimStart('/')), $"{recipe.Id} points at {recipe.SeeAlso}, which is not a demo page.");
+            Assert.IsNotNull(DocsCatalog.FindByPath(recipe.SeeAlso!), $"{recipe.Id} points at {recipe.SeeAlso}, which is not a demo page.");
         }
     }
 
diff --git a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/SourceCatalogTests.cs b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/SourceCatalogTests.cs
index dce2c6a4bea..bd4047f7517 100644
--- a/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/SourceCatalogTests.cs
+++ b/src/Utilities/Bmage/Tests/Bit.Bmage.Tests.Mcp/Services/SourceCatalogTests.cs
@@ -1,4 +1,4 @@
-using Bit.Bmage.Demo.Client.Shared;
+using Bit.Bmage.Demo.Client;
 
 namespace Bit.Bmage.Tests.Mcp.Services;
 
@@ -70,15 +70,37 @@ public void Sections_EndAtTheNextHeadingOfTheSameRank_AndIgnoreHashesInCode()
     [TestMethod]
     public void Sources_EveryDemoPageInTheNavigation_IsEmbedded_AndDescribedByIt()
     {
-        foreach (var page in NavItem.All)
+        foreach (var page in DocsCatalog.AllPages)
         {
-            var file = BmageSourceCatalog.SourceFiles.SingleOrDefault(entry => entry.Path == page.SourcePath);
+            var path = BmageSourceCatalog.SourcePathOf(page);
+            var file = BmageSourceCatalog.SourceFiles.SingleOrDefault(entry => entry.Path == path);
 
-            Assert.IsNotNull(file, $"{page.SourcePath} is not embedded.");
+            Assert.IsNotNull(file, $"{path} is not embedded.");
             Assert.AreEqual("Demo page", file.Kind);
             Assert.AreEqual(page.Description, file.Description);
-            Assert.AreEqual(page.Href, file.Slug);
+            Assert.AreEqual(page.Url.TrimStart('/'), file.Slug);
+            Assert.AreEqual(page.Title, file.Title);
         }
+
+        // The path is derived from the page's type, so it has to name the file that really is the page.
+        Assert.AreEqual("Demo/Client/Pages/Avatar.razor", BmageSourceCatalog.SourcePathOf(DocsCatalog.FindByPath("avatar")!));
+        Assert.AreEqual("Demo/Client/Pages/McpServerPage.razor", BmageSourceCatalog.SourcePathOf(DocsCatalog.FindByPath("mcp-server")!));
+    }
+
+    [TestMethod]
+    public void Sources_TheSitesOwnShell_IsChrome_AndNotOfferedAsAnExample()
+    {
+        var chrome = BmageSourceCatalog.SourceFiles.Where(file => file.Path.StartsWith("Demo/Client/Layout/", StringComparison.Ordinal)).ToArray();
+
+        Assert.IsTrue(chrome.Any(file => file.Path == "Demo/Client/Layout/MainLayout.razor"), "The layout is not embedded.");
+        Assert.IsTrue(chrome.All(file => file.Kind == BmageSourceCatalog.SiteChromeKind), string.Join(", ", chrome.Where(file => file.Kind != BmageSourceCatalog.SiteChromeKind).Select(file => file.Path)));
+        Assert.IsFalse(BmageSourceCatalog.SourceFiles.Any(file => file.Kind == BmageSourceCatalog.SiteChromeKind && file.Path.StartsWith("Demo/Client/Layout/", StringComparison.Ordinal) is false));
+
+        var hits = BmageSearchIndex.Search("command palette header footer navigation layout", 50);
+
+        Assert.IsNotEmpty(hits);
+        Assert.IsFalse(hits.Any(hit => hit.Title.StartsWith("Demo/Client/Layout/", StringComparison.Ordinal)),
+            string.Join(", ", hits.Select(hit => hit.Title)));
     }
 
     [TestMethod]
diff --git a/src/Utilities/Bmotion/Bit.Bmotion/Components/Bmotion.cs b/src/Utilities/Bmotion/Bit.Bmotion/Components/Bmotion.cs
index 78f8a08c50e..cb4175461ad 100644
--- a/src/Utilities/Bmotion/Bit.Bmotion/Components/Bmotion.cs
+++ b/src/Utilities/Bmotion/Bit.Bmotion/Components/Bmotion.cs
@@ -358,7 +358,7 @@ public sealed class Bmotion : ComponentBase, IAsyncDisposable
     private BmotionVariantContext? _ownVariantCtx;
     private string? _prevInheritedVariant;
     private int _variantChildIndex = -1;
-    private BmotionBoundingRect? _layoutSnapshot;
+    private Task<BmotionBoundingRect?>? _layoutSnapshot;
     // The style string most recently injected into the render tree, and the one we've reconciled
     // with the engine. When these diverge after init (the consumer authored a dynamic style that
     // changed), Blazor has rewritten the element's inline style, so we re-flush the engine's live
@@ -840,15 +840,19 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
         else if (_initialized)
         {
+            // FLIP: measure where this render put the element first. The update below starts the
+            // element's own animations and raises OnAnimationStart; whatever moves the element after
+            // that (a consumer reacting by re-rendering something above it, say) is no layout change
+            // of this render's, and measured afterwards it would play as one.
+            var snapshot = _layoutSnapshot;
+            _layoutSnapshot = null;
+            var measured = snapshot is null ? null : Interop.GetBoundingRectAsync(_id, MeasureOptions).AsTask();
+
             await HandleParameterUpdateAsync();
 
             // FLIP: play layout animation after DOM settles
-            if (_layoutSnapshot != null)
-            {
-                var snap = _layoutSnapshot;
-                _layoutSnapshot = null;
-                await PlayFlipAsync(snap);
-            }
+            if (snapshot is not null && measured is not null)
+                await PlayFlipAsync(snapshot, measured);
 
             // If a re-render rewrote the inline style attribute (the consumer authored a dynamic
             // style on the animated element), Blazor will have wiped the engine's live
@@ -895,9 +899,13 @@ protected override async Task OnParametersSetAsync()
         // consumer restrict it to the renders where the layout can actually have changed.
         // Evaluated unconditionally so the first render establishes the baseline: otherwise the
         // first render that could measure would always see "no previous value" and measure anyway.
+        // Not awaited, so the snapshot is in hand for this very render's after-render pass: awaiting
+        // it would defer the FLIP to the extra render ComponentBase makes once it resolves, after
+        // this render's update has already run (see OnAfterRenderAsync). One still pending from an
+        // earlier render this one follows holds the older layout, so it is kept.
         bool dependencyChanged = LayoutDependencyChanged();
         if (_initialized && Layout.Enabled && !_isExiting && dependencyChanged)
-            _layoutSnapshot = await Interop.GetBoundingRectAsync(_id, MeasureOptions);
+            _layoutSnapshot ??= Interop.GetBoundingRectAsync(_id, MeasureOptions).AsTask();
     }
 
     // Null (the default) means "no dependency declared": measure on every render, as before.
@@ -1186,10 +1194,11 @@ private async Task RestorePreExitAsync()
             await Engine.AnimateToAsync(_id, restore, BuildEffectiveTransition());
     }
 
-    private async Task PlayFlipAsync(BmotionBoundingRect snap)
+    private async Task PlayFlipAsync(Task<BmotionBoundingRect?> snapshot, Task<BmotionBoundingRect?> measured)
     {
-        var cur = await Interop.GetBoundingRectAsync(_id, MeasureOptions);
-        if (cur == null) return;
+        var snap = await snapshot;
+        var cur = await measured;
+        if (snap == null || cur == null) return;
         await PlayFlipFromAsync(snap, cur);
     }
 
diff --git a/src/Utilities/Bmotion/Demo/Client/DocsCatalog.cs b/src/Utilities/Bmotion/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..10cb82beb6e
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,230 @@
+using Bit.Bmotion.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bmotion.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bmotion";
+
+    public const string PackageId = "Bit.Bmotion";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bmotion";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bmotion is a Blazor-native animation library inspired by Framer Motion: springs, gestures, variants, " +
+        "drag, layout and scroll animations, with all of the maths in C# and no JavaScript wiring of your own. " +
+        "Every moving thing on this site is Bmotion animating itself.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["spring", "stagger", "drag", "exit", "scroll"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry. The demo's MCP server reads
+/// the same list (Server/Services/BmotionSourceCatalog.cs and BmotionSearchIndex.cs), so the
+/// description and keywords an agent is handed for a demo page are the words the site shows.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Getting started",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register the services, link the prerender stylesheet and animate your first element.",
+                "install setup nuget package AddBitBmotionServices quick start program.cs imports stylesheet prerender render mode",
+                typeof(GettingStarted)),
+            new("/basic", "Basics",
+                "Initial and Animate on a single element, the shape of every Bmotion animation, and what runs on mount.",
+                "initial animate mount enter first render bmotion component transition basics hello world",
+                typeof(BasicAnimations)),
+        ]),
+        new("Motion",
+        [
+            new("/springs", "Springs",
+                "Physics springs: stiffness and damping, the intuitive bounce and duration form, overshoot on mount, and repeating springs.",
+                "spring stiffness damping mass bounce duration overshoot physics velocity repeat mirror",
+                typeof(Springs)),
+            new("/easing", "Easing",
+                "Every BmEase preset side by side, custom cubic beziers, stepped easing, and per-segment easing across keyframes.",
+                "ease easing bezier cubic steps linear in out inout back elastic bounce circ expo quad quart quint sine",
+                typeof(Easing)),
+            new("/keyframes", "Keyframes",
+                "Multi-step animations from arrays of values, with Times for uneven spacing and Bm.Current as the wildcard first frame.",
+                "keyframes array multi step times wildcard current sequence repeat mirror loop",
+                typeof(Keyframes)),
+        ]),
+        new("Interaction",
+        [
+            new("/gestures", "Gestures",
+                "WhileHover, WhileTap, WhileFocus and WhileInView - animation states the element enters while something is true.",
+                "hover tap press focus inview viewport gesture whilehover whiletap whilefocus whileinview intersection",
+                typeof(Gestures)),
+            new("/drag", "Drag",
+                "Pointer dragging with axis locks, constraints, elastic edges, momentum on release and drag-driven values.",
+                "drag pointer pan constraints elastic momentum inertia snap axis lock draggable",
+                typeof(DragPage)),
+            new("/reorder", "Reorder",
+                "BmotionReorderGroup: a drag-to-reorder list where the other items animate out of the way as one is moved.",
+                "reorder sortable list drag drop rearrange items order group",
+                typeof(ReorderPage)),
+        ]),
+        new("Orchestration",
+        [
+            new("/variants", "Variants",
+                "Named animation states shared down a subtree, with orchestration: staggered children, before/after children, and propagation.",
+                "variants named states orchestration stagger staggerchildren delaychildren when beforechildren afterchildren propagate parent child",
+                typeof(Variants)),
+            new("/presence", "AnimatePresence",
+                "Exit animations: how an element animates out before Blazor removes it, plus presence modes and switching between views.",
+                "exit animate presence unmount remove leave mode wait popLayout sync switch group conditional rendering",
+                typeof(AnimatePresencePage)),
+            new("/split-text", "Split Text",
+                "BmotionSplitText breaking a headline into characters, words or lines so each piece can animate on its own stagger.",
+                "split text characters words lines stagger headline typography reveal per letter",
+                typeof(SplitText)),
+        ]),
+        new("Layout and scroll",
+        [
+            new("/layout", "Layout",
+                "FLIP layout animations: an element animating between two positions or sizes it was merely re-rendered into, and shared-element transitions.",
+                "layout flip shared element magic move layoutid position size reposition transition morph",
+                typeof(LayoutPage)),
+            new("/scroll", "Scroll",
+                "Scroll-driven animation: progress-linked timelines that the browser scrubs, and enter-on-scroll reveals.",
+                "scroll parallax progress timeline scrolltimeline viewtimeline reveal sticky offset viewport",
+                typeof(ScrollAnimations)),
+            new("/view-transitions", "View Transitions",
+                "The browser View Transitions API driven from C#: cross-fading a whole DOM update rather than one element.",
+                "view transition startviewtransition cross fade page navigation document update",
+                typeof(ViewTransitions)),
+        ]),
+        new("Advanced",
+        [
+            new("/programmatic", "Programmatic",
+                "The imperative API: animating by selector or ElementReference, motion values, sequences and playback controls.",
+                "programmatic imperative animate service selector elementreference motion value bmvalue sequence timeline controls pause play stop speed",
+                typeof(Programmatic)),
+            new("/color", "Color",
+                "Colour interpolation and why the space matters: sRGB against OKLab on the same crossfade, per transition or for a subtree.",
+                "color colour interpolation srgb oklab colorspace BmColorSpace perceptual space mixing gradient crossfade",
+                typeof(ColorSpaces)),
+            new("/motion-path", "Motion Path",
+                "Moving an element along an SVG path with offsetPath and offsetDistance, and bending a straight move into an arc.",
+                "motion path offsetpath offsetdistance svg curve arc trajectory follow",
+                typeof(MotionPath)),
+            new("/css-props", "CSS Props",
+                "The style surface beyond transforms - typography, spacing, positioning, clipping and backgrounds - plus any other property through css and custom properties through cssVars.",
+                "css custom properties variables cssvars arbitrary property letterspacing fontsize lineheight padding margin gap top left clippath backgroundposition backgroundsize escape hatch",
+                typeof(CssProps)),
+        ]),
+        new("Guides",
+        [
+            new("/accessibility", "Accessibility",
+                "prefers-reduced-motion policies, what reduced motion keeps animating, global speed control, and the live engine inspector.",
+                "accessibility a11y reduced motion prefers-reduced-motion diagnostics inspector speed reducemotion policy",
+                typeof(Accessibility)),
+            new("/mcp-server", "MCP Server",
+                "The demo's Model Context Protocol server: the tools, prompts and resources that let an AI agent write correct Bmotion code.",
+                "mcp model context protocol ai agent llm tools prompts resources claude cursor copilot server integration",
+                typeof(McpServerPage)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bmotion/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bmotion/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bmotion/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bmotion/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bmotion/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/Footer.razor b/src/Utilities/Bmotion/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bmotion/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/Header.razor b/src/Utilities/Bmotion/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bmotion/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bmotion/Demo/Client/Layout/MainLayout.razor
index 2122a4cf13d..44980dda101 100644
--- a/src/Utilities/Bmotion/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/MainLayout.razor
@@ -1,167 +1,30 @@
 @inherits LayoutComponentBase
-@implements IAsyncDisposable
-@inject NavigationManager Nav
-@inject IJSRuntime JS
 
-@* The docs shell: the skip link, the sticky header, the command palette, the nav panel, the
-   reading column with its breadcrumb and its pager, the "on this page" rail, and the footer.
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-   The home page is deliberately outside all of that. It is a landing page rather than a document:
-   no nav panel, no rail, no reading column - it lays out its own full-bleed sections. Only the
-   header, the palette and the footer are shared.
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-   The styles live in wwwroot/css/app.css and are written against the Fluent 2 tokens in
-   wwwroot/css/theme.css; nothing here is built from a component library, because the demo carries
-   no dependency other than Bit.Bmotion itself. *@
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-<a class="skip-link" href="#main-content">Skip to main content</a>
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-<div class="app-shell">
-    <AppHeader IsHomePage="_isHomePage" IsHydrating="@_isHydrating"
-               IsNavOpen="_isNavOpen" OnToggleNav="ToggleNav"
-               OnOpenSearch="OpenPalette" ShortcutHint="@_shortcutHint" />
+    <Header />
 
-    <div class="layout-row">
-        @if (_isHomePage)
-        {
-            <div class="site-content home">
-                <main id="main-content">
-                    @Body
-                </main>
-
-                <AppFooter />
-            </div>
-        }
-        else
-        {
-            @* Only rendered at the widths where the panel is a drawer - CSS hides it above them -
-               and only while it is open, so it never covers a page that has nothing to close. *@
-            @if (_isNavOpen)
-            {
-                <button type="button" class="nav-panel-overlay" aria-label="Close navigation" @onclick="CloseNav"></button>
-            }
-
-            <AppNavPanel IsOpen="_isNavOpen" Disabled="@_isHydrating" />
-
-            <div class="site-content">
-                <div class="page-row">
-                    <main id="main-content" class="page-container">
-                        <DocBreadcrumb Current="_current" />
-
-                        @Body
-
-                        <DocPager Href="@_href" />
-                    </main>
-
-                    <SideRail />
-                </div>
-
-                <AppFooter />
-            </div>
-        }
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
     </div>
-</div>
-
-<CommandPalette IsOpen="_isPaletteOpen" OnClose="ClosePalette" />
-
-@* Live engine debug overlay - starts collapsed; click to expand. *@
-<BmotionInspector StartOpen="false" />
-
-@code {
-    private bool _isNavOpen;
-    private bool _isHomePage;
-    private bool _isPaletteOpen;
-    private bool _shortcutsRegistered;
-    private string _href = "";
-    private string _shortcutHint = "Ctrl K";
-    private NavItem? _current;
-    private DotNetObjectReference<MainLayout>? _selfRef;
-
-    // The page is prerendered on the server and is inert until the WebAssembly runtime takes over.
-    // The header says so while that is true, and the interactive chrome stays disabled so a click
-    // that cannot do anything does not look broken.
-    private bool _isHydrating => RendererInfo.IsInteractive is false;
-
-    protected override void OnInitialized()
-    {
-        UpdateRoute();
-        Nav.LocationChanged += OnLocationChanged;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender is false || _isHydrating) return;
 
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-
-            // The same physical key is Ctrl on Windows and Linux and Cmd on a Mac, so the keycap
-            // in the header is filled in from the browser rather than guessed. Registering the
-            // listener returns it, which keeps the two from ever describing different keys.
-            _shortcutHint = await JS.InvokeAsync<string>("bmRegisterShortcuts", _selfRef);
-            _shortcutsRegistered = true;
-            StateHasChanged();
-        }
-        catch
-        {
-            // The shortcut is an accelerator for something the header already offers as a button.
-            // Without the script the button still opens the palette and the keycap keeps the
-            // conservative default, which is right for every platform except one.
-        }
-    }
-
-    private void ToggleNav() => _isNavOpen = !_isNavOpen;
-
-    private void CloseNav() => _isNavOpen = false;
-
-    private void OpenPalette() => _isPaletteOpen = true;
-
-    private void ClosePalette() => _isPaletteOpen = false;
-
-    /// <summary>Raised by the global key listener in js/demo.js for the shortcut that opens search.</summary>
-    [JSInvokable]
-    public void OnSearchShortcut()
-    {
-        if (_isPaletteOpen) return;
-
-        _isPaletteOpen = true;
-        StateHasChanged();
-    }
-
-    // Following a link inside the drawer closes it: on the widths where the drawer exists it
-    // covers the page the reader just asked for.
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        _isNavOpen = false;
-        UpdateRoute();
-        StateHasChanged();
-    }
-
-    private void UpdateRoute()
-    {
-        _href = Nav.ToBaseRelativePath(Nav.Uri).TrimStart('/').Split('?', '#')[0];
-        _isHomePage = _href.Length == 0;
-        _current = NavItem.ByHref(_href);
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        Nav.LocationChanged -= OnLocationChanged;
-
-        if (_shortcutsRegistered)
-        {
-            try
-            {
-                await JS.InvokeVoidAsync("bmUnregisterShortcuts");
-            }
-            catch
-            {
-                // Disposal races the page going away; the listener it would remove dies with the
-                // document either way.
-            }
-        }
-
-        _selfRef?.Dispose();
-    }
-}
+    <Footer />
+</div>
diff --git a/src/Utilities/Bmotion/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bmotion/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Accessibility.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Accessibility.razor
index 7852566f2d8..5c8850725bd 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Accessibility.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Accessibility.razor
@@ -1,20 +1,21 @@
 @page "/accessibility"
 @inject BmotionCapabilities Caps
 
-<PageTitle>Accessibility and diagnostics - Bit.Bmotion</PageTitle>
-
-<h1>Accessibility and diagnostics</h1>
-
-<p class="page-intro">
-    Motion is not free for everyone who sees it. For some people a page that slides, parallaxes and
-    springs is nausea, not delight - which is why browsers ship
-    <strong>prefers-reduced-motion</strong>. Bmotion honours it, but not by throwing every animation
-    away: opacity and colour keep animating while transforms, layout and dimension changes snap.
-    That is the difference between a page that stops moving and a page that stops working.
-</p>
+<PageTitle>Accessibility and diagnostics · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Accessibility and diagnostics</h1>
+    <p class="bb-subtitle">
+        Motion is not free for everyone who sees it. For some people a page that slides, parallaxes and
+        springs is nausea, not delight - which is why browsers ship
+        <strong>prefers-reduced-motion</strong>. Bmotion honours it, but not by throwing every animation
+        away: opacity and colour keep animating while transforms, layout and dimension changes snap.
+        That is the difference between a page that stops moving and a page that stops working.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Reduced motion, four ways</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Reduced motion, four ways</h3>
     <p>
         Pick the policy once, at registration. <code>User</code> is the recommended setting and the
         web-platform default: follow the operating system everywhere. The default is
@@ -23,8 +24,8 @@
         can never have its animations silently switched off underneath it.
     </p>
 
-    <div class="a11y-table-wrap">
-        <table class="a11y-table">
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th>BmReducedMotionMode</th><th>Behaviour</th></tr>
             </thead>
@@ -32,7 +33,7 @@
                 @foreach (var mode in _modes)
                 {
                     <tr>
-                        <td><code>@mode.Name</code></td>
+                        <td class="bb-table-key"><code>@mode.Name</code></td>
                         <td>@mode.Description</td>
                     </tr>
                 }
@@ -41,10 +42,10 @@
     </div>
 
     <CodeSnippet Code="@_modesCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>What "reduced" actually does</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What "reduced" actually does</h3>
     <p>
         Both boxes below animate <code>x</code>, <code>rotate</code> <em>and</em>
         <code>backgroundColor</code>. The right one sits inside
@@ -77,15 +78,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _shifted = !_shifted)">Move both</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _shifted = !_shifted)">Move both</button>
     </div>
 
     <CodeSnippet Code="@_reducedCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Slowing everything down</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Slowing everything down</h3>
     <p>
         <code>TransitionSpeed</code> is a playback multiplier over a whole subtree, and it scales
         every time-based field - duration, delay, repeat delay, a spring's visual duration - so the
@@ -112,15 +113,15 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _runId++)">Replay all</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _runId++)">Replay all</button>
     </div>
 
     <CodeSnippet Code="@_speedCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Keyboard-accessible taps</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Keyboard-accessible taps</h3>
     <p>
         <code>WhileTap</code> is not a mouse-only state. When a tappable element has focus,
         <kbd>Enter</kbd> and <kbd>Space</kbd> press and release it exactly like a pointer -
@@ -144,10 +145,10 @@
     </div>
 
     <CodeSnippet Code="@_keyboardCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Knowing what the runtime can do</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Knowing what the runtime can do</h3>
     <p>
         Rather than guessing which render mode you are in, inject <strong>BmotionCapabilities</strong>.
         On Blazor Server there is no synchronous interop, so the per-frame loop cannot run: inertia,
@@ -161,17 +162,17 @@
         <div class="demo-card stack">
             <span class="demo-label">This runtime</span>
             <div class="caps-list">
-                <span class="badge">SupportsFrameLoop: @Caps.SupportsFrameLoop</span>
-                <span class="badge">SupportsCompositor: @Caps.SupportsCompositor</span>
+                <span class="bb-badge">SupportsFrameLoop: @Caps.SupportsFrameLoop</span>
+                <span class="bb-badge">SupportsCompositor: @Caps.SupportsCompositor</span>
             </div>
         </div>
     </div>
 
     <CodeSnippet Code="@_capsCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Watching the engine</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Watching the engine</h3>
     <p>
         <strong>OnUpdate</strong> hands you the exact CSS the engine flushed to an element this
         frame. It is a plain delegate rather than an <code>EventCallback</code> on purpose: it runs
@@ -199,8 +200,8 @@
         ask from the outside.
     </p>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _inspector = !_inspector)">
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _inspector = !_inspector)">
             @(_inspector ? "Hide" : "Show") the inspector
         </button>
     </div>
@@ -211,38 +212,7 @@
     }
 
     <CodeSnippet Code="@_diagnosticsCode" />
-</div>
-
-<style>
-    .a11y-table-wrap { overflow-x: auto; }
-
-    .a11y-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
-
-    .a11y-table th, .a11y-table td {
-        padding: .6rem .75rem;
-        text-align: left;
-        vertical-align: top;
-        border-bottom: 1px solid var(--bit-clr-brd-ter);
-    }
-
-    .a11y-table th { font-weight: 700; color: var(--bit-clr-fg-pri); }
-
-    .a11y-table td { color: var(--bit-clr-fg-sec); }
-
-    .caps-list { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
-
-    /* Monospace and fixed-height so the per-frame readout does not reflow the card as the
-       numbers change width. */
-    .frame-readout {
-        display: block;
-        min-height: 2.5rem;
-        max-width: 100%;
-        overflow-wrap: anywhere;
-        font-size: .72rem;
-        text-align: center;
-        color: var(--bit-clr-fg-sec);
-    }
-</style>
+</section>
 
 @code {
     private bool _shifted;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/AnimatePresencePage.razor b/src/Utilities/Bmotion/Demo/Client/Pages/AnimatePresencePage.razor
index d6e7e4b5974..9283c4421d7 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/AnimatePresencePage.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/AnimatePresencePage.razor
@@ -1,19 +1,20 @@
 @page "/presence"
 
-<PageTitle>AnimatePresence - Bit.Bmotion</PageTitle>
-
-<h1>AnimatePresence</h1>
-
-<p class="page-intro">
-    An element that has already left the DOM cannot animate. That is the whole problem exit
-    animations exist to solve, and the presence components solve it by <strong>keeping removed
-    content rendered until its exit has finished</strong>. You still write ordinary Blazor - flip a
-    bool, remove a list item, change a page number - and the removal is what schedules the
-    animation.
-</p>
+<PageTitle>AnimatePresence · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>AnimatePresence</h1>
+    <p class="bb-subtitle">
+        An element that has already left the DOM cannot animate. That is the whole problem exit
+        animations exist to solve, and the presence components solve it by <strong>keeping removed
+        content rendered until its exit has finished</strong>. You still write ordinary Blazor - flip a
+        bool, remove a list item, change a page number - and the removal is what schedules the
+        animation.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Exit animations</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Exit animations</h3>
     <p>
         Wrap conditional content in <strong>BmotionAnimatePresence</strong> and give the child an
         <code>Exit</code> target. When <code>IsPresent</code> goes false the child plays that target
@@ -35,15 +36,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _visible = !_visible)">@(_visible ? "Remove" : "Add")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _visible = !_visible)">@(_visible ? "Remove" : "Add")</button>
     </div>
 
     <CodeSnippet Code="@_presenceCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Keyed lists</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Keyed lists</h3>
     <p>
         <strong>BmotionPresenceGroup</strong> does the same job for a collection, tracked by key:
         removed items play their <code>Exit</code> before leaving, added items play their enter, and
@@ -69,16 +70,16 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="AddItem">Add item</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="AddItem">Add item</button>
         <span class="demo-label">@_items.Count item(s)</span>
     </div>
 
     <CodeSnippet Code="@_listCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Pop layout</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Pop layout</h3>
     <p>
         By default an exiting item still occupies its space, so the row it sits in only closes up
         once the animation ends - a visible beat of dead air in a chip row or a grid.
@@ -102,15 +103,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="ResetChips">Reset chips</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="ResetChips">Reset chips</button>
     </div>
 
     <CodeSnippet Code="@_popLayoutCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Switching between items</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Switching between items</h3>
     <p>
         <strong>BmotionPresenceSwitch</strong> covers the case where content is <em>replaced</em>
         rather than added or removed - paging, toasts, a wizard step. Change <code>Item</code> and
@@ -132,72 +133,13 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _page++)">Next page</button>
-        <button class="btn-bm" @onclick="@(() => _page = _page > 1 ? _page - 1 : 1)">Previous page</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _page++)">Next page</button>
+        <button class="btn btn-secondary" @onclick="@(() => _page = _page > 1 ? _page - 1 : 1)">Previous page</button>
     </div>
 
     <CodeSnippet Code="@_switchCode" />
-</div>
-
-<style>
-    /* Exit targets move content past the edge of its stage; clipping keeps the departure inside
-       the card instead of letting it slide across the page. */
-    .presence-stage { min-height: 12.5rem; position: relative; overflow: hidden; }
-
-    .list-stage {
-        gap: .5rem;
-        width: 100%;
-        min-width: 17.5rem;
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .presence-row {
-        display: flex;
-        padding: .6rem 1rem;
-        border-radius: 8px;
-        align-items: center;
-        color: var(--bm-text);
-        justify-content: space-between;
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    /* The glyph sits on the accent-tinted row, where the secondary accent is too low-contrast to
-       read; the foreground token carries it in both themes. */
-    .row-remove {
-        border: none;
-        cursor: pointer;
-        font-size: 1.1rem;
-        background: none;
-        color: var(--bm-text);
-    }
-
-    /* position: relative is what anchors the popped (absolute) chips; without it they would
-       fall back to the nearest positioned ancestor and jump across the page. */
-    .chip-stage {
-        gap: .5rem;
-        flex-wrap: wrap;
-        position: relative;
-        min-height: 7.5rem;
-        align-content: flex-start;
-        justify-content: flex-start;
-    }
-
-    .chip {
-        cursor: pointer;
-        user-select: none;
-        white-space: nowrap;
-        padding: .35rem .9rem;
-        border-radius: 999px;
-        color: var(--bm-text);
-        background: color-mix(in srgb, var(--bm-secondary) 15%, transparent);
-        border: 1px solid color-mix(in srgb, var(--bm-secondary) 35%, transparent);
-    }
-
-    .page-box { font-size: 2rem; }
-</style>
+</section>
 
 @code {
     private bool _visible = true;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/BasicAnimations.razor b/src/Utilities/Bmotion/Demo/Client/Pages/BasicAnimations.razor
index ecb452484c8..21ef866d739 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/BasicAnimations.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/BasicAnimations.razor
@@ -1,18 +1,19 @@
 @page "/basic"
 
-<PageTitle>Basic animations - Bit.Bmotion</PageTitle>
-
-<h1>Basic animations</h1>
-
-<p class="page-intro">
-    Every animation in Bmotion is the same shape: a <strong>state to start from</strong>, a
-    <strong>state to end at</strong>, and a <strong>transition</strong> describing how to get
-    between them. Learn that shape here and the rest of the library - springs, gestures,
-    keyframes, layout - is the same component with more parameters.
-</p>
+<PageTitle>Basic animations · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Basic animations</h1>
+    <p class="bb-subtitle">
+        Every animation in Bmotion is the same shape: a <strong>state to start from</strong>, a
+        <strong>state to end at</strong>, and a <strong>transition</strong> describing how to get
+        between them. Learn that shape here and the rest of the library - springs, gestures,
+        keyframes, layout - is the same component with more parameters.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Initial and Animate</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Initial and Animate</h3>
     <p>
         <strong>Initial</strong> is the state the element is painted in before it has ever
         animated; <strong>Animate</strong> is the state it heads for. The animation runs on mount
@@ -41,15 +42,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _toggled = !_toggled)">Toggle animate</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _toggled = !_toggled)">Toggle animate</button>
     </div>
 
     <CodeSnippet Code="@_basicCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>CSS properties</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> CSS properties</h3>
     <p>
         Animation is not limited to transforms. Colors, <code>borderRadius</code> and
         <code>boxShadow</code> interpolate as values rather than snapping, and complex strings like
@@ -92,17 +93,17 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _rounded = !_rounded)">Toggle shape</button>
-        <button class="btn-bm" @onclick="@(() => _dimmed = !_dimmed)">Toggle filter</button>
-        <button class="btn-bm" @onclick="@(() => _lifted = !_lifted)">Toggle shadow</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _rounded = !_rounded)">Toggle shape</button>
+        <button class="btn btn-secondary" @onclick="@(() => _dimmed = !_dimmed)">Toggle filter</button>
+        <button class="btn btn-secondary" @onclick="@(() => _lifted = !_lifted)">Toggle shadow</button>
     </div>
 
     <CodeSnippet Code="@_cssCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>3D transforms</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> 3D transforms</h3>
     <p>
         <code>perspective</code> gives an element a vanishing point and
         <code>rotateX</code> / <code>rotateY</code> / <code>z</code> turn it in that space.
@@ -140,13 +141,13 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _flipped = !_flipped)">Flip</button>
-        <button class="btn-bm" @onclick="@(() => _hinged = !_hinged)">Hinge</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _flipped = !_flipped)">Flip</button>
+        <button class="btn btn-secondary" @onclick="@(() => _hinged = !_hinged)">Hinge</button>
     </div>
 
     <CodeSnippet Code="@_transform3dCode" />
-</div>
+</section>
 
 @code {
     private bool _toggled;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/ColorSpaces.razor b/src/Utilities/Bmotion/Demo/Client/Pages/ColorSpaces.razor
index 6014cdfd411..a224a2fc9c2 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/ColorSpaces.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/ColorSpaces.razor
@@ -1,19 +1,20 @@
 @page "/color"
 
-<PageTitle>Color spaces - Bit.Bmotion</PageTitle>
-
-<h1>Color spaces</h1>
-
-<p class="page-intro">
-    Interpolating a color means walking a straight line between two points - but <em>which</em>
-    space you draw that line in decides what the midpoints look like. In sRGB the channels are
-    mixed numerically, which is why complementary colors pass through a desaturated grey on the
-    way. <strong>OKLab</strong> is built so that equal steps look like equal steps, so the same
-    journey keeps its chroma the whole way across.
-</p>
+<PageTitle>Color spaces · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Color spaces</h1>
+    <p class="bb-subtitle">
+        Interpolating a color means walking a straight line between two points - but <em>which</em>
+        space you draw that line in decides what the midpoints look like. In sRGB the channels are
+        mixed numerically, which is why complementary colors pass through a desaturated grey on the
+        way. <strong>OKLab</strong> is built so that equal steps look like equal steps, so the same
+        journey keeps its chroma the whole way across.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>sRGB and OKLab side by side</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> sRGB and OKLab side by side</h3>
     <p>
         sRGB is the default, matching Framer Motion. Opt into the perceptual space per transition
         with <code>colorSpace: BmColorSpace.Oklab</code>, or for a whole subtree with
@@ -46,15 +47,15 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _on = !_on)">@(_on ? "Reverse" : "Cross-fade")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _on = !_on)">@(_on ? "Reverse" : "Cross-fade")</button>
     </div>
 
     <CodeSnippet Code="@_code" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>When it matters</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> When it matters</h3>
     <p>
         Not every transition needs it. The two colors have to be far enough apart for the midpoint
         to be visible at all, so the difference is obvious on opposites - blue to yellow, red to
@@ -62,22 +63,12 @@
         the sensible default is what Bmotion does: sRGB unless you ask, and OKLab where the
         midpoints are actually on screen long enough to be seen.
     </p>
-    <ul class="feature-list">
+    <ul class="bb-detail-list">
         <li><strong>Reach for OKLab</strong> when a slow transition crosses the color wheel, or when a hue animates through a keyframe palette.</li>
         <li><strong>Leave it at sRGB</strong> for short state changes, hover tints, and any pair of nearby colors.</li>
         <li><strong>Set it globally</strong> on <code>BmotionConfig</code> when a whole surface should behave consistently rather than deciding per animation.</li>
     </ul>
-</div>
-
-<style>
-    .swatch-pair { display: flex; gap: 1rem; }
-
-    .swatch-cell { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
-
-    .swatch { width: 5.5rem; height: 5rem; border-radius: 10px; }
-
-    .feature-list { line-height: 1.9; color: var(--bm-muted); }
-</style>
+</section>
 
 @code {
     private bool _on;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/CssProps.razor b/src/Utilities/Bmotion/Demo/Client/Pages/CssProps.razor
index 25298c6c6e7..f5774a9f55d 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/CssProps.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/CssProps.razor
@@ -1,34 +1,37 @@
 @page "/css-props"
 
-<PageTitle>CSS properties - Bit.Bmotion</PageTitle>
-
-<h1>CSS properties</h1>
-
-<p class="page-intro">
-    Transforms and opacity are the properties that animate cheaply, and most of this library is
-    about them. This page is the other half: Bmotion's typed props reach across the whole style
-    surface - <strong>typography</strong>, <strong>spacing</strong>, <strong>positioning</strong>,
-    <strong>clipping and backgrounds</strong> - the <strong>cssVars</strong> bag animates CSS custom
-    properties, and the generic <strong>css</strong> bag animates <em>anything else</em> by name.
-    These are the ones that trigger layout or paint rather than compositing, so they are worth
-    spending deliberately. Each group below toggles on its own.
-</p>
+<PageTitle>CSS properties · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>CSS properties</h1>
+    <p class="bb-subtitle">
+        Transforms and opacity are the properties that animate cheaply, and most of this library is
+        about them. This page is the other half: Bmotion's typed props reach across the whole style
+        surface - <strong>typography</strong>, <strong>spacing</strong>, <strong>positioning</strong>,
+        <strong>clipping and backgrounds</strong> - the <strong>cssVars</strong> bag animates CSS custom
+        properties, and the generic <strong>css</strong> bag animates <em>anything else</em> by name.
+        These are the ones that trigger layout or paint rather than compositing, so they are worth
+        spending deliberately. Each group below toggles on its own.
+    </p>
+</div>
 
 @* ── Typography ─────────────────────────────────────────────────────────── *@
-<div class="demo-section">
-    <h2>Typography</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Typography</h3>
     <p><code>letterSpacing</code>, <code>fontSize</code> and <code>lineHeight</code> interpolate like any length.</p>
 
-    <button class="btn-bm section-toggle" @onclick="@(() => _typo = !_typo)">
-        @(_typo ? "Reset" : "Animate")
-    </button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _typo = !_typo)">
+            @(_typo ? "Reset" : "Animate")
+        </button>
+    </div>
 
     <div class="demo-row">
         <div class="demo-card stack">
             <span class="demo-label">letterSpacing</span>
             <Bmotion Animate="@(_typo ? Bm.To(letterSpacing: "0.4em") : Bm.To(letterSpacing: "0em"))"
                      Transition="Bm.Tween(0.7)">
-                <div class="headline">BMOTION</div>
+                <div class="css-headline">BMOTION</div>
             </Bmotion>
         </div>
 
@@ -36,7 +39,7 @@
             <span class="demo-label">fontSize</span>
             <Bmotion Animate="@(_typo ? Bm.To(fontSize: "2.2rem") : Bm.To(fontSize: "1rem"))"
                      Transition="Bm.Tween(0.6)">
-                <div class="headline" style="font-size:1rem">Scale me</div>
+                <div class="css-headline" style="font-size:1rem">Scale me</div>
             </Bmotion>
         </div>
 
@@ -44,29 +47,31 @@
             <span class="demo-label">lineHeight</span>
             <Bmotion Animate="@(_typo ? Bm.To(lineHeight: "2.3") : Bm.To(lineHeight: "1.15"))"
                      Transition="Bm.Tween(0.7)">
-                <div class="prose">Motion that reads well breathes between its lines.</div>
+                <div class="css-prose">Motion that reads well breathes between its lines.</div>
             </Bmotion>
         </div>
     </div>
 
     <CodeSnippet Code="@_typoCode" />
-</div>
+</section>
 
 @* ── Spacing ────────────────────────────────────────────────────────────── *@
-<div class="demo-section">
-    <h2>Spacing</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Spacing</h3>
     <p><code>gap</code> animates on a flex/grid container; <code>padding</code> grows a box from the inside; <code>margin</code> pushes it within its track.</p>
 
-    <button class="btn-bm section-toggle" @onclick="@(() => _spacing = !_spacing)">
-        @(_spacing ? "Reset" : "Animate")
-    </button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _spacing = !_spacing)">
+            @(_spacing ? "Reset" : "Animate")
+        </button>
+    </div>
 
     <div class="demo-row">
         <div class="demo-card stack">
             <span class="demo-label">gap (flex container)</span>
             <Bmotion Animate="@(_spacing ? Bm.To(gap: "2.5rem") : Bm.To(gap: "0.4rem"))"
                      Transition="Bm.Spring()">
-                <div class="row">
+                <div class="css-row">
                     <div class="box box-sm" /><div class="box box-sm" /><div class="box box-sm" />
                 </div>
             </Bmotion>
@@ -82,7 +87,7 @@
 
         <div class="demo-card stack">
             <span class="demo-label">margin</span>
-            <div class="track">
+            <div class="css-track">
                 <Bmotion Animate="@(_spacing ? Bm.To(margin: "1.6rem") : Bm.To(margin: "0.1rem"))"
                          Transition="Bm.Tween(0.6)">
                     <div class="box box-sm" />
@@ -92,21 +97,23 @@
     </div>
 
     <CodeSnippet Code="@_spacingCode" />
-</div>
+</section>
 
 @* ── Positioning ────────────────────────────────────────────────────────── *@
-<div class="demo-section">
-    <h2>Positioning</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Positioning</h3>
     <p>Animate <code>top</code>, <code>left</code>, <code>right</code> and <code>bottom</code> on a positioned element.</p>
 
-    <button class="btn-bm section-toggle" @onclick="@(() => _pos = !_pos)">
-        @(_pos ? "Reset" : "Animate")
-    </button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _pos = !_pos)">
+            @(_pos ? "Reset" : "Animate")
+        </button>
+    </div>
 
     <div class="demo-row">
         <div class="demo-card stack">
             <span class="demo-label">left</span>
-            <div class="track track-wide">
+            <div class="css-track css-track-wide">
                 <Bmotion Animate="@(_pos ? Bm.To(left: "150px") : Bm.To(left: "0px"))"
                          Transition="Bm.Tween(0.7)">
                     <div class="box box-sm" style="position:relative" />
@@ -116,7 +123,7 @@
 
         <div class="demo-card stack">
             <span class="demo-label">top + left</span>
-            <div class="track track-wide" style="min-height:120px">
+            <div class="css-track css-track-wide" style="min-height:120px">
                 <Bmotion Animate="@(_pos ? Bm.To(top: "60px", left: "150px") : Bm.To(top: "0px", left: "0px"))"
                          Transition="Bm.Spring(stiffness: 200, damping: 18)">
                     <div class="box box-sm" style="position:relative" />
@@ -126,16 +133,18 @@
     </div>
 
     <CodeSnippet Code="@_posCode" />
-</div>
+</section>
 
 @* ── Clipping & backgrounds ─────────────────────────────────────────────── *@
-<div class="demo-section">
-    <h2>Clipping &amp; backgrounds</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Clipping &amp; backgrounds</h3>
     <p><code>clipPath</code>, <code>backgroundPosition</code> and <code>backgroundSize</code> interpolate their numeric parts frame by frame.</p>
 
-    <button class="btn-bm section-toggle" @onclick="@(() => _visual = !_visual)">
-        @(_visual ? "Reset" : "Animate")
-    </button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _visual = !_visual)">
+            @(_visual ? "Reset" : "Animate")
+        </button>
+    </div>
 
     <div class="demo-row">
         <div class="demo-card stack">
@@ -164,23 +173,25 @@
     </div>
 
     <CodeSnippet Code="@_visualCode" />
-</div>
+</section>
 
 @* ── Generic escape hatch ───────────────────────────────────────────────── *@
-<div class="demo-section">
-    <h2>Generic <code>Css</code> escape hatch</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Generic <code>Css</code> escape hatch</h3>
     <p>The <code>css</code> bag animates <em>any</em> CSS property by name (dash- or camelCase) - the equivalent of motion.dev's <code>animate()</code>.</p>
 
-    <button class="btn-bm section-toggle" @onclick="@(() => _escape = !_escape)">
-        @(_escape ? "Reset" : "Animate")
-    </button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _escape = !_escape)">
+            @(_escape ? "Reset" : "Animate")
+        </button>
+    </div>
 
     <div class="demo-row">
         <div class="demo-card stack">
             <span class="demo-label">css: word-spacing</span>
             <Bmotion Animate="@(_escape ? Bm.To(css: new() { ["word-spacing"] = "1.5rem" }) : Bm.To(css: new() { ["word-spacing"] = "0rem" }))"
                      Transition="Bm.Tween(0.7)">
-                <div class="headline" style="font-size:1rem">the quick fox</div>
+                <div class="css-headline" style="font-size:1rem">the quick fox</div>
             </Bmotion>
         </div>
 
@@ -188,17 +199,17 @@
             <span class="demo-label">css: text-indent</span>
             <Bmotion Animate="@(_escape ? Bm.To(css: new() { ["text-indent"] = "48px" }) : Bm.To(css: new() { ["text-indent"] = "0px" }))"
                      Transition="Bm.Tween(0.7)">
-                <div class="prose">Indented on demand.</div>
+                <div class="css-prose">Indented on demand.</div>
             </Bmotion>
         </div>
     </div>
 
     <CodeSnippet Code="@_escapeCode" />
-</div>
+</section>
 
 @* ── CSS custom properties ──────────────────────────────────────────────── *@
-<div class="demo-section">
-    <h2>CSS custom properties</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> CSS custom properties</h3>
     <p>
         <code>cssVars</code> writes CSS custom properties (keys must start with <code>--</code>) on
         the animated element, where they cascade to everything inside it. That is the lever for the
@@ -207,9 +218,11 @@
         inner ring at once, and none of those three is addressed by name.
     </p>
 
-    <button class="btn-bm section-toggle" @onclick="@(() => _vars = !_vars)">
-        @(_vars ? "Reset" : "Animate")
-    </button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _vars = !_vars)">
+            @(_vars ? "Reset" : "Animate")
+        </button>
+    </div>
 
     <div class="demo-row">
         <div class="demo-card stack">
@@ -226,13 +239,13 @@
     </div>
 
     <CodeSnippet Code="@_varsCode" />
-</div>
+</section>
 
 @* ── Accessibility & safety ─────────────────────────────────────────────── *@
-<div class="demo-section">
-    <h2>Accessibility &amp; safety knobs</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Accessibility &amp; safety knobs</h3>
     <p>These are configured once at registration in <code>Program.cs</code>:</p>
-    <ul class="feature-list">
+    <ul class="bb-detail-list">
         <li>
             <strong>Reduced motion</strong> -
             <code>AddBitBmotionServices(o =&gt; o.ReducedMotion = BmReducedMotionMode.User)</code>
@@ -250,64 +263,7 @@
             <code>SupportsFrameLoop</code> (false on Blazor Server, where per-frame features degrade).
         </li>
     </ul>
-</div>
-
-<style>
-    /* Each group toggles on its own, so its control sits above the stages rather than under
-       them - the reader presses it once and then watches the whole row. */
-    .section-toggle { margin-bottom: 1.5rem; }
-
-    .headline { font-weight: 800; font-size: 1.4rem; letter-spacing: 0; }
-    .prose { max-width: 190px; color: var(--bm-text); font-size: .95rem; text-align: left; }
-    .row { display: flex; }
-
-    /* A left/top-anchored track so margin / position offsets are visible against an edge. */
-    .track { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; }
-    .track-wide { min-height: 60px; }
-
-    /* Solid, for the same reason .nest-btn on the gestures page is: the label has to stay readable,
-       and 12.8px white does not clear 4.5:1 over the light half of the boxes' gradient. What this
-       sample is showing is the padding animating, which the fill has nothing to do with. */
-    .pad-box {
-        background: var(--bm-primary);
-        border-radius: 10px; color: var(--bm-primary-text); font-weight: 700; font-size: .8rem;
-        display: inline-flex; align-items: center; justify-content: center;
-    }
-
-    .fill-box { width: 120px; height: 120px; border-radius: 12px; }
-    .grad-a { background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary)); }
-    .grad-pos { background: linear-gradient(90deg, var(--bm-primary), var(--bm-secondary), #ffb347); background-size: 300% 100%; }
-    .grad-size {
-        background: radial-gradient(circle at 50% 50%, var(--bm-secondary) 0%, var(--bm-primary) 60%);
-        background-repeat: no-repeat; background-position: center;
-    }
-
-    /* Three declarations, one animated variable. The variable is set on .glow-card by the
-       engine and inherited by .glow-ring, which is why the inner element needs no animation
-       of its own. */
-    .glow-card {
-        width: 7.5rem;
-        height: 7.5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 16px;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-        border: 2px solid color-mix(in srgb, var(--bm-secondary) 60%, transparent);
-        box-shadow: 0 0 var(--glow, 0px) color-mix(in srgb, var(--bm-primary) 70%, transparent);
-    }
-
-    .glow-ring {
-        width: 2.5rem;
-        height: 2.5rem;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, .9);
-        box-shadow: 0 0 var(--glow, 0px) rgba(255, 255, 255, .9);
-    }
-
-    .feature-list { line-height: 1.9; color: var(--bm-muted); }
-    .feature-list code { background: var(--bm-track); padding: .1rem .35rem; border-radius: 4px; }
-</style>
+</section>
 
 @code {
     private bool _typo;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/DragPage.razor b/src/Utilities/Bmotion/Demo/Client/Pages/DragPage.razor
index c4468c8d6b3..b5cf6a9364c 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/DragPage.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/DragPage.razor
@@ -1,19 +1,20 @@
 @page "/drag"
 
-<PageTitle>Drag - Bit.Bmotion</PageTitle>
-
-<h1>Drag</h1>
-
-<p class="page-intro">
-    <strong>Drag="true"</strong> is the entire opt-in. Everything after that is a refinement of the
-    same gesture: which axes it may use, how far it may go, how it behaves at the edges, what
-    happens to the momentum when you let go, and which part of the element is allowed to start it.
-    Drag runs on the per-frame engine, so it is a <strong>Blazor WebAssembly</strong> feature; on
-    Blazor Server the element simply does not move.
-</p>
+<PageTitle>Drag · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Drag</h1>
+    <p class="bb-subtitle">
+        <strong>Drag="true"</strong> is the entire opt-in. Everything after that is a refinement of the
+        same gesture: which axes it may use, how far it may go, how it behaves at the edges, what
+        happens to the momentum when you let go, and which part of the element is allowed to start it.
+        Drag runs on the per-frame engine, so it is a <strong>Blazor WebAssembly</strong> feature; on
+        Blazor Server the element simply does not move.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Axes and constraints</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Axes and constraints</h3>
     <p>
         <code>Drag="BmDrag.X"</code> or <code>BmDrag.Y</code> locks the gesture to one axis, and
         <strong>DragConstraints</strong> bounds how far it may travel.
@@ -47,10 +48,10 @@
     </div>
 
     <CodeSnippet Code="@_dragCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Constrain to a container</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Constrain to a container</h3>
     <p>
         Numeric bounds mean re-deriving them every time the layout changes. Element bounds do not:
         <strong>BmDragConstraints.Parent()</strong> keeps the element inside its parent and
@@ -71,10 +72,10 @@
     </div>
 
     <CodeSnippet Code="@_dragParentCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Momentum and fling</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Momentum and fling</h3>
     <p>
         A drag that stops dead where your finger lifted feels like a bug. <strong>DragMomentum</strong>
         (on by default) carries the release velocity into an inertia animation that decelerates on
@@ -123,10 +124,10 @@
     </div>
 
     <CodeSnippet Code="@_momentumCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Snapping on release</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Snapping on release</h3>
     <p>
         Momentum answers <em>how fast</em> the element stops; <strong>modifyTarget</strong> answers
         <em>where</em>. A <code>DragTransition</code> written as an inertia hands the projected
@@ -165,10 +166,10 @@
     </div>
 
     <CodeSnippet Code="@_snapCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Handles and drag controls</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Handles and drag controls</h3>
     <p>
         Making a whole row draggable costs you every click and text selection inside it.
         <strong>DragHandle</strong> restricts the gesture to a grip within the element and leaves
@@ -216,10 +217,10 @@
     </div>
 
     <CodeSnippet Code="@_handleControlsCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Drag events</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Drag events</h3>
     <p>
         <code>OnDragStart</code> and <code>OnDragEnd</code> bracket the gesture, and
         <code>OnDrag</code> fires throughout it - enough to persist a position, mark a form dirty,
@@ -238,10 +239,10 @@
     </div>
 
     <CodeSnippet Code="@_dragEventsCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Nested drag and propagation</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Nested drag and propagation</h3>
     <p>
         A draggable inside a draggable is ambiguous, so Bmotion resolves it the way motion.dev
         does: the child <strong>stops propagation</strong> and only the child moves. Set
@@ -274,123 +275,7 @@
     </div>
 
     <CodeSnippet Code="@_nestedCode" />
-</div>
-
-<style>
-    /* Every drag stage is its own positioning context: the captions below are absolutely placed,
-       and BmDragConstraints.Parent() measures this element. Without it both would resolve
-       against whatever ancestor happened to be positioned. */
-    .drag-stage { position: relative; overflow: hidden; height: 12.5rem; }
-    .drag-stage.tall { height: 13.75rem; }
-    .drag-stage.taller { height: 15rem; }
-
-    .stage-note {
-        top: .5rem;
-        left: 50%;
-        position: absolute;
-        transform: translateX(-50%);
-        font-size: .75rem;
-        white-space: nowrap;
-        color: var(--bm-muted);
-    }
-
-    .stage-note.bottom { top: auto; bottom: .75rem; }
-
-    /* The free-drag samples start dead centre so there is room to throw them in any direction. */
-    .drag-centred { position: absolute; top: 50%; left: 50%; margin: -2.5rem 0 0 -2.5rem; cursor: grab; }
-    .drag-centred-sm { position: absolute; top: 50%; left: 50%; margin: -1.5625rem 0 0 -1.5625rem; cursor: grab; }
-
-    .grabbable { cursor: grab; }
-
-    .handle-row {
-        gap: .6rem;
-        display: flex;
-        padding: .8rem 1rem;
-        align-items: center;
-        border-radius: 10px;
-        color: var(--bm-text);
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .grip { cursor: grab; user-select: none; font-size: 1.1rem; color: var(--bm-muted); }
-
-    .thumb-track {
-        width: 100%;
-        height: 1.75rem;
-        display: flex;
-        padding: 0 4px;
-        cursor: pointer;
-        position: relative;
-        align-items: center;
-        border-radius: 999px;
-        background: var(--bm-track);
-    }
-
-    .thumb {
-        width: 1.25rem;
-        height: 1.25rem;
-        border-radius: 50%;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    .drag-parent {
-        width: 9.375rem;
-        height: 9.375rem;
-        display: flex;
-        cursor: grab;
-        border-radius: 12px;
-        align-items: center;
-        justify-content: center;
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .drag-child {
-        width: 3.375rem;
-        height: 3.375rem;
-        cursor: grab;
-        border-radius: 10px;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    /* The stops the snap demo lands on, drawn so the settle is visibly ON something. */
-    .snap-grid {
-        top: 50%;
-        left: 50%;
-        width: 15.5rem;
-        height: 1px;
-        position: absolute;
-        transform: translate(-50%, -50%);
-        background: repeating-linear-gradient(to right,
-            var(--bm-accent-line) 0 1px, transparent 1px 3.75rem);
-    }
-
-    .snap-pages {
-        gap: .5rem;
-        display: flex;
-        cursor: grab;
-        padding: .75rem;
-        border-radius: 10px;
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .snap-pages span {
-        width: 5rem;
-        display: flex;
-        height: 3.5rem;
-        color: var(--bm-primary-text);
-        /* 20px/700 counts as large text, which is the bar white can clear over the light half of
-           this gradient - see .box in motion-samples.css, which is sized for the same reason. */
-        font-size: 1.25rem;
-        font-weight: 700;
-        border-radius: 8px;
-        align-items: center;
-        justify-content: center;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-</style>
+</section>
 
 @code {
     private string _dragInfo = "Drag the box";
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Easing.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Easing.razor
index 8bc2b2f8fbd..d3b0a8befbe 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Easing.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Easing.razor
@@ -1,21 +1,22 @@
 @page "/easing"
 
-<PageTitle>Easing - Bit.Bmotion</PageTitle>
-
-<h1>Easing</h1>
-
-<p class="page-intro">
-    An easing curve is what turns a duration into a feel. <strong>Bm.Tween</strong> takes one as its
-    second argument and covers the full easings.net family - the cubic default
-    (<code>In</code> / <code>Out</code> / <code>InOut</code>) plus Sine, Quad, Quart, Quint, Expo and
-    Circ, the overshooting <em>Back</em> and <em>Anticipate</em>, and the oscillating
-    <em>Elastic</em> and <em>Bounce</em> - along with <code>steps()</code> staircases and arbitrary
-    cubic-béziers. Curves the browser can express are sampled to <code>linear()</code> and handed to
-    the compositor; the rest run on the C# frame loop.
-</p>
-
-<div class="demo-section">
-    <h2>Named presets</h2>
+<PageTitle>Easing · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Easing</h1>
+    <p class="bb-subtitle">
+        An easing curve is what turns a duration into a feel. <strong>Bm.Tween</strong> takes one as its
+        second argument and covers the full easings.net family - the cubic default
+        (<code>In</code> / <code>Out</code> / <code>InOut</code>) plus Sine, Quad, Quart, Quint, Expo and
+        Circ, the overshooting <em>Back</em> and <em>Anticipate</em>, and the oscillating
+        <em>Elastic</em> and <em>Bounce</em> - along with <code>steps()</code> staircases and arbitrary
+        cubic-béziers. Curves the browser can express are sampled to <code>linear()</code> and handed to
+        the compositor; the rest run on the C# frame loop.
+    </p>
+</div>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Named presets</h3>
     <p>
         Each row below plays the same 240&nbsp;px move over the same 0.9&nbsp;s, so the only thing
         that differs is the curve. Watch where each one spends its time: <code>InOut</code> variants
@@ -38,15 +39,15 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _on = !_on)">@(_on ? "Send back" : "Animate")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _on = !_on)">@(_on ? "Send back" : "Animate")</button>
     </div>
 
     <CodeSnippet Code="@_easeCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Custom cubic-bézier</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Custom cubic-bézier</h3>
     <p>
         When no preset is the curve you want, hand <strong>Bm.Tween</strong> the four control
         numbers directly with <code>bezier: [x1, y1, x2, y2]</code> - the same values CSS
@@ -69,15 +70,15 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _bezier = !_bezier)">@(_bezier ? "Send back" : "Animate")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _bezier = !_bezier)">@(_bezier ? "Send back" : "Animate")</button>
     </div>
 
     <CodeSnippet Code="@_bezierCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Stepped easing</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Stepped easing</h3>
     <p>
         <strong>Bm.Tween(steps: n, stepJump: …)</strong> maps to CSS <code>steps()</code>: instead of
         a continuous curve the progress advances in <em>n</em> discrete jumps - the sprite-sheet and
@@ -101,30 +102,12 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _stepped = !_stepped)">@(_stepped ? "Send back" : "Step")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _stepped = !_stepped)">@(_stepped ? "Send back" : "Step")</button>
     </div>
 
     <CodeSnippet Code="@_stepsCode" />
-</div>
-
-<style>
-    /* One row per curve, all sharing a track of the same length: the comparison only means
-       anything if the distance and the duration are held constant across them. */
-    .ease-list { display: flex; flex-direction: column; gap: .5rem; }
-
-    .ease-row { display: flex; align-items: center; gap: 1rem; }
-
-    .ease-name { width: 7.5rem; flex: none; text-align: left; }
-
-    /* flex: none so the track keeps its height when it is a column item inside a stacked
-       card, rather than stretching to fill it. */
-    .ease-track { position: relative; flex: none; width: 100%; height: 2rem; }
-
-    .ease-row .ease-track { flex: 1; }
-
-    .ease-dot { width: 1.75rem; height: 1.75rem; }
-</style>
+</section>
 
 @code {
     private bool _on;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/ErrorPage.razor b/src/Utilities/Bmotion/Demo/Client/Pages/ErrorPage.razor
index a712fc3a6cc..9a1d8cdcd69 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/ErrorPage.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/ErrorPage.razor
@@ -1,30 +1,21 @@
 @page "/Error"
+@layout MainLayout
 
 @* Target of app.UseExceptionHandler("/Error") in the host's Program.cs. It lives in the client
    project on purpose: Routes.razor binds the router to this assembly only, so a page placed in
    the host project would never be matched and the re-executed request would end in a 404. *@
 
-<PageTitle>Error - Bit.Bmotion</PageTitle>
-
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">500</span>
-
-    <h1>Something went wrong</h1>
+<PageTitle>Error · Bmotion</PageTitle>
 
+<div class="bb-error">
+    <h1>500</h1>
     <p role="alert">
-        An error occurred while processing your request. Reloading usually clears it; if it does
-        not, the repository is the place to tell us about it.
+        An error occurred while processing your request. Reloading usually clears it; if it does not,
+        the repository is the place to tell us about it.
     </p>
-
-    <div class="hero-actions">
-        <a class="btn-primary" href="/">
-            Back to home
-            <Icon Path="@Icons.ArrowRight" />
-        </a>
-        <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-           href="https://github.com/bitfoundation/bitplatform/issues">
-            <span class="github-mark" aria-hidden="true"></span>
-            Report an issue
-        </a>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="https://github.com/bitfoundation/bitplatform/issues" class="btn btn-secondary"
+           target="_blank" rel="noopener noreferrer">Report an issue ↗</a>
     </div>
 </div>
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Gestures.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Gestures.razor
index a89681b887c..2635db9fb00 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Gestures.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Gestures.razor
@@ -1,19 +1,20 @@
 @page "/gestures"
 
-<PageTitle>Gestures - Bit.Bmotion</PageTitle>
-
-<h1>Gestures</h1>
-
-<p class="page-intro">
-    Gesture states are <strong>overlays</strong>, not replacements. <code>WhileHover</code>,
-    <code>WhileTap</code>, <code>WhileFocus</code>, <code>WhileDrag</code> and
-    <code>WhileInView</code> layer on top of whatever <code>Animate</code> is currently showing and
-    revert themselves the moment the gesture ends - so you never write the "back to normal"
-    animation, and overlapping gestures resolve without any state of your own.
-</p>
+<PageTitle>Gestures · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Gestures</h1>
+    <p class="bb-subtitle">
+        Gesture states are <strong>overlays</strong>, not replacements. <code>WhileHover</code>,
+        <code>WhileTap</code>, <code>WhileFocus</code>, <code>WhileDrag</code> and
+        <code>WhileInView</code> layer on top of whatever <code>Animate</code> is currently showing and
+        revert themselves the moment the gesture ends - so you never write the "back to normal"
+        animation, and overlapping gestures resolve without any state of your own.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Hover and tap</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Hover and tap</h3>
     <p>
         The two workhorses. Both take an ordinary target, so anything animatable is fair game -
         here a lift with a coloured shadow, and a press that scales down. Tap is
@@ -39,16 +40,16 @@
                     WhileHover='Bm.To(scale: 1.07, backgroundColor: "#0B6AB4")'
                     WhileTap="Bm.To(scale: 0.95)"
                     Transition="Bm.Tween(0.15)">
-                <button class="btn-bm">Animated button</button>
+                <button type="button" class="sample-btn">Animated button</button>
             </Bmotion>
         </div>
     </div>
 
     <CodeSnippet Code="@_hoverTapCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Focus</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Focus</h3>
     <p>
         <strong>WhileFocus</strong> plays while the element or any of its descendants holds focus.
         It is the accessible half of a hover effect: keyboard users get the same affordance pointer
@@ -66,10 +67,10 @@
     </div>
 
     <CodeSnippet Code="@_focusCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Pan</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Pan</h3>
     <p>
         A pan is a pointer drag <em>reported</em> rather than applied: <code>OnPan</code> hands you
         a <strong>BmPanInfo</strong> - the pointer position, the delta since the last event, the
@@ -96,10 +97,10 @@
     </div>
 
     <CodeSnippet Code="@_panCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Gesture events</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Gesture events</h3>
     <p>
         Every gesture also reports itself as a callback, so an animation can be paired with real
         work. Note the ordering below: <code>TapCancel</code> fires instead of <code>Tap</code> when
@@ -132,10 +133,10 @@
     </div>
 
     <CodeSnippet Code="@_eventsCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Nested gestures</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Nested gestures</h3>
     <p>
         Pointer gestures bubble, so a tappable button inside a tappable card presses both. That is
         usually right - a card that reacts to being pressed anywhere feels alive - but not when the
@@ -173,10 +174,10 @@
     </div>
 
     <CodeSnippet Code="@_propagationCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Owning the transform string</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Owning the transform string</h3>
     <p>
         Bmotion composes one <code>transform</code> from every animated component, in a fixed order.
         <strong>TransformTemplate</strong> hands that string back to you before it is written -
@@ -205,78 +206,12 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _pinned = !_pinned)">@(_pinned ? "Shrink" : "Grow")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _pinned = !_pinned)">@(_pinned ? "Shrink" : "Grow")</button>
     </div>
 
     <CodeSnippet Code="@_templateCode" />
-</div>
-
-<style>
-    .nest-card {
-        display: flex;
-        padding: 1.5rem;
-        cursor: pointer;
-        border-radius: 12px;
-        align-items: center;
-        justify-content: center;
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    /* Filled with the accent rather than with the accent-to-secondary gradient the boxes use: this
-       one carries a word, and white does not clear 4.5:1 over the light half of that gradient. The
-       gradient is decoration here; the label is not. */
-    .nest-btn {
-        border: none;
-        cursor: pointer;
-        font-weight: 600;
-        padding: .6rem 1.1rem;
-        border-radius: 8px;
-        color: var(--bm-primary-text);
-        background: var(--bm-primary);
-    }
-
-    /* A fixed stage with a marked centre, so "the pin slipped off its anchor" is visible rather
-       than something you have to take on faith. */
-    .pin-stage { position: relative; min-height: 11rem; }
-
-    .pin {
-        top: 50%;
-        left: 50%;
-        width: 2.5rem;
-        height: 2.5rem;
-        position: absolute;
-        border-radius: 50%;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-</style>
-
-<style>
-    .focus-input {
-        width: 15rem;
-        outline: none;
-        padding: .5rem 1rem;
-        color: var(--bm-text);
-        background: var(--bm-surface);
-        border: 2px solid var(--bm-border);
-        border-radius: 8px;
-        font-family: inherit;
-        font-size: .875rem;
-    }
-
-    /* A quiet, fixed-height panel so a live readout under a stage never resizes the stage. */
-    .readout {
-        width: 100%;
-        font-size: .78rem;
-        line-height: 1.6;
-        text-align: center;
-        font-family: var(--demo-font-mono);
-        color: var(--bm-muted);
-    }
-
-    .event-log { max-height: 7.5rem; overflow: auto; }
-</style>
+</section>
 
 @code {
     private readonly List<string> _events = [];
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bmotion/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..62168507130
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,133 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package and one service registration - then any element on an interactively rendered page can
+        spring, fade, follow the pointer or animate out before it is removed. All of the maths runs in C#;
+        the small browser bridge loads itself the first time an animation runs.
+    </p>
+</div>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        The package targets .NET 8, 9 and 10. Its browser bridge, <code>bit-bmotion.js</code>, ships as a static
+        web asset and is imported on demand, so there is no <code>&lt;script&gt;</code> tag to add and no
+        JavaScript to write. In a Blazor Web App the package belongs in the project whose components animate -
+        the <code>.Client</code> project for WebAssembly pages.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.Bmotion</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
+    <p class="bb-card-desc">
+        A Blazor Web App has two DI containers: the client's components are instantiated once on the server for
+        the prerender pass and again in the browser, so the registration goes in both <code>Program.cs</code> files.
+        This site keeps it in one extension method that both call.
+    </p>
+    <pre class="bb-code"><span class="c">// Program.cs - in every project that renders animations</span>
+<span class="k">using</span> Bit.Bmotion;
+
+builder.Services.AddBitBmotionServices();</pre>
+    <p class="bb-card-desc">
+        The options are global. The two worth deciding on day one are how <code>prefers-reduced-motion</code> is
+        honoured - <code>BmReducedMotionMode.User</code> is the recommended setting - and what prerendered markup
+        shows before the runtime takes over:
+    </p>
+    <pre class="bb-code">builder.Services.AddBitBmotionServices(o =&gt;
+{
+    o.ReducedMotion = BmReducedMotionMode.User;   <span class="c">// follow the OS everywhere</span>
+    o.Prerender = BmPrerenderMode.Animate;        <span class="c">// play enter animations from the served HTML</span>
+});</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Make the components reachable</h3>
+    <p class="bb-card-desc">
+        One line in <code>_Imports.razor</code>, in every project that renders animations. Without it
+        <code>&lt;Bmotion&gt;</code> is not a known component and the build fails with RZ10012.
+    </p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.Bmotion</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Pick a render mode</h3>
+    <p class="bb-card-desc">
+        Animations need an interactive render mode. <strong>InteractiveWebAssembly</strong> supports every feature,
+        because the engine can run its per-frame loop in the browser - it is what this site uses.
+    </p>
+    <div class="bb-note bb-note-warn">
+        On <strong>Blazor Server</strong> the compositor path still works, so enter, exit, hover, tap and variant
+        animations on transform and opacity play normally, and drag follows the pointer a round trip behind.
+        What needs the per-frame loop - inertia, colour and dimension interpolation, keyframe arrays off the
+        compositor - becomes an instant change. Inject <code>BmotionCapabilities</code> to tell which runtime you
+        are on rather than guessing; the <a href="accessibility">Accessibility</a> page shows it live.
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Prerendered enter animations</h3>
+    <p class="bb-card-desc">
+        A prerendered page has no runtime yet, so by default an element is served at its <code>Initial</code> state
+        and animates once the page is interactive - which for <code>Initial="Bm.To(opacity: 0)"</code> means
+        invisible content until the runtime has downloaded. With <code>BmPrerenderMode.Animate</code> the enter
+        animation is compiled to CSS and plays straight from the served HTML; it needs the library's stylesheet in
+        the page head. <code>BmPrerenderMode.Final</code> serves elements at rest instead, with no stylesheet.
+    </p>
+    <pre class="bb-code"><span class="c">&lt;!-- App.razor, in &lt;head&gt; - only needed for BmPrerenderMode.Animate --&gt;</span>
+&lt;<span class="k">link</span> rel=<span class="s">"stylesheet"</span> href=<span class="s">"_content/Bit.Bmotion/bit-bmotion.css"</span> /&gt;</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> A first animation</h3>
+    <p class="bb-card-desc">
+        <code>&lt;Bmotion&gt;</code> renders no element of its own: it animates the one element inside it.
+        <code>Initial</code> is where that element starts, <code>Animate</code> is where it is going, and
+        <code>Transition</code> says how it gets there. Gesture states such as <code>WhileHover</code> and
+        <code>WhileTap</code> layer on top and revert by themselves.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">Bmotion</span> Initial=<span class="s">"Bm.To(opacity: 0, y: 20)"</span>
+         Animate=<span class="s">"Bm.To(opacity: 1, y: 0)"</span>
+         WhileHover=<span class="s">"Bm.To(scale: 1.1)"</span>
+         WhileTap=<span class="s">"Bm.To(scale: 0.95)"</span>
+         Transition=<span class="s">"Bm.Spring(bounce: 0.4, duration: 0.6)"</span>&gt;
+    &lt;<span class="k">div</span> class=<span class="s">"box"</span>&gt;Hello&lt;/<span class="k">div</span>&gt;
+&lt;/<span class="k">Bmotion</span>&gt;</pre>
+
+    <div class="demo-row">
+        <div class="demo-card stack">
+            <span class="demo-label">Live &middot; hover it, press it</span>
+            <Bmotion @key="_run"
+                     Initial="Bm.To(opacity: 0, y: 20)"
+                     Animate="Bm.To(opacity: 1, y: 0)"
+                     WhileHover="Bm.To(scale: 1.1)"
+                     WhileTap="Bm.To(scale: 0.95)"
+                     Transition="Bm.Spring(bounce: 0.4, duration: 0.6)">
+                <div class="box box-label">Hello</div>
+            </Bmotion>
+        </div>
+    </div>
+
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-primary" @onclick="() => _run++">Replay the entrance</button>
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Where to go next</h3>
+    <div class="bb-try">
+        <a href="basic" class="btn btn-outline">The shape of every animation →</a>
+        <a href="springs" class="btn btn-outline">Tune a spring →</a>
+        <a href="gestures" class="btn btn-outline">React to the pointer →</a>
+        <a href="presence" class="btn btn-outline">Animate an exit →</a>
+        <a href="mcp-server" class="btn btn-outline">Let an AI agent write it →</a>
+    </div>
+</section>
+
+@code {
+    private int _run;
+}
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Home.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Home.razor
index 12802dccb15..c608fab8ebb 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Home.razor
@@ -1,337 +1,314 @@
 @page "/"
-@inject IJSRuntime JS
-
-@* The landing page. It is not a documentation page and does not get the docs shell around it -
-   no nav panel, no "on this page" rail, no reading column (see Layout/MainLayout.razor). Instead
-   it lays out its own full-bleed sections, alternating surfaces, and prints its own index into the
-   docs - which is the job the nav panel would otherwise be doing here.
-
-   Every animation on it is Bmotion animating itself. That is the whole argument the page has to
-   make, so the page makes it with the library rather than about it: the hero assembles, the tiles
-   answer the pointer, and the quick-start sample is the same four lines printed underneath it.
-
-   Its styles live under "Landing page" in wwwroot/css/app.css. *@
+@layout MainLayout
 
 <PageTitle>Bmotion - a Blazor-native animation library</PageTitle>
 
-<div class="homepage">
-
-    @* ── Hero ──────────────────────────────────────────────────────────────── *@
-    <section class="homepage-section hero-section">
-        <div class="homepage-section-content">
-            <div class="hero-copy">
-                <Bmotion Initial="Bm.To(opacity: 0, y: 12)"
-                         Animate="Bm.To(opacity: 1, y: 0)"
-                         Transition="Bm.Tween(0.4)">
-                    <a class="hero-eyebrow" href="/mcp-server">
-                        <Icon Path="@Icons.Sparkle" />
-                        Ships with an MCP server for AI agents
-                    </a>
-                </Bmotion>
-
-                <Bmotion Initial="Bm.To(opacity: 0, y: 30)"
-                         Animate="Bm.To(opacity: 1, y: 0)"
-                         Transition="Bm.Spring(stiffness: 80, damping: 15)">
-                    <h1>Motion for Blazor, <span class="accent">written in C#</span></h1>
-                </Bmotion>
-
-                <Bmotion Initial="Bm.To(opacity: 0, y: 20)"
-                         Animate="Bm.To(opacity: 1, y: 0)"
-                         Transition="Bm.Tween(0.6, delay: 0.15)">
-                    <p class="hero-lead">
-                        Springs, gestures, layout animations and variants, inspired by Framer
-                        Motion and rebuilt for Blazor. All of the maths runs in C#, none of the
-                        JavaScript wiring is yours, and no animation library ships alongside it.
-                    </p>
-                </Bmotion>
-
-                <Bmotion Initial="Bm.To(opacity: 0, y: 15)"
-                         Animate="Bm.To(opacity: 1, y: 0)"
-                         Transition="Bm.Tween(0.5, delay: 0.28)">
-                    <div class="hero-actions">
-                        <a class="btn-primary" href="/basic">
-                            Get started
-                            <Icon Path="@Icons.ArrowRight" />
-                        </a>
-                        <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-                           href="https://github.com/bitfoundation/bitplatform">
-                            <span class="github-mark" aria-hidden="true"></span>
-                            View on GitHub
-                        </a>
-                    </div>
-                </Bmotion>
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with a
+   JavaScript animation library → persona tiles → FAQ → final call to action. Everything else on the
+   site is a documentation page under DocsLayout.
 
-                <Bmotion Initial="Bm.To(opacity: 0, y: 15)"
-                         Animate="Bm.To(opacity: 1, y: 0)"
-                         Transition="Bm.Tween(0.5, delay: 0.36)">
-                    <div class="install-line">
-                        <code><span class="prompt" aria-hidden="true">&gt;&nbsp;</span>@_install</code>
-                        <button type="button" class="install-copy" @onclick="CopyInstallAsync"
-                                aria-label="@(_installCopied ? "Install command copied to the clipboard" : "Copy the install command")">
-                            <Icon Path="@(_installCopied ? Icons.Check : Icons.Copy)" />
-                            @(_installCopied ? "Copied" : "Copy")
-                        </button>
-                    </div>
-                </Bmotion>
+   Every animation on it is Bmotion animating itself. That is the whole argument the page has to
+   make, so it makes it with the library rather than about it: the hero assembles, and the tiles in
+   the window are the sample printed above them, live - they enter on a stagger and answer the
+   pointer. The site prerenders with BmPrerenderMode.Animate, so the entrance plays from the served
+   HTML before the runtime has loaded. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <Bmotion Initial="Bm.To(opacity: 0, y: 12)" Animate="Bm.To(opacity: 1, y: 0)" Transition="Bm.Tween(0.4)">
+                <span class="bb-hero-eyebrow">
+                    <span class="bb-dot bb-dot-success"></span>
+                    Open source · MIT · net8.0 / net9.0 / net10.0
+                </span>
+            </Bmotion>
+            <Bmotion Initial="Bm.To(opacity: 0, y: 30)" Animate="Bm.To(opacity: 1, y: 0)"
+                     Transition="Bm.Spring(stiffness: 80, damping: 15)">
+                <h1>Motion for Blazor,<br /><span class="bb-hero-accent">written in C#.</span></h1>
+            </Bmotion>
+            <Bmotion Initial="Bm.To(opacity: 0, y: 20)" Animate="Bm.To(opacity: 1, y: 0)" Transition="Bm.Tween(0.6, delay: 0.15)">
+                <p class="bb-hero-sub">
+                    Springs, gestures, keyframes, variants, drag, layout and exit animations, inspired by Framer
+                    Motion and rebuilt for Blazor. All of the maths runs in C#, none of the JavaScript wiring is
+                    yours, and no animation library ships alongside it.
+                </p>
+            </Bmotion>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bmotion</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="basic" class="btn btn-secondary bb-btn-lg">Live demos</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
             </div>
+        </div>
 
-            @* The hero says what the library does; this shows it. Each tile plays its own entrance
-               and answers the pointer, so the first thing a reader sees on the page is the thing
-               the page is about. *@
-            <div class="hero-stage">
-                @for (var i = 0; i < _tiles.Length; i++)
-                {
-                    var tile = _tiles[i];
-                    var delay = 0.45 + (i * 0.09);
-                    <Bmotion Initial="Bm.To(opacity: 0, y: 26, scale: 0.9)"
-                             Animate="Bm.To(opacity: 1, y: 0, scale: 1)"
-                             WhileHover="Bm.To(scale: 1.05, y: -6)"
-                             WhileTap="Bm.To(scale: 0.96)"
-                             Transition="Bm.Spring(stiffness: 220, damping: 20, delay: delay)">
-                        <a class="hero-tile" href="@($"/{tile.Href}")">
-                            <span class="hero-tile-icon">
-                                <Icon Path="@tile.Icon" />
-                            </span>
-                            <span class="hero-tile-title">@tile.Title</span>
-                            <span class="hero-tile-desc">@tile.Description</span>
-                        </a>
-                    </Bmotion>
-                }
+        @* The sample, framed as a window: the markup on top, and what it renders underneath - live, so
+           the first thing a visitor can do here is hover or press something that springs back. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Tile.razor</span>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">Bmotion</span> Initial=<span class="s">"Bm.To(opacity: 0, y: 26, scale: 0.9)"</span>
+         Animate=<span class="s">"Bm.To(opacity: 1, y: 0, scale: 1)"</span>
+         WhileHover=<span class="s">"Bm.To(scale: 1.05, y: -6)"</span>
+         WhileTap=<span class="s">"Bm.To(scale: 0.96)"</span>
+         Transition=<span class="s">"Bm.Spring(stiffness: 220, damping: 20)"</span>&gt;
+    &lt;<span class="k">a</span> class=<span class="s">"tile"</span> href=<span class="s">"springs"</span>&gt;Springs&lt;/<span class="k">a</span>&gt;
+&lt;/<span class="k">Bmotion</span>&gt;</pre>
+                <div class="home-hero-live">
+                    @for (var i = 0; i < _tiles.Length; i++)
+                    {
+                        var tile = _tiles[i];
+                        <Bmotion @key="tile.Href"
+                                 Initial="Bm.To(opacity: 0, y: 26, scale: 0.9)"
+                                 Animate="Bm.To(opacity: 1, y: 0, scale: 1)"
+                                 WhileHover="Bm.To(scale: 1.05, y: -6)"
+                                 WhileTap="Bm.To(scale: 0.96)"
+                                 Transition="@Bm.Spring(stiffness: 220, damping: 20).WithDelay(0.35 + i * 0.09)">
+                            <a class="home-tile" href="@tile.Href">
+                                <span class="home-tile-title">@tile.Title</span>
+                                <span class="home-tile-desc">@tile.Description</span>
+                            </a>
+                        </Bmotion>
+                    }
+                </div>
             </div>
         </div>
     </section>
 
-    @* ── Quick start ───────────────────────────────────────────────────────── *@
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Quick start</span>
-            <h2>One component, two parameters</h2>
-            <p class="section-lead">
-                Where the element starts, and where it is going. Everything else &mdash; springs,
-                gestures, keyframes, drag, layout &mdash; is the same component with more of them.
-                Hover the box, then press it; the code underneath is the whole sample.
-            </p>
+    @* ============================== Proof strip ============================== *@
 
-            <div class="quick-start-body">
-                <div class="demo-row">
-                    <div class="demo-card">
-                        <Bmotion Initial="Bm.To(scale: 0, opacity: 0)"
-                                 Animate="Bm.To(scale: 1, opacity: 1)"
-                                 WhileHover="Bm.To(scale: 1.15, rotate: 5)"
-                                 WhileTap="Bm.To(scale: 0.9)"
-                                 Transition="Bm.Spring(stiffness: 300, damping: 20)">
-                            <div class="box" />
-                        </Bmotion>
-                    </div>
-                </div>
+    <section class="bb-proof">
+        <div><strong>Maths in C#</strong><span>springs, tweens, inertia, easing and colour interpolation</span></div>
+        <div><strong>Compositor first</strong><span>enter, exit, hover and variants run on the Web Animations API</span></div>
+        <div><strong>No JavaScript to write</strong><span>the small bridge imports itself on first use</span></div>
+        <div><strong>Prerender friendly</strong><span>enter animations play from the served HTML</span></div>
+    </section>
 
-                <CodeSnippet Code="@_quickStart" />
-            </div>
+    @* ============================== Feature grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>What you can build with it</h2>
+        <p class="bb-section-sub">
+            Every card links to the demo that proves it, and every demo ships its own source one click away.
+        </p>
+        <div class="bb-grid">
+            @foreach (var (feature, index) in _capabilities.Select((feature, index) => (feature, index)))
+            {
+                <section class="bb-card" @key="feature.Href">
+                    <h3 class="bb-card-title"><span class="bb-dot @Dots[index % Dots.Length]"></span> @feature.Title</h3>
+                    <p class="bb-card-desc">@feature.Description</p>
+                    <a href="@feature.Href" class="btn btn-outline">@feature.Link →</a>
+                </section>
+            }
         </div>
     </section>
 
-    @* ── Why ───────────────────────────────────────────────────────────────── *@
-    <section class="homepage-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Why Bmotion</span>
-            <h2>A C# engine, and the browser's own compositor</h2>
-            <p class="section-lead">
-                Compositor-eligible work &mdash; tweens and settled springs on transform and
-                opacity, which is most enter, exit, hover and variant animation &mdash; is
-                pre-sampled in C# and handed to the browser's Web Animations API, so it plays off
-                the main thread with no per-frame interop at all. Everything else runs on the C#
-                rAF engine.
-            </p>
-
-            <div class="stat-row">
-                @foreach (var stat in _stats)
-                {
-                    <div class="stat">
-                        <span class="stat-value">@stat.Value</span>
-                        <span class="stat-label">@stat.Label</span>
-                    </div>
-                }
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>One component, two states</h3>
+                    <p>
+                        <code>Initial</code> is where the element starts, <code>Animate</code> is where it is going.
+                        Change <code>Animate</code> in your own state and the element animates there from wherever
+                        it currently is - there is nothing to start or stop.
+                    </p>
+                    <a href="basic">Basics →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">Bmotion</span> Initial=<span class="s">"Bm.To(opacity: 0, y: 20)"</span>
+         Animate=<span class="s">"@@(_open ? Bm.To(opacity: 1, y: 0) : Bm.To(opacity: 0, y: 20))"</span>
+         Transition=<span class="s">"Bm.Spring(bounce: 0.4, duration: 0.6)"</span>&gt;
+    &lt;<span class="k">div</span>&gt;Hello, Bmotion!&lt;/<span class="k">div</span>&gt;
+&lt;/<span class="k">Bmotion</span>&gt;</pre>
             </div>
-
-            <p class="section-note">Everything in the box:</p>
-            <div class="badge-list">
-                @foreach (var feature in _features)
-                {
-                    <span class="badge">@feature</span>
-                }
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Name the states, stagger the children</h3>
+                    <p>
+                        Variants are named states declared once. A container switches its whole subtree to one of
+                        them, and its transition's <code>staggerChildren</code> brings the children in one after
+                        another.
+                    </p>
+                    <a href="variants">Variants →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">Bmotion</span> Variants=<span class="s">"_list"</span> InitialState=<span class="s">"hidden"</span>
+         State=<span class="s">'@@(_open ? "visible" : "hidden")'</span>
+         Transition=<span class="s">"Bm.Tween(staggerChildren: 0.08, delayChildren: 0.2)"</span>&gt;
+    &lt;<span class="k">ul</span>&gt;
+        &lt;<span class="k">Bmotion</span> Variants=<span class="s">"_item"</span>&gt;&lt;<span class="k">li</span>&gt;Item 1&lt;/<span class="k">li</span>&gt;&lt;/<span class="k">Bmotion</span>&gt;
+        &lt;<span class="k">Bmotion</span> Variants=<span class="s">"_item"</span>&gt;&lt;<span class="k">li</span>&gt;Item 2&lt;/<span class="k">li</span>&gt;&lt;/<span class="k">Bmotion</span>&gt;
+    &lt;/<span class="k">ul</span>&gt;
+&lt;/<span class="k">Bmotion</span>&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Animate out before Blazor removes it</h3>
+                    <p>
+                        An element that has left the DOM cannot animate. <code>BmotionAnimatePresence</code> keeps
+                        removed content rendered until its <code>Exit</code> has played - you still just flip a bool.
+                    </p>
+                    <a href="presence">AnimatePresence →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BmotionAnimatePresence</span> IsPresent=<span class="s">"@@_show"</span> Mode=<span class="s">"BmPresenceMode.Wait"</span>&gt;
+    &lt;<span class="k">Bmotion</span> Initial=<span class="s">"Bm.To(opacity: 0)"</span>
+             Animate=<span class="s">"Bm.To(opacity: 1)"</span>
+             Exit=<span class="s">"Bm.To(opacity: 0)"</span>&gt;
+        &lt;<span class="k">div</span>&gt;I animate in and out!&lt;/<span class="k">div</span>&gt;
+    &lt;/<span class="k">Bmotion</span>&gt;
+&lt;/<span class="k">BmotionAnimatePresence</span>&gt;</pre>
             </div>
         </div>
     </section>
 
-    @* ── What is in the box ────────────────────────────────────────────────── *@
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Capabilities</span>
-            <h2>What you can build with it</h2>
-            <p class="section-lead">
-                Every card below links to the demo that proves it, and every one of those demos
-                ships its own source.
-            </p>
-
-            <div class="feature-grid">
-                @foreach (var feature in _capabilities)
-                {
-                    <a class="feature-card" href="@($"/{feature.Href}")">
-                        <span class="feature-card-icon">
-                            <Icon Path="@feature.Icon" />
-                        </span>
-                        <h3>@feature.Title</h3>
-                        <p>@feature.Description</p>
-                    </a>
-                }
-            </div>
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not wrap a JavaScript animation library?</h2>
+        <p class="bb-section-sub">
+            A wrapper drives the DOM from a second engine behind Blazor's back, and every value it needs has to
+            cross the interop boundary. Bmotion keeps the engine in C#, next to the state it animates.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A JavaScript animation library compared with Bmotion">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>JavaScript library + interop</th><th>Bmotion</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Where the maths runs</td><td>In the browser's JavaScript engine</td><td>In C# - springs, tweens, inertia, easing, colours and transforms</td></tr>
+                    <tr><td>What you write</td><td>Element ids, option objects and interop glue</td><td>Razor parameters: <code>Initial</code>, <code>Animate</code>, <code>WhileHover</code>, <code>Exit</code>...</td></tr>
+                    <tr><td>Exit animations</td><td>Hand-timed removal after the animation ends</td><td>Presence components hold the element until its exit has played</td></tr>
+                    <tr><td>Cheap animations</td><td>Up to the library</td><td>Pre-sampled in C# and handed to the Web Animations API - no per-frame interop</td></tr>
+                    <tr><td>Prerendering</td><td>Nothing moves until the script runs</td><td><code>BmPrerenderMode.Animate</code> plays enter animations in CSS from the served HTML</td></tr>
+                    <tr><td>Script to ship</td><td>The library plus its wrapper</td><td>One small module, imported on demand</td></tr>
+                </tbody>
+            </table>
         </div>
     </section>
 
-    @* ── Every demo ────────────────────────────────────────────────────────── *@
-    @* The landing page has no nav panel, so the full index of the docs lives here instead: a
-       reader who arrives at the root should be able to reach any page without first having to
-       find their way into them. It is grouped exactly as the panel groups it, from the same
-       list. *@
-    <section class="homepage-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">Documentation</span>
-            <h2>Explore every demo</h2>
-            <p class="section-lead">
-                Twenty pages, in the order they are meant to be read. Press
-                <span class="kbd">Ctrl K</span> anywhere on the site to jump straight to one.
-            </p>
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bmotion?</h3>
+                <p class="bb-card-desc">Install the package, register one service and animate your first element in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to see it move?</h3>
+                <p class="bb-card-desc">A page of live samples for every feature - hover, press, drag and scroll them, each with its source.</p>
+                <a href="basic" class="btn btn-outline">Open the demos →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it measures a spring on the real engine instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
 
-            <div class="demo-index">
-                @foreach (var group in NavItem.Groups)
-                {
-                    <div class="demo-index-group">
-                        <h3>
-                            <Icon Path="@group.Icon" />
-                            @group.Category
-                        </h3>
-                        @foreach (var item in group.Items)
-                        {
-                            <a class="demo-index-link" href="@item.Url">@item.Title</a>
-                        }
-                    </div>
-                }
-            </div>
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this Framer Motion running through JavaScript interop?</summary>
+                <p>
+                    No. It is inspired by Motion (Framer Motion) and keeps its vocabulary, but the engine - springs,
+                    tweens, inertia, keyframes, easing, colour interpolation, gesture state and transform composition -
+                    is C#. JavaScript is used only as a thin bridge to browser APIs, and it imports itself the first
+                    time an animation runs.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    Blazor WebAssembly is fully supported. On Blazor Server the compositor path works, so enter, exit,
+                    hover, tap and variant animations on transform and opacity play normally; features that need the
+                    per-frame loop - inertia, colour and dimension interpolation - become instant changes. It targets
+                    .NET 8, 9 and 10.
+                </p>
+            </details>
+            <details>
+                <summary>What happens while the page is still prerendered?</summary>
+                <p>
+                    By default an element is served at its <code>Initial</code> state and animates once the runtime is
+                    interactive. <code>BmPrerenderMode.Final</code> serves it at rest, and <code>BmPrerenderMode.Animate</code>
+                    - what this site uses - plays the enter animation in pure CSS straight from the served HTML.
+                </p>
+            </details>
+            <details>
+                <summary>Does it respect prefers-reduced-motion?</summary>
+                <p>
+                    Yes, by the policy you choose at registration. With <code>BmReducedMotionMode.User</code> transforms,
+                    layout and dimension changes snap while opacity and colour still animate - softer than switching
+                    everything off. <code>&lt;BmotionConfig ReduceMotion="true"&gt;</code> forces it for a subtree.
+                </p>
+            </details>
         </div>
     </section>
 
-    @* ── Closing call to action ────────────────────────────────────────────── *@
-    <section class="homepage-section alt-section cta-section">
-        <div class="homepage-section-content">
-            <h2>Start animating</h2>
-            <p class="section-lead">
-                Bmotion is part of bit platform, free and open source. The whole engine lives in
-                the repository, so you can read it, file an issue against it, or send a pull
-                request.
-            </p>
-            <div class="hero-actions">
-                <a class="btn-primary" href="/basic">
-                    Get started
-                    <Icon Path="@Icons.ArrowRight" />
-                </a>
-                <a class="btn-secondary" target="_blank" rel="noopener noreferrer"
-                   href="https://github.com/bitfoundation/bitplatform">
-                    <span class="github-mark" aria-hidden="true"></span>
-                    View on GitHub
-                </a>
-            </div>
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Start animating</h2>
+        <p class="bb-section-sub">One package, one service - and every element on the page can move.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bmotion</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="basic" class="btn btn-secondary bb-btn-lg">Browse the demos</a>
         </div>
     </section>
 </div>
 
 @code {
-    /// <summary>A hero or feature tile: a headline capability, its one-line pitch and where it is shown.</summary>
-    private sealed record Tile(string Title, string Description, string Href, string Icon);
-
-    /// <summary>One of the numbers under the pitch, which is the part of it that can be checked.</summary>
-    private sealed record Stat(string Value, string Label);
-
-    private const string _install = "dotnet add package Bit.Bmotion";
+    /// <summary>A capability: its headline, its one-line pitch, the demo that shows it and that link's label.</summary>
+    private sealed record Feature(string Title, string Description, string Href, string Link);
 
-    private bool _installCopied;
+    /// <summary>A tile in the hero's live sample.</summary>
+    private sealed record Tile(string Title, string Description, string Href);
 
-    private readonly Stat[] _stats =
-    [
-        new(".NET 8+", "Targets .NET 8, 9 and 10"),
-        new("0", "JavaScript dependencies"),
-        new("20", "Worked examples, with source"),
-        new("MIT", "Free and open source"),
-    ];
+    private static readonly string[] Dots = ["bb-dot-primary", "bb-dot-success", "bb-dot-warning"];
 
-    private readonly string[] _features =
+    private static readonly Tile[] _tiles =
     [
-        "Spring physics", "Tween", "Inertia", "Keyframes",
-        "Gestures", "Drag", "Reorder", "AnimatePresence", "Variants", "Split text",
-        "whileInView", "Layout FLIP", "MotionValue", "Scroll timelines",
-        "Sequences", "SVG paths", "OKLab", "Reduced motion", "Minimal JS"
+        new("Springs", "Real physics, not eased curves.", "springs"),
+        new("Gestures", "Hover, tap, focus and drag states.", "gestures"),
+        new("Variants", "Named states that cascade to children.", "variants"),
+        new("Layout", "FLIP transitions between two layouts.", "layout"),
     ];
 
-    private readonly Tile[] _tiles =
+    private static readonly Feature[] _capabilities =
     [
-        new("Springs", "Real physics, not eased curves.", "springs", Icons.Pulse),
-        new("Gestures", "Hover, tap, focus and drag states.", "gestures", Icons.Pointer),
-        new("Variants", "Named states that cascade to children.", "variants", Icons.Layers),
-        new("Layout", "FLIP transitions between two layouts.", "layout", Icons.Layout),
+        new("Springs, tweens and inertia", "Stiffness and damping, or bounce and duration if that is how you think - plus the full easings.net family, per property if you want.", "springs", "Springs"),
+        new("Gestures", "WhileHover, WhileTap and WhileFocus overlay a state on the base animation and revert themselves. Tap is keyboard-accessible out of the box.", "gestures", "Gestures"),
+        new("Variants", "Name your states once, then switch a whole subtree to one of them and stagger the children into place - even from a per-element function.", "variants", "Variants"),
+        new("Keyframes", "Sequences of values with their own offsets, per-segment easing and repeat behaviour, written as plain collection expressions.", "keyframes", "Keyframes"),
+        new("Split text", "Headlines that assemble a character, a word or a line at a time - split in C#, so nothing re-splits on re-render and a screen reader still reads the sentence.", "split-text", "Split text"),
+        new("AnimatePresence", "Exit animations that run before the element actually leaves the DOM - for one element, a keyed list, or content being replaced.", "presence", "AnimatePresence"),
+        new("Drag and reorder", "Axis locks, container constraints, elastic edges, momentum - and lists that reorder themselves under the pointer without re-rendering.", "drag", "Drag"),
+        new("Layout animations", "FLIP the gap between two layouts, with border-radius correction and child counter-scaling handled for you.", "layout", "Layout"),
+        new("Scroll and viewport", "Hand a scroll-linked animation to the browser's native scroll timelines - no handler, no interop - or scrub it yourself as a motion value, or trigger it the first time an element comes into view.", "scroll", "Scroll"),
+        new("Programmatic control", "Animate by selector, interpolate a bare number, build a timeline with overlapping steps, then pause it and change its speed.", "programmatic", "Programmatic"),
+        new("SVG and motion paths", "Send an element along a path, draw a stroke on with pathLength, or morph one shape into another.", "motion-path", "Motion path"),
+        new("Accessibility and diagnostics", "prefers-reduced-motion that softens rather than deletes, keyboard-accessible taps, and an inspector that shows what the engine is doing.", "accessibility", "Accessibility"),
     ];
-
-    private readonly Tile[] _capabilities =
-    [
-        new("Springs, tweens and inertia", "Stiffness and damping, or bounce and duration if that is how you think - plus the full easings.net family, per property if you want.", "springs", Icons.Pulse),
-        new("Gestures", "WhileHover, WhileTap and WhileFocus overlay a state on the base animation and revert themselves. Tap is keyboard-accessible out of the box.", "gestures", Icons.Pointer),
-        new("Variants", "Name your states once, then switch a whole subtree to one of them and stagger the children into place - even from a per-element function.", "variants", Icons.Layers),
-        new("Keyframes", "Sequences of values with their own offsets, per-segment easing and repeat behaviour, written as plain collection expressions.", "keyframes", Icons.Keyframe),
-        new("Split text", "Headlines that assemble a character, a word or a line at a time - split in C#, so nothing re-splits on re-render and a screen reader still reads the sentence.", "split-text", Icons.Text),
-        new("AnimatePresence", "Exit animations that run before the element actually leaves the DOM - for one element, a keyed list, or content being replaced.", "presence", Icons.Presence),
-        new("Drag and reorder", "Axis locks, container constraints, elastic edges, momentum - and lists that reorder themselves under the pointer without re-rendering.", "drag", Icons.Drag),
-        new("Layout animations", "FLIP the gap between two layouts, with border-radius correction and child counter-scaling handled for you.", "layout", Icons.Layout),
-        new("Scroll and viewport", "Hand a scroll-linked animation to the browser's native scroll timelines - no handler, no interop - or scrub it yourself as a MotionValue, or trigger it the first time an element comes into view.", "scroll", Icons.Scroll),
-        new("Programmatic control", "Animate by selector, interpolate a bare number, build a timeline with overlapping steps, then pause it and change its speed.", "programmatic", Icons.Controls),
-        new("SVG and motion paths", "Send an element along a path, draw a stroke on with pathLength, or morph one shape into another.", "motion-path", Icons.Path),
-        new("Accessibility and diagnostics", "prefers-reduced-motion that softens rather than deletes, keyboard-accessible taps, and an inspector that shows what the engine is doing.", "accessibility", Icons.Accessibility),
-    ];
-
-    private async Task CopyInstallAsync()
-    {
-        try
-        {
-            _installCopied = await JS.InvokeAsync<bool>("bmCopyToClipboard", _install);
-        }
-        catch
-        {
-            // The command is printed next to the button, so a clipboard the browser refuses to
-            // hand over costs the reader a selection rather than the information.
-            _installCopied = false;
-        }
-    }
-
-    private const string _quickStart = """
-        @using Bit.Bmotion
-
-        <style>
-            .demo-card {
-                background: #F5F5F5; border: 1px solid #E0E0E0;
-                border-radius: 6px; padding: 2rem; min-height: 160px;
-                display: flex; align-items: center; justify-content: center;
-            }
-            .box {
-                width: 80px; height: 80px; border-radius: 10px; cursor: pointer;
-                background: linear-gradient(135deg, #1276C6, #FD7F36);
-            }
-        </style>
-
-        <div class="demo-card">
-            <Bmotion Initial="Bm.To(scale: 0, opacity: 0)"
-                     Animate="Bm.To(scale: 1, opacity: 1)"
-                     WhileHover="Bm.To(scale: 1.15, rotate: 5)"
-                     WhileTap="Bm.To(scale: 0.9)"
-                     Transition="Bm.Spring(stiffness: 300, damping: 20)">
-                <div class="box" />
-            </Bmotion>
-        </div>
-        """;
 }
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Keyframes.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Keyframes.razor
index 4cf897f8d88..fcd529ba2e2 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Keyframes.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Keyframes.razor
@@ -1,19 +1,20 @@
 @page "/keyframes"
 
-<PageTitle>Keyframes - Bit.Bmotion</PageTitle>
-
-<h1>Keyframes</h1>
-
-<p class="page-intro">
-    A property does not have to travel from one value to one other value. Hand it a
-    <strong>sequence</strong> and it walks through every entry in turn - the same collection
-    expression syntax C# already gives you, no separate keyframe type to learn. The transition
-    then controls how that walk is timed: <code>times</code> for where each stop falls,
-    <code>eases</code> for how each leg is curved, <code>repeat</code> for what happens at the end.
-</p>
+<PageTitle>Keyframes · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Keyframes</h1>
+    <p class="bb-subtitle">
+        A property does not have to travel from one value to one other value. Hand it a
+        <strong>sequence</strong> and it walks through every entry in turn - the same collection
+        expression syntax C# already gives you, no separate keyframe type to learn. The transition
+        then controls how that walk is timed: <code>times</code> for where each stop falls,
+        <code>eases</code> for how each leg is curved, <code>repeat</code> for what happens at the end.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Keyframe sequences</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Keyframe sequences</h3>
     <p>
         Any animatable property accepts one: <code>Bm.To(scale: [1, 1.3, 0.8, 1])</code>. By
         default the stops are spaced evenly over the duration; <code>times</code> on the transition
@@ -40,10 +41,10 @@
     </div>
 
     <CodeSnippet Code="@_keyframesCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Color keyframes</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Color keyframes</h3>
     <p>
         Colors interpolate as colors, not as strings, so a palette cycle is just another sequence.
         Repeating one needs the first and last entries to match - otherwise every loop jumps back
@@ -59,10 +60,10 @@
     </div>
 
     <CodeSnippet Code="@_colorKeyframesCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Per-segment easing</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Per-segment easing</h3>
     <p>
         One curve across a five-stop sequence rarely reads right - a ball that falls and lands
         should accelerate on the way down and decelerate on the way up, not ease symmetrically
@@ -82,10 +83,10 @@
     </div>
 
     <CodeSnippet Code="@_easesCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Continuing from the current value</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Continuing from the current value</h3>
     <p>
         A sequence normally snaps to its first entry before it starts - fine on mount, jarring when
         the element is already mid-flight somewhere else. <strong>Bm.Current</strong> is a wildcard
@@ -116,26 +117,12 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _pulse = !_pulse)">@(_pulse ? "Send back" : "Run")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _pulse = !_pulse)">@(_pulse ? "Send back" : "Run")</button>
     </div>
 
     <CodeSnippet Code="@_currentCode" />
-</div>
-
-<style>
-    .keyframe-bar { height: 1.875rem; border-radius: 4px; }
-
-    .color-orb { width: 7.5rem; height: 7.5rem; border-radius: 50%; background-image: none; }
-
-    /* The ball falls to the floor of its stage, so the stage is anchored at the bottom rather
-       than centring its content the way an ordinary card does. */
-    .ball-stage { height: 13.75rem; align-items: flex-end; padding-bottom: 2.5rem; }
-
-    .ball { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
-
-    .current-track { position: relative; width: 100%; height: 3.125rem; }
-</style>
+</section>
 
 @code {
     private bool _pulse;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/LayoutPage.razor b/src/Utilities/Bmotion/Demo/Client/Pages/LayoutPage.razor
index 4b3071bdf06..008aa0ceb8a 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/LayoutPage.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/LayoutPage.razor
@@ -1,20 +1,21 @@
 @page "/layout"
 
-<PageTitle>Layout animations - Bit.Bmotion</PageTitle>
-
-<h1>Layout animations</h1>
-
-<p class="page-intro">
-    Layout properties are the ones you cannot animate cheaply: change <code>justify-content</code>
-    or a width and the browser reflows, it does not tween. FLIP sidesteps that - measure where the
-    element was (<strong>F</strong>irst), let the real layout change happen (<strong>L</strong>ast),
-    <strong>I</strong>nvert the difference with a transform, then <strong>P</strong>lay it back to
-    zero. The result animates on the compositor while the DOM is already in its final state.
-    <code>Layout="true"</code> is the whole opt-in; Bmotion does the measuring.
-</p>
+<PageTitle>Layout animations · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Layout animations</h1>
+    <p class="bb-subtitle">
+        Layout properties are the ones you cannot animate cheaply: change <code>justify-content</code>
+        or a width and the browser reflows, it does not tween. FLIP sidesteps that - measure where the
+        element was (<strong>F</strong>irst), let the real layout change happen (<strong>L</strong>ast),
+        <strong>I</strong>nvert the difference with a transform, then <strong>P</strong>lay it back to
+        zero. The result animates on the compositor while the DOM is already in its final state.
+        <code>Layout="true"</code> is the whole opt-in; Bmotion does the measuring.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Animating a reflow</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Animating a reflow</h3>
     <p>
         Add <strong>Layout="true"</strong> to any Bmotion element and every re-render that moves or
         resizes it plays a FLIP. Nothing below animates a property directly: the buttons change the
@@ -37,16 +38,16 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="Shuffle">Shuffle</button>
-        <button class="btn-bm" @onclick="ToggleLayout">Justify: @_justifyContent</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="Shuffle">Shuffle</button>
+        <button class="btn btn-secondary" @onclick="ToggleLayout">Justify: @_justifyContent</button>
     </div>
 
     <CodeSnippet Code="@_layoutCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Shared elements</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Shared elements</h3>
     <p>
         <strong>LayoutId</strong> connects elements <em>across</em> mounts. When one unmounts and
         another mounts carrying the same id, the new one FLIPs from where the old one was - so a
@@ -57,13 +58,13 @@
     </p>
 
     <div class="demo-row">
-        <div class="demo-card tab-stage">
-            <div class="tab-strip" role="tablist">
+        <div class="demo-card layout-tab-stage">
+            <div class="layout-tab-strip" role="tablist">
                 @foreach (var tab in _tabs)
                 {
                     var t = tab;
-                    <div class="tab @(t == _activeTab ? "active" : null)"
-                         role="tab" tabindex="0" aria-selected="@(t == _activeTab)"
+                    <div class="layout-tab @(t == _activeTab ? "active" : null)"
+                         role="tab" tabindex="0" aria-selected="@(t == _activeTab ? "true" : "false")"
                          @onclick="@(() => _activeTab = t)"
                          @onkeydown="@(e => { if (e.Key is "Enter" or " ") _activeTab = t; })">
                         @t
@@ -72,7 +73,7 @@
                             <Bmotion LayoutId="tab-underline"
                                     Layout="BmLayout.Position"
                                     Transition="Bm.Tween(0.3, BmEase.InOut)">
-                                <div class="tab-underline" />
+                                <div class="layout-tab-underline" />
                             </Bmotion>
                         }
                     </div>
@@ -82,10 +83,10 @@
     </div>
 
     <CodeSnippet Code="@_layoutIdCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Size correction</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Size correction</h3>
     <p>
         Animating a box's size by scaling it is fast but wrong: the text inside stretches and the
         corners go oval. With <strong>Layout="true"</strong> Bmotion still scales - that is what
@@ -105,15 +106,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _big = !_big)">@(_big ? "Shrink" : "Grow")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _big = !_big)">@(_big ? "Shrink" : "Grow")</button>
     </div>
 
     <CodeSnippet Code="@_sizeCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Anchoring and measurement</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Anchoring and measurement</h3>
     <p>
         A FLIP is a comparison between two measurements, and four parameters decide what is being
         compared. <strong>LayoutAnchor</strong> picks the point that appears to stay still: the
@@ -144,8 +145,8 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _anchored = !_anchored)">@(_anchored ? "Shrink" : "Grow")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _anchored = !_anchored)">@(_anchored ? "Shrink" : "Grow")</button>
         <span class="demo-label">layout animations completed: @_layoutCompletions</span>
     </div>
 
@@ -160,101 +161,7 @@
     </p>
 
     <CodeSnippet Code="@_projectionCode" />
-</div>
-
-<style>
-    /* Fixed footprint so the two anchor stages are directly comparable: the same size change
-       reads differently only because of where it is projected from. */
-    .anchor-box {
-        width: 3.5rem;
-        height: 3.5rem;
-        border-radius: 10px;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    .anchor-box.big { width: 7rem; height: 7rem; }
-</style>
-
-<style>
-    .layout-stage { align-items: stretch; }
-
-    .layout-strip { display: flex; gap: .75rem; flex-wrap: wrap; width: 100%; }
-
-    /* 20px at 700 is deliberate rather than decorative: at that size and weight the label counts
-       as large text, which is the bar the lighter tones below can actually clear against white. */
-    .layout-tile {
-        width: 3.75rem;
-        height: 3.75rem;
-        display: flex;
-        color: #fff;
-        font-weight: 700;
-        font-size: 1.25rem;
-        border-radius: 8px;
-        align-items: center;
-        justify-content: center;
-    }
-
-    /* Five distinguishable tiles, fixed rather than derived from the theme's accents.
-
-       They were derived once, and it did not survive the dark theme: the accent that is dark
-       enough for a white label in the light theme is the light end of the ramp in the dark one,
-       where the same label stops reading. What these tiles are demonstrating is FLIP, not colour,
-       so they are pinned to five shades that each clear 4.5:1 against white in both themes and
-       stay clearly apart from one another. */
-    .tone-0 { background: #1276C6; }
-    .tone-1 { background: #124265; }
-    .tone-2 { background: #C25520; }
-    .tone-3 { background: #7E3714; }
-    .tone-4 { background: #4D4D4D; }
-
-    .tab-stage { align-items: flex-start; }
-
-    .tab-strip { display: flex; gap: 1.5rem; }
-
-    /* position: relative is what the shared underline FLIPs against - it is absolutely placed
-       inside whichever tab is active. */
-    .tab {
-        cursor: pointer;
-        font-weight: 600;
-        position: relative;
-        padding-bottom: 6px;
-        color: var(--bm-muted);
-    }
-
-    .tab.active { color: var(--bm-text); }
-
-    .tab:focus-visible { outline: 2px solid var(--bm-primary); outline-offset: 4px; }
-
-    .tab-underline {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 3px;
-        position: absolute;
-        border-radius: 2px;
-        background: linear-gradient(90deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    .resize-stage { min-height: 13.75rem; }
-
-    .resize-card {
-        gap: .6rem;
-        width: 7.5rem;
-        height: 7.5rem;
-        display: flex;
-        border-radius: 20px;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    .resize-card.big { width: 16.25rem; height: 11.25rem; }
-
-    .resize-label { font-weight: 800; font-size: 1.3rem; color: #fff; }
-
-    .resize-dot { width: 2.125rem; height: 2.125rem; border-radius: 50%; background: rgba(255, 255, 255, .85); }
-</style>
+</section>
 
 @code {
     private readonly string[] _tabs = ["Home", "Projects", "About", "Contact"];
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/McpServerPage.razor b/src/Utilities/Bmotion/Demo/Client/Pages/McpServerPage.razor
index 93923e472a4..36faedb64f2 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/McpServerPage.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/McpServerPage.razor
@@ -10,23 +10,24 @@
    The tool, prompt and resource tables are fetched rather than written out, for the same reason:
    they come from GetMcpCatalog, which reflects over the attributes that declare them. *@
 
-<PageTitle>MCP server - Bit.Bmotion</PageTitle>
-
-<h1>MCP server</h1>
-
-<p class="page-intro">
-    This demo ships a <strong>Model Context Protocol</strong> server, so an AI agent can write
-    Bmotion code from what the library <em>actually</em> is rather than from what it remembers.
-    Half of its tools answer from this build's own text - the guide, the XML documentation compiled
-    into the assembly, the source of every page you have been reading. The other half answer by
-    <strong>running the real animation engine off-screen</strong> and reporting what it did. That
-    second half is the reason it exists: no amount of documentation can tell you that
-    <code>Bm.Spring(stiffness: 400, damping: 2)</code> wobbles for five seconds, or that animating
-    <code>height</code> stops moving the moment your app is served over Blazor Server.
-</p>
-
-<div class="demo-section">
-    <h2>Why an animation library needs one</h2>
+<PageTitle>MCP server · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
+        This demo ships a <strong>Model Context Protocol</strong> server, so an AI agent can write
+        Bmotion code from what the library <em>actually</em> is rather than from what it remembers.
+        Half of its tools answer from this build's own text - the guide, the XML documentation compiled
+        into the assembly, the source of every page you have been reading. The other half answer by
+        <strong>running the real animation engine off-screen</strong> and reporting what it did. That
+        second half is the reason it exists: no amount of documentation can tell you that
+        <code>Bm.Spring(stiffness: 400, damping: 2)</code> wobbles for five seconds, or that animating
+        <code>height</code> stops moving the moment your app is served over Blazor Server.
+    </p>
+</div>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Why an animation library needs one</h3>
     <p>
         Almost every way of getting an animation wrong is silent. There is no compiler error, no
         exception, and nothing in the browser console - the page simply does not move, or moves
@@ -34,25 +35,25 @@
         directly:
     </p>
 
-    <div class="mcp-why">
+    <div class="bb-grid mcp-why">
         @foreach (var (index, problem) in _problems.Index())
         {
             <Bmotion Initial="Bm.To(opacity: 0, y: 18)"
                      WhileInView="Bm.To(opacity: 1, y: 0)"
                      Once="true"
                      Transition="@Bm.Spring(bounce: 0.2, duration: 0.5).WithDelay(index * 0.08)">
-                <div class="mcp-why-card">
-                    <span class="mcp-why-symptom">@problem.Symptom</span>
-                    <p>@problem.Cause</p>
-                    <code>@problem.Tool</code>
+                <div class="bb-card mcp-why-card">
+                    <strong class="mcp-why-symptom">@problem.Symptom</strong>
+                    <p class="bb-card-desc">@problem.Cause</p>
+                    <code>@WordBreaks(problem.Tool)</code>
                 </div>
             </Bmotion>
         }
     </div>
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Connect your agent</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect your agent</h3>
     <p>
         The server speaks MCP over HTTP at <code>/mcp</code>. Run this demo, then point any MCP
         client at it. The same methods are also plain <code>GET</code> endpoints under
@@ -67,7 +68,7 @@
 
        aria-selected is written out as a word rather than bound to the bool: a false bool renders
        as no attribute at all, and an unselected tab has to say so. *@
-    <div class="mcp-tabs" role="tablist" aria-label="MCP client">
+    <div class="bb-tabs mcp-tabs" role="tablist" aria-label="MCP client">
         @foreach (var client in _clients)
         {
             var isSelected = _client == client.Name;
@@ -86,19 +87,20 @@
     </div>
 
     @* Every panel is rendered, and the ones that are not selected are hidden: aria-controls has to
-       point at an element that exists, on the tabs that are not the current one too. *@
+       point at an element that exists, on the tabs that are not the current one too. The config is
+       shown rather than folded away - it is the one thing on the page a reader came to copy. *@
     @foreach (var client in _clients)
     {
         <div role="tabpanel" id="@PanelId(client.Name)" aria-labelledby="@TabId(client.Name)"
              hidden="@(_client != client.Name)">
             <p class="mcp-tab-note">@client.Note</p>
-            <CodeSnippet Code="@client.Config(McpUrl)" />
+            <pre class="bb-code">@client.Config(McpUrl)</pre>
         </div>
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>The transition lab</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The transition lab</h3>
     <p>
         <code>SimulateBmotionTransition</code> plays a transition on the real engine with no browser
         involved, and reports what the motion does. Nothing in a transition states its own settle
@@ -111,47 +113,55 @@
         measured, handed back as keyframes.
     </p>
 
-    <div class="mcp-lab">
-        <div class="mcp-lab-controls">
-            <label for="mcp-spec">Transition</label>
-            <input id="mcp-spec" type="text" value="@_spec" @onchange="OnSpecChanged" disabled="@_busy" />
+    <div class="bb-demo mcp-lab">
+        <div class="bb-demo-bar"><span class="bb-demo-label">SimulateBmotionTransition</span></div>
 
-            <div class="mcp-presets">
-                @foreach (var preset in _presets)
-                {
-                    <button type="button" class="mcp-chip" disabled="@_busy"
-                            @onclick="@(() => RunSimulationAsync(preset))">
-                        @preset
+        <div class="mcp-lab-body">
+            <div class="mcp-form">
+                <div class="bb-field mcp-field">
+                    <label for="mcp-spec">Transition</label>
+                    <input id="mcp-spec" type="text" class="bb-mono" value="@_spec" @onchange="OnSpecChanged" disabled="@_busy" />
+                </div>
+
+                <div class="mcp-presets">
+                    @foreach (var preset in _presets)
+                    {
+                        <button type="button" class="mcp-chip" disabled="@_busy"
+                                @onclick="@(() => RunSimulationAsync(preset))">
+                            @preset
+                        </button>
+                    }
+                </div>
+
+                <div class="bb-toolbar">
+                    <button type="button" class="btn btn-primary" @onclick="@(() => RunSimulationAsync(_spec))" disabled="@_busy">
+                        @(_busy ? "Measuring..." : "Measure it")
                     </button>
-                }
+                </div>
             </div>
 
-            <button class="btn-bm" @onclick="@(() => RunSimulationAsync(_spec))" disabled="@_busy">
-                @(_busy ? "Measuring..." : "Measure it")
-            </button>
-        </div>
-
-        <div class="mcp-lab-stage">
-            @if (_replayOf is { Samples.Length: > 1 })
-            {
-                @* @key on the replay counter: changing it re-mounts the element, which is what makes
-                   the keyframe animation play again rather than sit at its resting value. *@
-                <Bmotion Animate="Bm.To(x: _replayFrames)"
-                         Transition="Bm.Tween(_replayOf.SettleSeconds, BmEase.Linear)"
-                         @key="_replay">
-                    <div class="box box-sm" />
-                </Bmotion>
-            }
-            else
-            {
-                <div class="box box-sm mcp-box-idle" />
-            }
+            <div class="bb-stage mcp-lab-stage">
+                @if (_replayOf is { Samples.Length: > 1 })
+                {
+                    @* @key on the replay counter: changing it re-mounts the element, which is what makes
+                       the keyframe animation play again rather than sit at its resting value. *@
+                    <Bmotion Animate="Bm.To(x: _replayFrames)"
+                             Transition="Bm.Tween(_replayOf.SettleSeconds, BmEase.Linear)"
+                             @key="_replay">
+                        <div class="box box-sm" />
+                    </Bmotion>
+                }
+                else
+                {
+                    <div class="box box-sm mcp-box-idle" />
+                }
+            </div>
         </div>
     </div>
 
     @if (_error is not null)
     {
-        <p class="mcp-error">@_error</p>
+        <p class="bb-note bb-note-danger mcp-error">@_error</p>
     }
 
     @* One block per transition asked about, in the order asked, and one for every transition asked
@@ -164,44 +174,44 @@
         <div class="mcp-result">
             @if (_simulations.Length > 1)
             {
-                <h3 class="mcp-result-title">
+                <h4 class="mcp-result-title">
                     @simulation.Transition
                     @if (ReferenceEquals(simulation, _replayOf))
                     {
-                        <span class="mcp-result-tag">replaying</span>
+                        <span class="bb-badge">replaying</span>
                     }
-                </h3>
+                </h4>
             }
 
             @if (simulation.Error is not null)
             {
                 @* The server read the spec and could not make sense of it, and said why - which is a
                    better message than anything this page could compose about it. *@
-                <p class="mcp-error">@simulation.Error</p>
+                <p class="bb-note bb-note-danger mcp-error">@simulation.Error</p>
             }
             else
             {
-                <div class="mcp-metrics">
-                    <div><span>Settles in</span><strong>@simulation.SettleSeconds.ToString("0.00")s</strong></div>
-                    <div><span>Overshoot</span><strong>@simulation.OvershootPercent.ToString("0.#")%</strong></div>
-                    <div><span>Crossings</span><strong>@simulation.TargetCrossings</strong></div>
-                    <div><span>90% at</span><strong>@simulation.TimeTo90Percent.ToString("0.00")s</strong></div>
+                <div class="bb-stats mcp-metrics">
+                    <div class="bb-stat"><span class="bb-stat-label">Settles in</span><strong class="bb-stat-value">@simulation.SettleSeconds.ToString("0.00")s</strong></div>
+                    <div class="bb-stat"><span class="bb-stat-label">Overshoot</span><strong class="bb-stat-value">@simulation.OvershootPercent.ToString("0.#")%</strong></div>
+                    <div class="bb-stat"><span class="bb-stat-label">Crossings</span><strong class="bb-stat-value">@simulation.TargetCrossings</strong></div>
+                    <div class="bb-stat"><span class="bb-stat-label">90% at</span><strong class="bb-stat-value">@simulation.TimeTo90Percent.ToString("0.00")s</strong></div>
                 </div>
 
-                <pre class="mcp-sparkline">@simulation.Sparkline</pre>
+                <pre class="bb-code mcp-sparkline">@simulation.Sparkline</pre>
                 <p class="mcp-reading">@simulation.Reading</p>
 
                 @foreach (var warning in simulation.Warnings ?? [])
                 {
-                    <p class="mcp-warning">@warning</p>
+                    <p class="bb-note bb-note-warn mcp-warning">@warning</p>
                 }
             }
         </div>
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Will it work on Blazor Server?</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Will it work on Blazor Server?</h3>
     <p>
         Only animations the browser compositor can own play on Blazor Server; everything else needs
         the C# per-frame loop, which does not exist there, and becomes an instant jump.
@@ -209,29 +219,35 @@
         the real engine and watches which path the engine takes.
     </p>
 
-    <div class="mcp-check">
-        <div class="mcp-check-row">
-            <label for="mcp-props">Properties</label>
-            <input id="mcp-props" type="text" value="@_properties" @onchange="OnPropertiesChanged" disabled="@_checking" />
-        </div>
-        <div class="mcp-check-row">
-            <label for="mcp-trans">Transition</label>
-            <input id="mcp-trans" type="text" value="@_checkSpec" @onchange="OnCheckSpecChanged" disabled="@_checking" />
-        </div>
+    <div class="bb-demo mcp-check">
+        <div class="bb-demo-bar"><span class="bb-demo-label">AnalyzeBmotionAnimation</span></div>
 
-        <div class="mcp-presets">
-            @foreach (var example in _checkExamples)
-            {
-                <button type="button" class="mcp-chip" disabled="@_checking"
-                        @onclick="@(() => RunCheckAsync(example.Properties, example.Transition))">
-                    @example.Properties
+        <div class="mcp-form">
+            <div class="bb-field mcp-field">
+                <label for="mcp-props">Properties</label>
+                <input id="mcp-props" type="text" class="bb-mono" value="@_properties" @onchange="OnPropertiesChanged" disabled="@_checking" />
+            </div>
+            <div class="bb-field mcp-field">
+                <label for="mcp-trans">Transition</label>
+                <input id="mcp-trans" type="text" class="bb-mono" value="@_checkSpec" @onchange="OnCheckSpecChanged" disabled="@_checking" />
+            </div>
+
+            <div class="mcp-presets">
+                @foreach (var example in _checkExamples)
+                {
+                    <button type="button" class="mcp-chip" disabled="@_checking"
+                            @onclick="@(() => RunCheckAsync(example.Properties, example.Transition))">
+                        @example.Properties
+                    </button>
+                }
+            </div>
+
+            <div class="bb-toolbar">
+                <button type="button" class="btn btn-primary" @onclick="@(() => RunCheckAsync(_properties, _checkSpec))" disabled="@_checking">
+                    @(_checking ? "Asking the engine..." : "Ask the engine")
                 </button>
-            }
+            </div>
         </div>
-
-        <button class="btn-bm" @onclick="@(() => RunCheckAsync(_properties, _checkSpec))" disabled="@_checking">
-            @(_checking ? "Asking the engine..." : "Ask the engine")
-        </button>
     </div>
 
     @* An unreadable transition comes back as data rather than as a failed call, so the verdict is
@@ -239,24 +255,24 @@
        never analysed would be a claim about the animation, and a wrong one. *@
     @if (_checkError is not null)
     {
-        <p class="mcp-error">@_checkError</p>
+        <p class="bb-note bb-note-danger mcp-error">@_checkError</p>
     }
     else if (_playback?.Error is not null)
     {
-        <p class="mcp-error">@_playback.Error</p>
+        <p class="bb-note bb-note-danger mcp-error">@_playback.Error</p>
     }
     else if (_playback is not null)
     {
-        <div class="mcp-verdict @(_playback.WorksOnBlazorServer ? "ok" : "warn")">
+        <div class="bb-note @(_playback.WorksOnBlazorServer ? "bb-note-success" : "bb-note-warn") mcp-verdict">
             <strong>@(_playback.WorksOnBlazorServer ? "Plays on Blazor Server" : "Snaps on Blazor Server")</strong>
-            <span>@_playback.Path</span>
+            <span class="bb-mono">@_playback.Path</span>
         </div>
 
         <p class="mcp-reading">@_playback.Reason</p>
 
         @if (_playback.HowToOffload is { Length: > 0 })
         {
-            <ul class="mcp-fixes">
+            <ul class="bb-detail-list mcp-fixes">
                 @foreach (var fix in _playback.HowToOffload)
                 {
                     <li>@fix</li>
@@ -264,10 +280,10 @@
             </ul>
         }
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Review your markup</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Review your markup</h3>
     <p>
         <code>ReviewBmotionCode</code> is the pass that closes the loop after an agent writes code.
         It looks for the mistakes that compile cleanly and then do nothing - an <code>Exit</code>
@@ -275,24 +291,24 @@
         spring whose duration the engine ignores. The sample below contains several on purpose.
     </p>
 
-    <textarea class="mcp-code" rows="9" spellcheck="false"
+    <textarea class="bb-mono mcp-code" rows="9" spellcheck="false" aria-label="Markup to review"
               value="@_review" @onchange="OnReviewChanged" disabled="@_reviewing"></textarea>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="RunReviewAsync" disabled="@_reviewing">
+    <div class="bb-toolbar mcp-review-actions">
+        <button type="button" class="btn btn-primary" @onclick="RunReviewAsync" disabled="@_reviewing">
             @(_reviewing ? "Reviewing..." : "Review it")
         </button>
     </div>
 
     @if (_reviewError is not null)
     {
-        <p class="mcp-error">@_reviewError</p>
+        <p class="bb-note bb-note-danger mcp-error">@_reviewError</p>
     }
     else if (_findings is not null)
     {
         @if (_findings.Findings is null or { Length: 0 })
         {
-            <p class="mcp-reading">Nothing to report - all @(_findings.RulesApplied?.Length ?? 0) rules passed.</p>
+            <p class="bb-note bb-note-success mcp-reading">Nothing to report - all @(_findings.RulesApplied?.Length ?? 0) rules passed.</p>
         }
         else
         {
@@ -303,7 +319,7 @@
                              Animate="Bm.To(opacity: 1, x: 0)"
                              Transition="Bm.Tween(0.25)">
                         <li class="mcp-finding @finding.Severity?.ToLowerInvariant()">
-                            <span class="mcp-severity">@finding.Severity</span>
+                            <span class="bb-badge @SeverityBadge(finding.Severity)">@finding.Severity</span>
                             <span class="mcp-rule">@finding.Rule</span>
                             <span class="mcp-line">line @finding.Line</span>
                             <p>@finding.Message</p>
@@ -314,10 +330,10 @@
             </ul>
         }
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>One search across everything</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> One search across everything</h3>
     <p>
         An agent rarely knows which corpus holds the answer. <code>SearchBmotion</code> covers the
         guide, every public member, the animatable properties, the easing presets, the recipes, the
@@ -325,17 +341,17 @@
         that returns it in full.
     </p>
 
-    <div class="mcp-search">
+    <div class="bb-toolbar mcp-search">
         <input type="search" value="@_query" @onchange="OnQueryChanged" disabled="@_searching"
                placeholder="make a list appear one item at a time" aria-label="Search Bmotion" />
-        <button class="btn-bm" @onclick="RunSearchAsync" disabled="@_searching">
+        <button type="button" class="btn btn-primary" @onclick="RunSearchAsync" disabled="@_searching">
             @(_searching ? "Searching..." : "Search")
         </button>
     </div>
 
     @if (_searchError is not null)
     {
-        <p class="mcp-error">@_searchError</p>
+        <p class="bb-note bb-note-danger mcp-error">@_searchError</p>
     }
     else if (_hits is { Length: > 0 })
     {
@@ -343,7 +359,7 @@
             @foreach (var hit in _hits)
             {
                 <li>
-                    <span class="mcp-hit-kind">@hit.Kind</span>
+                    <span class="bb-badge">@hit.Kind</span>
                     <span class="mcp-hit-title">@hit.Title</span>
                     <code>@hit.Tool</code>
                 </li>
@@ -352,16 +368,16 @@
     }
     else if (_hits is not null)
     {
-        <p class="mcp-reading">Nothing matched that.</p>
+        <p class="bb-empty mcp-reading">Nothing matched that.</p>
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Tools</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
     @if (_catalog is null)
     {
-        <p class="mcp-reading">Loading the catalog...</p>
+        <p class="mcp-reading"><span class="bb-spinner"></span> Loading the catalog...</p>
     }
     else
     {
@@ -370,8 +386,8 @@
             them - so this table cannot fall out of step with the server, and neither can this count.
         </p>
 
-        <div class="mcp-table-wrap">
-            <table class="mcp-table">
+        <div class="bb-scroll">
+            <table class="bb-table mcp-table">
                 <thead>
                     <tr><th>Tool</th><th>Parameters</th><th>What it answers</th></tr>
                 </thead>
@@ -379,11 +395,11 @@
                     @foreach (var tool in _catalog.Tools)
                     {
                         <tr>
-                            <td><code>@tool.Name</code></td>
+                            <td class="bb-table-key"><code>@tool.Name</code></td>
                             <td class="mcp-params">
                                 @if (tool.Parameters.Length == 0)
                                 {
-                                    <span class="mcp-none">none</span>
+                                    <span class="bb-soft">none</span>
                                 }
                                 else
                                 {
@@ -400,10 +416,10 @@
             </table>
         </div>
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Prompts</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Prompts</h3>
     <p>
         Prompts are the workflows: the order to call the tools in for a whole task. They exist
         because the failure mode of an agent holding eighteen tools is not ignorance - it is calling
@@ -412,13 +428,13 @@
 
     @if (_catalog is not null)
     {
-        <div class="mcp-cards">
+        <div class="bb-grid mcp-cards">
             @foreach (var prompt in _catalog.Prompts)
             {
                 <Bmotion WhileHover="Bm.To(y: -3, scale: 1.01)" Transition="Bm.Spring(stiffness: 400, damping: 28)">
-                    <div class="mcp-card">
+                    <div class="bb-card mcp-card">
                         <code>@prompt.Name</code>
-                        <p>@prompt.Description</p>
+                        <p class="bb-card-desc">@prompt.Description</p>
                         @if (prompt.Parameters.Length > 0)
                         {
                             <span class="mcp-card-params">@string.Join(" · ", prompt.Parameters)</span>
@@ -428,10 +444,10 @@
             }
         </div>
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Resources</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Resources</h3>
     <p>
         The same knowledge as URIs, for clients that attach documentation to a conversation up front
         or let a person browse and pin it. They read the same catalogs the tools do, so neither can
@@ -440,23 +456,33 @@
 
     @if (_catalog is not null)
     {
-        <ul class="mcp-resources">
-            @foreach (var resource in _catalog.Resources)
-            {
-                <li><code>@resource.Name</code><span>@resource.Description</span></li>
-            }
-        </ul>
+        <div class="bb-scroll">
+            <table class="bb-table mcp-resources">
+                <thead>
+                    <tr><th>Resource</th><th>What it holds</th></tr>
+                </thead>
+                <tbody>
+                    @foreach (var resource in _catalog.Resources)
+                    {
+                        <tr>
+                            <td class="bb-table-key"><code>@resource.Name</code></td>
+                            <td>@resource.Description</td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
     }
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>How it stays true</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> How it stays true</h3>
     <p>
         Documentation that is written down separately drifts, and an agent cannot tell a stale answer
         from a fresh one. So nothing here is written down twice:
     </p>
 
-    <ul class="mcp-principles">
+    <ul class="bb-detail-list">
         <li>
             <strong>The API reference is reflected</strong> out of the shipped assembly and paired
             with the XML documentation compiled into it. A new component parameter appears the moment
@@ -484,8 +510,8 @@
         </li>
     </ul>
 
-    <CodeSnippet Code="@_architectureCode" />
-</div>
+    <CodeSnippet Code="@_architectureCode" Language="C#" />
+</section>
 
 @code {
     private sealed record Problem(string Symptom, string Cause, string Tool);
@@ -865,6 +891,22 @@
         }
     }
 
+    /// <summary>
+    /// A tool name with a line-break opportunity before each word of it, so one too long for a narrow
+    /// tile wraps between "SimulateBmotion" and "Transition" rather than letter by letter.
+    /// </summary>
+    private static MarkupString WordBreaks(string name)
+        => new(string.Join("<wbr>", System.Text.RegularExpressions.Regex.Split(name, "(?<=[a-z])(?=[A-Z])")
+                                                                    .Select(System.Net.WebUtility.HtmlEncode)));
+
+    /// <summary>The kit badge tint for a finding's severity: an error, a warning, or a suggestion.</summary>
+    private static string? SeverityBadge(string? severity) => severity?.ToLowerInvariant() switch
+    {
+        "error" => "bb-badge-danger",
+        "warning" => "bb-badge-warn",
+        _ => null,
+    };
+
     private static string Shorten(string description)
     {
         // The tool descriptions are written for an agent deciding whether to call the tool, so they
@@ -874,289 +916,3 @@
         return stop > 0 ? description[..(stop + 1)] : description;
     }
 }
-
-<style>
-    .mcp-why {
-        display: grid;
-        gap: 1rem;
-        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
-        margin-block: 1.25rem;
-    }
-
-    .mcp-why-card {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: .5rem;
-        padding: 1rem;
-        border: 1px solid var(--bit-clr-brd-sec);
-        border-radius: .5rem;
-        background-color: var(--bit-clr-bg-sec);
-    }
-
-    .mcp-why-symptom { font-weight: 700; color: var(--bit-clr-fg-pri); }
-
-    .mcp-why-card p { margin: 0; font-size: .875rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-why-card code { align-self: flex-start; margin-top: auto; }
-
-    .mcp-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem .75rem; }
-
-    .mcp-tab {
-        padding: .4rem .85rem;
-        border: 1px solid var(--bit-clr-brd-sec);
-        border-radius: 2rem;
-        background: none;
-        color: var(--bit-clr-fg-sec);
-        font: inherit;
-        font-size: .875rem;
-        cursor: pointer;
-    }
-
-    .mcp-tab:hover { border-color: var(--bit-clr-pri); color: var(--bit-clr-fg-pri); }
-
-    .mcp-tab.active {
-        border-color: var(--bit-clr-pri);
-        background-color: var(--bit-clr-pri);
-        color: var(--bit-clr-pri-text, #fff);
-    }
-
-    .mcp-tab-note { font-size: .875rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-lab {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 1.5rem;
-        align-items: center;
-        padding: 1.25rem;
-        border: 1px solid var(--bit-clr-brd-sec);
-        border-radius: .5rem;
-        background-color: var(--bit-clr-bg-sec);
-    }
-
-    .mcp-lab-controls { flex: 1 1 20rem; display: flex; flex-direction: column; gap: .6rem; }
-
-    .mcp-lab-controls label { font-size: .8125rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-lab-controls input,
-    .mcp-check input,
-    .mcp-search input,
-    .mcp-code {
-        width: 100%;
-        padding: .5rem .65rem;
-        border: 1px solid var(--bit-clr-brd-sec);
-        border-radius: .375rem;
-        background-color: var(--bit-clr-bg-pri);
-        color: var(--bit-clr-fg-pri);
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: .8125rem;
-    }
-
-    .mcp-lab-controls .btn-bm { align-self: flex-start; }
-
-    .mcp-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
-
-    .mcp-chip {
-        padding: .25rem .6rem;
-        border: 1px solid var(--bit-clr-brd-sec);
-        border-radius: 2rem;
-        background: none;
-        color: var(--bit-clr-fg-sec);
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: .75rem;
-        cursor: pointer;
-    }
-
-    .mcp-chip:hover { border-color: var(--bit-clr-pri); color: var(--bit-clr-fg-pri); }
-
-    .mcp-lab-stage {
-        flex: 1 1 16rem;
-        min-height: 5rem;
-        display: flex;
-        align-items: center;
-    }
-
-    .mcp-box-idle { opacity: .35; }
-
-    .mcp-metrics {
-        display: grid;
-        gap: .75rem;
-        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
-        margin-block: 1rem .75rem;
-    }
-
-    .mcp-metrics div { display: flex; flex-direction: column; gap: .15rem; }
-
-    .mcp-metrics span { font-size: .75rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-metrics strong { font-size: 1.25rem; color: var(--bit-clr-fg-pri); }
-
-    .mcp-sparkline {
-        overflow-x: auto;
-        margin: 0 0 .75rem;
-        padding: .6rem .75rem;
-        border-radius: .375rem;
-        background-color: var(--bit-clr-bg-sec);
-        color: var(--bit-clr-pri);
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: .8125rem;
-        white-space: pre;
-    }
-
-    .mcp-result + .mcp-result { margin-block-start: 1.5rem; border-block-start: 1px solid var(--bit-clr-brd-sec); }
-
-    .mcp-result-title {
-        margin-block: 1rem 0;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: .875rem;
-        font-weight: 600;
-        color: var(--bit-clr-fg-pri);
-    }
-
-    .mcp-result-tag {
-        margin-inline-start: .5rem;
-        font-size: .6875rem;
-        font-weight: 400;
-        color: var(--bit-clr-pri);
-    }
-
-    .mcp-reading, .mcp-warning, .mcp-error { font-size: .875rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-warning, .mcp-error { color: #d2691e; }
-
-    .mcp-check { display: flex; flex-direction: column; gap: .6rem; margin-block: 1rem; }
-
-    .mcp-check-row { display: flex; flex-direction: column; gap: .25rem; }
-
-    .mcp-check-row label { font-size: .8125rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-check .btn-bm { align-self: flex-start; }
-
-    .mcp-verdict {
-        display: flex;
-        flex-wrap: wrap;
-        gap: .5rem 1rem;
-        align-items: baseline;
-        padding: .75rem 1rem;
-        border-left: 3px solid;
-        border-radius: .375rem;
-        background-color: var(--bit-clr-bg-sec);
-    }
-
-    .mcp-verdict.ok { border-color: #2fa35e; }
-
-    .mcp-verdict.warn { border-color: #d2691e; }
-
-    .mcp-verdict span { font-size: .8125rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-fixes { margin: .5rem 0 0; padding-left: 1.25rem; font-size: .875rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-code { min-height: 9rem; resize: vertical; line-height: 1.5; }
-
-    .mcp-findings { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
-
-    .mcp-finding {
-        padding: .75rem 1rem;
-        border-left: 3px solid var(--bit-clr-brd-sec);
-        border-radius: .375rem;
-        background-color: var(--bit-clr-bg-sec);
-    }
-
-    .mcp-finding.error { border-color: #d9534f; }
-
-    .mcp-finding.warning { border-color: #d2691e; }
-
-    .mcp-finding.suggestion { border-color: var(--bit-clr-pri); }
-
-    .mcp-severity, .mcp-rule, .mcp-line { font-size: .75rem; margin-right: .5rem; }
-
-    .mcp-severity { font-weight: 700; color: var(--bit-clr-fg-pri); }
-
-    .mcp-rule { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--bit-clr-pri); }
-
-    .mcp-line { color: var(--bit-clr-fg-sec); }
-
-    .mcp-finding p { margin: .4rem 0 0; font-size: .875rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-fix { color: var(--bit-clr-fg-pri) !important; }
-
-    .mcp-search { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; }
-
-    .mcp-search input { flex: 1 1 18rem; }
-
-    .mcp-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
-
-    .mcp-hits li {
-        display: flex;
-        flex-wrap: wrap;
-        gap: .35rem .75rem;
-        align-items: baseline;
-        padding: .5rem .75rem;
-        border-radius: .375rem;
-        background-color: var(--bit-clr-bg-sec);
-    }
-
-    .mcp-hit-kind { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bit-clr-fg-sec); }
-
-    .mcp-hit-title { font-weight: 600; color: var(--bit-clr-fg-pri); }
-
-    .mcp-table-wrap { overflow-x: auto; }
-
-    .mcp-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
-
-    .mcp-table th, .mcp-table td {
-        padding: .5rem .6rem;
-        border-bottom: 1px solid var(--bit-clr-brd-sec);
-        text-align: left;
-        vertical-align: top;
-    }
-
-    .mcp-table th { font-weight: 700; color: var(--bit-clr-fg-pri); }
-
-    .mcp-table td { color: var(--bit-clr-fg-sec); }
-
-    .mcp-params { display: flex; flex-direction: column; gap: .2rem; }
-
-    .mcp-none { opacity: .6; }
-
-    .mcp-cards {
-        display: grid;
-        gap: .75rem;
-        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
-    }
-
-    .mcp-card {
-        height: 100%;
-        padding: .9rem 1rem;
-        border: 1px solid var(--bit-clr-brd-sec);
-        border-radius: .5rem;
-        background-color: var(--bit-clr-bg-sec);
-    }
-
-    .mcp-card p { margin: .45rem 0 0; font-size: .8125rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-card-params {
-        display: block;
-        margin-top: .5rem;
-        font-size: .75rem;
-        color: var(--bit-clr-fg-sec);
-        opacity: .8;
-    }
-
-    /* minmax(0, 1fr) rather than the implicit auto track: an auto column is sized from its
-       contents, so one long resource name makes the row wider than the column it is in and the
-       whole page scrolls sideways on a phone. */
-    .mcp-resources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
-
-    .mcp-resources li { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; min-width: 0; }
-
-    .mcp-resources code, .mcp-resources span { min-width: 0; overflow-wrap: anywhere; }
-
-    .mcp-resources span { font-size: .8125rem; color: var(--bit-clr-fg-sec); }
-
-    .mcp-principles { margin: 1rem 0 1.25rem; padding-left: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
-
-    .mcp-principles li { color: var(--bit-clr-fg-sec); }
-
-    .mcp-principles strong { color: var(--bit-clr-fg-pri); }
-</style>
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/MotionPath.razor b/src/Utilities/Bmotion/Demo/Client/Pages/MotionPath.razor
index 90a8feb1f46..95fcdcea559 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/MotionPath.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/MotionPath.razor
@@ -1,20 +1,21 @@
 @page "/motion-path"
 
-<PageTitle>Motion path - Bit.Bmotion</PageTitle>
-
-<h1>Motion path and SVG</h1>
-
-<p class="page-intro">
-    Three things you can do with a path that you cannot do with <code>x</code> and <code>y</code>:
-    send an element <strong>along</strong> it, <strong>draw</strong> it stroke by stroke, and
-    <strong>morph</strong> it into another shape. All three are ordinary properties on
-    <code>Bm.To</code> - no separate SVG API, and the element you animate is the plain markup you
-    already wrote. A fourth needs no path at all: <strong>Bm.Arc</strong> curves the line between
-    wherever the element is and wherever it is going.
-</p>
+<PageTitle>Motion path · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Motion path and SVG</h1>
+    <p class="bb-subtitle">
+        Three things you can do with a path that you cannot do with <code>x</code> and <code>y</code>:
+        send an element <strong>along</strong> it, <strong>draw</strong> it stroke by stroke, and
+        <strong>morph</strong> it into another shape. All three are ordinary properties on
+        <code>Bm.To</code> - no separate SVG API, and the element you animate is the plain markup you
+        already wrote. A fourth needs no path at all: <strong>Bm.Arc</strong> curves the line between
+        wherever the element is and wherever it is going.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Curving the journey</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Curving the journey</h3>
     <p>
         Animating <code>x</code> and <code>y</code> together moves an element in a straight line,
         which is exactly what nothing in the physical world does. <strong>Bm.Arc</strong> bends that
@@ -55,15 +56,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _thrown = !_thrown)">@(_thrown ? "Send back" : "Throw")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _thrown = !_thrown)">@(_thrown ? "Send back" : "Throw")</button>
     </div>
 
     <CodeSnippet Code="@_arcCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Travel along a path</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Travel along a path</h3>
     <p>
         Set <strong>offsetPath</strong> once and animate <strong>offsetDistance</strong> from
         <code>0%</code> to <code>100%</code>. Because both are real CSS properties, the browser owns
@@ -76,26 +77,26 @@
             <div class="mpath-stage">
                 <svg viewBox="0 0 300 180" class="mpath-guide" aria-hidden="true">
                     <path d="M20,150 C80,20 220,20 280,150" fill="none"
-                          style="stroke:var(--bm-primary)" stroke-width="2" stroke-dasharray="4 4" />
+                          style="stroke:var(--bb-primary)" stroke-width="2" stroke-dasharray="4 4" />
                 </svg>
                 <Bmotion Initial="_initial"
                          Animate="@(_on ? _travel : _initial)"
                          Transition="Bm.Tween(2.0, BmEase.InOut)">
-                    <div class="dot" />
+                    <div class="mpath-dot" />
                 </Bmotion>
             </div>
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _on = !_on)">@(_on ? "Rewind" : "Travel")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _on = !_on)">@(_on ? "Rewind" : "Travel")</button>
     </div>
 
     <CodeSnippet Code="@_code" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Drawing a path</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Drawing a path</h3>
     <p>
         Animating <strong>pathLength</strong> from <code>0</code> to <code>1</code> draws a stroke
         on, as though it were being written. It works by animating the dash pattern, and the
@@ -115,7 +116,7 @@
                          Animate="Bm.To(pathLength: 1)"
                          Transition="Bm.Tween(2.2, BmEase.InOut, repeat: BmRepeat.Mirror())">
                     <path d="M20,100 C50,10 90,110 120,50 C140,10 175,30 185,90"
-                          fill="none" style="stroke:var(--bm-primary)" stroke-width="6" stroke-linecap="round" />
+                          fill="none" style="stroke:var(--bb-primary)" stroke-width="6" stroke-linecap="round" />
                 </Bmotion>
             </svg>
         </div>
@@ -126,17 +127,17 @@
                 <Bmotion Animate="Bm.To(pathLength: 0.25, pathOffset: [0, 1])"
                          Transition="Bm.Tween(2.4, BmEase.Linear, repeat: BmRepeat.Forever)">
                     <circle cx="100" cy="60" r="42"
-                            fill="none" style="stroke:var(--bm-secondary)" stroke-width="6" stroke-linecap="round" />
+                            fill="none" style="stroke:var(--bb-accent)" stroke-width="6" stroke-linecap="round" />
                 </Bmotion>
             </svg>
         </div>
     </div>
 
     <CodeSnippet Code="@_drawCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Morphing a shape</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Morphing a shape</h3>
     <p>
         Animate the path's <strong>d</strong> attribute and the control points interpolate directly -
         with one condition: the two paths need the <strong>same command structure</strong>. Both
@@ -155,53 +156,20 @@
                 </Bmotion>
                 <defs>
                     <linearGradient id="morphGrad" x1="0" y1="0" x2="1" y2="1">
-                        <stop offset="0" style="stop-color:var(--bm-primary)" />
-                        <stop offset="1" style="stop-color:var(--bm-secondary)" />
+                        <stop offset="0" style="stop-color:var(--bb-primary)" />
+                        <stop offset="1" style="stop-color:var(--bb-accent)" />
                     </linearGradient>
                 </defs>
             </svg>
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _morph = !_morph)">Morph</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _morph = !_morph)">Morph</button>
     </div>
 
     <CodeSnippet Code="@_morphCode" />
-</div>
-
-<style>
-    .path-stage { min-height: 13.75rem; }
-
-    /* Fixed-size stage so the SVG guide (viewBox 0 0 300 180) and the dot's pixel-based
-       offset-path share one coordinate system, and position:relative keeps the absolutely
-       positioned SVG contained within the card. */
-    .mpath-stage {
-        position: relative;
-        width: 300px;
-        height: 180px;
-        max-width: 100%;
-        margin: 0 auto;
-    }
-
-    .mpath-guide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; }
-
-    .dot {
-        width: 1.5rem;
-        height: 1.5rem;
-        border-radius: 50%;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    .draw-svg { width: 100%; max-width: 200px; height: 120px; }
-
-    /* The arc samples travel 150px right and 40px down, so the stage has to hold that journey
-       without reflowing - the box starts pinned to the top-left of the space it has to cross. */
-    .arc-stage { justify-content: flex-start; min-height: 11rem; }
-    .arc-start { align-self: flex-start; }
-
-    .arc-card { font-size: 1.25rem; color: #fff; }
-</style>
+</section>
 
 @code {
     private bool _on;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/NotFoundPage.razor b/src/Utilities/Bmotion/Demo/Client/Pages/NotFoundPage.razor
index 50cd9f6f659..45d2b889382 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/NotFoundPage.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/NotFoundPage.razor
@@ -1,9 +1,18 @@
 @page "/not-found"
+@layout MainLayout
 
 @* Target of app.UseStatusCodePagesWithReExecute("/not-found") in the host's Program.cs (a deep
    link to an unknown URL matches no endpoint, so the server re-executes it here), and also the
    router's NotFoundPage for routes missed during client-side navigation. *@
 
-<PageTitle>Not found - Bit.Bmotion</PageTitle>
+<PageTitle>Not found · Bmotion</PageTitle>
 
-<NotFoundContent />
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Programmatic.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Programmatic.razor
index e87a963b923..9f8fb55761e 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Programmatic.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Programmatic.razor
@@ -2,21 +2,22 @@
 @inject BmotionAnimateService Motion
 @implements IDisposable
 
-<PageTitle>Programmatic API - Bit.Bmotion</PageTitle>
-
-<h1>Programmatic API</h1>
-
-<p class="page-intro">
-    Declarative animation covers the common case: describe the state, let the change drive the
-    motion. Some things do not fit that shape - a timeline whose steps overlap, a value that is not
-    a DOM property, an animation you need to pause halfway. <strong>BmotionAnimateService</strong>
-    is the imperative half of the library: animate by CSS selector or <code>ElementReference</code>,
-    with no <code>&lt;Bmotion&gt;</code> wrapper anywhere in sight, and get back playback controls
-    you can hold on to.
-</p>
+<PageTitle>Programmatic API · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Programmatic API</h1>
+    <p class="bb-subtitle">
+        Declarative animation covers the common case: describe the state, let the change drive the
+        motion. Some things do not fit that shape - a timeline whose steps overlap, a value that is not
+        a DOM property, an animation you need to pause halfway. <strong>BmotionAnimateService</strong>
+        is the imperative half of the library: animate by CSS selector or <code>ElementReference</code>,
+        with no <code>&lt;Bmotion&gt;</code> wrapper anywhere in sight, and get back playback controls
+        you can hold on to.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Animating by selector</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Animating by selector</h3>
     <p>
         <code>AnimateAsync(selector, target, transition, stagger)</code> resolves every matching
         element and animates them together, with the optional <strong>stagger</strong> spreading
@@ -37,21 +38,21 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="RunAsync">Run</button>
-        <button class="btn-bm" @onclick="@(() => _controls?.Pause())">Pause</button>
-        <button class="btn-bm" @onclick="@(() => _controls?.Play())">Play</button>
-        <button class="btn-bm" @onclick="@(() => _controls?.SetSpeed(3))">3&times; speed</button>
-        <button class="btn-bm" @onclick="@(() => _controls?.Complete())">Complete</button>
-        <button class="btn-bm" @onclick="ResetDotsAsync">Reset</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="RunAsync">Run</button>
+        <button class="btn btn-secondary" @onclick="@(() => _controls?.Pause())">Pause</button>
+        <button class="btn btn-secondary" @onclick="@(() => _controls?.Play())">Play</button>
+        <button class="btn btn-secondary" @onclick="@(() => _controls?.SetSpeed(3))">3&times; speed</button>
+        <button class="btn btn-secondary" @onclick="@(() => _controls?.Complete())">Complete</button>
+        <button class="btn btn-secondary" @onclick="ResetDotsAsync">Reset</button>
         <span class="demo-label">@_runState</span>
     </div>
 
     <CodeSnippet Code="@_selectorCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Animating a number</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Animating a number</h3>
     <p>
         Nothing about the engine requires a DOM element. <code>AnimateAsync(from, to, onUpdate,
         transition)</code> interpolates a bare <code>double</code> and hands you every value on the
@@ -66,16 +67,16 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => CountToAsync(2_450))">Count up</button>
-        <button class="btn-bm" @onclick="@(() => CountToAsync(0))">Count down</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => CountToAsync(2_450))">Count up</button>
+        <button class="btn btn-secondary" @onclick="@(() => CountToAsync(0))">Count down</button>
     </div>
 
     <CodeSnippet Code="@_countCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Sequences</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Sequences</h3>
     <p>
         A <strong>BmSequence</strong> is a timeline: each step names its own target, and
         <code>at</code> places it relative to what came before. <code>"+0.2"</code> and
@@ -104,19 +105,19 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="RunSequenceAsync">Play sequence</button>
-        <button class="btn-bm" @onclick="@(() => _sequenceControls?.Pause())">Pause</button>
-        <button class="btn-bm" @onclick="@(() => _sequenceControls?.Play())">Resume</button>
-        <button class="btn-bm" @onclick="@(() => _sequenceControls?.SetSpeed(3))">3&times; speed</button>
-        <button class="btn-bm" @onclick="ResetSequenceAsync">Reset</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="RunSequenceAsync">Play sequence</button>
+        <button class="btn btn-secondary" @onclick="@(() => _sequenceControls?.Pause())">Pause</button>
+        <button class="btn btn-secondary" @onclick="@(() => _sequenceControls?.Play())">Resume</button>
+        <button class="btn btn-secondary" @onclick="@(() => _sequenceControls?.SetSpeed(3))">3&times; speed</button>
+        <button class="btn btn-secondary" @onclick="ResetSequenceAsync">Reset</button>
     </div>
 
     <CodeSnippet Code="@_sequenceCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Motion values</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Motion values</h3>
     <p>
         A <strong>motion value</strong> is a number that other things can watch. Bind one with the
         <code>Values</code> parameter and it writes to the DOM every frame without re-rendering the
@@ -157,10 +158,10 @@
     </div>
 
     <CodeSnippet Code="@_valuesCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Driving one element by reference</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Driving one element by reference</h3>
     <p>
         When the element <em>is</em> a <code>&lt;Bmotion&gt;</code>, a <code>@@ref</code> gives you
         the same controls without a selector. <code>AnimateAsync</code> plays a one-off target,
@@ -179,18 +180,18 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _box.Pause())">Pause</button>
-        <button class="btn-bm" @onclick="@(() => _box.Resume())">Resume</button>
-        <button class="btn-bm" @onclick="@(() => _box.SetPlaybackRate(4))">4&times; rate</button>
-        <button class="btn-bm" @onclick="PulseAsync">Pulse</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _box.Pause())">Pause</button>
+        <button class="btn btn-secondary" @onclick="@(() => _box.Resume())">Resume</button>
+        <button class="btn btn-secondary" @onclick="@(() => _box.SetPlaybackRate(4))">4&times; rate</button>
+        <button class="btn btn-secondary" @onclick="PulseAsync">Pulse</button>
     </div>
 
     <CodeSnippet Code="@_refCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Global defaults</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Global defaults</h3>
     <p>
         <strong>BmotionConfig</strong> cascades defaults to everything beneath it, which is the
         cheapest way to change the feel of a whole surface at once. <code>TransitionSpeed</code> is
@@ -218,66 +219,19 @@
         </div>
     </BmotionConfig>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _configOn = !_configOn)">Animate</button>
-        @foreach (var speed in _speeds)
-        {
-            <button class="btn-bm @(Math.Abs(_speed - speed) < 0.001 ? null : "ghost")"
-                    @onclick="@(() => _speed = speed)">@speed&times;</button>
-        }
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _configOn = !_configOn)">Animate</button>
+        <div class="bb-segmented" role="group" aria-label="TransitionSpeed">
+            @foreach (var speed in _speeds)
+            {
+                <button type="button" aria-pressed="@(Math.Abs(_speed - speed) < 0.001 ? "true" : "false")"
+                        @onclick="@(() => _speed = speed)">@speed&times;</button>
+            }
+        </div>
     </div>
 
     <CodeSnippet Code="@_configCode" />
-</div>
-
-<style>
-    .dot-row { display: flex; gap: .5rem; }
-
-    .prog-dot {
-        width: 1.5rem;
-        height: 2.75rem;
-        border-radius: 6px;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    .counter {
-        font-weight: 800;
-        font-size: 2.75rem;
-        line-height: 1;
-        color: var(--bm-text);
-        font-variant-numeric: tabular-nums;
-        font-family: var(--demo-font-mono);
-    }
-
-    .seq-stage { gap: 1.5rem; flex-direction: column; min-height: 12.5rem; }
-
-    .seq-box { width: 3.75rem; height: 3.75rem; }
-
-    .seq-dots { display: flex; gap: .6rem; }
-
-    .seq-dot {
-        width: 1rem;
-        height: 1rem;
-        border-radius: 50%;
-        background: var(--bm-secondary);
-    }
-
-    .value-slider { width: 100%; max-width: 22rem; accent-color: var(--bm-primary); }
-
-    .value-row { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
-
-    .value-cell { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
-
-    /* A secondary treatment for the speed buttons, so the active one is legible as the
-       selection rather than as one of six identical primaries. */
-    .btn-bm.ghost {
-        color: var(--bm-primary);
-        background: transparent;
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .btn-bm.ghost:hover { background: var(--bm-accent-soft); }
-</style>
+</section>
 
 @code {
     private Bmotion _box = default!;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/ReorderPage.razor b/src/Utilities/Bmotion/Demo/Client/Pages/ReorderPage.razor
index 9e88929615d..4c9f45a6ae0 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/ReorderPage.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/ReorderPage.razor
@@ -1,19 +1,20 @@
 @page "/reorder"
 
-<PageTitle>Reorder - Bit.Bmotion</PageTitle>
-
-<h1>Reorder</h1>
-
-<p class="page-intro">
-    Drag-to-reorder is the one interaction where the naive implementation is always wrong: re-render
-    the list on every pointer move and you drop frames, lose focus and reset component state.
-    <strong>BmotionReorderGroup</strong> previews the new order with transforms only - the list
-    itself re-renders <em>once</em>, on release - so the drag stays smooth and the bound list is the
-    single source of truth throughout.
-</p>
+<PageTitle>Reorder · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Reorder</h1>
+    <p class="bb-subtitle">
+        Drag-to-reorder is the one interaction where the naive implementation is always wrong: re-render
+        the list on every pointer move and you drop frames, lose focus and reset component state.
+        <strong>BmotionReorderGroup</strong> previews the new order with transforms only - the list
+        itself re-renders <em>once</em>, on release - so the drag stays smooth and the bound list is the
+        single source of truth throughout.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Drag to reorder</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Drag to reorder</h3>
     <p>
         Bind a list, give the items a stable key, and every row becomes draggable along the list
         axis while its siblings spring out of the way. <code>HandleSelector</code> restricts the
@@ -48,10 +49,10 @@
     </p>
 
     <CodeSnippet Code="@_reorderCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Horizontal lists</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Horizontal lists</h3>
     <p>
         <code>Axis="BmDragAxis.X"</code> runs the same machinery sideways for a row of tabs, a
         toolbar or a card rail. Only the axis changes - the displacement, the commit and the binding
@@ -72,10 +73,10 @@
     <p class="reorder-readout">Current order: @string.Join(" → ", _stages)</p>
 
     <CodeSnippet Code="@_horizontalCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Keyboard access</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Keyboard access</h3>
     <p>
         A pointer drag is not reachable by keyboard, so a reorderable list needs a second way in -
         and it does not need to be a separate mechanism. The group observes external mutations of
@@ -85,59 +86,7 @@
     </p>
 
     <CodeSnippet Code="@_keyboardCode" />
-</div>
-
-<style>
-    .list-stage {
-        gap: .6rem;
-        width: 100%;
-        min-width: 17.5rem;
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .track-row {
-        gap: .7rem;
-        display: flex;
-        padding: .7rem 1rem;
-        align-items: center;
-        border-radius: 8px;
-        color: var(--bm-text);
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .track-title { flex: 1; }
-    .track-time { font-size: .8rem; color: var(--bm-muted); }
-
-    .track-move {
-        border: none;
-        cursor: pointer;
-        background: none;
-        padding: 0 .15rem;
-        font-family: inherit;
-        color: var(--bm-muted);
-    }
-
-    .track-move:disabled { opacity: .35; cursor: default; }
-
-    .grip { cursor: grab; user-select: none; color: var(--bm-muted); }
-
-    .chip-rail { display: flex; gap: .5rem; flex-wrap: nowrap; }
-
-    .rail-chip {
-        cursor: grab;
-        user-select: none;
-        white-space: nowrap;
-        padding: .5rem 1rem;
-        border-radius: 999px;
-        color: var(--bm-text);
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .reorder-readout { font-size: .85rem; margin-top: .75rem; color: var(--bm-muted); }
-</style>
+</section>
 
 @code {
     private sealed record Track(int Id, string Title, string Duration);
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/ScrollAnimations.razor b/src/Utilities/Bmotion/Demo/Client/Pages/ScrollAnimations.razor
index 32937fc3e86..4556a292fb1 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/ScrollAnimations.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/ScrollAnimations.razor
@@ -3,20 +3,21 @@
 @inject BmotionScrollTracker TargetScroll
 @implements IAsyncDisposable
 
-<PageTitle>Scroll animations - Bit.Bmotion</PageTitle>
-
-<h1>Scroll animations</h1>
-
-<p class="page-intro">
-    There are two ways to tie motion to a scrollbar, and they answer different questions.
-    <strong>Scroll-linked</strong> motion asks <em>"how far along are we?"</em> and maps that
-    progress continuously onto a property - the reader scrubs the animation.
-    <strong>Scroll-triggered</strong> motion asks <em>"is this on screen yet?"</em> and plays a
-    normal animation once the answer changes. For the first there is a fast path -
-    <code>Timeline</code>, which hands the scrubbing to the browser outright - and a general one,
-    <code>BmotionScrollTracker</code>, for when you need the number itself.
-    <code>WhileInView</code> covers the second.
-</p>
+<PageTitle>Scroll animations · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Scroll animations</h1>
+    <p class="bb-subtitle">
+        There are two ways to tie motion to a scrollbar, and they answer different questions.
+        <strong>Scroll-linked</strong> motion asks <em>"how far along are we?"</em> and maps that
+        progress continuously onto a property - the reader scrubs the animation.
+        <strong>Scroll-triggered</strong> motion asks <em>"is this on screen yet?"</em> and plays a
+        normal animation once the answer changes. For the first there is a fast path -
+        <code>Timeline</code>, which hands the scrubbing to the browser outright - and a general one,
+        <code>BmotionScrollTracker</code>, for when you need the number itself.
+        <code>WhileInView</code> covers the second.
+    </p>
+</div>
 
 @* Offset by the site header's own height so the readout parks under it rather than behind it. *@
 <div class="scroll-progress">
@@ -29,8 +30,8 @@
     </div>
 </div>
 
-<div class="demo-section">
-    <h2>Scroll timelines: let the browser do it</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Scroll timelines: let the browser do it</h3>
     <p>
         A scroll handler that calls back into .NET on every scroll event is the expensive way to
         scrub an animation, and it is the one thing you cannot make fast from the outside.
@@ -75,10 +76,10 @@
     </div>
 
     <CodeSnippet Code="@_timelineCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Tracking the scroll position</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Tracking the scroll position</h3>
     <p>
         Inject <strong>BmotionScrollTracker</strong> and call <code>ObserveAsync</code> to receive a
         <code>BmScrollInfo</code> on every scroll: absolute offsets and normalised
@@ -89,10 +90,10 @@
     </p>
 
     <CodeSnippet Code="@_scrollTrackCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Scroll-linked motion values</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Scroll-linked motion values</h3>
     <p>
         A callback that calls <code>StateHasChanged</code> on every scroll event is a diff per
         frame. Motion values skip that entirely: bind them with the <code>Values</code> parameter
@@ -116,10 +117,10 @@
     </div>
 
     <CodeSnippet Code="@_valuesCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Motion templates</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Motion templates</h3>
     <p>
         Some properties are not a number - they are a sentence made of numbers.
         <strong>Bm.Template</strong> composes motion values into a CSS string and
@@ -138,10 +139,10 @@
     </div>
 
     <CodeSnippet Code="@_templateCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>An element's own progress</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> An element's own progress</h3>
     <p>
         Window progress is the wrong measure for anything that is not the whole page. Pass
         <strong>BmScrollOptions</strong> a <code>TargetId</code> and a pair of
@@ -167,10 +168,10 @@
     </div>
 
     <CodeSnippet Code="@_targetCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>whileInView</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> whileInView</h3>
     <p>
         <strong>WhileInView</strong> is the trigger half: an ordinary gesture state, activated by an
         <code>IntersectionObserver</code> rather than a pointer. <code>Once="true"</code> keeps it
@@ -200,72 +201,7 @@
     </div>
 
     <CodeSnippet Code="@_inViewCode" />
-</div>
-
-<style>
-    .scroll-progress {
-        top: calc(var(--demo-header-height) + .5rem);
-        z-index: 50;
-        padding: 1.5rem;
-        position: sticky;
-        margin-bottom: 1.5rem;
-        background: var(--bm-card);
-        border: 1px solid var(--bm-border);
-        border-radius: 12px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
-    }
-
-    .progress-caption { text-align: left; margin: .4rem 0; }
-
-    /* The timeline-driven bar sits on its own, above the row of stages, with the caption it
-       needs to be readable as a sample rather than as page chrome. */
-    .timeline-bar-wrap { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
-
-    .scroll-track {
-        width: 100%;
-        height: .5rem;
-        overflow: hidden;
-        border-radius: 6px;
-        background: var(--bm-track);
-    }
-
-    .scroll-fill {
-        height: 100%;
-        border-radius: 6px;
-        transition: width .05s;
-        background: linear-gradient(90deg, var(--bm-primary), var(--bm-secondary));
-    }
-
-    /* The motion-value bound fills are scaled, not resized: they start full width and the
-       engine drives scaleX from the left edge. */
-    .full-width { width: 100%; transition: none; transform-origin: 0 50%; }
-
-    .target-panel {
-        width: 100%;
-        height: 8rem;
-        border-radius: 8px;
-        background: repeating-linear-gradient(45deg,
-            var(--bm-accent-soft) 0 12px,
-            transparent 12px 24px);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .inview-strip { overflow-x: clip; }
-
-    .inview-band {
-        height: 5rem;
-        display: flex;
-        color: #fff;
-        font-weight: 700;
-        align-items: center;
-        border-radius: 12px;
-        justify-content: center;
-        margin-bottom: 1.5rem;
-    }
-
-    .from-left { background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary)); }
-    .from-right { background: linear-gradient(135deg, var(--bm-secondary), var(--bm-primary)); }
-</style>
+</section>
 
 @code {
     private double _progressX;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/SplitText.razor b/src/Utilities/Bmotion/Demo/Client/Pages/SplitText.razor
index b188d48f279..b533ec9c8d4 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/SplitText.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/SplitText.razor
@@ -1,19 +1,20 @@
 @page "/split-text"
 
-<PageTitle>Split text - Bit.Bmotion</PageTitle>
-
-<h1>Split text</h1>
-
-<p class="page-intro">
-    The headline that assembles itself one letter at a time is the oldest trick in motion design,
-    and everywhere else it means cutting a sentence into spans with a script and hoping nothing
-    re-renders underneath it. <strong>BmotionSplitText</strong> does the splitting in C#: each
-    character, word or line becomes a real animated element in the render tree, so there is nothing
-    to re-split, nothing to undo, and the text still wraps, selects and copies like the original.
-</p>
+<PageTitle>Split text · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Split text</h1>
+    <p class="bb-subtitle">
+        The headline that assembles itself one letter at a time is the oldest trick in motion design,
+        and everywhere else it means cutting a sentence into spans with a script and hoping nothing
+        re-renders underneath it. <strong>BmotionSplitText</strong> does the splitting in C#: each
+        character, word or line becomes a real animated element in the render tree, so there is nothing
+        to re-split, nothing to undo, and the text still wraps, selects and copies like the original.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Characters, words, lines</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Characters, words, lines</h3>
     <p>
         One parameter picks the unit. <code>By="BmSplitBy.Chars"</code> is the headline treatment;
         <code>Words</code> keeps the count sane on longer copy; <code>Lines</code> splits on the
@@ -56,15 +57,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="Replay">Replay</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="Replay">Replay</button>
     </div>
 
     <CodeSnippet Code="@_basicsCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Where the cascade starts</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where the cascade starts</h3>
     <p>
         The stagger is a <code>Bm.Stagger</code> like any other, so the same origins apply:
         <code>First</code> runs left to right, <code>Last</code> right to left, and
@@ -88,15 +89,15 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="Replay">Replay</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="Replay">Replay</button>
     </div>
 
     <CodeSnippet Code="@_staggerCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>On scroll, and under the pointer</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> On scroll, and under the pointer</h3>
     <p>
         Because every unit is a full <code>Bmotion</code> element, it takes the gesture parameters
         too. <code>WhileInView</code> with <code>Once</code> gives the classic reveal-as-you-scroll
@@ -127,10 +128,10 @@
     </div>
 
     <CodeSnippet Code="@_gestureCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>It still reads as a sentence</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> It still reads as a sentence</h3>
     <p>
         Splitting text is the classic way to break it for everyone who is not looking at it: a
         screen reader handed forty one-character spans spells the headline out. By default the
@@ -155,12 +156,12 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="Replay">Replay</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="Replay">Replay</button>
     </div>
 
     <CodeSnippet Code="@_a11yCode" />
-</div>
+</section>
 
 @code {
     // Every sample keys off this counter so "Replay" remounts them and their enter animations run
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Springs.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Springs.razor
index a916a2c4296..feceff26d19 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Springs.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Springs.razor
@@ -1,19 +1,20 @@
 @page "/springs"
 
-<PageTitle>Springs - Bit.Bmotion</PageTitle>
-
-<h1>Springs</h1>
-
-<p class="page-intro">
-    A tween asks "how long should this take?". A spring asks "how heavy is this, and how hard is it
-    pulled?" - and the duration falls out of the answer. That is why springs survive interruption:
-    retarget one mid-flight and it carries its current velocity into the new motion instead of
-    restarting. <strong>Bm.Spring(...)</strong> is the whole API, and it accepts either set of
-    knobs below.
-</p>
+<PageTitle>Springs · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Springs</h1>
+    <p class="bb-subtitle">
+        A tween asks "how long should this take?". A spring asks "how heavy is this, and how hard is it
+        pulled?" - and the duration falls out of the answer. That is why springs survive interruption:
+        retarget one mid-flight and it carries its current velocity into the new motion instead of
+        restarting. <strong>Bm.Spring(...)</strong> is the whole API, and it accepts either set of
+        knobs below.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Stiffness and damping</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Stiffness and damping</h3>
     <p>
         <strong>Stiffness</strong> is how hard the spring pulls toward the target - raise it and the
         motion gets faster and more urgent. <strong>Damping</strong> is the friction that removes
@@ -36,15 +37,15 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _on = !_on)">@(_on ? "Send back" : "Animate")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _on = !_on)">@(_on ? "Send back" : "Animate")</button>
     </div>
 
     <CodeSnippet Code="@_springCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Bounce and duration</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Bounce and duration</h3>
     <p>
         Stiffness and damping are the physics, but they are not how anyone describes motion out
         loud. The second form takes the two words you would actually use: <strong>bounce</strong>
@@ -66,15 +67,15 @@
         }
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _bounce = !_bounce)">@(_bounce ? "Send back" : "Animate")</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _bounce = !_bounce)">@(_bounce ? "Send back" : "Animate")</button>
     </div>
 
     <CodeSnippet Code="@_bounceCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Overshoot on mount</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Overshoot on mount</h3>
     <p>
         An underdamped spring on an entrance is the cheapest way to make an interface feel alive:
         the element passes its resting state, comes back, and settles. Re-mount below to replay it -
@@ -92,15 +93,15 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="Remount">Re-mount</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="Remount">Re-mount</button>
     </div>
 
     <CodeSnippet Code="@_bouncyCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Repeating springs</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Repeating springs</h3>
     <p>
         <strong>BmRepeat</strong> replays a spring without an <code>int.MaxValue</code> sentinel
         anywhere in sight. <em>Mirror</em> ping-pongs back through the motion it just played;
@@ -125,14 +126,14 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _repeat = !_repeat)">
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _repeat = !_repeat)">
             @(_repeat ? "Reset" : "Start repeating")
         </button>
     </div>
 
     <CodeSnippet Code="@_repeatCode" />
-</div>
+</section>
 
 @code {
     private bool _on;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/Variants.razor b/src/Utilities/Bmotion/Demo/Client/Pages/Variants.razor
index 54711aa83f7..694495db140 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/Variants.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/Variants.razor
@@ -1,20 +1,21 @@
 @page "/variants"
 @inject BmotionAnimateService Motion
 
-<PageTitle>Variants - Bit.Bmotion</PageTitle>
-
-<h1>Variants</h1>
-
-<p class="page-intro">
-    Variants let you name your animation states once and then move a whole subtree between them by
-    name. The parent switches to <code>"visible"</code>; every descendant that declares a
-    <code>"visible"</code> variant of its own resolves it and plays. Nothing has to be threaded
-    down, nothing has to be kept in sync - and because the parent owns the timing, staggering the
-    children is one parameter rather than a list of hand-computed delays.
-</p>
+<PageTitle>Variants · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>Variants</h1>
+    <p class="bb-subtitle">
+        Variants let you name your animation states once and then move a whole subtree between them by
+        name. The parent switches to <code>"visible"</code>; every descendant that declares a
+        <code>"visible"</code> variant of its own resolves it and plays. Nothing has to be threaded
+        down, nothing has to be kept in sync - and because the parent owns the timing, staggering the
+        children is one parameter rather than a list of hand-computed delays.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Named states</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Named states</h3>
     <p>
         Declare the states in a <strong>BmVariants</strong> dictionary and select one with the
         razor-literal-friendly <code>State</code> and <code>InitialState</code> parameters. The
@@ -41,17 +42,17 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _visible = !_visible)">
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _visible = !_visible)">
             @(_visible ? "Hide" : "Show") list
         </button>
     </div>
 
     <CodeSnippet Code="@_variantsCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Orchestration</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Orchestration</h3>
     <p>
         <code>staggerChildren</code> spaces the descendants' starts apart and
         <code>delayChildren</code> holds all of them back until the container has had its moment -
@@ -191,17 +192,17 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _visible2 = !_visible2)">
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _visible2 = !_visible2)">
             @(_visible2 ? "Hide" : "Show") boxes
         </button>
     </div>
 
     <CodeSnippet Code="@_orchestrationCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Dynamic variants</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Dynamic variants</h3>
     <p>
         A variant can be a <em>function</em> of the data behind the element rather than a fixed
         target. Register it with <code>Add(name, custom =&gt; …)</code> and pass each element its
@@ -228,17 +229,17 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="@(() => _fanned = !_fanned)">
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="@(() => _fanned = !_fanned)">
             @(_fanned ? "Collapse" : "Fan out")
         </button>
     </div>
 
     <CodeSnippet Code="@_dynamicCode" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Grid stagger</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Grid stagger</h3>
     <p>
         <strong>Bm.Stagger</strong> is a delay <em>generator</em>, and it radiates across two
         dimensions as happily as one: pass <code>grid: (cols, rows)</code> and a <code>from</code>
@@ -258,68 +259,13 @@
         </div>
     </div>
 
-    <div class="demo-actions">
-        <button class="btn-bm" @onclick="RippleAsync">Ripple from center</button>
-        <button class="btn-bm" @onclick="RippleFromFirstAsync">Ripple from first</button>
+    <div class="bb-toolbar">
+        <button class="btn btn-primary" @onclick="RippleAsync">Ripple from center</button>
+        <button class="btn btn-secondary" @onclick="RippleFromFirstAsync">Ripple from first</button>
     </div>
 
     <CodeSnippet Code="@_gridStaggerCode" />
-</div>
-
-<style>
-    .variant-list { display: flex; flex-direction: column; gap: .5rem; list-style: none; margin: 0; padding: 0; }
-
-    .variant-row {
-        padding: .6rem 1rem;
-        font-size: .9rem;
-        border-radius: 8px;
-        color: var(--bm-text);
-        background: var(--bm-accent-soft);
-        border: 1px solid var(--bm-accent-line);
-    }
-
-    .variant-boxes { display: flex; gap: .5rem; }
-
-    /* The row that sits out the cascade. Drawn flat rather than gradient-filled so it reads as
-       "not part of this group" before it moves at all. */
-    .box-muted {
-        background: var(--bm-track);
-        border: 1px dashed var(--bm-accent-line);
-    }
-
-    /* A fixed stage the fanned cards overlap inside: they start stacked, so the container has to
-       hold its size rather than track the widest arrangement. */
-    .fan-stage { position: relative; width: 100%; height: 8rem; }
-
-    .fan-card {
-        position: absolute;
-        top: 1.5rem;
-        left: 50%;
-        width: 3.25rem;
-        height: 4.5rem;
-        margin-left: -1.625rem;
-        display: flex;
-        color: #fff;
-        font-weight: 700;
-        /* 20px/700 counts as large text, which is the bar white can clear over the light half of
-           this gradient - see .box in motion-samples.css, which is sized for the same reason. */
-        font-size: 1.25rem;
-        align-items: center;
-        justify-content: center;
-        border-radius: 8px;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-        box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
-    }
-
-    .stagger-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
-
-    .grid-dot {
-        width: 1.625rem;
-        height: 1.625rem;
-        border-radius: 6px;
-        background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-    }
-</style>
+</section>
 
 @code {
     private bool _visible = true;
diff --git a/src/Utilities/Bmotion/Demo/Client/Pages/ViewTransitions.razor b/src/Utilities/Bmotion/Demo/Client/Pages/ViewTransitions.razor
index 2460b051068..ccc748b8acf 100644
--- a/src/Utilities/Bmotion/Demo/Client/Pages/ViewTransitions.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Pages/ViewTransitions.razor
@@ -1,20 +1,21 @@
 @page "/view-transitions"
 @inject BmotionViewTransition ViewTransition
 
-<PageTitle>View transitions - Bit.Bmotion</PageTitle>
-
-<h1>View transitions</h1>
-
-<p class="page-intro">
-    <code>LayoutId</code> animates elements that exist on both sides of a change. The browser's
-    native <strong>View Transitions API</strong> handles the case where they do not: it snapshots
-    the page before and after, then cross-fades the two. That makes it the right tool when a change
-    is wholesale - a whole panel replaced, a route swapped - and <code>LayoutId</code> the right
-    tool when one specific thing moves.
-</p>
+<PageTitle>View transitions · Bmotion</PageTitle>
+
+<div class="bb-intro">
+    <h1>View transitions</h1>
+    <p class="bb-subtitle">
+        <code>LayoutId</code> animates elements that exist on both sides of a change. The browser's
+        native <strong>View Transitions API</strong> handles the case where they do not: it snapshots
+        the page before and after, then cross-fades the two. That makes it the right tool when a change
+        is wholesale - a whole panel replaced, a route swapped - and <code>LayoutId</code> the right
+        tool when one specific thing moves.
+    </p>
+</div>
 
-<div class="demo-section">
-    <h2>Wrapping a state change</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Wrapping a state change</h3>
     <p>
         <strong>BmotionViewTransition.StartAsync</strong> puts
         <code>document.startViewTransition</code> around a Blazor state change: your callback
@@ -24,29 +25,29 @@
         applies without a transition - there is no fallback to write.
     </p>
 
-    <div class="tab-bar" role="tablist">
+    <div class="bb-tabs vt-tabs" role="tablist">
         @foreach (var t in _tabs)
         {
-            <button type="button" class="tab @(t == _active ? "active" : null)"
-                    role="tab" aria-selected="@(t == _active)"
+            <button type="button" class="@(t == _active ? "active" : null)"
+                    role="tab" aria-selected="@(t == _active ? "true" : "false")"
                     @onclick="@(() => SwitchAsync(t))">@t</button>
         }
     </div>
 
-    <div class="panel">
-        <h3>@_active</h3>
+    <div class="vt-panel" role="tabpanel">
+        <h4>@_active</h4>
         <p>@_copy[_active]</p>
     </div>
 
     <CodeSnippet Code="@_code" />
-</div>
+</section>
 
-<div class="demo-section">
-    <h2>Choosing between the two</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Choosing between the two</h3>
     <p>
         They are complements, not competitors, and they can run in the same app on the same screen.
     </p>
-    <ul class="feature-list">
+    <ul class="bb-detail-list">
         <li>
             <strong>LayoutId (FLIP)</strong> - one element persists across the change and you want
             it to travel. Runs in C#, works in every browser Blazor does, and is interruptible
@@ -58,43 +59,7 @@
             the browser's and only runs where the API exists.
         </li>
     </ul>
-</div>
-
-<style>
-    .tab-bar { display: flex; gap: .5rem; margin-bottom: 1rem; }
-
-    .tab {
-        border: none;
-        cursor: pointer;
-        font-weight: 600;
-        font-size: .875rem;
-        font-family: inherit;
-        padding: .5rem 1rem;
-        border-radius: var(--bm-radius);
-        color: var(--bm-muted);
-        background: var(--bm-track);
-    }
-
-    .tab.active { background: var(--bm-primary); color: var(--bm-primary-text); }
-
-    .tab:focus-visible { outline: 2px solid var(--bm-primary); outline-offset: 2px; }
-
-    .panel {
-        padding: 2rem;
-        min-height: 7.5rem;
-        border-radius: 12px;
-        background: var(--bm-card);
-        border: 1px solid var(--bm-border);
-        /* Naming the element gives it its own snapshot pair, which is what the rule below
-           can then target independently of the rest of the page. */
-        view-transition-name: vt-panel;
-    }
-
-    ::view-transition-old(vt-panel),
-    ::view-transition-new(vt-panel) { animation-duration: .4s; }
-
-    .feature-list { line-height: 1.9; color: var(--bm-muted); }
-</style>
+</section>
 
 @code {
     private readonly string[] _tabs = ["Overview", "Features", "Pricing"];
diff --git a/src/Utilities/Bmotion/Demo/Client/Routes.razor b/src/Utilities/Bmotion/Demo/Client/Routes.razor
index d694b7d2f74..633a7344386 100644
--- a/src/Utilities/Bmotion/Demo/Client/Routes.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Routes.razor
@@ -1,6 +1,17 @@
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing, not-found and error pages opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page.
+
+   The engine inspector sits after the router rather than in a layout: it is the same component on
+   every page, so it is mounted once and keeps its open state across navigations. It is fixed to
+   the corner of the viewport, outside the site chrome. *@
+
 <Router AppAssembly="typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFoundPage)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h1, h2" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
+
+@* Live engine debug overlay - starts collapsed; click to expand. *@
+<BmotionInspector StartOpen="false" />
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/AppFooter.razor b/src/Utilities/Bmotion/Demo/Client/Shared/AppFooter.razor
deleted file mode 100644
index f0bb3e7cc32..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/AppFooter.razor
+++ /dev/null
@@ -1,78 +0,0 @@
-@inject IJSRuntime JS
-
-@* The bit platform footer: who makes this, where to go next, and how to reach the team. *@
-
-<footer class="footer">
-    <section>
-        <div>
-            <div class="bit-logo" role="img" aria-label="bit platform"></div>
-            <p class="blurb">
-                Bmotion is part of bit platform &mdash; a platform that simplifies the development
-                process for freelancers and software companies through its clean project templates
-                and easy-to-use one-click build and deployment feature.
-            </p>
-        </div>
-
-        <div class="link-columns">
-            <div class="link-column">
-                <h6>Learn</h6>
-                <a href="/basic">Get started</a>
-                <a href="/springs">Springs</a>
-                <a href="/gestures">Gestures</a>
-                <a href="/accessibility">Accessibility</a>
-            </div>
-
-            <div class="link-column">
-                <h6>Build</h6>
-                <a href="/programmatic">Programmatic API</a>
-                <a href="/layout">Layout animations</a>
-                <a href="/scroll">Scroll timelines</a>
-                <a href="/mcp-server">MCP server</a>
-            </div>
-
-            <div class="link-column">
-                <h6>Project</h6>
-                <a href="https://github.com/bitfoundation" target="_blank" rel="noopener noreferrer">GitHub org</a>
-                <a href="https://github.com/bitfoundation/bitplatform" target="_blank" rel="noopener noreferrer">Repository</a>
-                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
-                <button type="button" class="go-to-top" @onclick="GoToTop">
-                    <Icon Path="@Icons.ArrowUp" />
-                    Back to top
-                </button>
-            </div>
-        </div>
-    </section>
-
-    <section>
-        <div class="address-info">
-            <a class="address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
-            <div class="country">Netherlands</div>
-            <a class="tel" href="tel:+31684207362">+31 6 84207362</a>
-        </div>
-
-        <div>
-            <div class="social-link-group">
-                <a class="social-link twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
-                <a class="social-link github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
-                <a class="social-link youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
-                <a class="social-link linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
-            </div>
-            <div class="copy-right-txt">Copyright &copy; 2026 bit platform &middot; All rights reserved</div>
-        </div>
-    </section>
-</footer>
-
-@code {
-    private async Task GoToTop()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmScrollToTop");
-        }
-        catch
-        {
-            // Scrolling back up is a convenience the page already offers through the scrollbar;
-            // if the script is unavailable there is nothing worth telling the reader about.
-        }
-    }
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/AppHeader.razor b/src/Utilities/Bmotion/Demo/Client/Shared/AppHeader.razor
deleted file mode 100644
index 30872538a23..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/AppHeader.razor
+++ /dev/null
@@ -1,127 +0,0 @@
-@inject IJSRuntime JS
-
-@* The site header: the mark, the library's name and the two top-level destinations at one end;
-   the search, the repository and the theme switch at the other.
-
-   It is the one piece of chrome the landing page and the docs share, and it adapts to which of
-   the two it is sitting on: the menu button only exists on a docs page, because the landing page
-   has no nav panel to open. *@
-
-<header class="app-header">
-    <div class="app-header-inner">
-        <div class="header-start">
-            @* Only exists on a docs page, and only at the widths where the nav panel is a drawer;
-               CSS hides it above them. *@
-            @if (IsHomePage is false)
-            {
-                <button type="button" class="icon-btn menu-btn" @onclick="OnToggleNav"
-                        aria-label="Toggle navigation" aria-controls="nav-panel"
-                        aria-expanded="@(IsNavOpen ? "true" : "false")"
-                        disabled="@IsHydrating">
-                    <Icon Path="@Icons.Menu" />
-                </button>
-            }
-
-            <a class="header-brand" href="/" aria-label="Bmotion home">
-                <span class="logo" aria-hidden="true"></span>
-                <span class="wordmark">Bmotion</span>
-            </a>
-
-            <span class="header-version">@Version</span>
-
-            <nav class="header-links" aria-label="Sections">
-                <a class="link@(IsHomePage ? " active" : "")" href="/"
-                   aria-current="@(IsHomePage ? "page" : null)">Home</a>
-                <a class="link@(IsHomePage ? "" : " active")" href="/basic"
-                   aria-current="@(IsHomePage ? null : "page")">Docs</a>
-            </nav>
-        </div>
-
-        <div class="header-end">
-            @* The page is prerendered on the server, so it is visible - and inert - until the
-               WebAssembly runtime takes over. Say so instead of letting clicks silently do
-               nothing, and instead of leaving the still animations looking broken. *@
-            @if (IsHydrating)
-            {
-                <span class="hydrating" title="Prerendered HTML - the WebAssembly runtime is still loading.">
-                    <i></i><span>loading</span>
-                </span>
-            }
-
-            @* Below the width where it has room for its label it collapses to the icon, which is
-               why the accessible name is on the button rather than only in the text inside it. *@
-            <button type="button" class="header-search" @onclick="OnOpenSearch"
-                    aria-label="Search the docs" aria-keyshortcuts="Control+K Meta+K"
-                    disabled="@IsHydrating">
-                <Icon Path="@Icons.Search" />
-                <span class="search-label">Search docs</span>
-                <span class="kbd" aria-hidden="true">@ShortcutHint</span>
-            </button>
-
-            <a class="icon-btn" target="_blank" rel="noopener noreferrer"
-               aria-label="Bit.Bmotion on GitHub (opens in a new tab)"
-               href="https://github.com/bitfoundation/bitplatform">
-                <span class="github-mark" aria-hidden="true"></span>
-            </a>
-
-            @* Exact complements: CSS shows the sun in the dark theme and the moon in the light
-               one, so exactly one of the pair is ever visible - including on the prerendered
-               document, which carries no data-theme attribute yet. *@
-            <button type="button" class="icon-btn dark-theme" @onclick="ToggleTheme"
-                    title="Switch to the light theme" aria-label="Switch to the light theme">
-                <Icon Path="@Icons.Sun" />
-            </button>
-            <button type="button" class="icon-btn light-theme" @onclick="ToggleTheme"
-                    title="Switch to the dark theme" aria-label="Switch to the dark theme">
-                <Icon Path="@Icons.Moon" />
-            </button>
-        </div>
-    </div>
-</header>
-
-@code {
-    /// <summary>The release the docs describe, shown next to the name.</summary>
-    private const string Version = "net8+";
-
-    /// <summary>True while the prerendered markup is on screen and the WebAssembly runtime is still loading.</summary>
-    [Parameter] public bool IsHydrating { get; set; }
-
-    /// <summary>Whether the nav drawer is currently open, for the menu button's aria-expanded.</summary>
-    [Parameter] public bool IsNavOpen { get; set; }
-
-    /// <summary>Raised by the menu button at the widths where the nav panel is a drawer.</summary>
-    [Parameter] public EventCallback OnToggleNav { get; set; }
-
-    /// <summary>Raised by the search button. The layout owns the palette, so it owns opening it.</summary>
-    [Parameter] public EventCallback OnOpenSearch { get; set; }
-
-    /// <summary>
-    /// The shortcut printed on the search button's keycap. The layout resolves it once from the
-    /// browser rather than guessing: the same physical key is Ctrl on Windows and Linux and Cmd on
-    /// a Mac, and a keycap showing the wrong one is worse than no keycap at all.
-    /// </summary>
-    [Parameter] public string ShortcutHint { get; set; } = "Ctrl K";
-
-    /// <summary>
-    /// True on the landing page. The layout owns this - it is the same flag that decides whether
-    /// the page gets the docs shell at all - so the two can never disagree about which of the
-    /// site's two faces is on screen.
-    /// </summary>
-    [Parameter] public bool IsHomePage { get; set; }
-
-    // The attribute the stylesheets key off is owned by the theme script, which also persists the
-    // choice; the component only asks it to flip. Nothing here has to know the resulting theme -
-    // the two buttons are shown and hidden by CSS.
-    private async Task ToggleTheme()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmToggleTheme");
-        }
-        catch
-        {
-            // The theme is a preference, not a feature: if the script is missing there is nothing
-            // to report to the reader, and the page keeps working in whichever theme is applied.
-        }
-    }
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/AppNavPanel.razor b/src/Utilities/Bmotion/Demo/Client/Shared/AppNavPanel.razor
deleted file mode 100644
index 059008897c5..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/AppNavPanel.razor
+++ /dev/null
@@ -1,81 +0,0 @@
-@* The docs navigation. A sticky column beside the content on wide screens and a drawer over it on
-   narrow ones - the switch is entirely in CSS, so the same markup and the same state serve both.
-
-   The index is grouped rather than flat. Twenty entries in one run is a list to be read from the
-   top, and a reader almost always arrives wanting one of them for a reason: to make something
-   spring, to make something leave, to make something follow the pointer. The groups say which is
-   which, and they come from NavItem itself, so a page is filed once. *@
-
-<nav id="nav-panel" class="nav-panel @(IsOpen ? "open" : null)" aria-label="Documentation">
-    <div class="nav-panel-search">
-        <Icon Path="@Icons.Search" />
-        <input type="search" placeholder="Filter pages" aria-label="Filter pages"
-               value="@_filter" @oninput="OnFilterInput" disabled="@Disabled" />
-    </div>
-
-    @foreach (var group in _visibleGroups)
-    {
-        <div class="nav-group">
-            @* The icon is the group's, not the page's: twenty rows of icons would be twenty things
-               to look past, but seven marks down the left of the panel give the eye somewhere to
-               land when it is looking for the right part of the docs rather than the right page. *@
-            <p class="nav-group-title" id="@GroupId(group.Category)">
-                <Icon Path="@group.Icon" />
-                @group.Category
-            </p>
-
-            <ul class="nav-panel-list" aria-labelledby="@GroupId(group.Category)">
-                @foreach (var item in group.Items)
-                {
-                    <li>
-                        @* Match.All throughout: every href is a distinct leaf route with nothing
-                           nested under it, and prefix matching would light up "Layout" the moment
-                           a "LayoutSomething" route existed. *@
-                        <NavLink href="@item.Href" Match="NavLinkMatch.All">
-                            @item.Title
-                        </NavLink>
-                    </li>
-                }
-            </ul>
-        </div>
-    }
-
-    @if (_visibleGroups.Length == 0)
-    {
-        <span class="nav-panel-empty" role="status">No page matches &ldquo;@_filter&rdquo;.</span>
-    }
-</nav>
-
-@code {
-    /// <summary>Whether the drawer is open. Ignored above the breakpoint, where the panel is always in place.</summary>
-    [Parameter] public bool IsOpen { get; set; }
-
-    /// <summary>Disables the filter box while the prerendered markup is still waiting for the runtime.</summary>
-    [Parameter] public bool Disabled { get; set; }
-
-    private string _filter = "";
-    private (string Category, string Icon, NavItem[] Items)[] _visibleGroups = NavItem.Groups;
-
-    private static string GroupId(string category)
-        => $"nav-group-{category.ToLowerInvariant().Replace(' ', '-')}";
-
-    private void OnFilterInput(ChangeEventArgs e)
-    {
-        _filter = e.Value?.ToString() ?? "";
-
-        if (_filter.Trim() is not { Length: > 0 } term)
-        {
-            _visibleGroups = NavItem.Groups;
-            return;
-        }
-
-        // A group whose every page has been filtered out is dropped rather than left as a heading
-        // over nothing - which would read as "these exist but are hidden" instead of "no match".
-        _visibleGroups =
-        [
-            .. NavItem.Groups
-                .Select(group => (group.Category, group.Icon, Items: group.Items.Where(i => i.Matches(term)).ToArray()))
-                .Where(group => group.Items.Length > 0)
-        ];
-    }
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/CodeSnippet.razor b/src/Utilities/Bmotion/Demo/Client/Shared/CodeSnippet.razor
index be370699dd6..79915ea58de 100644
--- a/src/Utilities/Bmotion/Demo/Client/Shared/CodeSnippet.razor
+++ b/src/Utilities/Bmotion/Demo/Client/Shared/CodeSnippet.razor
@@ -1,34 +1,22 @@
-@inject IJSRuntime JS
-
-@* The full, copy/paste-runnable source of a sample, behind a toggle.
-
-   One frame around the toolbar and the code rather than a button floating above a slab: the bar
-   is the code box's own header, so opening a snippet grows a panel instead of adding a second
-   thing to the page. The copy button is there whether or not the code is showing - a reader who
-   wants the snippet in their editor should not first have to read it here. *@
-
-<div class="code-snippet @(_show ? "open" : null)">
-    <div class="code-snippet-bar">
-        <button type="button" class="code-toggle" @onclick="Toggle"
-                aria-expanded="@(_show ? "true" : "false")" aria-controls="@_bodyId">
-            <span class="code-toggle-icon">
-                <Icon Path="@Icons.ChevronRight" />
-            </span>
-            @(_show ? "Hide code" : "Show code")
-        </button>
-
-        <span class="code-lang">@Language</span>
-
-        <button type="button" class="code-copy @(_copied ? "copied" : null)" @onclick="CopyAsync"
-                aria-label="@(_copied ? "Code copied to the clipboard" : "Copy the code to the clipboard")">
-            <Icon Path="@(_copied ? Icons.Check : Icons.Copy)" />
-            @(_copied ? "Copied" : "Copy")
-        </button>
-    </div>
+@* The full, copy/paste-runnable source of a sample, behind a toggle.
+
+   A quiet button rather than a slab of code under every stage: the page reads as prose and samples
+   until the reader asks for the code. Opened, it is the site kit's pre.bb-code - the code surface
+   every Utilities demo shares, and the copy button site.js hangs on each of them. The highlighter
+   joins the lines with real newlines, so that button copies the snippet line for line. *@
+
+<div class="bb-source code-snippet">
+    <button type="button" class="btn btn-secondary code-snippet-toggle" @onclick="Toggle"
+            aria-expanded="@(_show ? "true" : "false")" aria-controls="@_bodyId">
+        <span class="code-snippet-caret" aria-hidden="true">@(_show ? "▾" : "▸")</span>
+        <span class="code-snippet-glyph" aria-hidden="true">&lt;/&gt;</span>
+        @(_show ? "Hide code" : "Show code")
+        <span class="code-snippet-lang">@Language</span>
+    </button>
 
     @if (_show)
     {
-        <pre class="code-block" id="@_bodyId"><code>@((MarkupString)SyntaxHighlighter.Highlight(Code.Trim('\n')))</code></pre>
+        <pre class="bb-code code-snippet-code" id="@_bodyId"><code>@((MarkupString)SyntaxHighlighter.Highlight(Code.Trim('\r', '\n')))</code></pre>
     }
 </div>
 
@@ -36,7 +24,7 @@
     /// <summary>The full, copy/paste-runnable source snippet to display for the sample.</summary>
     [Parameter, EditorRequired] public string Code { get; set; } = "";
 
-    /// <summary>The label printed on the bar. Every snippet on the site is Razor; the parameter is
+    /// <summary>The label printed on the toggle. Every snippet on the site is Razor; the parameter is
     /// here so a page that shows a shell command or a JSON file can say so.</summary>
     [Parameter] public string Language { get; set; } = "Razor";
 
@@ -46,25 +34,6 @@
     private readonly string _bodyId = $"code-{Guid.NewGuid():N}";
 
     private bool _show;
-    private bool _copied;
 
-    private void Toggle()
-    {
-        _show = !_show;
-        _copied = false;
-    }
-
-    private async Task CopyAsync()
-    {
-        try
-        {
-            _copied = await JS.InvokeAsync<bool>("bmCopyToClipboard", Code.Trim('\n'));
-        }
-        catch
-        {
-            // A clipboard the browser refuses to hand over is not something the reader can act on,
-            // and the code is on the page either way; the button simply does not confirm.
-            _copied = false;
-        }
-    }
+    private void Toggle() => _show = !_show;
 }
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/CommandPalette.razor b/src/Utilities/Bmotion/Demo/Client/Shared/CommandPalette.razor
deleted file mode 100644
index 7c9ea34264c..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/CommandPalette.razor
+++ /dev/null
@@ -1,200 +0,0 @@
-@inject IJSRuntime JS
-@inject NavigationManager Nav
-@implements IAsyncDisposable
-
-@* Every page of the docs, one keystroke away.
-
-   It searches the same NavItem list the nav panel renders, so a page is findable here for having
-   a nav entry rather than for being added to a second index that could fall behind it - and it
-   searches each entry's keywords as well as its title, because a reader looking for "stagger" or
-   "elastic" is naming the feature, not the page it happens to live on.
-
-   The keyboard is handled in js/demo.js rather than here. A Blazor @onkeydown handler cannot
-   decide per-event whether to preventDefault, so arrow keys either scroll the palette's own list
-   twice or the typed characters never reach the input; the listener there suppresses exactly the
-   four keys this dialog owns and leaves every other key alone. *@
-
-@if (IsOpen)
-{
-    <div class="palette-backdrop" @onclick="CloseAsync"></div>
-
-    <div class="palette" role="dialog" aria-modal="true" aria-label="Search the documentation">
-        <div class="palette-field">
-            <Icon Path="@Icons.Search" />
-            <input id="palette-input" type="text" autocomplete="off" spellcheck="false"
-                   role="combobox" aria-expanded="true" aria-controls="palette-results"
-                   aria-activedescendant="@(_matches.Length > 0 ? ItemId(_active) : null)"
-                   aria-label="Search the documentation"
-                   placeholder="Search pages, features, keywords..."
-                   value="@_term" @oninput="OnInput" />
-            <button type="button" class="icon-btn" @onclick="CloseAsync" aria-label="Close search">
-                <Icon Path="@Icons.Close" />
-            </button>
-        </div>
-
-        @if (_matches.Length == 0)
-        {
-            <p class="palette-empty" role="status">No page matches &ldquo;@_term&rdquo;.</p>
-        }
-        else
-        {
-            <ul class="palette-results" id="palette-results" role="listbox" aria-label="Results">
-                @{
-                    var index = 0;
-                    string? group = null;
-                }
-                @foreach (var item in _matches)
-                {
-                    @* The results stay grouped while nothing has been typed, so an empty palette
-                       reads as the table of contents it is. Once there is a term, the ranking is
-                       what matters and the group headings would only break it up. *@
-                    if (_term.Length == 0 && item.Category != group)
-                    {
-                        group = item.Category;
-                        <li class="palette-group" role="presentation">
-                            <Icon Path="@item.Icon" />
-                            @group
-                        </li>
-                    }
-
-                    var i = index++;
-                    <li class="palette-item @(i == _active ? "active" : null)"
-                        id="@ItemId(i)" role="option" aria-selected="@(i == _active)">
-                        <a href="@item.Url" tabindex="-1" @onclick="() => GoAsync(item)" @onclick:preventDefault>
-                            <span class="palette-title">@item.Title</span>
-                            <span class="palette-desc">@item.Description</span>
-                        </a>
-                    </li>
-                }
-            </ul>
-        }
-
-        <div class="palette-footer">
-            <span><span class="kbd">&uarr;</span><span class="kbd">&darr;</span> to move</span>
-            <span><span class="kbd">Enter</span> to open</span>
-            <span><span class="kbd">Esc</span> to close</span>
-        </div>
-    </div>
-}
-
-@code {
-    /// <summary>Whether the dialog is on screen. The layout owns it, because the header opens it.</summary>
-    [Parameter] public bool IsOpen { get; set; }
-
-    /// <summary>Raised when the palette closes itself - by Escape, by the backdrop or by a result.</summary>
-    [Parameter] public EventCallback OnClose { get; set; }
-
-    private string _term = "";
-    private int _active;
-    private bool _wasOpen;
-    private NavItem[] _matches = NavItem.Docs;
-    private DotNetObjectReference<CommandPalette>? _selfRef;
-
-    private static string ItemId(int index) => $"palette-item-{index}";
-
-    protected override async Task OnParametersSetAsync()
-    {
-        if (IsOpen == _wasOpen) return;
-
-        _wasOpen = IsOpen;
-
-        if (IsOpen)
-        {
-            // A palette that reopens holding the last search would show the reader results for a
-            // question they have already answered.
-            _term = "";
-            _active = 0;
-            _matches = NavItem.Docs;
-        }
-
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-            await JS.InvokeVoidAsync("bmSetPaletteOpen", IsOpen, _selfRef);
-        }
-        catch
-        {
-            // Prerendering has no JS runtime, and the palette cannot be open there anyway: it is
-            // only ever opened from a click or a key, both of which need the runtime to have
-            // booted. Without the call the dialog still works from the pointer alone.
-        }
-    }
-
-    private void OnInput(ChangeEventArgs e)
-    {
-        _term = e.Value?.ToString()?.Trim() ?? "";
-        _matches = _term.Length == 0
-            ? NavItem.Docs
-            : [.. NavItem.Docs.Where(item => item.Matches(_term))];
-
-        // The selection always lands on the first result of the new set: keeping the old index
-        // would leave it pointing at whatever now happens to be in that position.
-        _active = 0;
-    }
-
-    /// <summary>
-    /// One of the four keys the dialog owns, forwarded by the listener in js/demo.js. Anything
-    /// else never reaches here and goes to the input, which is where typing belongs.
-    /// </summary>
-    [JSInvokable]
-    public async Task OnPaletteKey(string key)
-    {
-        switch (key)
-        {
-            case "down" when _matches.Length > 0:
-                _active = (_active + 1) % _matches.Length;
-                break;
-
-            case "up" when _matches.Length > 0:
-                _active = (_active - 1 + _matches.Length) % _matches.Length;
-                break;
-
-            case "enter" when _matches.Length > 0:
-                await GoAsync(_matches[_active]);
-                return;
-
-            case "close":
-                await CloseAsync();
-                return;
-
-            default:
-                return;
-        }
-
-        StateHasChanged();
-
-        try
-        {
-            // The selection can move past either end of the visible list, and a selection nobody
-            // can see is the same as no selection at all.
-            await JS.InvokeVoidAsync("bmScrollPaletteActive");
-        }
-        catch
-        {
-            // Only the scroll is lost; the selection itself is still marked in the markup.
-        }
-    }
-
-    private async Task GoAsync(NavItem item)
-    {
-        await CloseAsync();
-        Nav.NavigateTo(item.Url);
-    }
-
-    private Task CloseAsync() => OnClose.InvokeAsync();
-
-    public async ValueTask DisposeAsync()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmSetPaletteOpen", false, null);
-        }
-        catch
-        {
-            // Disposal races the page going away, and never has a JS runtime while prerendering;
-            // the listener it would remove dies with the document either way.
-        }
-
-        _selfRef?.Dispose();
-    }
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/DocBreadcrumb.razor b/src/Utilities/Bmotion/Demo/Client/Shared/DocBreadcrumb.razor
deleted file mode 100644
index 95e4567c11f..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/DocBreadcrumb.razor
+++ /dev/null
@@ -1,22 +0,0 @@
-@* Where in the docs the current page sits.
-
-   It earns its line only because the index is grouped: what it adds is the name of the group,
-   which is the one thing the page's own title cannot tell the reader. The group is not itself a
-   destination - there is no page listing one - so it is printed rather than linked, and only the
-   first crumb is somewhere to go. *@
-
-@if (Current is not null)
-{
-    <nav class="doc-breadcrumb" aria-label="Breadcrumb">
-        <a href="/basic">Docs</a>
-        <Icon Path="@Icons.ChevronRight" />
-        <span>@Current.Category</span>
-        <Icon Path="@Icons.ChevronRight" />
-        <span class="current" aria-current="page">@Current.Title</span>
-    </nav>
-}
-
-@code {
-    /// <summary>The page being shown, or null on a route that is not a demo page.</summary>
-    [Parameter] public NavItem? Current { get; set; }
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/DocPager.razor b/src/Utilities/Bmotion/Demo/Client/Shared/DocPager.razor
deleted file mode 100644
index fdca0f67857..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/DocPager.razor
+++ /dev/null
@@ -1,47 +0,0 @@
-@* The pages either side of this one, at the foot of it.
-
-   The docs are written to be read in order - each page assumes the shape taught by the one before
-   it - so the end of a page should say what the next one is rather than sending the reader back
-   to the panel to work it out. Both entries come from NavItem, which is also what orders the
-   panel, so the two can never disagree about what "next" means. *@
-
-@if (_previous is not null || _next is not null)
-{
-    <nav class="doc-pager" aria-label="Page navigation">
-        @if (_previous is not null)
-        {
-            <a class="previous" href="@_previous.Url" rel="prev">
-                <span class="pager-dir">
-                    <Icon Path="@Icons.ArrowLeft" />
-                    Previous
-                </span>
-                <span class="pager-title">@_previous.Title</span>
-            </a>
-        }
-
-        @if (_next is not null)
-        {
-            @* The class, not the source order, puts this in the second column: a page with no
-               previous entry still has to leave the first column empty rather than sliding its
-               "next" into it, or the two ends of the sequence would point the same way. *@
-            <a class="next" href="@_next.Url" rel="next">
-                <span class="pager-dir">
-                    Next
-                    <Icon Path="@Icons.ArrowRight" />
-                </span>
-                <span class="pager-title">@_next.Title</span>
-            </a>
-        }
-    </nav>
-}
-
-@code {
-    /// <summary>The route being shown, relative to the app base and without its leading slash.</summary>
-    [Parameter] public string Href { get; set; } = "";
-
-    private NavItem? _previous;
-    private NavItem? _next;
-
-    protected override void OnParametersSet()
-        => (_previous, _next) = NavItem.Neighbours(Href);
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/Icon.razor b/src/Utilities/Bmotion/Demo/Client/Shared/Icon.razor
deleted file mode 100644
index c3087cf72d0..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/Icon.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@* One icon from the set in Icons.cs.
-
-   Always aria-hidden: an icon in this site is either next to its own label or inside a control
-   that carries an aria-label of its own, so announcing it a second time would only repeat the
-   button. focusable="false" is for the browsers that still put an <svg> in the tab order. *@
-
-<svg class="icon @Class" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-    @((MarkupString)Path)
-</svg>
-
-@code {
-    /// <summary>The icon's geometry: one of the constants on <see cref="Icons"/>.</summary>
-    [Parameter, EditorRequired] public string Path { get; set; } = "";
-
-    /// <summary>An extra class for the caller to size or position this instance with.</summary>
-    [Parameter] public string? Class { get; set; }
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/Icons.cs b/src/Utilities/Bmotion/Demo/Client/Shared/Icons.cs
deleted file mode 100644
index 99ad5b2c0c9..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/Icons.cs
+++ /dev/null
@@ -1,93 +0,0 @@
-namespace Bit.Bmotion.Demo.Client.Shared;
-
-/// <summary>
-/// The site's icon set: the inner markup of a 24×24 icon, without the <c>&lt;svg&gt;</c> element
-/// around it. <see cref="Icon"/> supplies that, along with the class the stylesheet paints them
-/// through.
-/// <para>
-/// They are drawn as strokes rather than filled outlines, at the weight Fluent's regular icons are
-/// drawn at, and they carry no colour of their own: <c>svg.icon</c> in app.css strokes them with
-/// <c>currentColor</c>, so an icon is the colour of whatever it sits inside and follows that thing
-/// through every theme, hover and disabled state without being re-authored.
-/// </para>
-/// <para>
-/// They live in C# rather than in a sprite or an icon font because the site is prerendered: markup
-/// that is part of the document costs no request, cannot arrive after the first paint, and cannot
-/// go missing behind a failed download - and an icon that fails to load in a header is a button
-/// with nothing in it.
-/// </para>
-/// </summary>
-public static class Icons
-{
-    // ── Chrome ───────────────────────────────────────────────────────────────
-
-    public const string Search = """<circle cx="11" cy="11" r="7" /><path d="m16.2 16.2 4.3 4.3" />""";
-
-    public const string Menu = """<path d="M3.5 6.5h17M3.5 12h17M3.5 17.5h17" />""";
-
-    public const string Close = """<path d="m6 6 12 12M18 6 6 18" />""";
-
-    public const string Sun = """<circle cx="12" cy="12" r="4.25" /><path d="M12 2.75v2M12 19.25v2M2.75 12h2M19.25 12h2M5.4 5.4l1.4 1.4M17.2 17.2l1.4 1.4M18.6 5.4l-1.4 1.4M6.8 17.2l-1.4 1.4" />""";
-
-    public const string Moon = """<path d="M20.4 14.3A8.6 8.6 0 0 1 9.7 3.6 8.6 8.6 0 1 0 20.4 14.3Z" />""";
-
-    public const string ChevronRight = """<path d="m9.5 5.5 6.5 6.5-6.5 6.5" />""";
-
-    public const string ArrowRight = """<path d="M3.75 12h16.5m-6.25-6.25L20.25 12l-6.25 6.25" />""";
-
-    public const string ArrowLeft = """<path d="M20.25 12H3.75m6.25-6.25L3.75 12l6.25 6.25" />""";
-
-    public const string ArrowUp = """<path d="M12 20.25V3.75M5.75 10 12 3.75 18.25 10" />""";
-
-    public const string Copy = """<rect x="9" y="9" width="11.25" height="11.25" rx="2.25" /><path d="M5.25 15H4.5a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5v.75" />""";
-
-    public const string Check = """<path d="m4.75 12.5 4.75 4.75L19.25 6.5" />""";
-
-    public const string Link = """<path d="M10 14a4.25 4.25 0 0 0 6 0l2.75-2.75a4.25 4.25 0 0 0-6-6L11.5 6.5" /><path d="M14 10a4.25 4.25 0 0 0-6 0L5.25 12.75a4.25 4.25 0 0 0 6 6L12.5 17.5" />""";
-
-    public const string Play = """<path d="M7.75 4.75 19 12 7.75 19.25Z" />""";
-
-    // ── Capabilities ─────────────────────────────────────────────────────────
-
-    /// <summary>Springs, and physics in general: a trace that overshoots and settles.</summary>
-    public const string Pulse = """<path d="M2.75 12.5h3.5l2.25-6 3.75 12 2.75-9 1.75 3h4.5" />""";
-
-    /// <summary>Keyframes: values pinned along a timeline.</summary>
-    public const string Keyframe = """<path d="M3 12h2.5M11 12h2M18.5 12H21" /><path d="M8.25 9.25 11 12l-2.75 2.75L5.5 12Z" /><path d="M15.75 9.25 18.5 12l-2.75 2.75L13 12Z" />""";
-
-    /// <summary>Gestures: a pointer over the thing it is acting on.</summary>
-    public const string Pointer = """<path d="m6.5 4.25 12 6.25-5.25 1.5-1.5 5.25Z" /><path d="m13.5 13.5 4.75 4.75" />""";
-
-    /// <summary>Drag: free movement on both axes.</summary>
-    public const string Drag = """<path d="M12 3.25v17.5M3.25 12h17.5" /><path d="m9.5 5.75 2.5-2.5 2.5 2.5M9.5 18.25l2.5 2.5 2.5-2.5M5.75 9.5l-2.5 2.5 2.5 2.5M18.25 9.5l2.5 2.5-2.5 2.5" />""";
-
-    /// <summary>Variants: named states layered over one subtree.</summary>
-    public const string Layers = """<path d="m12 3.25 8.75 4.5L12 12.25 3.25 7.75Z" /><path d="m3.25 12.5 8.75 4.5 8.75-4.5" /><path d="m3.25 16.75 8.75 4 8.75-4" />""";
-
-    /// <summary>AnimatePresence: something appearing and leaving.</summary>
-    public const string Presence = """<path d="M2.75 12S6.5 5.75 12 5.75 21.25 12 21.25 12 17.5 18.25 12 18.25 2.75 12 2.75 12Z" /><circle cx="12" cy="12" r="2.75" />""";
-
-    /// <summary>Split text: type, broken into pieces.</summary>
-    public const string Text = """<path d="M4.5 7V4.75h15V7M12 4.75V19.25M9.25 19.25h5.5" />""";
-
-    /// <summary>Layout: a frame whose parts have been rearranged.</summary>
-    public const string Layout = """<rect x="3.25" y="3.25" width="17.5" height="17.5" rx="2.25" /><path d="M3.25 9.5h17.5M9.5 20.75V9.5" />""";
-
-    /// <summary>Scroll: a viewport being moved through.</summary>
-    public const string Scroll = """<rect x="7.5" y="3.25" width="9" height="17.5" rx="4.5" /><path d="M12 7.25v3" />""";
-
-    /// <summary>The programmatic API: controls driven from code.</summary>
-    public const string Controls = """<path d="M3.5 7.5h9M16.5 7.5h4M3.5 16.5h3.5M11 16.5h9.5" /><circle cx="14.5" cy="7.5" r="2.25" /><circle cx="9" cy="16.5" r="2.25" />""";
-
-    /// <summary>Motion path: an element sent along a curve.</summary>
-    public const string Path = """<path d="M5 18.5c0-9 14-3 14-12" /><circle cx="5" cy="18.5" r="2.25" /><circle cx="19" cy="6.5" r="2.25" />""";
-
-    /// <summary>Accessibility.</summary>
-    public const string Accessibility = """<circle cx="12" cy="4.75" r="1.75" /><path d="M4.75 8.75h14.5M12 8.75v5.5m0 0-3 6.25m3-6.25 3 6.25" />""";
-
-    /// <summary>Documentation.</summary>
-    public const string Book = """<path d="M4 5.75A2.5 2.5 0 0 1 6.5 3.25h13.25V18H6.5A2.5 2.5 0 0 0 4 20.5Z" /><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18h13.25v2.75H6.5A2.5 2.5 0 0 1 4 20.5Z" />""";
-
-    /// <summary>Anything new, and anything generated.</summary>
-    public const string Sparkle = """<path d="m11 3.5 1.9 5.6 5.6 1.9-5.6 1.9-1.9 5.6-1.9-5.6-5.6-1.9 5.6-1.9Z" /><path d="M18 15.5v4M20 17.5h-4" />""";
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/NavItem.cs b/src/Utilities/Bmotion/Demo/Client/Shared/NavItem.cs
deleted file mode 100644
index 5d11e5c95c0..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/NavItem.cs
+++ /dev/null
@@ -1,194 +0,0 @@
-namespace Bit.Bmotion.Demo.Client.Shared;
-
-/// <summary>
-/// One entry of the docs navigation. The list itself is <see cref="All"/>, and it is the site's
-/// single index: the nav panel groups it, the command palette searches it, the landing page prints
-/// it, the breadcrumb reads a page's category out of it and the pager walks it in order. A page
-/// therefore appears everywhere by having an entry here, and the five of them can never disagree
-/// about what the site contains.
-/// <para>
-/// It is also where the demo's MCP server gets the description, keywords and route it reports for
-/// a demo page in <c>GetBmotionSourceFiles</c>, which is why each entry carries them alongside the
-/// file it is implemented in. A page therefore describes itself once, and the site's search, the
-/// nav panel and an AI agent looking for a worked example all read the same words.
-/// </para>
-/// </summary>
-/// <param name="Title">The label shown in the nav panel.</param>
-/// <param name="Href">The route, relative to the app base. Empty for the landing page.</param>
-/// <param name="Category">The group this page is filed under; see <see cref="Groups"/>.</param>
-/// <param name="Description">What the page demonstrates, in one sentence.</param>
-/// <param name="Keywords">Space-separated terms the page covers, for search and the MCP index.</param>
-/// <param name="Source">The page's file name under Client/Pages, for GetBmotionSourceFile.</param>
-public sealed record NavItem(
-    string Title,
-    string Href,
-    string Category,
-    string Description,
-    string Keywords,
-    string Source)
-{
-    /// <summary>The path the MCP server hands this page's source out under.</summary>
-    public string SourcePath => $"Demo/Client/Pages/{Source}";
-
-    /// <summary>The route as a link target, which for the landing page is the app root.</summary>
-    public string Url => Href.Length == 0 ? "/" : $"/{Href}";
-
-    /// <summary>The icon the palette and the landing page show beside this page's group.</summary>
-    public string Icon => CategoryIcon(Category);
-
-    // The group names, written out once so a typo in an entry below cannot silently invent a
-    // twenty-first group, and in the order the docs are meant to be read.
-    private const string GettingStarted = "Getting started";
-    private const string Motion = "Motion";
-    private const string Interaction = "Interaction";
-    private const string Orchestration = "Orchestration";
-    private const string LayoutAndScroll = "Layout and scroll";
-    private const string Advanced = "Advanced";
-    private const string Guides = "Guides";
-
-    /// <summary>Every demo page, in the order they are meant to be read.</summary>
-    public static readonly NavItem[] All =
-    [
-        new("Home", "", GettingStarted,
-            "The landing page: what Bmotion is, and the feature tiles that link into the rest of the demos.",
-            "home landing overview introduction start",
-            "Home.razor"),
-        new("Basics", "basic", GettingStarted,
-            "Initial and Animate on a single element, the shape of every Bmotion animation, and what runs on mount.",
-            "initial animate mount enter first render bmotion component transition basics hello world",
-            "BasicAnimations.razor"),
-        new("Springs", "springs", Motion,
-            "Physics springs: stiffness and damping, the intuitive bounce and duration form, overshoot on mount, and repeating springs.",
-            "spring stiffness damping mass bounce duration overshoot physics velocity repeat mirror",
-            "Springs.razor"),
-        new("Easing", "easing", Motion,
-            "Every BmEase preset side by side, custom cubic beziers, stepped easing, and per-segment easing across keyframes.",
-            "ease easing bezier cubic steps linear in out inout back elastic bounce circ expo quad quart quint sine",
-            "Easing.razor"),
-        new("Keyframes", "keyframes", Motion,
-            "Multi-step animations from arrays of values, with Times for uneven spacing and Bm.Current as the wildcard first frame.",
-            "keyframes array multi step times wildcard current sequence repeat mirror loop",
-            "Keyframes.razor"),
-        new("Gestures", "gestures", Interaction,
-            "WhileHover, WhileTap, WhileFocus and WhileInView - animation states the element enters while something is true.",
-            "hover tap press focus inview viewport gesture whilehover whiletap whilefocus whileinview intersection",
-            "Gestures.razor"),
-        new("Drag", "drag", Interaction,
-            "Pointer dragging with axis locks, constraints, elastic edges, momentum on release and drag-driven values.",
-            "drag pointer pan constraints elastic momentum inertia snap axis lock draggable",
-            "DragPage.razor"),
-        new("Reorder", "reorder", Interaction,
-            "BmotionReorderGroup: a drag-to-reorder list where the other items animate out of the way as one is moved.",
-            "reorder sortable list drag drop rearrange items order group",
-            "ReorderPage.razor"),
-        new("Variants", "variants", Orchestration,
-            "Named animation states shared down a subtree, with orchestration: staggered children, before/after children, and propagation.",
-            "variants named states orchestration stagger staggerchildren delaychildren when beforechildren afterchildren propagate parent child",
-            "Variants.razor"),
-        new("AnimatePresence", "presence", Orchestration,
-            "Exit animations: how an element animates out before Blazor removes it, plus presence modes and switching between views.",
-            "exit animate presence unmount remove leave mode wait popLayout sync switch group conditional rendering",
-            "AnimatePresencePage.razor"),
-        new("Split Text", "split-text", Orchestration,
-            "BmotionSplitText breaking a headline into characters, words or lines so each piece can animate on its own stagger.",
-            "split text characters words lines stagger headline typography reveal per letter",
-            "SplitText.razor"),
-        new("Layout", "layout", LayoutAndScroll,
-            "FLIP layout animations: an element animating between two positions or sizes it was merely re-rendered into, and shared-element transitions.",
-            "layout flip shared element magic move layoutid position size reposition transition morph",
-            "LayoutPage.razor"),
-        new("Scroll", "scroll", LayoutAndScroll,
-            "Scroll-driven animation: progress-linked timelines that the browser scrubs, and enter-on-scroll reveals.",
-            "scroll parallax progress timeline scrolltimeline viewtimeline reveal sticky offset viewport",
-            "ScrollAnimations.razor"),
-        new("View Transitions", "view-transitions", LayoutAndScroll,
-            "The browser View Transitions API driven from C#: cross-fading a whole DOM update rather than one element.",
-            "view transition startviewtransition cross fade page navigation document update",
-            "ViewTransitions.razor"),
-        new("Programmatic", "programmatic", Advanced,
-            "The imperative API: animating by selector or ElementReference, motion values, sequences and playback controls.",
-            "programmatic imperative animate service selector elementreference motion value bmvalue sequence timeline controls pause play stop speed",
-            "Programmatic.razor"),
-        new("Color", "color", Advanced,
-            "Colour interpolation and why the space matters: sRGB against Oklab, LCH and HSL on the same crossfade.",
-            "color colour interpolation srgb oklab lch hsl space mixing gradient crossfade",
-            "ColorSpaces.razor"),
-        new("Motion Path", "motion-path", Advanced,
-            "Moving an element along an SVG path with offsetPath and offsetDistance, and bending a straight move into an arc.",
-            "motion path offsetpath offsetdistance svg curve arc trajectory follow",
-            "MotionPath.razor"),
-        new("CSS Props", "css-props", Advanced,
-            "Animating properties with no dedicated argument: arbitrary CSS through Css, and CSS custom properties through CssVars.",
-            "css custom properties variables cssvars arbitrary property backdrop filter escape hatch",
-            "CssProps.razor"),
-        new("Accessibility", "accessibility", Guides,
-            "prefers-reduced-motion policies, what reduced motion keeps animating, global speed control, and the live engine inspector.",
-            "accessibility a11y reduced motion prefers-reduced-motion diagnostics inspector speed reducemotion policy",
-            "Accessibility.razor"),
-        new("MCP Server", "mcp-server", Guides,
-            "The demo's Model Context Protocol server: the tools, prompts and resources that let an AI agent write correct Bmotion code.",
-            "mcp model context protocol ai agent llm tools prompts resources claude cursor copilot server integration",
-            "McpServerPage.razor"),
-    ];
-
-    /// <summary>
-    /// The pages a reader navigates between: everything in <see cref="All"/> except the landing
-    /// page, which is not a document and is reached from the header instead.
-    /// </summary>
-    public static readonly NavItem[] Docs = [.. All.Where(item => item.Href.Length > 0)];
-
-    /// <summary>
-    /// <see cref="Docs"/> in groups, in reading order. Both the order of the groups and the order
-    /// within them come from the order of <see cref="All"/>, so re-filing a page is a one-line
-    /// edit above and nothing here has to be kept in step with it.
-    /// </summary>
-    public static readonly (string Category, string Icon, NavItem[] Items)[] Groups =
-    [
-        .. Docs.GroupBy(item => item.Category)
-               .Select(group => (group.Key, CategoryIcon(group.Key), group.ToArray()))
-    ];
-
-    /// <summary>The entry for a route, or null when the route is not a demo page.</summary>
-    public static NavItem? ByHref(string href)
-        => Array.Find(All, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase));
-
-    /// <summary>
-    /// The pages either side of <paramref name="href"/> in reading order, for the pager at the
-    /// foot of every page. Both are null for a route that is not a demo page - the error and
-    /// not-found pages, which are not part of the sequence and have nowhere to go next.
-    /// </summary>
-    public static (NavItem? Previous, NavItem? Next) Neighbours(string href)
-    {
-        var index = Array.FindIndex(Docs, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase));
-        if (index < 0) return (null, null);
-
-        return (index > 0 ? Docs[index - 1] : null,
-                index < Docs.Length - 1 ? Docs[index + 1] : null);
-    }
-
-    /// <summary>
-    /// Whether this page answers to <paramref name="term"/>. Keywords are matched as well as the
-    /// title and the category: a reader searching for "hover" or "stagger" is naming the feature,
-    /// not the page it happens to live on, and every entry carries the terms it covers.
-    /// </summary>
-    public bool Matches(string term)
-        => Title.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Category.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Keywords.Contains(term, StringComparison.OrdinalIgnoreCase)
-        || Description.Contains(term, StringComparison.OrdinalIgnoreCase);
-
-    // The one place a group is tied to a picture. Kept as a switch rather than as a field on the
-    // record so the entries above stay a list of prose, and so two pages in the same group cannot
-    // be given two different icons.
-    private static string CategoryIcon(string category) => category switch
-    {
-        GettingStarted => Icons.Play,
-        Motion => Icons.Pulse,
-        Interaction => Icons.Pointer,
-        Orchestration => Icons.Layers,
-        LayoutAndScroll => Icons.Layout,
-        Advanced => Icons.Controls,
-        Guides => Icons.Book,
-        _ => Icons.Book,
-    };
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/NotFoundContent.razor b/src/Utilities/Bmotion/Demo/Client/Shared/NotFoundContent.razor
deleted file mode 100644
index 47f36564be9..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/NotFoundContent.razor
+++ /dev/null
@@ -1,21 +0,0 @@
-@* Rendered by NotFoundPage, which covers both a deep link the server could not route and
-   client-side navigation to an unknown route (via the router's NotFoundPage parameter). *@
-
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">404</span>
-
-    <h1>This page does not exist</h1>
-
-    <p>
-        There is nothing at this address. The documentation starts at the basics, and the search
-        in the header will find any page by name or by the feature it covers.
-    </p>
-
-    <div class="hero-actions">
-        <a class="btn-primary" href="/basic">
-            Read the docs
-            <Icon Path="@Icons.ArrowRight" />
-        </a>
-        <a class="btn-secondary" href="/">Back to home</a>
-    </div>
-</div>
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/SideRail.razor b/src/Utilities/Bmotion/Demo/Client/Shared/SideRail.razor
deleted file mode 100644
index 511c5661bbe..00000000000
--- a/src/Utilities/Bmotion/Demo/Client/Shared/SideRail.razor
+++ /dev/null
@@ -1,119 +0,0 @@
-@inject IJSRuntime JS
-@inject NavigationManager Nav
-@implements IAsyncDisposable
-
-@* The "on this page" rail. It is built from the section headings found in the rendered page rather
-   than from a list each page has to maintain, so a page gets its entries by having sections. That
-   makes it empty until after the first render; the <nav> is rendered regardless to hold the column
-   open - dropping it would let the content column stretch and then snap back a frame later - but
-   its label and entries only appear once there is something to label. *@
-
-<nav class="side-rail" aria-label="On this page">
-    @if (_items.Length > 0)
-    {
-        <p class="side-rail-title">On this page</p>
-        <ul class="side-rail-list">
-            @foreach (var item in _items)
-            {
-                var isActive = item.Id == _activeId;
-                <li class="@(isActive ? "active" : null)">
-                    <a href="@($"#{item.Id}")" aria-current="@(isActive ? "location" : null)"
-                       @onclick="() => ScrollTo(item.Id)" @onclick:preventDefault>
-                        @item.Title
-                    </a>
-                </li>
-            }
-        </ul>
-    }
-</nav>
-
-@code {
-    /// <summary>One rail entry: the id of the heading it points at and the text shown for it.</summary>
-    public sealed record RailItem(string Id, string Title);
-
-    private RailItem[] _items = [];
-    private string? _activeId;
-    private bool _needsRefresh = true;
-    private DotNetObjectReference<SideRail>? _selfRef;
-
-    protected override void OnInitialized() => Nav.LocationChanged += OnLocationChanged;
-
-    // The headings of the page just navigated away from are gone, so the rail is emptied here and
-    // rebuilt from the new page's markup on the render that follows.
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        _items = [];
-        _activeId = null;
-        _needsRefresh = true;
-        StateHasChanged();
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (_needsRefresh is false) return;
-
-        _needsRefresh = false;
-
-        try
-        {
-            _selfRef ??= DotNetObjectReference.Create(this);
-
-            // The heading anchors are hung by the same pass that collects the rail's entries, so
-            // the icon has to travel out to it. Handing it over keeps Shared/Icons.cs the one
-            // place the site's icons are drawn, rather than leaving a second copy of the path
-            // data in a script that nothing would ever update alongside it.
-            var items = await JS.InvokeAsync<RailItem[]>("bmCollectSections", Icons.Link);
-            if (items.Length == 0) return;
-
-            _items = items;
-            await JS.InvokeVoidAsync("bmObserveSections", _selfRef, items.Select(i => i.Id));
-            StateHasChanged();
-        }
-        catch
-        {
-            // Prerendering has no DOM to read and no JS runtime to read it with, and a browser that
-            // failed to load the script has nothing to collect either. The rail is a shortcut to
-            // content that is already on the page, so in both cases it simply stays empty.
-        }
-    }
-
-    /// <summary>Called by the scroll spy in demo.js as the reader moves between sections.</summary>
-    [JSInvokable]
-    public void SetActiveSection(string? id)
-    {
-        if (_activeId == id) return;
-
-        _activeId = id;
-        StateHasChanged();
-    }
-
-    private async Task ScrollTo(string id)
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("bmScrollToSection", id);
-        }
-        catch
-        {
-            // The entries are real anchors, so the browser's own fragment navigation remains as the
-            // fallback; only the smooth scroll and the header offset are lost.
-        }
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        Nav.LocationChanged -= OnLocationChanged;
-
-        try
-        {
-            await JS.InvokeVoidAsync("bmDisposeSections");
-        }
-        catch
-        {
-            // Disposal races the circuit going away (and never has a JS runtime while prerendering);
-            // the listener it would remove dies with the page either way.
-        }
-
-        _selfRef?.Dispose();
-    }
-}
diff --git a/src/Utilities/Bmotion/Demo/Client/Shared/SyntaxHighlighter.cs b/src/Utilities/Bmotion/Demo/Client/Shared/SyntaxHighlighter.cs
index d18cc859bc4..eabed7acb0f 100644
--- a/src/Utilities/Bmotion/Demo/Client/Shared/SyntaxHighlighter.cs
+++ b/src/Utilities/Bmotion/Demo/Client/Shared/SyntaxHighlighter.cs
@@ -7,7 +7,8 @@ namespace Bit.Bmotion.Demo.Client.Shared;
 /// Produces HTML with <c>&lt;span class="tok-*"&gt;</c> token wrappers (already HTML-encoded)
 /// and wraps the lines that belong to a Bmotion component tag (<c>&lt;Bmotion&gt;</c>,
 /// <c>&lt;BmotionAnimatePresence&gt;</c>, <c>&lt;BmotionConfig&gt;</c>) in a <c>hl-line</c> span so they
-/// stand out among the surrounding markup.
+/// stand out among the surrounding markup. The output goes inside the site kit's <c>pre.bb-code</c>
+/// (see CodeSnippet.razor); the token colours are in wwwroot/demo.css.
 /// It is intentionally pragmatic - it covers the constructs used by the demo snippets rather
 /// than being a fully spec-compliant Razor lexer.
 /// </summary>
@@ -55,15 +56,15 @@ public string Run()
             for (int k = 0; k < lines.Count; k++)
             {
                 var ln = lines[k];
-                // Each line is rendered as its own block-level span. Empty lines get a
-                // zero-width space so they keep their height. Newlines are intentionally
-                // NOT emitted: the block layout provides the line breaks, and a literal
-                // '\n' next to a display:block span would render as an extra blank line.
-                var cls = ln.Hl ? "code-line hl-line" : "code-line";
-                outSb.Append("<span class=\"").Append(cls).Append("\">");
-                if (ln.Sb.Length == 0) outSb.Append("\u200b");
+                // The lines are joined with real newlines: they are what the <pre> breaks on, and
+                // what the copy button site.js hangs on every pre.bb-code reads back out of the
+                // element's text, so a copied snippet keeps its lines. A highlighted line is an
+                // inline-block wrapper (.hl-line in demo.css) rather than a block, so the newline
+                // after it ends its line instead of adding a blank one. An empty line has nothing to
+                // highlight and is left bare.
+                if (k > 0) outSb.Append('\n');
+                if (ln.Hl && ln.Sb.Length > 0) outSb.Append("<span class=\"hl-line\">").Append(ln.Sb).Append("</span>");
                 else outSb.Append(ln.Sb);
-                outSb.Append("</span>");
             }
             return outSb.ToString();
         }
diff --git a/src/Utilities/Bmotion/Demo/Server/Bit.Bmotion.Demo.Server.csproj b/src/Utilities/Bmotion/Demo/Server/Bit.Bmotion.Demo.Server.csproj
index 80404b9aa2c..cdbfb52f337 100644
--- a/src/Utilities/Bmotion/Demo/Server/Bit.Bmotion.Demo.Server.csproj
+++ b/src/Utilities/Bmotion/Demo/Server/Bit.Bmotion.Demo.Server.csproj
@@ -30,9 +30,12 @@
   <ItemGroup>
     <EmbeddedResource Include="..\..\README.md" LogicalName="BmotionDocs/README.md" />
 
-    <!-- Every demo page, which is also every worked example the tools can point an agent at. -->
-    <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs;..\Client\**\*.css"
-                      Exclude="..\Client\bin\**;..\Client\obj\**">
+    <!-- Every demo page, which is also every worked example the tools can point an agent at, and the
+         client half of the hosting. Layout\ is left out: it is the site chrome every Utilities demo
+         shares - the header, the docs shell, the search palette and the footer - and says nothing
+         about animation, so an agent searching the sources must not be handed it as an example. -->
+    <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
+                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**">
       <LogicalName>BmotionSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
     </EmbeddedResource>
 
diff --git a/src/Utilities/Bmotion/Demo/Server/Components/App.razor b/src/Utilities/Bmotion/Demo/Server/Components/App.razor
index f009c07758f..68a06c3f16d 100644
--- a/src/Utilities/Bmotion/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bmotion/Demo/Server/Components/App.razor
@@ -2,19 +2,14 @@
 <html lang="en">
 
 <head>
-    <base href="/" />
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#FFFFFF" />
+    <base href="/" />
     @* No static <title> here: every page supplies its own through <PageTitle>, and with
        prerendering the HeadOutlet emits a real <title> element into this head. A second,
        earlier one would win in the served HTML (browsers and crawlers take the first). *@
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Bit.Bmotion - a Blazor-native animation library inspired by Framer Motion: springs, gestures, variants, drag, layout and scroll animations, with all of the maths in C#." />
-    <meta name="color-scheme" content="light dark" />
-    @* Painted behind the browser's own chrome on the platforms that colour it. Two declarations,
-       one per scheme, so the bar matches the theme the page is actually in - the values are the
-       --bm-clr-bg-1 of each theme in theme.css, which a meta tag cannot read a variable for. *@
-    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#1F1F1F" media="(prefers-color-scheme: dark)" />
 
     @* What a link to the site looks like when it is shared. *@
     <meta property="og:type" content="website" />
@@ -23,29 +18,21 @@
     <meta property="og:description" content="Springs, gestures, layout animations and variants for Blazor. All of the maths in C#, none of the JavaScript wiring, and no animation library shipped alongside it." />
     <meta name="twitter:card" content="summary" />
 
+    <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. *@
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* The library's stylesheet. It plays the prerendered enter animations (BmPrerenderMode.Animate,
+       set in AddDemoServices): without it an element prerendered that way is simply served at rest. *@
+    <link rel="stylesheet" href="@Assets["_content/Bit.Bmotion/bit-bmotion.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Bmotion.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
+    <ImportMap />
     <link rel="icon" href="favicon.ico" type="image/x-icon" />
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
-    <link rel="stylesheet" href="css/theme.css" />
-    <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="css/motion-samples.css" />
-    @* Plays the prerendered enter animations (BmPrerenderMode.Animate, set in AddDemoServices). *@
-    <link rel="stylesheet" href="_content/Bit.Bmotion/bit-bmotion.css" />
-
-    @* The theme is applied here, in the head, rather than from js/demo.js at the end of the body:
-       the stylesheets key off the data-theme attribute, and setting it after the first paint would
-       show the reader a flash of the other theme. This is the same decision js/demo.js makes for
-       the app's lifetime - see window.bmTheme there - kept short enough to inline. *@
-    <script>
-        (function () {
-            var stored = null;
-            try { stored = localStorage.getItem('bm-theme'); } catch (e) { /* no stored preference */ }
-            var theme = (stored === 'light' || stored === 'dark')
-                ? stored
-                : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-            document.documentElement.setAttribute('data-theme', theme);
-        })();
-    </script>
-
     @* Same render mode as the app itself, so <PageTitle> keeps working after hydration. *@
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
 </head>
@@ -55,19 +42,19 @@
        during the prerender pass, so Bit.Bmotion (in BmPrerenderMode.Animate) serves each element at
        rest with its enter animation compiled to CSS - it plays as soon as the HTML arrives, and the
        runtime takes the element over where that animation got to. Gestures and everything else
-       start once the runtime is interactive. See Layout/MainLayout.razor for the
-       RendererInfo-driven hydration hint. *@
+       start once the runtime is interactive, which the shell marks with data-interactive (see
+       Layout/MainLayout.razor). The library's script is not linked here: it is imported on demand
+       the first time an animation runs. *@
     <Routes @rendermode="InteractiveWebAssembly" />
 
-    <div id="blazor-error-ui">
+    <div id="blazor-error-ui" data-nosnippet>
         An unhandled error has occurred.
         <a href="." class="reload">Reload</a>
-        <span class="dismiss">🗙</span>
+        <span class="dismiss">&#128473;</span>
     </div>
 
-    @* Loaded before the Blazor script so the window.bm* helpers exist by the time the app boots. *@
-    <script src="js/demo.js"></script>
-    <script src="_framework/blazor.web.js"></script>
+    <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bmotion/Demo/Server/Controllers/McpController.cs b/src/Utilities/Bmotion/Demo/Server/Controllers/McpController.cs
index 69167a751b5..c665561fbec 100644
--- a/src/Utilities/Bmotion/Demo/Server/Controllers/McpController.cs
+++ b/src/Utilities/Bmotion/Demo/Server/Controllers/McpController.cs
@@ -4,7 +4,6 @@
 using ModelContextProtocol.Server;
 using Bit.Bmotion.Demo.Server.Dtos;
 using Bit.Bmotion.Demo.Server.Services;
-using Bit.Bmotion.Demo.Client.Shared;
 
 namespace Bit.Bmotion.Demo.Server.Controllers;
 
@@ -358,9 +357,9 @@ public BmotionApiDetailsResultDto GetBmotionApiDetails(string typeName)
     // only in that one of them knew what the page was about. That knowledge moved here instead.
     [HttpGet]
     [McpServerTool(Name = nameof(GetBmotionSourceFiles))]
-    [Description("Lists the working Bit.Bmotion source files this server can hand out: every page of the demo site - one per feature area, each a complete working example of the feature it covers - plus the layout, the shared components and the host wiring. Demo pages carry the route they are served at and the terms they cover. Use it to pick the path to pass to GetBmotionSourceFile.")]
+    [Description("Lists the working Bit.Bmotion source files this server can hand out: every page of the demo site - one per feature area, each a complete working example of the feature it covers - plus the client's wiring, its shared components and the host wiring. Demo pages carry the route they are served at and the terms they cover. Use it to pick the path to pass to GetBmotionSourceFile.")]
     public BmotionSourceFileDto[] GetBmotionSourceFiles(
-        [Description("Optional. 'Demo page' for only the feature pages, 'Host' for the server wiring, 'Demo' for the layout and shared components, or any substring of a path, a title or a page's keywords. Omitted, every file is returned.")] string? filter = null)
+        [Description("Optional. 'Demo page' for only the feature pages, 'Host' for the server wiring, 'Demo' for the client's wiring and shared components, or any substring of a path, a title or a page's keywords. Omitted, every file is returned.")] string? filter = null)
     {
         var files = BmotionSourceCatalog.SourceFiles;
 
diff --git a/src/Utilities/Bmotion/Demo/Server/Services/BmotionSearchIndex.cs b/src/Utilities/Bmotion/Demo/Server/Services/BmotionSearchIndex.cs
index 5be11dc31a3..a2b3d6cddf8 100644
--- a/src/Utilities/Bmotion/Demo/Server/Services/BmotionSearchIndex.cs
+++ b/src/Utilities/Bmotion/Demo/Server/Services/BmotionSearchIndex.cs
@@ -1,6 +1,6 @@
 using System.Text;
 using Bit.Bmotion.Demo.Server.Dtos;
-using Bit.Bmotion.Demo.Client.Shared;
+using Bit.Bmotion.Demo.Client;
 
 namespace Bit.Bmotion.Demo.Server.Services;
 
@@ -298,10 +298,10 @@ private static async Task<Entry[]> BuildAsync()
                 "GetBmotionEasings()", easing.Feel, $"{easing.Direction} {easing.Family}"));
         }
 
-        foreach (var page in NavItem.All)
+        foreach (var page in DocsCatalog.AllPages)
         {
             entries.Add(new Entry("Demo page", page.Title, "Live example",
-                $"GetBmotionSourceFile(path: \"{page.SourcePath}\")", page.Description, page.Keywords));
+                $"GetBmotionSourceFile(path: \"{BmotionSourceCatalog.SourcePathOf(page)}\")", page.Description, page.Keywords));
         }
 
         foreach (var file in BmotionSourceCatalog.SourceFiles)
diff --git a/src/Utilities/Bmotion/Demo/Server/Services/BmotionSourceCatalog.cs b/src/Utilities/Bmotion/Demo/Server/Services/BmotionSourceCatalog.cs
index 68b0399d560..a91df6d9274 100644
--- a/src/Utilities/Bmotion/Demo/Server/Services/BmotionSourceCatalog.cs
+++ b/src/Utilities/Bmotion/Demo/Server/Services/BmotionSourceCatalog.cs
@@ -2,7 +2,7 @@
 using System.Reflection;
 using System.Collections.Frozen;
 using Bit.Bmotion.Demo.Server.Dtos;
-using Bit.Bmotion.Demo.Client.Shared;
+using Bit.Bmotion.Demo.Client;
 using System.Text.RegularExpressions;
 
 namespace Bit.Bmotion.Demo.Server.Services;
@@ -83,6 +83,22 @@ public static partial class BmotionSourceCatalog
         return start < 0 ? null : string.Join('\n', lines[start..]).TrimEnd();
     }
 
+    /// <summary>
+    /// The path a demo page's source is handed out under - its component type's namespace below the
+    /// client assembly's root, one folder a segment, the way Razor names a component after its folder.
+    /// </summary>
+    public static string SourcePathOf(DocsPageInfo page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var type = page.PageType.FullName!;
+        var relative = type.StartsWith(root + ".", StringComparison.Ordinal) ? type[(root.Length + 1)..] : page.PageType.Name;
+
+        return $"Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+
+    /// <summary>A demo page's route as the listing reports it: the address without its leading slash.</summary>
+    public static string SlugOf(DocsPageInfo page) => page.Url.Trim('/');
+
     /// <summary>The content of an embedded source file, or null when the path is unknown.</summary>
     public static string? GetSourceFile(string path)
     {
@@ -185,13 +201,13 @@ private static FrozenDictionary<string, string> BuildSourceFiles()
 
     private static BmotionSourceFileDto[] BuildSourceFileList()
     {
-        // A demo page describes itself in the navigation, in a sentence written to say what the page
-        // demonstrates. Scraping the file for a description instead - which is all DescribeSource can
-        // do for the files that have no nav entry - reached whatever comment came first, and for a
-        // page that is usually a nested record's doc comment or the <PageTitle>. "Drag - Bit.Bmotion"
-        // and "A shuffled tile: its label and which of the palette's five tones it uses" are not
-        // descriptions of a file anyone would choose to open.
-        var pages = NavItem.All.ToDictionary(page => Normalize(page.SourcePath), StringComparer.OrdinalIgnoreCase);
+        // A demo page describes itself in the docs catalog (Demo/Client/DocsCatalog.cs), in a sentence
+        // written to say what the page demonstrates. Scraping the file for a description instead - which
+        // is all DescribeSource can do for the files that have no catalog entry - reached whatever
+        // comment came first, and for a page that is usually a nested record's doc comment or the
+        // <PageTitle>. "Drag · Bmotion" and "A shuffled tile: its label and which of the palette's five
+        // tones it uses" are not descriptions of a file anyone would choose to open.
+        var pages = DocsCatalog.AllPages.ToDictionary(page => Normalize(SourcePathOf(page)), StringComparer.OrdinalIgnoreCase);
 
         return [.. _sourceFiles.Value
             .Select(file =>
@@ -207,7 +223,7 @@ private static BmotionSourceFileDto[] BuildSourceFileList()
                     Description = page?.Description ?? DescribeSource(file.Value),
                     Lines = CountLines(file.Value),
                     Title = page?.Title,
-                    Slug = page?.Href,
+                    Slug = page is null ? null : SlugOf(page),
                     Keywords = page?.Keywords
                 };
             })
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/app.css b/src/Utilities/Bmotion/Demo/Server/wwwroot/app.css
new file mode 100644
index 00000000000..7b51a42ea90
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Server/wwwroot/app.css
@@ -0,0 +1,2820 @@
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/css/app.css b/src/Utilities/Bmotion/Demo/Server/wwwroot/css/app.css
deleted file mode 100644
index 3c14e09e376..00000000000
--- a/src/Utilities/Bmotion/Demo/Server/wwwroot/css/app.css
+++ /dev/null
@@ -1,2017 +0,0 @@
-/* Bit.Bmotion Demo - base and site chrome.
-
-   The docs shell: the skip link, the header, the command palette, the navigation panel, the
-   reading column with its breadcrumb and pager, the "on this page" rail, the footer and the
-   landing page. Page-level styles - sections, cards, code boxes, the sample chrome - live in
-   motion-samples.css.
-
-   Everything here is written by hand against the Fluent 2 tokens in theme.css rather than built
-   from a component library, because the demo carries no dependency other than Bit.Bmotion itself:
-   that is the promise the library makes, and a docs site that had to install a design system to
-   demonstrate it would be arguing against its own point.
-
-   Two rules hold the file together:
-
-     * No raw values. A colour, a radius, a duration or a step of spacing comes from a token, so
-       the whole site re-themes from one file and nothing can drift.
-     * Chrome only. Nothing in here reaches inside .demo-card. What happens on a stage belongs to
-       the animation being demonstrated, and the shell must never be the reason a sample moves. */
-
-/* ── Base ──────────────────────────────────────────────────────────────────── */
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-* {
-    -webkit-text-size-adjust: none;
-    -webkit-font-smoothing: antialiased;
-    -webkit-tap-highlight-color: transparent;
-}
-
-html {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    scroll-behavior: smooth;
-    /* Anything the browser scrolls to - a fragment link, a control receiving focus - has to land
-       below the sticky header rather than under it. WCAG 2.2 "Focus Not Obscured (Minimum)". */
-    scroll-padding-top: calc(var(--bm-layout-header) + var(--bm-layout-header-gap));
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-}
-
-body {
-    width: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: var(--bm-fnt-family-base);
-    font-size: var(--bm-fnt-size-400);
-    line-height: var(--bm-fnt-line-prose);
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-3);
-}
-
-code, kbd, pre, samp {
-    font-family: var(--bm-fnt-family-mono);
-}
-
-h1, h2, h3, h4, h5, h6, p {
-    margin: 0;
-}
-
-h1, h2, h3, h4 {
-    font-family: var(--bm-fnt-family-display);
-    /* Fluent 2 sets its display sizes tight and slightly negative-tracked; the ramp only reads as
-       a ramp if the headings keep that treatment while the prose below them does not. */
-    letter-spacing: -0.01em;
-    text-wrap: balance;
-}
-
-a {
-    color: var(--bm-clr-brand-fg);
-    text-underline-offset: 0.125em;
-}
-
-a:hover {
-    color: var(--bm-clr-brand-fg-hover);
-}
-
-a:active {
-    color: var(--bm-clr-brand-fg-pressed);
-}
-
-code {
-    color: var(--bm-clr-fg-1);
-}
-
-img, svg {
-    max-width: 100%;
-}
-
-/* Icons. One set, stroked at Fluent's regular weight and drawn in the colour of whatever it sits
-   inside, so an icon never has to be re-coloured for a theme, a hover state or a surface. The
-   geometry is authored in Shared/Icons.cs and rendered by Shared/Icon.razor; every rule that sizes
-   an icon below sets only its width and height and leaves the paint here. */
-svg.icon {
-    flex: none;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-/* Scoped to the docs chrome on purpose: a scrollbar inside .demo-card belongs to the sample being
-   demonstrated and should look like whatever that sample renders. */
-html, body, .site-content, .nav-panel, .side-rail, .palette-results, pre {
-    scrollbar-width: thin;
-    scrollbar-color: var(--bm-clr-stroke-1) transparent;
-}
-
-h1:focus, h2:focus {
-    outline: none;
-}
-
-/* Fluent 2's focus indicator: a solid two-pixel stroke in the theme's highest-contrast neutral,
-   held one step off the control so it never sits on top of the control's own border. Declared
-   once, for every focusable thing in the chrome. A sample's own focus ring is left alone - inside
-   a stage the ring belongs to whatever is being demonstrated, and a second outline over it would
-   show readers something the sample does not actually render. */
-h1:focus-visible,
-h2:focus-visible,
-.skip-link:focus-visible,
-.app-header a:focus-visible,
-.app-header button:focus-visible,
-.nav-panel a:focus-visible,
-.nav-panel button:focus-visible,
-.nav-panel input:focus-visible,
-.side-rail a:focus-visible,
-.doc-breadcrumb a:focus-visible,
-.doc-pager a:focus-visible,
-.footer a:focus-visible,
-.footer button:focus-visible,
-.homepage a:focus-visible,
-.homepage button:focus-visible,
-.palette a:focus-visible,
-.palette button:focus-visible,
-.error-page a:focus-visible {
-    outline: var(--bm-strk-thick) solid var(--bm-clr-stroke-focus);
-    outline-offset: var(--bm-strk-thick);
-    border-radius: var(--bm-crn-medium);
-}
-
-/* ── Skip link ─────────────────────────────────────────────────────────────── */
-
-/* The nav panel puts twenty-odd links between the top of the document and the first word of the
-   page. This is the way past them for anyone driving the site from the keyboard. */
-.skip-link {
-    position: fixed;
-    z-index: 2000;
-    top: var(--bm-sp-s);
-    inset-inline-start: var(--bm-sp-s);
-    padding: var(--bm-sp-s) var(--bm-sp-l);
-    font-size: var(--bm-fnt-size-300);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-300);
-    text-decoration: none;
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-1);
-    border-radius: var(--bm-crn-medium);
-    box-shadow: var(--bm-shdw-16);
-    transform: translateY(-200%);
-}
-
-.skip-link:focus-visible {
-    transform: translateY(0);
-}
-
-/* ── Shell ─────────────────────────────────────────────────────────────────── */
-
-.app-shell {
-    width: 100%;
-    min-height: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-}
-
-.layout-row {
-    flex: 1 1 auto;
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    min-height: 0;
-}
-
-.site-content {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    background-color: var(--bm-clr-bg-3);
-}
-
-/* The reading column and the "on this page" rail sit side by side; min-width:0 is what lets a wide
-   example or a long code line scroll inside the column instead of stretching it and pushing the
-   rail off screen. */
-.page-row {
-    width: 100%;
-    flex: 1 1 auto;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: var(--bm-sp-xxl);
-    margin: 0 auto;
-    max-width: calc(var(--bm-layout-max) - var(--bm-layout-nav));
-    padding-inline: var(--bm-sp-xxxl);
-}
-
-.page-container {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: 100%;
-    max-width: var(--bm-layout-content);
-    padding: var(--bm-sp-4xl) 0 var(--bm-sp-6xl);
-}
-
-@media (max-width: 63.9375rem) {
-    .page-row {
-        padding-inline: var(--bm-sp-xxl);
-    }
-
-    .page-container {
-        padding: var(--bm-sp-xxxl) 0 var(--bm-sp-5xl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .page-row {
-        padding-inline: var(--bm-sp-l);
-    }
-
-    .page-container {
-        padding: var(--bm-sp-xxl) 0 var(--bm-sp-4xl);
-    }
-}
-
-/* ── Header ────────────────────────────────────────────────────────────────── */
-
-/* Fluent's acrylic, near enough: the header is a translucent pane over whatever is scrolling
-   underneath it, and it grows a shadow the moment there is something underneath it to lift away
-   from (js/demo.js sets data-scrolled). */
-.app-header {
-    top: 0;
-    z-index: 1000;
-    width: 100%;
-    position: sticky;
-    backdrop-filter: blur(1.25rem) saturate(1.6);
-    -webkit-backdrop-filter: blur(1.25rem) saturate(1.6);
-    background-color: color-mix(in srgb, var(--bm-clr-bg-1) 85%, transparent);
-    border-bottom: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    transition: box-shadow var(--bm-dur-normal) var(--bm-crv-easy-ease);
-}
-
-.app-header[data-scrolled="true"] {
-    box-shadow: var(--bm-shdw-4);
-}
-
-/* A browser without backdrop-filter would show the page scrolling through the bar. Paint it. */
-@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    .app-header {
-        background-color: var(--bm-clr-bg-1);
-    }
-}
-
-.app-header-inner {
-    gap: var(--bm-sp-s);
-    display: flex;
-    flex-wrap: nowrap;
-    margin-inline: auto;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--bm-layout-header);
-    max-width: var(--bm-layout-max);
-    padding-inline: var(--bm-sp-xl);
-}
-
-.header-start,
-.header-end {
-    display: flex;
-    flex: 0 1 auto;
-    min-width: 0;
-    align-items: center;
-}
-
-.header-start {
-    gap: var(--bm-sp-xs);
-}
-
-.header-end {
-    gap: var(--bm-sp-xs);
-    flex-shrink: 0;
-}
-
-/* The mark and the library's name, as one link. The name is set in the brand colour so the bar
-   states which of the bit sites this is - the mark alone is shared with all of them. */
-.header-brand {
-    gap: var(--bm-sp-mnudge);
-    display: flex;
-    flex: none;
-    align-items: center;
-    text-decoration: none;
-    padding: var(--bm-sp-xs) var(--bm-sp-s);
-    margin-inline-end: var(--bm-sp-m);
-    border-radius: var(--bm-crn-medium);
-}
-
-.header-brand .logo {
-    flex: none;
-    width: 1.75rem;
-    height: 1.75rem;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.header-brand .wordmark {
-    flex: none;
-    font-family: var(--bm-fnt-family-display);
-    font-size: var(--bm-fnt-size-500);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-500);
-    letter-spacing: -0.02em;
-    color: var(--bm-clr-fg-1);
-}
-
-.header-brand:hover .wordmark {
-    color: var(--bm-clr-brand-fg);
-}
-
-/* The release the docs describe, next to the name that describes it. */
-.header-version {
-    flex: none;
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    padding: var(--bm-sp-xxs) var(--bm-sp-snudge);
-    color: var(--bm-clr-brand-fg);
-    background-color: var(--bm-clr-brand-wash);
-    border-radius: var(--bm-crn-circular);
-}
-
-@media (max-width: 35.9375rem) {
-    .header-version {
-        display: none;
-    }
-}
-
-.header-links {
-    gap: var(--bm-sp-xxs);
-    display: flex;
-    align-items: center;
-}
-
-/* Fluent's tab treatment: the label carries the state, and a rounded indicator under the selected
-   one says where you are without a second colour or a box. */
-.header-links .link {
-    position: relative;
-    display: flex;
-    cursor: pointer;
-    white-space: nowrap;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bm-fnt-size-300);
-    font-weight: var(--bm-fnt-weight-medium);
-    line-height: var(--bm-fnt-line-300);
-    padding: var(--bm-sp-s) var(--bm-sp-m);
-    color: var(--bm-clr-fg-2);
-    border-radius: var(--bm-crn-medium);
-    transition: color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                background-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.header-links .link:hover {
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-.header-links .link:active {
-    background-color: var(--bm-clr-bg-1-pressed);
-}
-
-.header-links .link.active {
-    color: var(--bm-clr-fg-1);
-    font-weight: var(--bm-fnt-weight-semibold);
-}
-
-.header-links .link.active::after {
-    content: '';
-    left: var(--bm-sp-m);
-    right: var(--bm-sp-m);
-    bottom: calc(var(--bm-sp-s) * -1);
-    height: var(--bm-strk-thicker);
-    position: absolute;
-    background-color: var(--bm-clr-brand-stroke);
-    border-radius: var(--bm-crn-circular);
-}
-
-@media (max-width: 47.9375rem) {
-    .header-links {
-        display: none;
-    }
-}
-
-/* The command palette's handle. It states its own shortcut, because a shortcut nobody can see is
-   a shortcut nobody uses. */
-.header-search {
-    gap: var(--bm-sp-s);
-    display: flex;
-    flex: 0 1 15rem;
-    min-width: 0;
-    cursor: pointer;
-    text-align: start;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-300);
-    height: 2rem;
-    padding: 0 var(--bm-sp-s) 0 var(--bm-sp-mnudge);
-    margin-inline-end: var(--bm-sp-s);
-    color: var(--bm-clr-fg-3);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-1);
-    border-bottom-color: var(--bm-clr-stroke-accessible);
-    border-radius: var(--bm-crn-medium);
-    transition: border-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                background-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.header-search:hover:not(:disabled) {
-    color: var(--bm-clr-fg-2);
-    border-color: var(--bm-clr-stroke-accessible);
-}
-
-.header-search:disabled {
-    cursor: default;
-    color: var(--bm-clr-fg-disabled);
-    background-color: var(--bm-clr-bg-disabled);
-}
-
-.header-search .search-label {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.header-search svg {
-    flex: none;
-    width: 1rem;
-    height: 1rem;
-}
-
-/* A keycap, Fluent-style: the neutral surface one step up from the control it sits in. */
-.kbd {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bm-sp-xxs);
-    font-family: var(--bm-fnt-family-base);
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-200);
-    padding: var(--bm-sp-xxs) var(--bm-sp-xs);
-    color: var(--bm-clr-fg-3);
-    background-color: var(--bm-clr-bg-4);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-small);
-}
-
-@media (max-width: 63.9375rem) {
-    .header-search {
-        flex: none;
-        width: 2rem;
-        padding: 0;
-        justify-content: center;
-    }
-
-    .header-search .search-label,
-    .header-search .kbd {
-        display: none;
-    }
-}
-
-/* Fluent's subtle icon button: no border and no fill until it is pointed at. */
-.icon-btn {
-    padding: 0;
-    flex: none;
-    width: 2rem;
-    height: 2rem;
-    cursor: pointer;
-    display: flex;
-    border: none;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    color: var(--bm-clr-fg-2);
-    border-radius: var(--bm-crn-medium);
-    transition: background-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.icon-btn:hover {
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-.icon-btn:active {
-    background-color: var(--bm-clr-bg-1-pressed);
-}
-
-.icon-btn:disabled {
-    cursor: default;
-    color: var(--bm-clr-fg-disabled);
-    background-color: transparent;
-}
-
-.icon-btn svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-/* The two theme buttons are exact complements, so exactly one of the pair is visible in every
-   possible state - including the prerendered document, which carries no data-theme attribute
-   yet, and would otherwise show both or neither. */
-:root[data-theme$='dark'] .light-theme {
-    display: none;
-}
-
-:root:not([data-theme$='dark']) .dark-theme {
-    display: none;
-}
-
-:root[data-theme$='dark'] .logo,
-:root[data-theme$='dark'] .footer .bit-logo {
-    background-image: url('../images/bit-logo-dark.svg');
-}
-
-:root:not([data-theme$='dark']) .logo,
-:root:not([data-theme$='dark']) .footer .bit-logo {
-    background-image: url('../images/bit-logo-light.svg');
-}
-
-/* The nav drawer's handle. It only exists at the widths where the panel is a drawer. */
-.menu-btn {
-    display: none;
-    margin-inline-end: var(--bm-sp-xs);
-}
-
-@media (max-width: 63.9375rem) {
-    .menu-btn {
-        display: flex;
-    }
-}
-
-@media (max-width: 29.9375rem) {
-    .app-header-inner {
-        padding-inline: var(--bm-sp-s);
-    }
-}
-
-/* The narrowest phones have room for the mark, the search and the two controls, but not for the
-   name as well. The mark carries the identity there, and nowhere wider - a header that does not
-   say which site it is has given up the one job it cannot delegate. */
-@media (max-width: 22.5rem) {
-    .header-brand .wordmark {
-        display: none;
-    }
-}
-
-/* Hydration hint - rendered by MainLayout only while RendererInfo.IsInteractive is false, i.e. on
-   the prerendered HTML the server sends before the WebAssembly runtime boots. */
-.hydrating {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bm-sp-snudge);
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-200);
-    white-space: nowrap;
-    padding-inline: var(--bm-sp-s);
-    color: var(--bm-clr-fg-3);
-}
-
-.hydrating i {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: var(--bm-crn-circular);
-    background-color: var(--bm-clr-brand-bg);
-    animation: bm-hydrating-pulse 1s var(--bm-crv-easy-ease) infinite;
-}
-
-@keyframes bm-hydrating-pulse {
-    0%, 100% { opacity: 0.25; }
-    50% { opacity: 1; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .hydrating i {
-        animation: none;
-    }
-}
-
-@media (max-width: 35.9375rem) {
-    .hydrating span {
-        display: none;
-    }
-}
-
-/* ── Command palette ───────────────────────────────────────────────────────── */
-
-/* Every page of the docs, one keystroke away. It is the same NavItem list the nav panel renders,
-   so a page is searchable here for having a nav entry rather than for being added to a second
-   index that could fall behind it. */
-.palette-backdrop {
-    inset: 0;
-    z-index: 1900;
-    position: fixed;
-    background-color: var(--bm-clr-bg-overlay);
-    animation: bm-fade-in var(--bm-dur-fast) var(--bm-crv-decelerate-mid);
-}
-
-.palette {
-    top: 12vh;
-    left: 50%;
-    z-index: 2000;
-    position: fixed;
-    width: min(40rem, calc(100vw - 2rem));
-    max-height: min(28rem, 70vh);
-    display: flex;
-    flex-flow: column nowrap;
-    overflow: hidden;
-    transform: translateX(-50%);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-xlarge);
-    box-shadow: var(--bm-shdw-64);
-    animation: bm-palette-in var(--bm-dur-normal) var(--bm-crv-decelerate-mid);
-}
-
-@keyframes bm-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@keyframes bm-palette-in {
-    from { opacity: 0; transform: translate(-50%, -0.75rem) scale(0.98); }
-    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .palette-backdrop,
-    .palette {
-        animation: none;
-    }
-}
-
-.palette-field {
-    gap: var(--bm-sp-m);
-    display: flex;
-    flex: none;
-    align-items: center;
-    padding: var(--bm-sp-l) var(--bm-sp-xl);
-    border-bottom: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.palette-field svg {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--bm-clr-fg-3);
-}
-
-.palette-field input {
-    flex: 1 1 auto;
-    min-width: 0;
-    border: none;
-    outline: none;
-    background: none;
-    font-family: inherit;
-    font-size: var(--bm-fnt-size-500);
-    line-height: var(--bm-fnt-line-500);
-    color: var(--bm-clr-fg-1);
-}
-
-.palette-field input::placeholder {
-    color: var(--bm-clr-fg-3);
-}
-
-.palette-results {
-    flex: 1 1 auto;
-    min-height: 0;
-    margin: 0;
-    padding: var(--bm-sp-s);
-    list-style: none;
-    overflow: hidden auto;
-}
-
-.palette-group {
-    gap: var(--bm-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bm-clr-fg-3);
-    padding: var(--bm-sp-m) var(--bm-sp-m) var(--bm-sp-xs);
-}
-
-.palette-group svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.palette-item a {
-    display: block;
-    cursor: pointer;
-    text-decoration: none;
-    padding: var(--bm-sp-s) var(--bm-sp-m);
-    border-radius: var(--bm-crn-medium);
-    color: var(--bm-clr-fg-1);
-}
-
-.palette-item a:hover {
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-/* The keyboard's selection, which is a different thing from the pointer's hover: it has to be
-   visible without a pointer anywhere near it. */
-.palette-item.active a {
-    background-color: var(--bm-clr-brand-wash);
-    box-shadow: inset var(--bm-strk-thicker) 0 0 var(--bm-clr-brand-stroke);
-}
-
-.palette-item .palette-title {
-    display: block;
-    font-size: var(--bm-fnt-size-300);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-300);
-    color: var(--bm-clr-fg-1);
-}
-
-.palette-item .palette-desc {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-300);
-    color: var(--bm-clr-fg-3);
-}
-
-.palette-empty {
-    padding: var(--bm-sp-4xl) var(--bm-sp-xl);
-    text-align: center;
-    font-size: var(--bm-fnt-size-300);
-    color: var(--bm-clr-fg-3);
-}
-
-.palette-footer {
-    gap: var(--bm-sp-l);
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: var(--bm-sp-s) var(--bm-sp-xl);
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-200);
-    color: var(--bm-clr-fg-3);
-    background-color: var(--bm-clr-bg-2);
-    border-top: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.palette-footer span {
-    gap: var(--bm-sp-xs);
-    display: inline-flex;
-    align-items: center;
-}
-
-@media (max-width: 35.9375rem) {
-    .palette-footer {
-        display: none;
-    }
-}
-
-/* ── Nav panel ─────────────────────────────────────────────────────────────── */
-
-.nav-panel {
-    top: var(--bm-layout-header);
-    z-index: 900;
-    flex: 0 0 var(--bm-layout-nav);
-    position: sticky;
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-    padding: var(--bm-sp-l) var(--bm-sp-m) var(--bm-sp-xxxl);
-    scrollbar-width: thin;
-    background-color: var(--bm-clr-bg-1);
-    height: calc(100vh - var(--bm-layout-header));
-    border-inline-end: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.nav-panel-search {
-    position: relative;
-    margin-bottom: var(--bm-sp-l);
-}
-
-.nav-panel-search svg {
-    top: 50%;
-    width: 1rem;
-    height: 1rem;
-    position: absolute;
-    pointer-events: none;
-    inset-inline-start: var(--bm-sp-s);
-    transform: translateY(-50%);
-    color: var(--bm-clr-fg-3);
-}
-
-/* Fluent's input: a hairline box whose bottom edge is drawn in the accessible neutral, so the
-   field reads as a field even at rest, and thickens into the brand colour on focus. */
-.nav-panel-search input {
-    width: 100%;
-    outline: none;
-    height: 2rem;
-    font-family: inherit;
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-300);
-    padding: 0 var(--bm-sp-s) 0 var(--bm-sp-xxl);
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-1);
-    border-bottom-color: var(--bm-clr-stroke-accessible);
-    border-radius: var(--bm-crn-medium);
-    transition: border-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.nav-panel-search input::placeholder {
-    color: var(--bm-clr-fg-3);
-}
-
-.nav-panel-search input:hover {
-    border-color: var(--bm-clr-stroke-accessible);
-}
-
-.nav-panel-search input:focus {
-    border-color: var(--bm-clr-stroke-1);
-    border-bottom-color: var(--bm-clr-brand-stroke);
-    box-shadow: inset 0 -0.0625rem 0 var(--bm-clr-brand-stroke);
-}
-
-.nav-panel-search input:disabled {
-    cursor: default;
-    color: var(--bm-clr-fg-disabled);
-    background-color: var(--bm-clr-bg-disabled);
-}
-
-/* The index is grouped rather than flat: twenty entries in one run is a list to be read from the
-   top, and the reader almost always wants one of them for a reason - to make something spring, to
-   make something leave, to make something follow the pointer. The groups say which is which. */
-.nav-group {
-    margin-bottom: var(--bm-sp-l);
-}
-
-.nav-group-title {
-    gap: var(--bm-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bm-clr-fg-3);
-    padding: var(--bm-sp-s) var(--bm-sp-m) var(--bm-sp-xs);
-}
-
-.nav-group-title svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.nav-panel-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.nav-panel-list a {
-    gap: var(--bm-sp-s);
-    display: flex;
-    position: relative;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-300);
-    padding: var(--bm-sp-snudge) var(--bm-sp-m);
-    margin-bottom: var(--bm-strk-thick);
-    color: var(--bm-clr-fg-2);
-    border-radius: var(--bm-crn-medium);
-    transition: background-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.nav-panel-list a:hover {
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-.nav-panel-list a:active {
-    background-color: var(--bm-clr-bg-1-pressed);
-}
-
-/* Fluent's selected nav item: a tinted row with a short rounded indicator at the inline start,
-   inset from the row's own edges so it reads as a marker rather than as a border. */
-.nav-panel-list a.active {
-    font-weight: var(--bm-fnt-weight-semibold);
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-.nav-panel-list a.active::before {
-    content: '';
-    top: 20%;
-    bottom: 20%;
-    position: absolute;
-    width: var(--bm-strk-thicker);
-    inset-inline-start: 0;
-    border-radius: var(--bm-crn-circular);
-    background-color: var(--bm-clr-brand-stroke);
-}
-
-.nav-panel-empty {
-    display: block;
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-prose);
-    padding: var(--bm-sp-m);
-    color: var(--bm-clr-fg-3);
-}
-
-/* Below the panel's breakpoint it becomes a drawer over the page, opened from the header's menu
-   button - the same move the "on this page" rail makes into the reader's own scrollbar. */
-.nav-panel-overlay {
-    display: none;
-}
-
-@media (max-width: 63.9375rem) {
-    /* visibility, not just the off-screen transform: a translated drawer is still focusable, so
-       without it the closed panel's search box and every nav link stay in the tab order of the
-       page they are covering. Transitioning it keeps the panel painted for the whole slide out,
-       because visibility only flips to hidden once the transform has finished. */
-    /* It opens below the header rather than over it, so the button that opened it is still on
-       screen and is also the button that closes it. A drawer that covers its own handle leaves
-       the reader guessing at the overlay. */
-    .nav-panel {
-        left: 0;
-        z-index: 1200;
-        position: fixed;
-        top: var(--bm-layout-header);
-        height: calc(100dvh - var(--bm-layout-header));
-        width: min(20rem, 85vw);
-        flex-basis: 0;
-        visibility: hidden;
-        padding-top: var(--bm-sp-xxl);
-        transform: translateX(-100%);
-        box-shadow: var(--bm-shdw-64);
-        transition: transform var(--bm-dur-normal) var(--bm-crv-decelerate-mid),
-                    visibility var(--bm-dur-normal);
-    }
-
-    .nav-panel.open {
-        visibility: visible;
-        transform: translateX(0);
-    }
-
-    .nav-panel-overlay {
-        inset: var(--bm-layout-header) 0 0 0;
-        z-index: 1100;
-        display: block;
-        border: none;
-        padding: 0;
-        position: fixed;
-        background-color: var(--bm-clr-bg-overlay);
-    }
-}
-
-/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
-
-/* Where in the docs this page sits. Worth the line only because the index is grouped: it names
-   the group, which is the piece the page's own title cannot say. */
-.doc-breadcrumb {
-    gap: var(--bm-sp-xs);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bm-sp-m);
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-300);
-    color: var(--bm-clr-fg-3);
-}
-
-.doc-breadcrumb a {
-    text-decoration: none;
-    color: var(--bm-clr-fg-3);
-    padding: var(--bm-sp-xxs) var(--bm-sp-xs);
-    border-radius: var(--bm-crn-small);
-}
-
-.doc-breadcrumb a:hover {
-    color: var(--bm-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.doc-breadcrumb svg {
-    flex: none;
-    width: 0.75rem;
-    height: 0.75rem;
-    color: var(--bm-clr-fg-4);
-}
-
-.doc-breadcrumb .current {
-    color: var(--bm-clr-fg-2);
-    padding: var(--bm-sp-xxs) var(--bm-sp-xs);
-}
-
-/* ── Pager ─────────────────────────────────────────────────────────────────── */
-
-/* The docs are written to be read in order, so the end of a page says what the next one is. It is
-   built from the same NavItem list the panel renders, so the two can never disagree. */
-.doc-pager {
-    gap: var(--bm-sp-l);
-    display: grid;
-    margin-top: var(--bm-sp-4xl);
-    padding-top: var(--bm-sp-xxl);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-top: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.doc-pager a {
-    gap: var(--bm-sp-xxs);
-    display: flex;
-    flex-flow: column nowrap;
-    text-decoration: none;
-    padding: var(--bm-sp-m) var(--bm-sp-l);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-medium);
-    transition: border-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                box-shadow var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.doc-pager a:hover {
-    border-color: var(--bm-clr-brand-stroke);
-    box-shadow: var(--bm-shdw-4);
-}
-
-.doc-pager a.next {
-    grid-column: 2;
-    text-align: end;
-}
-
-.doc-pager .pager-dir {
-    gap: var(--bm-sp-xs);
-    display: flex;
-    align-items: center;
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-200);
-    color: var(--bm-clr-fg-3);
-}
-
-.doc-pager a.next .pager-dir {
-    justify-content: flex-end;
-}
-
-.doc-pager .pager-dir svg {
-    width: 0.75rem;
-    height: 0.75rem;
-}
-
-.doc-pager .pager-title {
-    font-size: var(--bm-fnt-size-400);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-400);
-    color: var(--bm-clr-brand-fg);
-}
-
-@media (max-width: 35.9375rem) {
-    .doc-pager {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .doc-pager a.next {
-        grid-column: 1;
-    }
-}
-
-/* ── "On this page" rail ───────────────────────────────────────────────────── */
-
-/* Navigation, not content, so it only earns its space where there is space to spare. */
-.side-rail {
-    overflow: auto;
-    position: sticky;
-    height: fit-content;
-    flex: 0 0 var(--bm-layout-rail);
-    top: calc(var(--bm-layout-header) + var(--bm-sp-4xl));
-    padding-bottom: var(--bm-sp-xxxl);
-    max-height: calc(100vh - var(--bm-layout-header) - var(--bm-sp-6xl));
-}
-
-.side-rail-title {
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding: var(--bm-sp-xs) var(--bm-sp-m);
-    color: var(--bm-clr-fg-3);
-}
-
-/* The hairline is the rail's spine: it ties the entries together and, being the only rule in the
-   margin, marks the column as secondary without adding another box to the page. */
-.side-rail-list {
-    padding: 0;
-    list-style: none;
-    margin: var(--bm-sp-s) 0 0;
-    border-inline-start: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.side-rail-list li {
-    position: relative;
-    overflow-wrap: anywhere;
-}
-
-.side-rail-list a {
-    display: block;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-300);
-    padding: var(--bm-sp-snudge) var(--bm-sp-m);
-    color: var(--bm-clr-fg-3);
-    transition: color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.side-rail-list a:hover {
-    color: var(--bm-clr-fg-1);
-}
-
-/* The current section: its entry takes the brand colour and some weight, and its stretch of the
-   spine lights up in the same colour - drawn as an overlay on the list's own hairline so active
-   and inactive entries keep exactly the same geometry. */
-.side-rail-list li.active::before {
-    content: '';
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    width: var(--bm-strk-thick);
-    inset-inline-start: calc(var(--bm-strk-thin) * -1);
-    border-radius: var(--bm-crn-circular);
-    background-color: var(--bm-clr-brand-stroke);
-}
-
-.side-rail-list li.active a {
-    font-weight: var(--bm-fnt-weight-semibold);
-    color: var(--bm-clr-brand-fg);
-}
-
-@media (max-width: 84.375rem) {
-    .side-rail {
-        display: none;
-    }
-}
-
-/* ── Footer ────────────────────────────────────────────────────────────────── */
-
-.footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    background-color: var(--bm-clr-bg-1);
-    border-top: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.footer section {
-    width: 100%;
-    position: relative;
-    max-width: var(--bm-layout-max);
-    padding: var(--bm-sp-6xl) var(--bm-sp-xxxl);
-}
-
-.footer section:first-child {
-    display: grid;
-    gap: var(--bm-sp-4xl);
-    align-items: start;
-    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
-}
-
-.footer section:last-child {
-    gap: var(--bm-sp-xxl);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--bm-sp-xxl) var(--bm-sp-xxxl);
-    border-top: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.footer a {
-    text-decoration: none;
-}
-
-.footer .blurb {
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-prose);
-    max-width: var(--bm-layout-measure);
-    color: var(--bm-clr-fg-3);
-}
-
-.footer .bit-logo {
-    width: 2rem;
-    height: 1.6875rem;
-    margin-bottom: var(--bm-sp-l);
-    background-size: contain;
-    background-position: left center;
-    background-repeat: no-repeat;
-}
-
-.footer .link-columns {
-    gap: var(--bm-sp-xxl);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-}
-
-.footer .link-column {
-    display: flex;
-    gap: var(--bm-sp-xs);
-    flex-flow: column nowrap;
-    align-items: flex-start;
-}
-
-.footer .link-column h6 {
-    font-size: var(--bm-fnt-size-300);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-300);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    margin-bottom: var(--bm-sp-xs);
-    color: var(--bm-clr-fg-3);
-}
-
-.footer .link-column a {
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-500);
-    color: var(--bm-clr-fg-2);
-}
-
-.footer .link-column a:hover {
-    color: var(--bm-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .go-to-top {
-    gap: var(--bm-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bm-fnt-size-300);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-300);
-    padding: var(--bm-sp-s) var(--bm-sp-m);
-    color: var(--bm-clr-fg-2);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-1);
-    border-radius: var(--bm-crn-medium);
-    transition: background-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                border-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.footer .go-to-top:hover {
-    color: var(--bm-clr-fg-1);
-    border-color: var(--bm-clr-stroke-accessible);
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-.footer .go-to-top svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.footer .address-info {
-    display: flex;
-    gap: var(--bm-sp-xxs);
-    flex-flow: column nowrap;
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-500);
-    color: var(--bm-clr-fg-3);
-}
-
-.footer .address-info .address,
-.footer .address-info .tel,
-.footer .address-info .country {
-    padding-inline-start: var(--bm-sp-xl);
-    background-repeat: no-repeat;
-    background-position-y: 0.3125rem;
-}
-
-.footer .address-info .address,
-.footer .address-info .tel {
-    color: var(--bm-clr-fg-2);
-}
-
-.footer .address-info .address:hover,
-.footer .address-info .tel:hover {
-    color: var(--bm-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .address-info .address {
-    background-image: url('../images/footer/location-icon.svg');
-}
-
-.footer .address-info .tel {
-    background-image: url('../images/footer/tel-icon.svg');
-}
-
-.footer .social-link-group {
-    gap: var(--bm-sp-m);
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-.footer .social-link {
-    cursor: pointer;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--bm-crn-circular);
-    background-color: var(--bm-clr-fg-4);
-    background-size: 1.125rem;
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: background-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                transform var(--bm-dur-faster) var(--bm-crv-decelerate-mid);
-}
-
-.footer .social-link:hover {
-    transform: translateY(-0.125rem);
-}
-
-.footer .twitter-link { background-image: url('../images/footer/twitter-icon.svg'); }
-.footer .twitter-link:hover { background-color: #1DA1F2; }
-.footer .github-link { background-image: url('../images/footer/github-icon.svg'); }
-.footer .github-link:hover { background-color: #24292F; }
-.footer .youtube-link { background-image: url('../images/footer/youtube-icon.svg'); }
-.footer .youtube-link:hover { background-color: #FF0000; }
-.footer .linkedin-link { background-image: url('../images/footer/linkedin-icon.svg'); }
-.footer .linkedin-link:hover { background-color: #0077B5; }
-
-.footer .copy-right-txt {
-    line-height: var(--bm-fnt-line-300);
-    margin-top: var(--bm-sp-m);
-    font-size: var(--bm-fnt-size-200);
-    text-align: end;
-    color: var(--bm-clr-fg-3);
-}
-
-@media (max-width: 63.9375rem) {
-    .footer section,
-    .footer section:last-child {
-        padding-inline: var(--bm-sp-xxl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .footer section {
-        padding-block: var(--bm-sp-4xl);
-    }
-
-    .footer section:first-child {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .footer section:last-child {
-        align-items: flex-start;
-        flex-flow: column nowrap;
-        justify-content: flex-start;
-    }
-
-    .footer .social-link-group {
-        justify-content: flex-start;
-    }
-
-    .footer .copy-right-txt {
-        text-align: start;
-    }
-}
-
-/* ── Landing page ──────────────────────────────────────────────────────────── */
-
-/* The landing page is not a document, so it does not get the docs' reading column: it owns the
-   full width and lays out its own sections, which alternate surfaces and are separated by the
-   same hairline the rest of the chrome uses instead of shadows. The layout renders it without the
-   nav panel and the rail entirely - see Layout/MainLayout.razor. */
-
-.site-content.home {
-    background-color: var(--bm-clr-bg-1);
-}
-
-.homepage {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-}
-
-.homepage-section {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-.homepage-section.alt-section {
-    background-color: var(--bm-clr-bg-3);
-    border-top: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-bottom: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.homepage-section-content {
-    width: 100%;
-    margin: 0 auto;
-    max-width: var(--bm-layout-max);
-    padding: var(--bm-sp-7xl) var(--bm-sp-xxxl);
-}
-
-.section-eyebrow {
-    display: block;
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    margin-bottom: var(--bm-sp-m);
-    color: var(--bm-clr-brand-fg);
-}
-
-.homepage h2 {
-    font-size: var(--bm-fnt-size-800);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-800);
-    margin-bottom: var(--bm-sp-m);
-    color: var(--bm-clr-fg-1);
-}
-
-.homepage .section-lead {
-    line-height: var(--bm-fnt-line-prose);
-    font-size: var(--bm-fnt-size-400);
-    margin-bottom: var(--bm-sp-4xl);
-    max-width: var(--bm-layout-measure);
-    color: var(--bm-clr-fg-3);
-}
-
-/* A line of prose introducing the thing directly under it, rather than the section around it. */
-.homepage .section-note {
-    line-height: var(--bm-fnt-line-prose);
-    font-size: var(--bm-fnt-size-400);
-    margin: var(--bm-sp-4xl) 0 var(--bm-sp-l);
-    color: var(--bm-clr-fg-3);
-}
-
-/* ── Landing hero ─────────────────────────────────────────────────────────── */
-
-/* What the library is on one side, what it does on the other. */
-.hero-section {
-    position: relative;
-    overflow: hidden;
-}
-
-/* A single wash of the brand behind the headline. It is the one decorative thing on the page, and
-   it is there so the hero does not read as the first card of a stack of cards. */
-.hero-section::before {
-    content: '';
-    position: absolute;
-    top: -20rem;
-    inset-inline-start: 50%;
-    width: 75rem;
-    height: 45rem;
-    pointer-events: none;
-    transform: translateX(-70%);
-    background: radial-gradient(closest-side, var(--bm-clr-brand-wash), transparent);
-}
-
-.hero-section .homepage-section-content {
-    gap: var(--bm-sp-6xl);
-    display: grid;
-    position: relative;
-    align-items: center;
-    padding-top: var(--bm-sp-6xl);
-    padding-bottom: var(--bm-sp-6xl);
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-}
-
-.hero-eyebrow {
-    gap: var(--bm-sp-s);
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: var(--bm-sp-xl);
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    padding: var(--bm-sp-xs) var(--bm-sp-m);
-    text-decoration: none;
-    color: var(--bm-clr-brand-fg);
-    background-color: var(--bm-clr-brand-wash);
-    border-radius: var(--bm-crn-circular);
-}
-
-.hero-eyebrow svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.hero-copy h1 {
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: 1.05;
-    margin-bottom: var(--bm-sp-xl);
-    letter-spacing: -0.03em;
-    font-size: clamp(2.75rem, 5.5vw, var(--bm-fnt-size-1000));
-    color: var(--bm-clr-fg-1);
-}
-
-/* The one word of the headline that is the product's name takes the brand gradient; the rest of
-   the line stays in the text colour, so the headline is still a headline rather than an object. */
-/* Solid, not a gradient. Gradient text was tried and thrown out twice: any ramp from the brand
-   blue to the accent orange passes through a desaturated middle, and the middle of this headline
-   is where the words are. Fluent does not tint type anyway - it states things in one colour, and
-   the accent orange is already carrying the animated samples further down the page. */
-.hero-copy h1 .accent {
-    color: var(--bm-clr-brand-fg);
-}
-
-.hero-lead {
-    line-height: var(--bm-fnt-line-prose);
-    font-size: var(--bm-fnt-size-500);
-    margin-bottom: var(--bm-sp-xxl);
-    max-width: 34rem;
-    color: var(--bm-clr-fg-3);
-}
-
-.hero-actions {
-    gap: var(--bm-sp-m);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bm-sp-xxl);
-}
-
-/* Fluent's primary button. */
-.btn-primary,
-.btn-secondary {
-    gap: var(--bm-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    font-family: inherit;
-    font-weight: var(--bm-fnt-weight-semibold);
-    font-size: var(--bm-fnt-size-400);
-    line-height: var(--bm-fnt-line-400);
-    text-decoration: none;
-    /* 44px tall: the minimum a finger can reliably hit. */
-    min-height: 2.75rem;
-    padding: var(--bm-sp-m) var(--bm-sp-xxl);
-    border-radius: var(--bm-crn-medium);
-    transition: background-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                border-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.btn-primary {
-    color: var(--bm-clr-brand-fg-on-bg);
-    background-color: var(--bm-clr-brand-bg);
-    border: var(--bm-strk-thin) solid transparent;
-}
-
-.btn-primary:hover {
-    color: var(--bm-clr-brand-fg-on-bg);
-    background-color: var(--bm-clr-brand-bg-hover);
-}
-
-.btn-primary:active {
-    background-color: var(--bm-clr-brand-bg-pressed);
-}
-
-/* Fluent's secondary button: the neutral surface with a hairline, not an outlined copy of the
-   primary. Two buttons in the brand colour side by side would say neither is the main one. */
-.btn-secondary {
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-1);
-}
-
-.btn-secondary:hover {
-    color: var(--bm-clr-fg-1);
-    border-color: var(--bm-clr-stroke-accessible);
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-.btn-secondary:active {
-    background-color: var(--bm-clr-bg-1-pressed);
-}
-
-.btn-primary svg,
-.btn-secondary svg {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.github-mark {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    background-color: currentColor;
-    -webkit-mask: url('../images/github-mark.svg') center / contain no-repeat;
-    mask: url('../images/github-mark.svg') center / contain no-repeat;
-}
-
-/* The install line, as a thing to copy rather than a thing to read. */
-.install-line {
-    gap: var(--bm-sp-m);
-    display: flex;
-    max-width: 26rem;
-    align-items: center;
-    padding: var(--bm-sp-s) var(--bm-sp-s) var(--bm-sp-s) var(--bm-sp-l);
-    background-color: var(--bm-clr-bg-3);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-medium);
-}
-
-.install-line code {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: auto hidden;
-    white-space: nowrap;
-    font-family: var(--bm-fnt-family-mono);
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-300);
-    color: var(--bm-clr-fg-1);
-}
-
-.install-line code .prompt {
-    user-select: none;
-    color: var(--bm-clr-fg-4);
-}
-
-.install-copy {
-    gap: var(--bm-sp-xs);
-    display: inline-flex;
-    flex: none;
-    cursor: pointer;
-    align-items: center;
-    font-family: inherit;
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    padding: var(--bm-sp-xs) var(--bm-sp-s);
-    color: var(--bm-clr-fg-2);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-1);
-    border-radius: var(--bm-crn-small);
-    transition: color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                border-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.install-copy:hover {
-    color: var(--bm-clr-brand-fg);
-    border-color: var(--bm-clr-brand-stroke);
-}
-
-.install-copy svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* The hero says what the library does; the stage shows it. Each tile plays its own entrance and
-   answers the pointer, so the first thing on the page is the thing the page is about. */
-.hero-stage {
-    gap: var(--bm-sp-l);
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.hero-tile {
-    gap: var(--bm-sp-xs);
-    display: flex;
-    cursor: pointer;
-    padding: var(--bm-sp-xxl);
-    text-decoration: none;
-    flex-flow: column nowrap;
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-large);
-    box-shadow: var(--bm-shdw-4);
-}
-
-.hero-tile-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--bm-sp-s);
-    color: var(--bm-clr-brand-fg);
-    background-color: var(--bm-clr-brand-wash);
-    border-radius: var(--bm-crn-medium);
-}
-
-.hero-tile-icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.hero-tile-title {
-    font-size: var(--bm-fnt-size-400);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-400);
-    color: var(--bm-clr-fg-1);
-}
-
-.hero-tile-desc {
-    line-height: var(--bm-fnt-line-300);
-    font-size: var(--bm-fnt-size-200);
-    color: var(--bm-clr-fg-3);
-}
-
-/* The quick-start sample and the code under it. Held to the width of the prose above them: one
-   80-pixel box centred in a 1200-pixel stage reads as an empty page rather than as a sample. */
-.quick-start-body {
-    max-width: 46rem;
-}
-
-/* ── Landing sections ─────────────────────────────────────────────────────── */
-
-/* The numbers that make the pitch concrete, above the prose that explains it. */
-.stat-row {
-    gap: var(--bm-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-}
-
-.stat {
-    padding: var(--bm-sp-xl);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-large);
-}
-
-.stat-value {
-    display: block;
-    font-family: var(--bm-fnt-family-display);
-    font-size: var(--bm-fnt-size-700);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-700);
-    letter-spacing: -0.02em;
-    color: var(--bm-clr-brand-fg);
-}
-
-.stat-label {
-    display: block;
-    margin-top: var(--bm-sp-xs);
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-300);
-    color: var(--bm-clr-fg-3);
-}
-
-/* What is in the box: one card per capability, each a link into the demo that proves it. */
-.feature-grid {
-    gap: var(--bm-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
-}
-
-.feature-card {
-    display: block;
-    padding: var(--bm-sp-xxl);
-    text-decoration: none;
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-large);
-    transition: border-color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                box-shadow var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.feature-card:hover {
-    border-color: var(--bm-clr-brand-stroke);
-    box-shadow: var(--bm-shdw-8);
-}
-
-.feature-card-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--bm-sp-m);
-    color: var(--bm-clr-brand-fg);
-    background-color: var(--bm-clr-brand-wash);
-    border-radius: var(--bm-crn-medium);
-}
-
-.feature-card-icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.feature-card h3 {
-    font-size: var(--bm-fnt-size-500);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-500);
-    margin-bottom: var(--bm-sp-s);
-    color: var(--bm-clr-fg-1);
-}
-
-.feature-card p {
-    line-height: var(--bm-fnt-line-prose);
-    font-size: var(--bm-fnt-size-300);
-    color: var(--bm-clr-fg-3);
-}
-
-/* The full index of the docs, grouped the way the nav panel groups it - because the landing page
-   has no nav panel, and a reader who arrives at the root should be able to reach any page without
-   first having to find their way into the docs. */
-/* Columns rather than a grid: the groups are different lengths, and a grid would leave a band of
-   empty space under every short one. Multi-column flows them instead, so the block ends level. */
-.demo-index {
-    columns: 16rem 4;
-    column-gap: var(--bm-sp-4xl);
-}
-
-.demo-index-group {
-    break-inside: avoid;
-    margin-bottom: var(--bm-sp-xxl);
-}
-
-.demo-index-group h3 {
-    gap: var(--bm-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bm-fnt-size-200);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding-bottom: var(--bm-sp-s);
-    margin-bottom: var(--bm-sp-s);
-    color: var(--bm-clr-fg-3);
-    border-bottom: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.demo-index-group h3 svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--bm-clr-brand-fg);
-}
-
-.demo-index-link {
-    display: block;
-    text-decoration: none;
-    font-size: var(--bm-fnt-size-300);
-    line-height: var(--bm-fnt-line-300);
-    padding: var(--bm-sp-snudge) var(--bm-sp-s);
-    margin-inline-start: calc(var(--bm-sp-s) * -1);
-    color: var(--bm-clr-fg-2);
-    border-radius: var(--bm-crn-medium);
-    transition: color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                background-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.demo-index-link:hover {
-    color: var(--bm-clr-brand-fg);
-    background-color: var(--bm-clr-bg-1-hover);
-}
-
-/* The closing call to action, on the brand rather than on a neutral: it is the last thing on the
-   page and the only place the site asks for something. */
-.cta-section .homepage-section-content {
-    text-align: center;
-}
-
-.cta-section .hero-actions {
-    margin-bottom: 0;
-    justify-content: center;
-}
-
-.cta-section .section-lead {
-    margin-inline: auto;
-}
-
-@media (max-width: 63.9375rem) {
-    .homepage-section-content {
-        padding: var(--bm-sp-6xl) var(--bm-sp-xxl);
-    }
-
-    .hero-section .homepage-section-content {
-        gap: var(--bm-sp-4xl);
-        padding-top: var(--bm-sp-4xl);
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .homepage-section-content {
-        padding: var(--bm-sp-4xl) var(--bm-sp-l);
-    }
-
-    .homepage h2 {
-        font-size: var(--bm-fnt-size-700);
-        line-height: var(--bm-fnt-line-700);
-    }
-
-    .hero-stage {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .hero-actions .btn-primary,
-    .hero-actions .btn-secondary {
-        flex: 1 1 12rem;
-    }
-}
-
-/* ── Error and not-found pages ─────────────────────────────────────────────── */
-
-.error-page {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    flex-flow: column nowrap;
-    padding: var(--bm-sp-7xl) 0 var(--bm-sp-6xl);
-}
-
-.error-page .error-code {
-    font-family: var(--bm-fnt-family-display);
-    font-size: var(--bm-fnt-size-1000);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.03em;
-    color: var(--bm-clr-brand-fg);
-}
-
-.error-page h1 {
-    font-size: var(--bm-fnt-size-800);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-800);
-    margin: var(--bm-sp-l) 0 var(--bm-sp-m);
-    color: var(--bm-clr-fg-1);
-}
-
-.error-page p {
-    max-width: 34rem;
-    font-size: var(--bm-fnt-size-400);
-    line-height: var(--bm-fnt-line-prose);
-    margin-bottom: var(--bm-sp-xxl);
-    color: var(--bm-clr-fg-3);
-}
-
-.error-page .hero-actions {
-    justify-content: center;
-    margin-bottom: 0;
-}
-
-/* ── Blazor error UI ───────────────────────────────────────────────────────── */
-
-#blazor-error-ui {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    display: none;
-    position: fixed;
-    z-index: 1500;
-    font-size: var(--bm-fnt-size-300);
-    padding: var(--bm-sp-m) var(--bm-sp-4xl) var(--bm-sp-m) var(--bm-sp-xl);
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-5);
-    border-top: var(--bm-strk-thin) solid var(--bm-clr-stroke-1);
-    box-shadow: var(--bm-shdw-16);
-}
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: var(--bm-sp-m);
-    top: var(--bm-sp-s);
-}
-
-.blazor-error-boundary {
-    padding: var(--bm-sp-l);
-    color: #FFFFFF;
-    background: #B32121;
-    border-radius: var(--bm-crn-medium);
-}
-
-.blazor-error-boundary::after {
-    content: "An error has occurred."
-}
-
-/* No .loading-progress rules here on purpose: the app is prerendered, so the first paint is the
-   real page rather than a boot spinner. The header shows a "loading" hint while the WebAssembly
-   runtime downloads - see .hydrating above. */
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/css/motion-samples.css b/src/Utilities/Bmotion/Demo/Server/wwwroot/css/motion-samples.css
deleted file mode 100644
index 2091d9801b4..00000000000
--- a/src/Utilities/Bmotion/Demo/Server/wwwroot/css/motion-samples.css
+++ /dev/null
@@ -1,546 +0,0 @@
-/* Bit.Bmotion Demo - page chrome and sample styles.
-
-   Everything a demo page draws inside the reading column: its title and lead, the section cards,
-   the stage a sample is played on, the code boxes and the shared sample primitives. The tokens
-   these are written against live in theme.css, and the shell around them in app.css.
-
-   Individual pages add their own <style> blocks for sample-specific pieces. Those blocks reach for
-   the --bm-* custom properties defined in theme.css, so they follow the theme without knowing
-   anything about it - and nothing in this file may assume anything about what they contain.
-
-   The line this file will not cross: it styles the frame around a sample, never the sample. Once
-   the eye is inside a .demo-card, every pixel belongs to the animation being demonstrated. */
-
-/* ── Page title and lead ───────────────────────────────────────────────────── */
-
-/* Every page opens the same way: a title, then a paragraph of prose - not another frame. */
-.page-container > h1 {
-    font-family: var(--bm-fnt-family-display);
-    font-size: var(--bm-fnt-size-900);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-900);
-    letter-spacing: -0.03em;
-    margin-bottom: var(--bm-sp-l);
-    overflow-wrap: anywhere;
-    text-wrap: balance;
-    color: var(--bm-clr-fg-1);
-}
-
-/* The lead is set one step up the ramp from the body of the page, so a reader who only reads the
-   first paragraph still gets the whole answer to "what is this page for". */
-.page-intro {
-    line-height: var(--bm-fnt-line-prose);
-    font-size: var(--bm-fnt-size-500);
-    margin-bottom: var(--bm-sp-4xl);
-    max-width: var(--bm-layout-measure);
-    color: var(--bm-clr-fg-3);
-}
-
-.page-intro strong {
-    font-weight: var(--bm-fnt-weight-semibold);
-    color: var(--bm-clr-fg-2);
-}
-
-@media (max-width: 47.9375rem) {
-    .page-container > h1 {
-        font-size: var(--bm-fnt-size-800);
-        line-height: var(--bm-fnt-line-800);
-    }
-
-    .page-intro {
-        font-size: var(--bm-fnt-size-400);
-    }
-}
-
-/* ── Section cards ─────────────────────────────────────────────────────────── */
-
-/* A hairline-bordered surface carrying Fluent's lightest elevation. On a documentation page the
-   same card repeats a dozen times, so anything heavier reads as noise long before it reads as
-   depth - but a flat card on a flat canvas leaves the page with no layers at all, and shadow2 is
-   exactly the amount that says "this is a surface" and nothing more. */
-.demo-section {
-    padding: var(--bm-sp-xxxl);
-    margin-bottom: var(--bm-sp-xxl);
-    /* Clear of the sticky header when the rail jumps to this section. */
-    scroll-margin-top: calc(var(--bm-layout-header) + var(--bm-layout-header-gap));
-    color: var(--bm-clr-fg-2);
-    background-color: var(--bm-clr-bg-1);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-large);
-    box-shadow: var(--bm-shdw-2);
-}
-
-.demo-section .align-start {
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.demo-section:last-child {
-    margin-bottom: 0;
-}
-
-/* The heading sits over a hairline, so the eye can find the boundary between sections while
-   scrolling a long page instead of relying on whitespace alone. */
-.demo-section h2 {
-    position: relative;
-    font-family: var(--bm-fnt-family-display);
-    font-size: var(--bm-fnt-size-600);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-600);
-    letter-spacing: -0.02em;
-    padding-bottom: var(--bm-sp-m);
-    margin-bottom: var(--bm-sp-l);
-    scroll-margin-top: calc(var(--bm-layout-header) + var(--bm-layout-header-gap));
-    overflow-wrap: anywhere;
-    color: var(--bm-clr-fg-1);
-    border-bottom: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-/* Every section is addressable, so a reader can link a colleague at the one paragraph that
-   answers their question. The link is added to the heading by js/demo.js, which is also what
-   gives the heading the id the "on this page" rail points at - so a section is linkable for the
-   same reason it is listed, and the two can never disagree. */
-.heading-anchor {
-    position: absolute;
-    top: 0;
-    inset-inline-start: -1.5rem;
-    width: 1.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--bm-fnt-line-600);
-    opacity: 0;
-    text-decoration: none;
-    color: var(--bm-clr-fg-4);
-    transition: opacity var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.demo-section h2:hover .heading-anchor,
-.heading-anchor:focus-visible {
-    opacity: 1;
-}
-
-.heading-anchor:hover {
-    color: var(--bm-clr-brand-fg);
-}
-
-.heading-anchor:focus-visible {
-    outline: var(--bm-strk-thick) solid var(--bm-clr-stroke-focus);
-    outline-offset: var(--bm-strk-thin);
-    border-radius: var(--bm-crn-small);
-}
-
-.heading-anchor svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* Below the width where the reading column has a margin to hang the anchor in, it would sit off
-   the edge of the card. */
-@media (max-width: 63.9375rem) {
-    .heading-anchor {
-        display: none;
-    }
-}
-
-.demo-section h3 {
-    font-family: var(--bm-fnt-family-display);
-    font-size: var(--bm-fnt-size-500);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-500);
-    letter-spacing: -0.01em;
-    margin-bottom: var(--bm-sp-s);
-    color: var(--bm-clr-fg-1);
-}
-
-.demo-section p {
-    line-height: var(--bm-fnt-line-prose);
-    font-size: var(--bm-fnt-size-400);
-    margin-bottom: var(--bm-sp-xxl);
-    max-width: var(--bm-layout-measure);
-    color: var(--bm-clr-fg-2);
-}
-
-.demo-section strong {
-    font-weight: var(--bm-fnt-weight-semibold);
-    color: var(--bm-clr-fg-1);
-}
-
-.demo-section em {
-    font-style: italic;
-}
-
-.demo-section a {
-    text-decoration: underline;
-}
-
-/* An inline code span, wherever a page sets one in prose. */
-.page-intro code,
-.demo-section code {
-    display: inline;
-    font-size: 0.875em;
-    padding: 0.0625rem 0.25rem;
-    overflow-wrap: anywhere;
-    font-family: var(--bm-fnt-family-mono);
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-3);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-small);
-}
-
-@media (max-width: 47.9375rem) {
-    .demo-section {
-        padding: var(--bm-sp-xl);
-    }
-}
-
-/* ── Sample stage ──────────────────────────────────────────────────────────── */
-
-.demo-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bm-sp-xxl);
-    align-items: center;
-}
-
-/* The stage a sample is played on. Kept one surface step off the card around it so a demo is
-   never confused with the page describing it, and printed with a faint measure grid: an animation
-   about position or scale is far easier to read against something regular than against a blank
-   field, and the grid is the quietest possible way to give the eye that reference. */
-.demo-card {
-    flex: 1;
-    display: flex;
-    padding: var(--bm-sp-xxxl);
-    min-width: 13.75rem;
-    min-height: 10rem;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--bm-card);
-    background-image: radial-gradient(circle at center,
-        color-mix(in srgb, var(--bm-clr-fg-1) 7%, transparent) 0.0625rem, transparent 0.0625rem);
-    background-size: 1.25rem 1.25rem;
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-large);
-}
-
-/* A stage that stacks a caption above the moving part instead of centring one thing in the
-   middle. Nearly every page needs it, so it is a modifier here rather than the same three inline
-   declarations repeated down each page. */
-.demo-card.stack {
-    gap: var(--bm-sp-m);
-    flex-direction: column;
-}
-
-/* The caption naming what a stage is showing - a spring's constants, an easing's name, the CSS
-   property being animated. Deliberately quiet: it labels the sample, it is not part of it. */
-.demo-label {
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-300);
-    text-align: center;
-    color: var(--bm-clr-fg-3);
-}
-
-/* The controls that drive a sample, always directly under its stage. */
-.demo-actions {
-    gap: var(--bm-sp-s);
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: var(--bm-sp-l);
-    align-items: center;
-}
-
-/* ── Sample primitives ─────────────────────────────────────────────────────── */
-
-/* The moving parts keep their own rounding and their gradient fill: they are the subject of the
-   page, not chrome, and the docs' restrained surfaces would flatten exactly the thing being
-   shown. Their colours come from the theme's accents, so the samples follow the theme too. */
-/* The label is set at 20px/700 rather than at the body size. A gradient cannot be one colour, so a
-   white label on it has to clear the bar against the lightest point it actually covers - and 20px
-   bold is the size at which that bar is WCAG's large-text 3:1 rather than 4.5:1, which the middle
-   of this gradient does not reach. The alternative was darkening the accent, which would have
-   changed the look of every sample on the site to fix the handful that carry a word. */
-.box {
-    width: 5rem;
-    height: 5rem;
-    color: #fff;
-    display: flex;
-    font-weight: var(--bm-fnt-weight-bold);
-    font-size: var(--bm-fnt-size-500);
-    line-height: var(--bm-fnt-line-500);
-    cursor: pointer;
-    user-select: none;
-    border-radius: 0.625rem;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary));
-}
-
-.box-sm {
-    width: 3.125rem;
-    height: 3.125rem;
-    border-radius: 0.5rem;
-}
-
-/* ── Buttons ───────────────────────────────────────────────────────────────── */
-
-/* The button that drives a sample. Fluent's primary, at Fluent's control height. */
-.btn-bm {
-    border: var(--bm-strk-thin) solid transparent;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--bm-sp-s);
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-300);
-    font-size: var(--bm-fnt-size-300);
-    font-family: inherit;
-    min-height: 2rem;
-    padding: var(--bm-sp-xs) var(--bm-sp-m);
-    color: var(--bm-clr-brand-fg-on-bg);
-    background-color: var(--bm-clr-brand-bg);
-    border-radius: var(--bm-crn-medium);
-    transition: background-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.btn-bm:hover {
-    background-color: var(--bm-clr-brand-bg-hover);
-}
-
-.btn-bm:active {
-    background-color: var(--bm-clr-brand-bg-pressed);
-}
-
-.btn-bm:disabled {
-    cursor: default;
-    color: var(--bm-clr-fg-disabled);
-    background-color: var(--bm-clr-bg-disabled);
-}
-
-.btn-bm:focus-visible {
-    outline: var(--bm-strk-thick) solid var(--bm-clr-stroke-focus);
-    outline-offset: var(--bm-strk-thick);
-}
-
-/* ── Code boxes ────────────────────────────────────────────────────────────── */
-
-/* One frame around the toolbar and the code, rather than a button floating above a slab: the bar
-   is the code box's own header, so opening a snippet grows a panel instead of adding a second
-   thing to the page. */
-.code-snippet {
-    margin-top: var(--bm-sp-xxl);
-    overflow: hidden;
-    background-color: var(--bm-clr-bg-3);
-    border: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-    border-radius: var(--bm-crn-medium);
-}
-
-.code-snippet-bar {
-    gap: var(--bm-sp-s);
-    display: flex;
-    align-items: center;
-    padding: var(--bm-sp-xs) var(--bm-sp-s);
-}
-
-.code-snippet.open .code-snippet-bar {
-    border-bottom: var(--bm-strk-thin) solid var(--bm-clr-stroke-2);
-}
-
-.code-toggle,
-.code-copy {
-    gap: var(--bm-sp-xs);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    font-weight: var(--bm-fnt-weight-semibold);
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-300);
-    font-family: inherit;
-    padding: var(--bm-sp-xs) var(--bm-sp-s);
-    border: var(--bm-strk-thin) solid transparent;
-    background: transparent;
-    color: var(--bm-clr-fg-2);
-    border-radius: var(--bm-crn-small);
-    transition: color var(--bm-dur-faster) var(--bm-crv-easy-ease),
-                background-color var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.code-toggle:hover,
-.code-copy:hover {
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-3-hover);
-}
-
-.code-toggle[aria-expanded="true"] {
-    color: var(--bm-clr-fg-1);
-}
-
-.code-toggle:focus-visible,
-.code-copy:focus-visible {
-    outline: var(--bm-strk-thick) solid var(--bm-clr-stroke-focus);
-    outline-offset: var(--bm-strk-thin);
-}
-
-.code-toggle svg,
-.code-copy svg {
-    flex: none;
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-/* The chevron turns rather than being swapped for a different glyph, so the control reads as one
-   thing in two states instead of as two controls. */
-.code-toggle-icon {
-    display: inline-flex;
-    transition: transform var(--bm-dur-faster) var(--bm-crv-easy-ease);
-}
-
-.code-toggle[aria-expanded="true"] .code-toggle-icon {
-    transform: rotate(90deg);
-}
-
-/* The language, and the spring that pushes the copy button to the far end of the bar. */
-.code-lang {
-    flex: 1 1 auto;
-    text-align: end;
-    font-size: var(--bm-fnt-size-200);
-    line-height: var(--bm-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bm-clr-fg-4);
-}
-
-.code-copy.copied {
-    color: var(--bm-clr-brand-fg);
-}
-
-.code-block {
-    margin: 0;
-    width: 100%;
-    display: block;
-    overflow: auto;
-    direction: ltr;
-    white-space: pre;
-    line-height: 1.6;
-    font-size: var(--bm-fnt-size-300);
-    max-height: 32rem;
-    font-family: var(--bm-fnt-family-mono);
-    padding: var(--bm-sp-l);
-    color: var(--bm-clr-fg-1);
-    background-color: var(--bm-clr-bg-3);
-}
-
-.code-block code {
-    display: block;
-    padding: 0;
-    border: none;
-    color: inherit;
-    background: none;
-    font-size: inherit;
-    line-height: inherit;
-    font-family: inherit;
-}
-
-.code-block::-webkit-scrollbar {
-    width: 0.5rem;
-}
-
-.code-block::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
-}
-
-.code-block::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-
-.code-block::-webkit-scrollbar-thumb {
-    border-radius: var(--bm-crn-circular);
-    background-color: var(--bm-clr-stroke-1);
-}
-
-.code-block::-webkit-scrollbar-thumb:hover {
-    background-color: var(--bm-clr-stroke-accessible);
-}
-
-.code-block::-webkit-scrollbar-button {
-    display: none;
-}
-
-/* ── Syntax highlighting tokens ────────────────────────────────────────────── */
-
-.code-block .tok-com  { color: var(--bm-tok-com); font-style: italic; }
-.code-block .tok-tag  { color: var(--bm-tok-tag); }
-.code-block .tok-attr { color: var(--bm-tok-attr); }
-.code-block .tok-str  { color: var(--bm-tok-str); }
-.code-block .tok-key  { color: var(--bm-tok-key); }
-.code-block .tok-type { color: var(--bm-tok-type); }
-.code-block .tok-num  { color: var(--bm-tok-num); }
-.code-block .tok-raz  { color: var(--bm-tok-raz); }
-
-/* Each source line is its own block so highlighted and plain lines share uniform spacing. */
-.code-block .code-line {
-    display: block;
-}
-
-/* Lines where a Bmotion component is used, so they stand out from the markup around them. */
-.code-block .hl-line {
-    display: block;
-    margin: 0 calc(var(--bm-sp-l) * -1);
-    padding: 0 var(--bm-sp-l);
-    background-color: var(--bm-accent-soft);
-    box-shadow: inset var(--bm-strk-thicker) 0 0 var(--bm-clr-brand-stroke);
-}
-
-/* ── Badges ────────────────────────────────────────────────────────────────── */
-
-.badge-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--bm-sp-s);
-}
-
-/* Fluent's outlined badge: quiet, sized to sit under a paragraph without competing with it. */
-.badge {
-    font-weight: var(--bm-fnt-weight-semibold);
-    line-height: var(--bm-fnt-line-200);
-    font-size: var(--bm-fnt-size-200);
-    padding: var(--bm-sp-xs) var(--bm-sp-mnudge);
-    color: var(--bm-clr-brand-fg);
-    background-color: var(--bm-clr-brand-wash);
-    border: var(--bm-strk-thin) solid transparent;
-    border-radius: var(--bm-crn-circular);
-}
-
-/* ── Split text ────────────────────────────────────────────────────────────── */
-
-/* The split-text stages animate type, not boxes, so they need a type scale of their own - the
-   samples are only legible as a headline treatment if they are actually headline-sized. */
-.split-headline {
-    font-family: var(--bm-fnt-family-display);
-    font-weight: var(--bm-fnt-weight-bold);
-    font-size: var(--bm-fnt-size-600);
-    line-height: var(--bm-fnt-line-600);
-    letter-spacing: -0.02em;
-    text-align: center;
-    color: var(--bm-clr-fg-1);
-}
-
-.split-lines {
-    font-size: var(--bm-fnt-size-400);
-    line-height: var(--bm-fnt-line-prose);
-    color: var(--bm-clr-fg-1);
-}
-
-.split-body {
-    font-size: var(--bm-fnt-size-400);
-    line-height: var(--bm-fnt-line-prose);
-    color: var(--bm-clr-fg-1);
-}
-
-/* Deliberately narrow: the point of the sample is to force the text to wrap, so the reader can
-   see that the break lands between words rather than inside one. */
-.split-narrow {
-    max-width: 15rem;
-}
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/css/theme.css b/src/Utilities/Bmotion/Demo/Server/wwwroot/css/theme.css
deleted file mode 100644
index 992e9d2da59..00000000000
--- a/src/Utilities/Bmotion/Demo/Server/wwwroot/css/theme.css
+++ /dev/null
@@ -1,451 +0,0 @@
-/* Bit.Bmotion Demo - design tokens.
-
-   The demo carries no dependency other than Bit.Bmotion itself, so the design system it is built
-   on is written out here rather than pulled from a component library. It is Microsoft's Fluent 2,
-   transcribed: the brand ramp, the neutral ramps, the type ramp, the corner radii, the elevation
-   shadows and the motion curves all carry Fluent's own names and Fluent's own values.
-
-   Three layers, in the order a token should be reached for:
-
-     1. Ramps      --bm-brand-10..160, --bm-grey-*.  Raw colour. Never used outside this file.
-     2. Semantic   --bm-clr-*, --bm-fnt-*, --bm-crn-*, --bm-shdw-*, --bm-dur-*, --bm-crv-*.
-                   What a token is *for*. This is the layer to write CSS against.
-     3. Aliases    --bit-clr-*, --bm-primary and friends. The names the site used before this
-                   file was a design system, kept pointing at the semantic layer so that the
-                   twenty demo pages - each of which carries its own <style> block - keep working
-                   untouched, and so that anything copied over from the Bit.BlazorUI demo still
-                   lands on the right colour.
-
-   The brand ramp is Fluent's own Microsoft-blue ramp shifted so that shade 80 lands exactly on
-   bit's #1276C6: the two are within a just-noticeable difference of each other to begin with, so
-   the site stays on brand and on Fluent at the same time.
-
-   The theme is selected by the data-theme attribute on <html>, which the bootstrap script in
-   App.razor sets before first paint (see js/demo.js). The bare :root selector carries the light
-   palette so a document with no attribute at all - the pre-hydration prerender, or a browser with
-   JS disabled - still renders a complete theme rather than unstyled markup. */
-
-/* ── 1. Ramps ──────────────────────────────────────────────────────────────── */
-
-:root {
-    /* Brand. Fluent's blue ramp, anchored on bit's accent at shade 80. */
-    --bm-brand-10: #0A1C2A;
-    --bm-brand-20: #0D293E;
-    --bm-brand-30: #103551;
-    --bm-brand-40: #124265;
-    --bm-brand-50: #144F7D;
-    --bm-brand-60: #145D94;
-    --bm-brand-70: #1567AC;
-    --bm-brand-80: #1276C6;
-    --bm-brand-90: #2B90E7;
-    --bm-brand-100: #4BA7FD;
-    --bm-brand-110: #67B4FD;
-    --bm-brand-120: #7CC0FF;
-    --bm-brand-130: #9CCEFF;
-    --bm-brand-140: #BADEFF;
-    --bm-brand-150: #D6EBFF;
-    --bm-brand-160: #EDF5FE;
-
-    /* Neutrals. Fluent's grey ramp, named by lightness the way Fluent names it. */
-    --bm-grey-0: #000000;
-    --bm-grey-8: #141414;
-    --bm-grey-10: #1A1A1A;
-    --bm-grey-12: #1F1F1F;
-    --bm-grey-14: #242424;
-    --bm-grey-16: #292929;
-    --bm-grey-20: #333333;
-    --bm-grey-24: #3D3D3D;
-    --bm-grey-26: #424242;
-    --bm-grey-30: #4D4D4D;
-    --bm-grey-38: #616161;
-    --bm-grey-44: #707070;
-    --bm-grey-50: #808080;
-    --bm-grey-60: #999999;
-    --bm-grey-68: #ADADAD;
-    --bm-grey-78: #C7C7C7;
-    --bm-grey-82: #D1D1D1;
-    --bm-grey-84: #D6D6D6;
-    --bm-grey-88: #E0E0E0;
-    --bm-grey-90: #E6E6E6;
-    --bm-grey-92: #EBEBEB;
-    --bm-grey-94: #F0F0F0;
-    --bm-grey-96: #F5F5F5;
-    --bm-grey-98: #FAFAFA;
-    --bm-grey-100: #FFFFFF;
-
-    /* The one hue outside the Fluent set: bit's accent orange, which the animated samples are
-       painted with. It exists to be the far end of a gradient from the brand blue, so it is not
-       asked to carry text and does not need a ramp of its own. */
-    --bm-peach-light: #FFC7AC;
-    --bm-peach: #FD7F36;
-    --bm-peach-dark: #C25520;
-}
-
-/* ── 2. Semantic - light ───────────────────────────────────────────────────── */
-
-:root,
-:root[data-theme="light"] {
-    color-scheme: light;
-
-    /* Brand. Backgrounds take shade 80 and darken on interaction, exactly as Fluent does; text
-       and links take shade 70, which is the shade that clears 4.5:1 on both of the surfaces this
-       site paints - the white card and the grey canvas behind it. */
-    --bm-clr-brand-bg: var(--bm-brand-80);
-    --bm-clr-brand-bg-hover: var(--bm-brand-70);
-    --bm-clr-brand-bg-pressed: var(--bm-brand-60);
-    --bm-clr-brand-bg-subtle: var(--bm-brand-160);
-    --bm-clr-brand-fg: var(--bm-brand-70);
-    --bm-clr-brand-fg-hover: var(--bm-brand-60);
-    --bm-clr-brand-fg-pressed: var(--bm-brand-50);
-    --bm-clr-brand-fg-on-bg: var(--bm-grey-100);
-    --bm-clr-brand-stroke: var(--bm-brand-80);
-
-    /* The dual-role accent, which Fluent itself does not have.
-
-       Fluent splits the brand in two - one shade for a surface to be painted with, another for
-       text to be set in - because a control knows which of the two it is. The demo pages do not:
-       each of them carries a <style> block written against a single --bm-primary that is a
-       gradient stop on one line and a label colour on the next. So the accent below is the shade
-       that works as both, in both themes, and the legacy names at the foot of this file point at
-       it. Chrome written after this file existed uses the split pair above instead. */
-    --bm-clr-brand-accent: var(--bm-brand-80);
-    --bm-clr-brand-accent-hover: var(--bm-brand-70);
-    --bm-clr-brand-accent-pressed: var(--bm-brand-60);
-    --bm-clr-brand-accent-contrast: var(--bm-grey-100);
-
-    /* Neutral backgrounds. Background1 is the raised surface - a card, the header, the nav panel;
-       the canvas the whole page is painted on is Background3, one step down from it. */
-    --bm-clr-bg-1: var(--bm-grey-100);
-    --bm-clr-bg-1-hover: var(--bm-grey-96);
-    --bm-clr-bg-1-pressed: var(--bm-grey-88);
-    --bm-clr-bg-2: var(--bm-grey-98);
-    --bm-clr-bg-3: var(--bm-grey-96);
-    --bm-clr-bg-3-hover: var(--bm-grey-92);
-    --bm-clr-bg-4: var(--bm-grey-94);
-    --bm-clr-bg-5: var(--bm-grey-92);
-    --bm-clr-bg-disabled: var(--bm-grey-94);
-    --bm-clr-bg-inverted: var(--bm-grey-14);
-    --bm-clr-bg-overlay: rgba(0, 0, 0, 0.4);
-
-    /* Neutral foregrounds. */
-    --bm-clr-fg-1: var(--bm-grey-14);
-    --bm-clr-fg-2: var(--bm-grey-26);
-    --bm-clr-fg-3: var(--bm-grey-38);
-    --bm-clr-fg-4: var(--bm-grey-44);
-    --bm-clr-fg-disabled: var(--bm-grey-68);
-    --bm-clr-fg-inverted: var(--bm-grey-100);
-
-    /* Neutral strokes. Stroke2 draws the hairlines that separate the site's surfaces; Stroke1
-       draws the edge of a control; StrokeAccessible is the one that clears 3:1 against both
-       surfaces, so it is what a control's own border becomes on hover. */
-    --bm-clr-stroke-1: var(--bm-grey-82);
-    --bm-clr-stroke-2: var(--bm-grey-88);
-    --bm-clr-stroke-3: var(--bm-grey-94);
-    --bm-clr-stroke-accessible: var(--bm-grey-38);
-    --bm-clr-stroke-focus: var(--bm-grey-14);
-
-    /* Fluent's elevation set. The alpha pairs are Fluent's own: a tight ambient shadow under a
-       wider directional one, so a raised surface reads as raised at any size. */
-    --bm-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bm-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bm-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bm-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bm-shdw-28: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.24), 0 0 0.5rem rgba(0, 0, 0, 0.2);
-    --bm-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.24), 0 0 0.5rem rgba(0, 0, 0, 0.2);
-
-    /* The tint a brand-coloured surface is washed with. color-mix keeps it tied to the accent
-       rather than freezing one theme's hex value. */
-    --bm-clr-brand-wash: color-mix(in srgb, var(--bm-brand-80) 10%, transparent);
-
-    /* Syntax highlighting for the code boxes. The token set is the demo's own (see
-       Shared/SyntaxHighlighter.cs); only the colours are themed, and they are tuned against
-       --bm-clr-bg-3, which is the surface a <pre> is painted on. */
-    --bm-tok-com: #3E7A34;
-    --bm-tok-tag: #1F5FA8;
-    --bm-tok-attr: #1A6FA8;
-    --bm-tok-str: #A63A20;
-    --bm-tok-key: #1F5FA8;
-    --bm-tok-type: #197066;
-    --bm-tok-num: #4F6E1E;
-    --bm-tok-raz: #8A3D9C;
-}
-
-/* ── 2. Semantic - dark ────────────────────────────────────────────────────── */
-
-/* Fluent's dark theme is a neutral grey theme rather than a tinted one, and it inverts the
-   surface relationship rather than the ramp: the canvas is the darkest surface and a card sits
-   above it, one step lighter. Everything below mirrors the light block role for role. */
-
-:root[data-theme="dark"] {
-    color-scheme: dark;
-
-    --bm-clr-brand-bg: var(--bm-brand-70);
-    --bm-clr-brand-bg-hover: var(--bm-brand-80);
-    --bm-clr-brand-bg-pressed: var(--bm-brand-60);
-    --bm-clr-brand-bg-subtle: var(--bm-brand-20);
-    --bm-clr-brand-fg: var(--bm-brand-100);
-    --bm-clr-brand-fg-hover: var(--bm-brand-110);
-    --bm-clr-brand-fg-pressed: var(--bm-brand-120);
-    --bm-clr-brand-fg-on-bg: var(--bm-grey-100);
-    --bm-clr-brand-stroke: var(--bm-brand-100);
-
-    /* The dual-role accent flips to the light end of the ramp here, and takes near-black as its
-       contrast colour: on a dark canvas the shade that reads as text is the light one, and the
-       pages use the same token for both jobs. See the light block for why. */
-    --bm-clr-brand-accent: var(--bm-brand-100);
-    --bm-clr-brand-accent-hover: var(--bm-brand-110);
-    --bm-clr-brand-accent-pressed: var(--bm-brand-120);
-    --bm-clr-brand-accent-contrast: var(--bm-grey-14);
-
-    --bm-clr-bg-1: var(--bm-grey-12);
-    --bm-clr-bg-1-hover: var(--bm-grey-16);
-    --bm-clr-bg-1-pressed: var(--bm-grey-20);
-    --bm-clr-bg-2: var(--bm-grey-10);
-    --bm-clr-bg-3: var(--bm-grey-8);
-    --bm-clr-bg-3-hover: var(--bm-grey-12);
-    --bm-clr-bg-4: var(--bm-grey-16);
-    --bm-clr-bg-5: var(--bm-grey-20);
-    --bm-clr-bg-disabled: var(--bm-grey-16);
-    --bm-clr-bg-inverted: var(--bm-grey-96);
-    --bm-clr-bg-overlay: rgba(0, 0, 0, 0.65);
-
-    --bm-clr-fg-1: var(--bm-grey-100);
-    --bm-clr-fg-2: var(--bm-grey-84);
-    --bm-clr-fg-3: var(--bm-grey-68);
-    --bm-clr-fg-4: var(--bm-grey-60);
-    --bm-clr-fg-disabled: var(--bm-grey-38);
-    --bm-clr-fg-inverted: var(--bm-grey-14);
-
-    --bm-clr-stroke-1: var(--bm-grey-30);
-    --bm-clr-stroke-2: var(--bm-grey-20);
-    --bm-clr-stroke-3: var(--bm-grey-16);
-    --bm-clr-stroke-accessible: var(--bm-grey-68);
-    --bm-clr-stroke-focus: var(--bm-grey-100);
-
-    /* Fluent deepens the alphas so an elevated surface still reads against a near-black canvas,
-       where a light-theme shadow would vanish. */
-    --bm-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bm-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bm-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bm-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bm-shdw-28: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.4), 0 0 0.5rem rgba(0, 0, 0, 0.28);
-    --bm-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.4), 0 0 0.5rem rgba(0, 0, 0, 0.28);
-
-    --bm-clr-brand-wash: color-mix(in srgb, var(--bm-brand-100) 14%, transparent);
-
-    --bm-tok-com: #6A9955;
-    --bm-tok-tag: #569CD6;
-    --bm-tok-attr: #9CDCFE;
-    --bm-tok-str: #CE9178;
-    --bm-tok-key: #569CD6;
-    --bm-tok-type: #4EC9B0;
-    --bm-tok-num: #B5CEA8;
-    --bm-tok-raz: #C586C0;
-}
-
-/* ── 2. Semantic - shape, type, motion and layout ──────────────────────────── */
-
-/* The parts of Fluent that do not change with the palette. */
-
-:root {
-    /* Corner radius. Fluent 2's scale - the step up from Fluent 1's near-square 2px is the most
-       visible single thing about the newer system, so it is taken as written. */
-    --bm-crn-none: 0;
-    --bm-crn-small: 0.125rem;
-    --bm-crn-medium: 0.25rem;
-    --bm-crn-large: 0.375rem;
-    --bm-crn-xlarge: 0.5rem;
-    --bm-crn-circular: 62.4375rem;
-
-    /* Stroke width. */
-    --bm-strk-thin: 0.0625rem;
-    --bm-strk-thick: 0.125rem;
-    --bm-strk-thicker: 0.1875rem;
-
-    /* Spacing. Fluent's ramp, and the only source of a margin or a padding in this site. */
-    --bm-sp-none: 0;
-    --bm-sp-xxs: 0.125rem;
-    --bm-sp-xs: 0.25rem;
-    --bm-sp-snudge: 0.375rem;
-    --bm-sp-s: 0.5rem;
-    --bm-sp-mnudge: 0.625rem;
-    --bm-sp-m: 0.75rem;
-    --bm-sp-l: 1rem;
-    --bm-sp-xl: 1.25rem;
-    --bm-sp-xxl: 1.5rem;
-    --bm-sp-xxxl: 2rem;
-    --bm-sp-4xl: 2.5rem;
-    --bm-sp-5xl: 3rem;
-    --bm-sp-6xl: 4rem;
-    --bm-sp-7xl: 5rem;
-
-    /* Type. Segoe UI Variable is Fluent 2's typeface and ships with Windows 11; the rest of the
-       stack is the platform's own UI face, so the site is never the reason a font is downloaded. */
-    --bm-fnt-family-base: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bm-fnt-family-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bm-fnt-family-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-    /* Fluent's type ramp. The sizes are the ramp as published; the leading on the two body sizes
-       is opened up from Fluent's own because this site is read as prose rather than scanned as an
-       application surface, and 22px on 16px is tight for a paragraph. */
-    --bm-fnt-size-100: 0.625rem;   /* Caption2   10 */
-    --bm-fnt-size-200: 0.75rem;    /* Caption1   12 */
-    --bm-fnt-size-300: 0.875rem;   /* Body1      14 */
-    --bm-fnt-size-400: 1rem;       /* Body2      16 */
-    --bm-fnt-size-500: 1.25rem;    /* Subtitle1  20 */
-    --bm-fnt-size-600: 1.5rem;     /* Title3     24 */
-    --bm-fnt-size-700: 1.75rem;    /* Title2     28 */
-    --bm-fnt-size-800: 2rem;       /* Title1     32 */
-    --bm-fnt-size-900: 2.5rem;     /* LargeTitle 40 */
-    --bm-fnt-size-1000: 4.25rem;   /* Display    68 */
-
-    --bm-fnt-line-100: 0.875rem;
-    --bm-fnt-line-200: 1rem;
-    --bm-fnt-line-300: 1.25rem;
-    --bm-fnt-line-400: 1.375rem;
-    --bm-fnt-line-500: 1.75rem;
-    --bm-fnt-line-600: 2rem;
-    --bm-fnt-line-700: 2.25rem;
-    --bm-fnt-line-800: 2.5rem;
-    --bm-fnt-line-900: 3.25rem;
-    --bm-fnt-line-1000: 5.75rem;
-
-    /* Prose leading, used wherever a run of text is longer than a label. */
-    --bm-fnt-line-prose: 1.625;
-
-    --bm-fnt-weight-regular: 400;
-    --bm-fnt-weight-medium: 500;
-    --bm-fnt-weight-semibold: 600;
-    --bm-fnt-weight-bold: 700;
-
-    /* Motion. Fluent's duration ramp and its curve set - a decelerating curve for anything
-       entering, an accelerating one for anything leaving, and easyEase for a state change that
-       does neither. */
-    --bm-dur-ultra-fast: 50ms;
-    --bm-dur-faster: 100ms;
-    --bm-dur-fast: 150ms;
-    --bm-dur-normal: 200ms;
-    --bm-dur-gentle: 250ms;
-    --bm-dur-slow: 300ms;
-    --bm-dur-slower: 400ms;
-    --bm-dur-ultra-slow: 500ms;
-
-    --bm-crv-accelerate-max: cubic-bezier(0.9, 0.1, 1, 0.2);
-    --bm-crv-accelerate-mid: cubic-bezier(1, 0, 1, 1);
-    --bm-crv-accelerate-min: cubic-bezier(0.8, 0, 0.78, 1);
-    --bm-crv-decelerate-max: cubic-bezier(0.1, 0.9, 0.2, 1);
-    --bm-crv-decelerate-mid: cubic-bezier(0, 0, 0, 1);
-    --bm-crv-decelerate-min: cubic-bezier(0.33, 0, 0.1, 1);
-    --bm-crv-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
-    --bm-crv-linear: cubic-bezier(0, 0, 1, 1);
-
-    /* Layout. The decisions a design system leaves to the product: how wide the reading column
-       runs, how far prose may stretch before it gets hard to follow, and how much room the two
-       sticky columns take. */
-    --bm-layout-max: 90rem;        /* 1440px - the outer rail-to-rail width */
-    --bm-layout-content: 53rem;    /* 848px  - the article column */
-    --bm-layout-measure: 72ch;
-    --bm-layout-header: 3.5rem;    /* 56px - every sticky offset below is derived from this */
-    --bm-layout-nav: 16.5rem;      /* 264px */
-    --bm-layout-rail: 15rem;       /* 240px */
-    /* Breathing room between the sticky header and whatever has been scrolled to. WCAG 2.2's
-       "focus not obscured" is why this is a token rather than a number: the header, the
-       scroll-padding on <html> and the rail's own jump all have to agree on it. */
-    --bm-layout-header-gap: 1.5rem;
-}
-
-/* Chrome transitions only. Anything inside .demo-card belongs to the animation being demonstrated
-   and must keep its own timing, which is exactly what this library exists to control - so the
-   durations are collapsed here rather than the animations deleted. */
-@media (prefers-reduced-motion: reduce) {
-    :root {
-        --bm-dur-ultra-fast: 0.01ms;
-        --bm-dur-faster: 0.01ms;
-        --bm-dur-fast: 0.01ms;
-        --bm-dur-normal: 0.01ms;
-        --bm-dur-gentle: 0.01ms;
-        --bm-dur-slow: 0.01ms;
-        --bm-dur-slower: 0.01ms;
-        --bm-dur-ultra-slow: 0.01ms;
-    }
-}
-
-/* ── 3. Aliases ────────────────────────────────────────────────────────────── */
-
-/* The names this site used before the block above existed. Every demo page carries a <style>
-   block of its own that reaches for them, and anything lifted from the Bit.BlazorUI demo is
-   written against the --bit-clr-* half, so both stay as the seam between the pages and the
-   theme: re-theming happens above, and none of those blocks ever has to be touched. */
-
-:root {
-    /* primary - the dual-role accent, because a demo page's <style> block uses this one name for
-       a gradient stop and for a label colour alike. */
-    --bit-clr-pri: var(--bm-clr-brand-accent);
-    --bit-clr-pri-hover: var(--bm-clr-brand-accent-hover);
-    --bit-clr-pri-active: var(--bm-clr-brand-accent-pressed);
-    --bit-clr-pri-light: var(--bm-brand-130);
-    --bit-clr-pri-text: var(--bm-clr-brand-accent-contrast);
-    --bit-clr-pri-dis: var(--bm-clr-brand-bg-subtle);
-    /* secondary */
-    --bit-clr-sec: var(--bm-peach);
-    --bit-clr-sec-light: var(--bm-peach-light);
-    --bit-clr-sec-text: var(--bm-grey-14);
-    /* info - the quiet, neutral accent */
-    --bit-clr-inf: var(--bm-clr-fg-3);
-    --bit-clr-inf-light: var(--bm-clr-fg-4);
-    /* foreground */
-    --bit-clr-fg-pri: var(--bm-clr-fg-1);
-    --bit-clr-fg-sec: var(--bm-clr-fg-2);
-    --bit-clr-fg-ter: var(--bm-clr-fg-3);
-    /* background */
-    --bit-clr-bg-pri: var(--bm-clr-bg-1);
-    --bit-clr-bg-pri-hover: var(--bm-clr-bg-1-hover);
-    --bit-clr-bg-sec: var(--bm-clr-bg-3);
-    --bit-clr-bg-sec-hover: var(--bm-clr-bg-3-hover);
-    --bit-clr-bg-ter: var(--bm-clr-bg-5);
-    --bit-clr-bg-overlay: var(--bm-clr-bg-overlay);
-    /* border */
-    --bit-clr-brd-pri: var(--bm-clr-stroke-accessible);
-    --bit-clr-brd-sec: var(--bm-clr-stroke-1);
-    --bit-clr-brd-ter: var(--bm-clr-stroke-2);
-
-    /* shape and motion */
-    --bit-shp-brd-radius: var(--bm-crn-medium);
-    --bit-shp-brd-width: var(--bm-strk-thin);
-    --bit-shp-brd-style: solid;
-    --bit-mot-duration-full: var(--bm-dur-normal);
-    --bit-mot-duration-short-full: var(--bm-dur-faster);
-    --bit-mot-duration-long-full: var(--bm-dur-slow);
-    --bit-mot-duration: var(--bm-dur-normal);
-    --bit-mot-duration-short: var(--bm-dur-faster);
-    --bit-mot-duration-long: var(--bm-dur-slow);
-    --bit-mot-easing: var(--bm-crv-easy-ease);
-
-    /* The shell's own names, kept because the demo pages and js/demo.js read them. */
-    --demo-font-sans: var(--bm-fnt-family-base);
-    --demo-font-mono: var(--bm-fnt-family-mono);
-    --demo-content-width: var(--bm-layout-max);
-    --demo-measure: var(--bm-layout-measure);
-    --demo-header-height: var(--bm-layout-header);
-    --demo-nav-width: var(--bm-layout-nav);
-
-    /* The sample palette. Every demo page's <style> block reaches for these, so redefining them
-       here re-themes all twenty pages at once. */
-    --bm-primary: var(--bm-clr-brand-accent);
-    --bm-primary-text: var(--bm-clr-brand-accent-contrast);
-    --bm-secondary: var(--bit-clr-sec);
-    --bm-dark: var(--bm-clr-bg-3);
-    --bm-surface: var(--bm-clr-bg-1);
-    /* The stage a sample is played on: one surface step off the card it sits in, in both themes,
-       so a sample reads as a thing placed on the page rather than as part of it. */
-    --bm-card: var(--bm-clr-bg-3);
-    --bm-text: var(--bm-clr-fg-1);
-    --bm-muted: var(--bm-clr-fg-2);
-    --bm-border: var(--bm-clr-stroke-2);
-    --bm-radius: var(--bm-crn-medium);
-    /* The recessed surface a sample paints a track, a groove or a gutter on - one step deeper
-       than the stage it sits on, in both themes. */
-    --bm-track: var(--bm-clr-bg-5);
-    --bm-accent-soft: var(--bm-clr-brand-wash);
-    --bm-accent-line: color-mix(in srgb, var(--bm-clr-brand-stroke) 35%, transparent);
-}
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/demo.css b/src/Utilities/Bmotion/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..08039eaa8ac
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,1592 @@
+/* ============================================================================================
+   Bmotion demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Bmotion's own - the stages a sample plays on, the moving
+   parts, the snippet highlighter's tokens and the widgets of the MCP console - and it is written
+   against the kit's --bb-* names, so it follows the light/dark theme with no rules of its own for
+   either.
+
+   The line this file will not cross: it styles the frame around a sample, never the motion. Every
+   transform, opacity, colour and size that moves on this site is Bit.Bmotion's, written inline by
+   the engine or played by the browser from bit-bmotion.css - which is why nothing below is built on
+   the kit's --bb-motion-* durations (they collapse under prefers-reduced-motion; the library has a
+   reduced-motion policy of its own, demonstrated on the Accessibility page).
+   ============================================================================================ */
+
+/* ---------- The sample palette ----------
+
+   The moving parts are painted bit blue into bit orange in BOTH themes, rather than in the theme's
+   primary: they are the subject of the page, the C# samples animate between exactly these two
+   colours (backgroundColor: "#1276C6" / "#FD7F36"), and the white labels some of them carry need
+   the darker blue the dark theme's primary is not. */
+:root {
+    --demo-blue: #1276C6;
+    --demo-orange: #FD7F36;
+    --demo-gradient: linear-gradient(135deg, var(--demo-blue), var(--demo-orange));
+    /* The hairline around a brand-tinted row or panel. */
+    --demo-accent-line: color-mix(in srgb, var(--bb-primary) 35%, transparent);
+    /* The faint measure grid printed on every stage. */
+    --demo-grid-dot: color-mix(in srgb, var(--bb-text) 8%, transparent);
+}
+
+/* ---------- Code: SyntaxHighlighter's tokens on the kit's code surface ----------
+
+   The highlighter tells more kinds apart than the kit's four (keyword, string, comment, parameter),
+   so the extra ones get colours of their own here, light and dark, picked to hold their contrast on
+   --bb-code-bg in both themes. */
+:root {
+    --demo-code-type: #8250DF;
+    --demo-code-number: #CF222E;
+    --demo-code-razor: #A21CAF;
+}
+
+:root[bit-theme="dark"] {
+    --demo-code-type: #D2A8FF;
+    --demo-code-number: #FF7B72;
+    --demo-code-razor: #F0ABFC;
+}
+
+.bb-code .tok-com { color: var(--bb-code-comment); font-style: italic; }
+.bb-code .tok-tag,
+.bb-code .tok-key { color: var(--bb-code-keyword); }
+.bb-code .tok-str { color: var(--bb-code-string); }
+.bb-code .tok-attr { color: var(--bb-code-param); }
+.bb-code .tok-type { color: var(--demo-code-type); }
+.bb-code .tok-num { color: var(--demo-code-number); }
+.bb-code .tok-raz { color: var(--demo-code-razor); }
+
+/* The lines where a Bmotion component is used, so they stand out from the markup around them. An
+   inline-block rather than a block, so the newline after it ends the line instead of adding a blank
+   one; pulled into the code block's start padding for the rule, and no further than its content
+   edge at the end, so a highlighted line never gives the block a scrollbar of its own. */
+.bb-code .hl-line {
+    display: inline-block;
+    vertical-align: top;
+    /* As wide as its own text when that runs past the edge (an inline-block is otherwise capped at
+       the width available to it, and the rest of the line would hang outside the band), and never
+       narrower than the row. */
+    width: max-content;
+    min-width: calc(100% + 1rem);
+    margin-inline-start: -1rem;
+    padding-inline-start: calc(1rem - 3px);
+    background: color-mix(in srgb, var(--bb-primary) 9%, transparent);
+    box-shadow: inset 3px 0 0 var(--bb-primary);
+}
+
+/* The "Show code" toggle: the kit's secondary button, with the caret, the code glyph and the
+   language it opens. */
+.code-snippet-toggle {
+    margin-top: .25rem;
+}
+
+.code-snippet-caret {
+    font-size: .8em;
+    color: var(--bb-text-soft);
+}
+
+.code-snippet-glyph {
+    font-family: var(--bb-mono);
+    color: var(--bb-primary);
+}
+
+.code-snippet-lang {
+    margin-inline-start: .25rem;
+    padding-inline-start: .5rem;
+    border-inline-start: 1px solid var(--bb-border);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    letter-spacing: .04em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* ---------- Stages ----------
+
+   The stage a sample is played on: a raised surface printed with a faint measure grid. An animation
+   about position or scale is far easier to read against something regular than against a blank
+   field, and the grid is the quietest possible way to give the eye that reference. */
+.demo-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: stretch;
+    margin: 0 0 1rem;
+}
+
+.demo-card {
+    flex: 1 1 13.75rem;
+    min-width: 0;
+    min-height: 10rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    color: var(--bb-text);
+    background-color: var(--bb-surface);
+    background-image: radial-gradient(circle at center, var(--demo-grid-dot) 1px, transparent 1px);
+    background-size: 1.25rem 1.25rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* A stage that stacks a caption above the moving part instead of centring one thing in the middle. */
+.demo-card.stack {
+    flex-direction: column;
+    gap: .75rem;
+}
+
+.demo-card.align-start {
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+/* The stages whose sample needs a known width - a row of four boxes, a pair of swatches, a journey
+   of 150px - ask for it, so a row of them wraps before any one is squeezed under its sample. */
+.demo-card:has(> .variant-boxes),
+.demo-card:has(> .swatch-pair),
+.demo-card.arc-stage {
+    flex-basis: 17rem;
+}
+
+/* The caption naming what a stage is showing - a spring's constants, an easing's name, the CSS
+   property being animated. Deliberately quiet: it labels the sample, it is not part of it. */
+.demo-label {
+    font-size: .8125rem;
+    line-height: 1.5;
+    text-align: center;
+    color: var(--bb-text-muted);
+}
+
+.bb-toolbar > .demo-label {
+    text-align: start;
+}
+
+/* ---------- The moving parts ----------
+
+   They keep their own rounding and their gradient fill: they are the subject of the page, not
+   chrome. A label on one is set at 20px/700, the size at which white has to clear WCAG's large-text
+   3:1 over the lightest point of the gradient it covers, rather than 4.5:1. */
+.box {
+    width: 5rem;
+    height: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #fff;
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1.4;
+    cursor: pointer;
+    user-select: none;
+    border-radius: .625rem;
+    background: var(--demo-gradient);
+}
+
+.box-sm {
+    width: 3.125rem;
+    height: 3.125rem;
+    border-radius: .5rem;
+}
+
+.box:focus-visible,
+.box-sm:focus-visible {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 3px;
+}
+
+/* A box carrying a word rather than a glyph (Getting started). */
+.box-label {
+    width: 6rem;
+    font-size: 1.125rem;
+}
+
+/* ---------- Accessibility ---------- */
+
+.caps-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: .5rem;
+}
+
+/* Monospace and fixed-height so the per-frame readout does not reflow the stage as the numbers
+   change width. */
+.frame-readout {
+    display: block;
+    min-height: 2.5rem;
+    max-width: 100%;
+    padding: 0;
+    overflow-wrap: anywhere;
+    font-size: .75rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: none;
+    border: 0;
+}
+
+/* ---------- AnimatePresence ---------- */
+
+/* Exit targets move content past the edge of its stage; clipping keeps the departure inside the
+   stage instead of letting it slide across the page. */
+.presence-stage {
+    position: relative;
+    min-height: 12.5rem;
+    overflow: hidden;
+}
+
+/* A list stage stacks its rows edge to edge (AnimatePresence and Reorder). */
+.list-stage {
+    flex-direction: column;
+    align-items: stretch;
+    gap: .5rem;
+    width: 100%;
+    min-width: min(17.5rem, 100%);
+}
+
+.presence-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: .6rem 1rem;
+    border-radius: var(--bb-radius-lg);
+    color: var(--bb-text);
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+.row-remove {
+    border: none;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    font-size: 1.1rem;
+    background: none;
+    color: var(--bb-text);
+}
+
+.row-remove:hover {
+    background: var(--bb-surface-hover);
+}
+
+/* position: relative is what anchors the popped (absolute) chips; without it they would fall back
+   to the nearest positioned ancestor and jump across the page. */
+.chip-stage {
+    position: relative;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    justify-content: flex-start;
+    gap: .5rem;
+    min-height: 7.5rem;
+}
+
+.chip {
+    padding: .35rem .9rem;
+    border-radius: var(--bb-radius-pill);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    color: var(--bb-text);
+    background: color-mix(in srgb, var(--bb-accent) 15%, transparent);
+    border: 1px solid color-mix(in srgb, var(--bb-accent) 40%, transparent);
+}
+
+.page-box {
+    font-size: 2rem;
+}
+
+/* ---------- Color ---------- */
+
+.swatch-pair {
+    display: flex;
+    gap: 1rem;
+}
+
+.swatch-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .4rem;
+}
+
+.swatch {
+    width: 5.5rem;
+    height: 5rem;
+    border-radius: .625rem;
+}
+
+/* ---------- CSS properties ---------- */
+
+.css-headline {
+    font-weight: 800;
+    font-size: 1.4rem;
+    letter-spacing: 0;
+    color: var(--bb-text);
+}
+
+.css-prose {
+    max-width: 190px;
+    color: var(--bb-text);
+    font-size: .95rem;
+    text-align: left;
+}
+
+.css-row {
+    display: flex;
+}
+
+/* A left/top-anchored track so margin / position offsets are visible against an edge. */
+.css-track {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.css-track-wide {
+    min-height: 60px;
+}
+
+/* Solid, so its label stays readable: what this sample shows is the padding animating, which the
+   fill has nothing to do with. */
+.pad-box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: .625rem;
+    color: var(--bb-primary-text);
+    background: var(--bb-primary);
+    font-weight: 700;
+    font-size: .8rem;
+}
+
+.fill-box {
+    width: 120px;
+    height: 120px;
+    border-radius: .75rem;
+}
+
+.grad-a {
+    background: var(--demo-gradient);
+}
+
+.grad-pos {
+    background: linear-gradient(90deg, var(--demo-blue), var(--demo-orange), #ffb347);
+    background-size: 300% 100%;
+}
+
+.grad-size {
+    background: radial-gradient(circle at 50% 50%, var(--demo-orange) 0%, var(--demo-blue) 60%);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+/* Three declarations, one animated variable. The variable is set on .glow-card by the engine and
+   inherited by .glow-ring, which is why the inner element needs no animation of its own. */
+.glow-card {
+    width: 7.5rem;
+    height: 7.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1rem;
+    background: var(--demo-gradient);
+    border: 2px solid color-mix(in srgb, var(--demo-orange) 60%, transparent);
+    box-shadow: 0 0 var(--glow, 0px) color-mix(in srgb, var(--demo-blue) 70%, transparent);
+}
+
+.glow-ring {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, .9);
+    box-shadow: 0 0 var(--glow, 0px) rgba(255, 255, 255, .9);
+}
+
+/* ---------- Drag ---------- */
+
+/* Every drag stage is its own positioning context: the captions below are absolutely placed, and
+   BmDragConstraints.Parent() measures this element. */
+/* Wide enough for the ±120px journeys and the 248px snap grid. */
+.drag-stage {
+    position: relative;
+    flex-basis: 18rem;
+    overflow: hidden;
+    height: 12.5rem;
+}
+
+.drag-stage.tall {
+    height: 13.75rem;
+}
+
+.drag-stage.taller {
+    height: 15rem;
+}
+
+.stage-note {
+    position: absolute;
+    top: .5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: .75rem;
+    white-space: nowrap;
+    color: var(--bb-text-muted);
+}
+
+.stage-note.bottom {
+    top: auto;
+    bottom: .75rem;
+}
+
+/* The free-drag samples start dead centre so there is room to throw them in any direction. */
+.drag-centred {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -2.5rem 0 0 -2.5rem;
+    cursor: grab;
+}
+
+.drag-centred-sm {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -1.5625rem 0 0 -1.5625rem;
+    cursor: grab;
+}
+
+.grabbable {
+    cursor: grab;
+}
+
+.handle-row {
+    display: flex;
+    align-items: center;
+    gap: .6rem;
+    padding: .8rem 1rem;
+    border-radius: .625rem;
+    color: var(--bb-text);
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+/* The grip a drag or a reorder starts from (Drag and Reorder). */
+.grip {
+    cursor: grab;
+    user-select: none;
+    font-size: 1.1rem;
+    color: var(--bb-text-muted);
+}
+
+.thumb-track {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 1.75rem;
+    padding: 0 4px;
+    cursor: pointer;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface-2);
+}
+
+.thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--demo-gradient);
+}
+
+.drag-parent {
+    width: 9.375rem;
+    height: 9.375rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    border-radius: .75rem;
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+.drag-child {
+    width: 3.375rem;
+    height: 3.375rem;
+    cursor: grab;
+    border-radius: .625rem;
+    background: var(--demo-gradient);
+}
+
+/* The stops the snap sample lands on, drawn so the settle is visibly ON something. */
+.snap-grid {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 15.5rem;
+    height: 1px;
+    transform: translate(-50%, -50%);
+    background: repeating-linear-gradient(to right, var(--demo-accent-line) 0 1px, transparent 1px 3.75rem);
+}
+
+.snap-pages {
+    display: flex;
+    gap: .5rem;
+    padding: .75rem;
+    cursor: grab;
+    border-radius: .625rem;
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+.snap-pages span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 5rem;
+    height: 3.5rem;
+    color: #fff;
+    font-size: 1.25rem;
+    font-weight: 700;
+    border-radius: .5rem;
+    background: var(--demo-gradient);
+}
+
+/* ---------- Easing ---------- */
+
+/* One row per curve, all sharing a track of the same length: the comparison only means anything if
+   the distance and the duration are held constant across them. */
+.ease-list {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.ease-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.ease-name {
+    flex: none;
+    width: 7.5rem;
+    text-align: left;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+}
+
+/* flex: none so the track keeps its height when it is a column item inside a stacked stage. */
+.ease-track {
+    position: relative;
+    flex: none;
+    width: 100%;
+    height: 2rem;
+}
+
+.ease-row .ease-track {
+    flex: 1;
+    min-width: 0;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-surface-2) 60%, transparent);
+}
+
+.ease-dot {
+    width: 1.75rem;
+    height: 1.75rem;
+}
+
+/* ---------- Gestures ---------- */
+
+/* A real button, which IS the sample: its hover animates the fill to a darker brand blue, so it
+   keeps a fixed brand fill and white label in both themes - and carries none of the kit button's
+   own colour transitions, which would fight the animation. */
+.sample-btn {
+    min-height: 2.25rem;
+    padding: .5rem 1.1rem;
+    border: none;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: #fff;
+    background-color: var(--demo-blue);
+}
+
+.nest-card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    cursor: pointer;
+    border-radius: .75rem;
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+/* Filled with the theme's primary rather than the boxes' gradient: this one carries a word. */
+.nest-btn {
+    padding: .6rem 1.1rem;
+    border: none;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-primary-text);
+    background: var(--bb-primary);
+}
+
+/* A fixed stage with a marked centre, so "the pin slipped off its anchor" is visible. */
+.pin-stage {
+    position: relative;
+    min-height: 11rem;
+}
+
+.pin {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background: var(--demo-gradient);
+}
+
+/* The field WhileFocus animates - its border colour included - so it draws its own border rather
+   than the kit's field underline, which would change under the animation on focus. */
+.focus-input {
+    width: 15rem;
+    max-width: 100%;
+    padding: .5rem 1rem;
+    outline: none;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 2px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* A quiet panel so a live readout under a stage never resizes the stage. */
+.readout {
+    width: 100%;
+    font-family: var(--bb-mono);
+    font-size: .78rem;
+    line-height: 1.6;
+    text-align: center;
+    color: var(--bb-text-muted);
+}
+
+.event-log {
+    max-height: 7.5rem;
+    overflow: auto;
+}
+
+/* ---------- Keyframes ---------- */
+
+.keyframe-bar {
+    height: 1.875rem;
+    border-radius: var(--bb-radius);
+}
+
+.color-orb {
+    width: 7.5rem;
+    height: 7.5rem;
+    border-radius: 50%;
+    background-image: none;
+}
+
+/* The ball falls to the floor of its stage, so the stage is anchored at the bottom. */
+.ball-stage {
+    height: 13.75rem;
+    align-items: flex-end;
+    padding-bottom: 2.5rem;
+}
+
+.ball {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+}
+
+.current-track {
+    position: relative;
+    width: 100%;
+    height: 3.125rem;
+}
+
+/* ---------- Layout ---------- */
+
+.layout-stage {
+    align-items: stretch;
+}
+
+.layout-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .75rem;
+    width: 100%;
+}
+
+.layout-tile {
+    width: 3.75rem;
+    height: 3.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.25rem;
+    border-radius: .5rem;
+}
+
+/* Five distinguishable tiles, fixed rather than derived from the theme: what they demonstrate is
+   FLIP, not colour, so they are pinned to five shades that each clear 4.5:1 against white in both
+   themes and stay clearly apart from one another. */
+.tone-0 { background: #1276C6; }
+.tone-1 { background: #124265; }
+.tone-2 { background: #C25520; }
+.tone-3 { background: #7E3714; }
+.tone-4 { background: #4D4D4D; }
+
+.layout-tab-stage {
+    align-items: flex-start;
+}
+
+.layout-tab-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+/* position: relative is what the shared underline FLIPs against - it is absolutely placed inside
+   whichever tab is active. */
+.layout-tab {
+    position: relative;
+    padding-bottom: 6px;
+    cursor: pointer;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+.layout-tab.active {
+    color: var(--bb-text);
+}
+
+.layout-tab:focus-visible {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 4px;
+    border-radius: var(--bb-radius-sm);
+}
+
+.layout-tab-underline {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    border-radius: 2px;
+    background: linear-gradient(90deg, var(--demo-blue), var(--demo-orange));
+}
+
+.resize-stage {
+    min-height: 13.75rem;
+}
+
+.resize-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: .6rem;
+    width: 7.5rem;
+    height: 7.5rem;
+    border-radius: 1.25rem;
+    background: var(--demo-gradient);
+}
+
+.resize-card.big {
+    width: 16.25rem;
+    height: 11.25rem;
+    max-width: 100%;
+}
+
+.resize-label {
+    font-weight: 800;
+    font-size: 1.3rem;
+    color: #fff;
+}
+
+.resize-dot {
+    width: 2.125rem;
+    height: 2.125rem;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, .85);
+}
+
+/* Fixed footprint so the two anchor stages are directly comparable. */
+.anchor-box {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: .625rem;
+    background: var(--demo-gradient);
+}
+
+.anchor-box.big {
+    width: 7rem;
+    height: 7rem;
+}
+
+/* ---------- Motion path ---------- */
+
+.path-stage {
+    min-height: 13.75rem;
+}
+
+/* Fixed-size stage so the SVG guide (viewBox 0 0 300 180) and the dot's pixel-based offset-path
+   share one coordinate system. */
+.mpath-stage {
+    position: relative;
+    width: 300px;
+    height: 180px;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.mpath-guide {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .45;
+}
+
+.mpath-dot {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: var(--demo-gradient);
+}
+
+.draw-svg {
+    width: 100%;
+    max-width: 200px;
+    height: 120px;
+}
+
+/* The arc samples travel 150px right and 40px down, so the stage holds that journey without
+   reflowing - the box starts pinned to the top-left of the space it has to cross. */
+.arc-stage {
+    justify-content: flex-start;
+    min-height: 11rem;
+}
+
+.arc-start {
+    align-self: flex-start;
+}
+
+.arc-card {
+    font-size: 1.25rem;
+    color: #fff;
+}
+
+/* ---------- Programmatic ---------- */
+
+.dot-row {
+    display: flex;
+    gap: .5rem;
+}
+
+.prog-dot {
+    width: 1.5rem;
+    height: 2.75rem;
+    border-radius: 6px;
+    background: var(--demo-gradient);
+}
+
+.counter {
+    font-family: var(--bb-mono);
+    font-weight: 800;
+    font-size: 2.75rem;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--bb-text);
+}
+
+.seq-stage {
+    flex-direction: column;
+    gap: 1.5rem;
+    min-height: 12.5rem;
+}
+
+.seq-box {
+    width: 3.75rem;
+    height: 3.75rem;
+}
+
+.seq-dots {
+    display: flex;
+    gap: .6rem;
+}
+
+.seq-dot {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background: var(--demo-orange);
+}
+
+.value-slider {
+    width: 100%;
+    max-width: 22rem;
+}
+
+.value-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.value-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .5rem;
+}
+
+/* ---------- Reorder ---------- */
+
+.track-row {
+    display: flex;
+    align-items: center;
+    gap: .7rem;
+    padding: .7rem 1rem;
+    border-radius: var(--bb-radius-lg);
+    color: var(--bb-text);
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+.track-title {
+    flex: 1;
+    min-width: 0;
+}
+
+.track-time {
+    font-size: .8rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--bb-text-muted);
+}
+
+.track-move {
+    padding: 0 .25rem;
+    border: none;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    background: none;
+    font-family: inherit;
+    color: var(--bb-text-muted);
+}
+
+.track-move:hover:not(:disabled) {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.track-move:disabled {
+    opacity: .35;
+    cursor: default;
+}
+
+.chip-rail {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: .5rem;
+}
+
+/* The rail cannot wrap - the group reorders along one line - so on a narrow screen its stage
+   scrolls instead, starting at the first chip rather than centring the overflow off both edges. */
+.demo-card:has(> .chip-rail) {
+    justify-content: safe center;
+    overflow-x: auto;
+}
+
+.rail-chip {
+    padding: .5rem 1rem;
+    border-radius: var(--bb-radius-pill);
+    white-space: nowrap;
+    cursor: grab;
+    user-select: none;
+    color: var(--bb-text);
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+.reorder-readout {
+    margin: .75rem 0 1rem;
+    font-size: .875rem;
+    color: var(--bb-text-muted);
+}
+
+/* ---------- Scroll ---------- */
+
+/* The window-progress readout parks under the sticky site header rather than behind it. */
+.scroll-progress {
+    position: sticky;
+    top: calc(var(--bb-header-height) + .5rem);
+    z-index: 50;
+    margin-bottom: 2rem;
+    padding: 1rem 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+.progress-caption {
+    margin: .4rem 0;
+    text-align: left;
+}
+
+/* The timeline-driven bar sits on its own, above the row of stages, with the caption it needs to be
+   readable as a sample rather than as page chrome. */
+.timeline-bar-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin-bottom: 1.5rem;
+}
+
+.timeline-bar-wrap > .demo-label {
+    text-align: start;
+}
+
+.scroll-track {
+    width: 100%;
+    height: .5rem;
+    overflow: hidden;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface-2);
+}
+
+.scroll-fill {
+    height: 100%;
+    border-radius: var(--bb-radius-pill);
+    transition: width .05s;
+    background: linear-gradient(90deg, var(--demo-blue), var(--demo-orange));
+}
+
+/* The motion-value bound fills are scaled, not resized: they start full width and the engine drives
+   scaleX from the left edge. */
+.full-width {
+    width: 100%;
+    transition: none;
+    transform-origin: 0 50%;
+}
+
+.target-panel {
+    width: 100%;
+    height: 8rem;
+    border-radius: var(--bb-radius-lg);
+    background: repeating-linear-gradient(45deg, var(--bb-primary-soft) 0 12px, transparent 12px 24px);
+    border: 1px solid var(--demo-accent-line);
+}
+
+/* overflow-x: clip rather than hidden: hidden would make this a scroll container and break
+   position: sticky for anything inside it. */
+.inview-strip {
+    overflow-x: clip;
+}
+
+.inview-band {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 5rem;
+    margin-bottom: 1rem;
+    color: #fff;
+    font-weight: 700;
+    border-radius: var(--bb-radius-xl);
+}
+
+.from-left {
+    background: linear-gradient(135deg, var(--demo-blue), var(--demo-orange));
+}
+
+.from-right {
+    background: linear-gradient(135deg, var(--demo-orange), var(--demo-blue));
+}
+
+/* ---------- Split text ---------- */
+
+/* The split-text stages animate type, not boxes, so they need a type scale of their own - the
+   samples only read as a headline treatment if they are headline-sized. */
+.split-headline {
+    font-family: var(--bb-font-display);
+    font-weight: 700;
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+    letter-spacing: -.02em;
+    text-align: center;
+    color: var(--bb-text);
+}
+
+.split-lines,
+.split-body {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.625;
+    color: var(--bb-text);
+}
+
+/* Deliberately narrow: the point of the sample is to force the text to wrap, so the reader can see
+   that the break lands between words rather than inside one. */
+.split-narrow {
+    max-width: 15rem;
+}
+
+/* ---------- Variants ---------- */
+
+.variant-list {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.variant-row {
+    padding: .6rem 1rem;
+    font-size: .9rem;
+    border-radius: var(--bb-radius-lg);
+    color: var(--bb-text);
+    background: var(--bb-primary-soft);
+    border: 1px solid var(--demo-accent-line);
+}
+
+.variant-boxes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: .5rem;
+}
+
+/* The box that sits out the cascade. Drawn flat rather than gradient-filled so it reads as "not
+   part of this group" before it moves at all. */
+.box-muted {
+    background: var(--bb-surface-2);
+    border: 1px dashed var(--demo-accent-line);
+}
+
+/* A fixed stage the fanned cards overlap inside: they start stacked, so the container holds its size
+   rather than tracking the widest arrangement. */
+.fan-stage {
+    position: relative;
+    width: 100%;
+    height: 8rem;
+}
+
+.fan-card {
+    position: absolute;
+    top: 1.5rem;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3.25rem;
+    height: 4.5rem;
+    margin-left: -1.625rem;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.25rem;
+    border-radius: .5rem;
+    background: var(--demo-gradient);
+    box-shadow: var(--fl-shadow-8);
+}
+
+.stagger-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: .5rem;
+}
+
+.grid-dot {
+    width: 1.625rem;
+    height: 1.625rem;
+    border-radius: 6px;
+    background: var(--demo-gradient);
+}
+
+/* ---------- View transitions ---------- */
+
+.vt-panel {
+    min-height: 7.5rem;
+    margin: 0 0 1rem;
+    padding: 1.5rem 1.75rem;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    /* Naming the element gives it its own snapshot pair, which the rule below can then target
+       independently of the rest of the page. The site chrome is named too (bb-header,
+       bb-docs-sidebar, bb-rail), so the header, the nav panel and the rail sit still while this
+       panel cross-fades. */
+    view-transition-name: vt-panel;
+}
+
+.vt-panel > :last-child {
+    margin-bottom: 0;
+}
+
+::view-transition-old(vt-panel),
+::view-transition-new(vt-panel) {
+    animation-duration: .4s;
+}
+
+/* ---------- MCP console ---------- */
+
+/* Three symptoms side by side in the reading column, rather than the kit grid's two and a straggler. */
+.bb-grid.mcp-why {
+    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+}
+
+.mcp-why-card {
+    gap: .5rem;
+    height: 100%;
+}
+
+.mcp-why-symptom {
+    color: var(--bb-text);
+}
+
+.mcp-why-card .bb-card-desc {
+    margin: 0;
+}
+
+.mcp-why-card > code {
+    align-self: flex-start;
+    margin-top: auto;
+    /* A tool's name is one identifier: it may break between its words (the page marks them with
+       <wbr>), never inside one. */
+    overflow-wrap: normal;
+}
+
+.mcp-tab-note {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.mcp-lab-body {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    gap: 1.25rem;
+}
+
+.mcp-lab-body > .mcp-form {
+    flex: 1 1 20rem;
+    min-width: 0;
+}
+
+.mcp-form {
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+}
+
+.mcp-form > .bb-toolbar {
+    margin: 0;
+}
+
+.mcp-field {
+    display: flex;
+    width: 100%;
+}
+
+.mcp-field > input,
+textarea.mcp-code,
+.mcp-search > input {
+    width: 100%;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+}
+
+.mcp-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* A preset: a pill that fills the field and runs it in one press. */
+.mcp-chip {
+    padding: .25rem .625rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    cursor: pointer;
+}
+
+.mcp-chip:hover:not(:disabled) {
+    border-color: var(--bb-primary);
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+}
+
+.mcp-chip:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+}
+
+/* The replay: the box travels 220px along the measured curve. */
+.mcp-lab-stage {
+    flex: 1 1 18rem;
+    min-width: 0;
+    min-height: 6rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.mcp-box-idle {
+    opacity: .35;
+    cursor: default;
+}
+
+.mcp-result {
+    margin-top: 1.25rem;
+}
+
+.mcp-result + .mcp-result {
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.mcp-result-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 .75rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.mcp-metrics {
+    margin-bottom: .75rem;
+}
+
+.mcp-sparkline {
+    padding-inline-end: 3rem;
+    margin-bottom: .75rem;
+    color: var(--bb-primary);
+}
+
+.mcp-reading {
+    max-width: var(--bb-measure);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.mcp-verdict {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: .5rem 1rem;
+}
+
+.mcp-verdict > .bb-mono {
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+}
+
+textarea.mcp-code {
+    min-height: 12rem;
+    margin-bottom: .75rem;
+    line-height: 1.55;
+    tab-size: 4;
+}
+
+.mcp-findings {
+    display: grid;
+    gap: .625rem;
+    margin: 1rem 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.mcp-finding {
+    padding: .75rem 1rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-inline-start: 3px solid var(--bb-primary);
+    border-radius: var(--bb-radius-lg);
+}
+
+.mcp-finding.error {
+    border-inline-start-color: var(--bb-danger);
+}
+
+.mcp-finding.warning {
+    border-inline-start-color: var(--bb-warning);
+}
+
+.mcp-rule,
+.mcp-line {
+    margin-inline-start: .5rem;
+    font-size: .75rem;
+}
+
+.mcp-rule {
+    font-family: var(--bb-mono);
+    color: var(--bb-primary);
+}
+
+.mcp-line {
+    color: var(--bb-text-soft);
+}
+
+.mcp-finding p {
+    margin: .4rem 0 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.mcp-finding p.mcp-fix {
+    color: var(--bb-text);
+}
+
+.mcp-search > input {
+    flex: 1 1 18rem;
+    min-width: 0;
+}
+
+.mcp-hits {
+    display: grid;
+    gap: .375rem;
+    margin: 0 0 1rem;
+    padding: 0;
+    list-style: none;
+}
+
+.mcp-hits li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: .375rem .75rem;
+    min-width: 0;
+    padding: .5rem .75rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.mcp-hit-title {
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+}
+
+.mcp-hits code {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+/* A parameter broken across lines cannot be read as one, so this column, like the tool names
+   beside it, takes the width its longest parameter needs. */
+.mcp-table td.mcp-params {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+.mcp-params > code {
+    display: table;
+    margin-bottom: .2rem;
+}
+
+.mcp-card {
+    gap: .25rem;
+    height: 100%;
+}
+
+.mcp-card > code {
+    align-self: flex-start;
+}
+
+.mcp-card .bb-card-desc {
+    margin: .375rem 0 0;
+}
+
+.mcp-card-params {
+    display: block;
+    margin-top: .5rem;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+}
+
+/* ---------- Landing page: the live tiles in the hero's window ---------- */
+
+.home-hero-live {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: .75rem;
+    padding: 1.25rem;
+    background-color: var(--bb-surface);
+    background-image: radial-gradient(circle at center, var(--demo-grid-dot) 1px, transparent 1px);
+    background-size: 1.25rem 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.home-tile {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    padding: 1rem 1.125rem;
+    color: #fff;
+    border-radius: var(--bb-radius-xl);
+    background: linear-gradient(135deg, var(--demo-blue), #124265);
+    box-shadow: var(--fl-shadow-8);
+}
+
+/* The deep ends of the two brand hues, laid out on a diagonal, so every tile's white label clears
+   4.5:1 wherever it sits on its gradient. */
+.home-tile:nth-child(2),
+.home-tile:nth-child(3) {
+    background: linear-gradient(135deg, #C25520, #7E3714);
+}
+
+.home-tile:hover {
+    color: #fff;
+    text-decoration: none;
+}
+
+.home-tile-title {
+    font-size: var(--fl-font-size-400);
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+.home-tile-desc {
+    font-size: .8125rem;
+    line-height: 1.45;
+    opacity: .92;
+}
+
+@media (max-width: 600px) {
+    .demo-card {
+        padding: 1.25rem;
+    }
+
+    .ease-name {
+        width: 5.5rem;
+    }
+}
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/js/demo.js b/src/Utilities/Bmotion/Demo/Server/wwwroot/js/demo.js
deleted file mode 100644
index f5d43cc2c44..00000000000
--- a/src/Utilities/Bmotion/Demo/Server/wwwroot/js/demo.js
+++ /dev/null
@@ -1,375 +0,0 @@
-// Browser-side helpers for the demo shell. They live in a plain script (not a module) because the
-// components call them by name through IJSRuntime.InvokeAsync, and the file is loaded from
-// App.razor before blazor.web.js so every function exists by the time the WebAssembly runtime
-// hydrates the prerendered markup.
-//
-// Nothing here animates anything. Every moving thing on this site is Bit.Bmotion's job, and a
-// second animation engine hiding in the chrome would be the demo arguing against its own point.
-// What this file does is the handful of things a component cannot: read the document, listen to
-// the window, and talk to the clipboard.
-
-// ── Theme ────────────────────────────────────────────────────────────────────
-//
-// The stylesheets key off the data-theme attribute on <html>. This half of the file is also
-// inlined into the <head> by App.razor and runs before the first paint, so the stored theme is
-// applied to the document rather than swapped in afterwards - which would show the reader a flash
-// of the wrong one.
-
-window.bmTheme = {
-    KEY: 'bm-theme',
-
-    // The stored choice if there is one, otherwise whatever the operating system asks for. Reading
-    // localStorage can throw outright (a browser with site data blocked), so a failure here falls
-    // through to the system preference rather than taking the page down with it.
-    preferred() {
-        let stored = null;
-        try { stored = localStorage.getItem(window.bmTheme.KEY); } catch { /* no stored preference */ }
-        if (stored === 'light' || stored === 'dark') return stored;
-        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-
-    current() {
-        return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
-    },
-
-    apply(theme) {
-        document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : 'light');
-    },
-
-    set(theme) {
-        window.bmTheme.apply(theme);
-        try { localStorage.setItem(window.bmTheme.KEY, theme); } catch { /* preference is not persisted */ }
-    },
-};
-
-window.bmToggleTheme = function () {
-    const next = window.bmTheme.current() === 'dark' ? 'light' : 'dark';
-    window.bmTheme.set(next);
-    return next;
-};
-
-window.bmTheme.apply(window.bmTheme.preferred());
-
-// ── Layout metrics ───────────────────────────────────────────────────────────
-//
-// The header's height and the gap under it are tokens in theme.css. Everything that has to clear
-// the header reads them from there rather than repeating the number, so the CSS and this file can
-// only ever agree.
-
-window.bmMetrics = {
-    rem(name, fallback) {
-        const root = getComputedStyle(document.documentElement);
-        const value = parseFloat(root.getPropertyValue(name));
-        return (isNaN(value) ? fallback : value) * parseFloat(root.fontSize || '16');
-    },
-
-    headerOffset() {
-        return window.bmMetrics.rem('--bm-layout-header', 3.5)
-             + window.bmMetrics.rem('--bm-layout-header-gap', 1.5);
-    },
-};
-
-// ── Header ───────────────────────────────────────────────────────────────────
-//
-// The header is a translucent pane. It grows a shadow the moment there is something scrolled
-// underneath it to lift away from, and loses it again at the top of the page - so the elevation
-// says "there is more above" rather than being decoration that is always on.
-
-window.bmHeader = {
-    onScroll: null,
-
-    update() {
-        const header = document.querySelector('.app-header');
-        if (!header) return;
-        header.setAttribute('data-scrolled', window.scrollY > 4 ? 'true' : 'false');
-    },
-};
-
-(function watchHeader() {
-    let queued = false;
-    window.bmHeader.onScroll = function () {
-        if (queued) return;
-        queued = true;
-        requestAnimationFrame(() => {
-            queued = false;
-            window.bmHeader.update();
-        });
-    };
-
-    window.addEventListener('scroll', window.bmHeader.onScroll, { passive: true });
-    document.addEventListener('DOMContentLoaded', window.bmHeader.update);
-    window.bmHeader.update();
-})();
-
-// ── "On this page" rail ──────────────────────────────────────────────────────
-//
-// The rail is built from the section headings actually present in the rendered page, so a demo
-// page earns its entries by having sections rather than by maintaining a second list of them.
-
-window.bmSections = {
-    ids: [],
-    dotNetRef: null,
-    activeId: null,
-    onScroll: null,
-
-    // The last heading that has passed under the header is the one being read. Falls back to the
-    // first entry so a page scrolled to the very top still marks its opening section.
-    update() {
-        const offset = window.bmMetrics.headerOffset();
-        let current = window.bmSections.ids[0] || null;
-
-        for (const id of window.bmSections.ids) {
-            const el = document.getElementById(id);
-            if (!el) continue;
-            if (el.getBoundingClientRect().top - offset <= 1) current = id;
-        }
-
-        if (current === window.bmSections.activeId) return;
-
-        window.bmSections.activeId = current;
-        window.bmSections.dotNetRef?.invokeMethodAsync('SetActiveSection', current);
-    },
-};
-
-// Returns the section headings of the current page, giving any that lack one a stable id derived
-// from its text so the rail's links survive a re-render - and hanging a link on each, so a reader
-// can send a colleague the one section that answers their question. A section is addressable for
-// exactly the same reason it is listed in the rail, which is why both happen here.
-window.bmCollectSections = function (anchorIcon) {
-    const headings = document.querySelectorAll('.page-container .demo-section > h2');
-    const items = [];
-    const used = new Set();
-
-    headings.forEach((h, index) => {
-        let id = h.id;
-        if (!id) {
-            const slug = (h.textContent || '').trim().toLowerCase()
-                .replace(/[^a-z0-9]+/g, '-')
-                .replace(/^-+|-+$/g, '');
-            id = slug || `section-${index + 1}`;
-            while (used.has(id)) id = `${id}-${index + 1}`;
-            h.id = id;
-        }
-        used.add(id);
-
-        const title = (h.textContent || '').trim();
-        items.push({ id, title });
-
-        // The icon's geometry is handed in by the caller rather than written out here: it lives in
-        // Shared/Icons.cs with the rest of the set, and a second copy in this file is a copy that
-        // would never be updated alongside it. Without one the anchor is simply not hung - it is a
-        // shortcut to an id that the heading has either way.
-        if (anchorIcon && !h.querySelector('.heading-anchor')) {
-            const anchor = document.createElement('a');
-            anchor.className = 'heading-anchor';
-            anchor.href = `#${id}`;
-            anchor.setAttribute('aria-label', `Link to "${title}"`);
-            anchor.innerHTML = '<svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
-                + anchorIcon + '</svg>';
-            h.prepend(anchor);
-        }
-    });
-
-    return items;
-};
-
-// The caller has just collected the sections to build the rail from, so it hands the ids straight
-// over rather than making this walk the same headings a second time. Collecting them here is only
-// the fallback for a caller that has not.
-window.bmObserveSections = function (dotNetRef, ids) {
-    window.bmDisposeSections();
-
-    window.bmSections.dotNetRef = dotNetRef;
-    window.bmSections.ids = ids ?? window.bmCollectSections().map(i => i.id);
-    window.bmSections.activeId = null;
-
-    // A passive listener with the work deferred to the next frame: scroll fires far more often than
-    // the rail can meaningfully change, and this is running alongside the animations the page
-    // exists to demonstrate.
-    let queued = false;
-    window.bmSections.onScroll = function () {
-        if (queued) return;
-        queued = true;
-        requestAnimationFrame(() => {
-            queued = false;
-            window.bmSections.update();
-        });
-    };
-
-    window.addEventListener('scroll', window.bmSections.onScroll, { passive: true });
-    window.addEventListener('resize', window.bmSections.onScroll, { passive: true });
-    window.bmSections.update();
-};
-
-window.bmDisposeSections = function () {
-    if (window.bmSections.onScroll) {
-        window.removeEventListener('scroll', window.bmSections.onScroll);
-        window.removeEventListener('resize', window.bmSections.onScroll);
-    }
-
-    window.bmSections.onScroll = null;
-    window.bmSections.dotNetRef = null;
-    window.bmSections.ids = [];
-    window.bmSections.activeId = null;
-};
-
-// scrollIntoView would put the heading under the sticky header, so the position is computed instead
-// and the header's height taken off it. The CSS scroll-padding covers the browser's own fragment
-// navigation; this covers the rail's.
-window.bmScrollToSection = function (id) {
-    const el = document.getElementById(id);
-    if (!el) return;
-
-    const top = el.getBoundingClientRect().top + window.scrollY - window.bmMetrics.headerOffset();
-    window.scrollTo({ top, behavior: 'smooth' });
-};
-
-window.bmScrollToTop = function () {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-};
-
-// ── Keyboard shortcuts and the command palette ───────────────────────────────
-//
-// One listener, on the document, for the whole site. It owns exactly two things: the shortcut that
-// opens the palette, and - while the palette is open - the four keys that dialog needs. Everything
-// else falls straight through, which is why this is here rather than in an @onkeydown handler: a
-// Blazor handler cannot decide per event whether to preventDefault, so it would have to suppress
-// either every key or none of them, and both break typing into the palette's own input.
-
-window.bmShortcuts = {
-    dotNetRef: null,
-    paletteRef: null,
-    paletteOpen: false,
-    onKeyDown: null,
-    returnFocusTo: null,
-
-    isMac() {
-        const platform = navigator.userAgentData?.platform || navigator.platform || '';
-        return /mac|iphone|ipad|ipod/i.test(platform);
-    },
-
-    // A key pressed while the reader is typing somewhere is theirs, not ours - with the single
-    // exception of the palette shortcut, which is a chord nothing else claims.
-    isTyping(target) {
-        if (!target) return false;
-        if (target.isContentEditable) return true;
-        return /^(input|textarea|select)$/i.test(target.tagName || '');
-    },
-};
-
-/// Installs the listener and returns the label for the header's keycap, so the shortcut and the
-/// key it advertises are decided in the same place.
-window.bmRegisterShortcuts = function (dotNetRef) {
-    window.bmUnregisterShortcuts();
-
-    window.bmShortcuts.dotNetRef = dotNetRef;
-
-    window.bmShortcuts.onKeyDown = function (e) {
-        if ((e.ctrlKey || e.metaKey) && !e.altKey && (e.key === 'k' || e.key === 'K')) {
-            e.preventDefault();
-            window.bmShortcuts.dotNetRef?.invokeMethodAsync('OnSearchShortcut');
-            return;
-        }
-
-        // The bare slash is the other search shortcut readers reach for, but only when they are
-        // not already typing - otherwise it would eat the character.
-        if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey
-            && !window.bmShortcuts.paletteOpen && !window.bmShortcuts.isTyping(e.target)) {
-            e.preventDefault();
-            window.bmShortcuts.dotNetRef?.invokeMethodAsync('OnSearchShortcut');
-            return;
-        }
-
-        if (!window.bmShortcuts.paletteOpen) return;
-
-        const keys = { ArrowDown: 'down', ArrowUp: 'up', Enter: 'enter', Escape: 'close' };
-        const action = keys[e.key];
-        if (!action) return;
-
-        e.preventDefault();
-        window.bmShortcuts.paletteRef?.invokeMethodAsync('OnPaletteKey', action);
-    };
-
-    document.addEventListener('keydown', window.bmShortcuts.onKeyDown);
-
-    return window.bmShortcuts.isMac() ? '⌘ K' : 'Ctrl K';
-};
-
-window.bmUnregisterShortcuts = function () {
-    if (window.bmShortcuts.onKeyDown) {
-        document.removeEventListener('keydown', window.bmShortcuts.onKeyDown);
-    }
-
-    window.bmShortcuts.onKeyDown = null;
-    window.bmShortcuts.dotNetRef = null;
-};
-
-// Called by the palette as it opens and closes. It takes the focus on the way in and gives it back
-// on the way out - a dialog that leaves the reader's place behind is a dialog that costs more to
-// dismiss than it did to open - and holds the page still underneath it while it is up.
-window.bmSetPaletteOpen = function (open, paletteRef) {
-    window.bmShortcuts.paletteOpen = !!open;
-    window.bmShortcuts.paletteRef = open ? paletteRef : null;
-
-    if (open) {
-        window.bmShortcuts.returnFocusTo = document.activeElement;
-        document.body.style.overflow = 'hidden';
-
-        // The input does not exist yet: this runs from the component's parameter pass, which is
-        // before the render that creates it. Two frames is enough for Blazor to have applied the
-        // edit, and each attempt is cheap.
-        let attempts = 0;
-        const focus = () => {
-            const input = document.getElementById('palette-input');
-            if (input) { input.focus(); return; }
-            if (attempts++ < 10) requestAnimationFrame(focus);
-        };
-        requestAnimationFrame(focus);
-        return;
-    }
-
-    document.body.style.overflow = '';
-
-    const back = window.bmShortcuts.returnFocusTo;
-    window.bmShortcuts.returnFocusTo = null;
-    // Not if the reader has already moved on - navigating away from the palette puts focus where
-    // the new page wants it, and dragging it back to a header button would undo that.
-    if (back && document.body.contains(back) && document.activeElement === document.body) {
-        back.focus();
-    }
-};
-
-// The selection can move past either end of the visible list, and a selection nobody can see is
-// the same as no selection at all.
-window.bmScrollPaletteActive = function () {
-    const active = document.querySelector('.palette-item.active');
-    active?.scrollIntoView({ block: 'nearest' });
-};
-
-// ── Clipboard ────────────────────────────────────────────────────────────────
-//
-// Backs the "Copy" buttons of Shared/CodeSnippet.razor and the landing page's install line.
-
-window.bmCopyToClipboard = async function (text) {
-    try {
-        if (navigator.clipboard && window.isSecureContext) {
-            await navigator.clipboard.writeText(text);
-            return true;
-        }
-    } catch { /* fall through to legacy path */ }
-    const ta = document.createElement('textarea');
-    try {
-        ta.value = text;
-        ta.style.position = 'fixed';
-        ta.style.opacity = '0';
-        document.body.appendChild(ta);
-        ta.focus();
-        ta.select();
-        return document.execCommand('copy');
-    } catch {
-        return false;
-    } finally {
-        // Always remove the textarea, even if focus/select/execCommand throws.
-        if (ta.parentNode) document.body.removeChild(ta);
-    }
-};
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/site.js b/src/Utilities/Bmotion/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bmotion/Demo/Server/wwwroot/theme.js b/src/Utilities/Bmotion/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bmotion/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Controllers/McpControllerTests.cs b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Controllers/McpControllerTests.cs
index 5ce33c869d6..786f98bb911 100644
--- a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Controllers/McpControllerTests.cs
+++ b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Controllers/McpControllerTests.cs
@@ -1,4 +1,4 @@
-using Bit.Bmotion.Demo.Client.Shared;
+using Bit.Bmotion.Demo.Client;
 
 namespace Bit.Bmotion.Tests.Mcp.Controllers;
 
@@ -323,14 +323,15 @@ public void GetBmotionSourceFiles_CarriesEveryDemoPage_Described()
     {
         var files = _controller.GetBmotionSourceFiles();
 
-        foreach (var page in NavItem.All)
+        foreach (var page in DocsCatalog.AllPages)
         {
-            var file = files.SingleOrDefault(entry => entry.Path == page.SourcePath);
+            var path = BmotionSourceCatalog.SourcePathOf(page);
+            var file = files.SingleOrDefault(entry => entry.Path == path);
 
-            Assert.IsNotNull(file, $"'{page.Title}' points at '{page.SourcePath}', which is not embedded.");
+            Assert.IsNotNull(file, $"'{page.Title}' points at '{path}', which is not embedded.");
             Assert.AreEqual("Demo page", file.Kind);
             Assert.AreEqual(page.Title, file.Title);
-            Assert.AreEqual(page.Href, file.Slug);
+            Assert.AreEqual(page.Url.Trim('/'), file.Slug);
             Assert.AreEqual(page.Keywords, file.Keywords);
 
             // Not merely non-empty: the description has to be the page's own sentence rather than
@@ -346,12 +347,12 @@ public void GetBmotionSourceFiles_Filter_NarrowsWithoutLosingTheKind()
 
         Assert.IsTrue(pages.All(page => page.Kind == "Demo page"));
 
-        // Every navigable page, plus the handful under Pages/ that have no nav entry - the error and
-        // not-found pages - which is why this is not an equality against NavItem.All.
-        Assert.IsTrue(pages.Length >= NavItem.All.Length);
-        Assert.IsTrue(NavItem.All.All(page => pages.Any(file => file.Path == page.SourcePath)));
+        // Every docs page, plus the handful under Pages/ that have no catalog entry - the landing,
+        // error and not-found pages - which is why this is not an equality against DocsCatalog.AllPages.
+        Assert.IsTrue(pages.Length >= DocsCatalog.AllPages.Length);
+        Assert.IsTrue(DocsCatalog.AllPages.All(page => pages.Any(file => file.Path == BmotionSourceCatalog.SourcePathOf(page))));
 
-        // A keyword only a nav entry knows, so a hit proves the merged fields are searched.
+        // A keyword only a catalog entry knows, so a hit proves the merged fields are searched.
         var dragging = _controller.GetBmotionSourceFiles("constraints");
 
         Assert.IsTrue(dragging.Any(file => file.Path.EndsWith("DragPage.razor", StringComparison.Ordinal)));
diff --git a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/RecipeCatalogTests.cs b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/RecipeCatalogTests.cs
index a309fd7325b..30b4c8d72a4 100644
--- a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/RecipeCatalogTests.cs
+++ b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/RecipeCatalogTests.cs
@@ -1,5 +1,5 @@
 using System.Text.RegularExpressions;
-using Bit.Bmotion.Demo.Client.Shared;
+using Bit.Bmotion.Demo.Client;
 
 namespace Bit.Bmotion.Tests.Mcp.Services;
 
@@ -95,7 +95,7 @@ public async Task All_TheTransitionsInTheRecipes_AreReadableByTheMeasuringTools(
     [TestMethod]
     public void All_TheSeeAlsoLinks_PointAtRealDemoPages()
     {
-        var routes = NavItem.All.Select(page => $"/{page.Href}").ToArray();
+        var routes = DocsCatalog.AllPages.Select(page => page.Url).ToArray();
 
         foreach (var recipe in BmotionRecipeCatalog.All.Where(recipe => recipe.SeeAlso is not null))
         {
diff --git a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/SourceCatalogTests.cs b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/SourceCatalogTests.cs
index 929f843d478..c11c5d5202e 100644
--- a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/SourceCatalogTests.cs
+++ b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests.Mcp/Services/SourceCatalogTests.cs
@@ -1,4 +1,4 @@
-using Bit.Bmotion.Demo.Client.Shared;
+using Bit.Bmotion.Demo.Client;
 
 namespace Bit.Bmotion.Tests.Mcp.Services;
 
@@ -176,7 +176,7 @@ public void SourceFiles_IncludeTheHostWiring_TheSetupGuideClaimsToShowAsARealFil
     /// <summary>
     /// GetBmotionSourceFiles reports every demo page under the path an agent is told to pass to
     /// GetBmotionSourceFile. Every one of them has to be a path that resolves - and to carry the page's
-    /// own words: a page describes itself once, in <see cref="NavItem"/>, and the nav panel, the site's
+    /// own words: a page describes itself once, in <see cref="DocsCatalog"/>, and the nav panel, the site's
     /// search box and the MCP listing all read that one description. A listing that quietly fell back
     /// to a scraped comment would answer "which file demonstrates drag" with the doc comment of some
     /// nested record, and nothing else in the suite would notice.
@@ -184,25 +184,26 @@ public void SourceFiles_IncludeTheHostWiring_TheSetupGuideClaimsToShowAsARealFil
     [TestMethod]
     public void SourceFiles_CoverEveryPageTheNavigationPointsAt()
     {
-        var missing = NavItem.All
-            .Where(page => BmotionSourceCatalog.GetSourceFile(page.SourcePath) is null)
-            .Select(page => $"{page.Title} -> {page.SourcePath}")
+        var missing = DocsCatalog.AllPages
+            .Where(page => BmotionSourceCatalog.GetSourceFile(BmotionSourceCatalog.SourcePathOf(page)) is null)
+            .Select(page => $"{page.Title} -> {BmotionSourceCatalog.SourcePathOf(page)}")
             .ToArray();
 
         Assert.AreEqual(0, missing.Length, $"Advertised but not embedded: {string.Join("; ", missing)}.");
 
-        foreach (var page in NavItem.All)
+        foreach (var page in DocsCatalog.AllPages)
         {
+            var path = BmotionSourceCatalog.SourcePathOf(page);
             var listed = BmotionSourceCatalog.SourceFiles.SingleOrDefault(
-                file => string.Equals(file.Path, page.SourcePath, StringComparison.OrdinalIgnoreCase));
+                file => string.Equals(file.Path, path, StringComparison.OrdinalIgnoreCase));
 
-            Assert.IsNotNull(listed, $"'{page.SourcePath}' resolves but is not in the listing.");
+            Assert.IsNotNull(listed, $"'{path}' resolves but is not in the listing.");
 
-            Assert.AreEqual(page.Title, listed.Title, $"'{page.SourcePath}' is listed under another title.");
-            Assert.AreEqual(page.Href, listed.Slug, $"'{page.SourcePath}' is listed under another route.");
+            Assert.AreEqual(page.Title, listed.Title, $"'{path}' is listed under another title.");
+            Assert.AreEqual(page.Url.Trim('/'), listed.Slug, $"'{path}' is listed under another route.");
             Assert.AreEqual(page.Description, listed.Description,
-                            $"'{page.SourcePath}' is described by something other than its nav entry.");
-            Assert.AreEqual(page.Keywords, listed.Keywords, $"'{page.SourcePath}' lost its keywords.");
+                            $"'{path}' is described by something other than its catalog entry.");
+            Assert.AreEqual(page.Keywords, listed.Keywords, $"'{path}' lost its keywords.");
         }
     }
 
diff --git a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests/Components/LayoutProjectionTests.cs b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests/Components/LayoutProjectionTests.cs
index 8a075f22c32..29f99c1931f 100644
--- a/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests/Components/LayoutProjectionTests.cs
+++ b/src/Utilities/Bmotion/Tests/Bit.Bmotion.Tests/Components/LayoutProjectionTests.cs
@@ -184,6 +184,58 @@ public void ChangedDependency_MeasuresAgain()
         Assert.IsTrue(ctx.Interop.CountOf("getBoundingRect") > before);
     }
 
+    // ── What the after-render measurement sees ────────────────────────────────
+
+    // In both tests something above the element grows by 12px whenever it reports an animation
+    // starting - a log of its callbacks, say. That moves the element, but its render didn't: the
+    // update raising the callback runs after the render, so the render's layout must be measured first.
+
+    [TestMethod]
+    public void AReRenderThatOnlyChangesTheTarget_PlaysNoFlip_WhateverItsCallbacksMove()
+    {
+        using var ctx = new BmotionTestContext();
+        double pushedDown = 0;
+        ctx.Interop.BoundingRectProvider = _ => new BmotionBoundingRect { Top = pushedDown, Width = 100, Height = 100 };
+        bool started = false;
+        var cut = ctx.Render<Bmotion>(ps => ps
+            .Add(p => p.Id, "box")
+            .Add(p => p.Layout, BmLayout.Full)
+            .Add(p => p.Animate, Bm.To(x: 0))
+            .Add(p => p.OnAnimationStart, EventCallback.Factory.Create<BmProps?>(this, _ => pushedDown += 12))
+            .Add(p => p.OnLayoutAnimationStart, EventCallback.Factory.Create(this, () => started = true))
+            .Add(p => p.ChildContent, Div));
+
+        cut.Render(ps => ps.Add(p => p.Animate, Bm.To(x: -50)));
+
+        Assert.IsFalse(started, "the render changed no layout: its own x animating is no layout animation");
+        Assert.IsFalse(ctx.Interop.WasCalled("playWaapiFlip"));
+    }
+
+    [TestMethod]
+    public void TheFlip_ProjectsTheLayoutChangeOfTheRenderOnly()
+    {
+        using var ctx = new BmotionTestContext();
+        double pushedDown = 0;
+        int measurements = 0;
+        // The render moves the box 100px right: the snapshot sees it at 0, every measurement after at 100.
+        ctx.Interop.BoundingRectProvider = _ => new BmotionBoundingRect
+        {
+            Left = measurements++ == 0 ? 0 : 100, Top = pushedDown, Width = 100, Height = 100,
+        };
+        var cut = ctx.Render<Bmotion>(ps => ps
+            .Add(p => p.Id, "box")
+            .Add(p => p.Layout, BmLayout.Full)
+            .Add(p => p.Animate, Bm.To(x: 0))
+            .Add(p => p.OnAnimationStart, EventCallback.Factory.Create<BmProps?>(this, _ => pushedDown += 12))
+            .Add(p => p.ChildContent, Div));
+
+        cut.Render(ps => ps.Add(p => p.Animate, Bm.To(x: -50)));
+
+        var call = LastFlip(ctx)!;
+        Assert.AreEqual(-100, (double)call.Args[1]!, 1e-9, "it starts where the render moved it from");
+        Assert.AreEqual(0, (double)call.Args[2]!, 1e-9, "and not 12px lower, where its callback pushed it after the render");
+    }
+
     // ── Layout animation callbacks ────────────────────────────────────────────
 
     [TestMethod]
diff --git a/src/Utilities/Bonboarding/Demo/Client/DocsCatalog.cs b/src/Utilities/Bonboarding/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..5061fda8a4e
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,179 @@
+using Bit.Bonboarding.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bonboarding.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bonboarding";
+
+    public const string PackageId = "Bit.Bonboarding";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bonboarding";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bonboarding is a Blazor-native onboarding and product tour library: spotlights, contextual hints, " +
+        "branching and multi-page tours, with every decision made in C#. Every tour on this site is the " +
+        "library's own, running on it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["spotlight", "branching", "route", "theme", "events"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register the services, link the stylesheet, host one BonboardingRoot and write a first tour.",
+                "install setup nuget package AddBitBonboardingServices quick start program.cs stylesheet BonboardingRoot render mode prerendering",
+                typeof(GettingStarted)),
+        ]),
+        new("Guides",
+        [
+            new("/placement", "Placement & spotlight",
+                "Collision-aware positioning computed in C#: shift before flip, spotlight shapes and padding, and what the overlay does with a click.",
+                "placement position flip shift collision viewport spotlight shape padding offset interaction blocked targetonly free scroll",
+                typeof(PlacementLab)),
+            new("/dynamic", "Dynamic targets",
+                "Elements that render late, re-render or never appear, steps that wait for the user to act, and targets picked at run time.",
+                "late element missing target wait skip center fail mutation observer advanceon targetclick dynamic BonboardingStepTarget",
+                typeof(Dynamic)),
+            new("/flows", "Conditional & branching",
+                "Steps gated on a condition, tours that fork on an answer, and validation before the tour moves on.",
+                "condition when branch fork goto actions ResolveNext CanAdvance validation role feature flag back history",
+                typeof(Flows)),
+            new("/workspace", "Multi-page tour",
+                "A tour that spans routes: it navigates for you, waits for the page to render, and holds its place if you wander off.",
+                "route routes navigation multi-page cross page resume wander workspace",
+                typeof(Workspace)),
+            new("/workspace/settings", "Workspace settings",
+                "The second page of the multi-page tour, where its settings steps run - and a place to start the same tour from the far end.",
+                "settings second page route navigate backwards api keys profile",
+                typeof(WorkspaceSettings)),
+        ]),
+        new("Customise",
+        [
+            new("/theming", "Theming & RTL",
+                "The --bit-bonboarding-* custom properties, light and dark, progress styles, localised labels and right-to-left tours.",
+                "theme theming dark light css variables custom properties skin PopoverClass progress dots bar labels localization rtl right-to-left direction",
+                typeof(Theming)),
+            new("/headless", "Headless UI",
+                "Replace the card entirely and keep collision-aware placement, focus management and dialog semantics.",
+                "headless custom template ChildContent Unstyled render your own popover card Header Body Footer",
+                typeof(Headless)),
+            new("/events", "Events & persistence",
+                "The event stream to forward to analytics, and the store that remembers how far each user got.",
+                "events EventRaised observer analytics IBonboardingObserver persistence store IBonboardingStore localStorage record reset",
+                typeof(Events)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing at it.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bonboarding/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bonboarding/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bonboarding/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bonboarding/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bonboarding/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/Footer.razor b/src/Utilities/Bonboarding/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bonboarding/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/Header.razor b/src/Utilities/Bonboarding/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bonboarding/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bonboarding/Demo/Client/Layout/MainLayout.razor
index b8c7beab47d..44980dda101 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/MainLayout.razor
@@ -1,31 +1,30 @@
 @inherits LayoutComponentBase
-@implements IDisposable
-@inject IBonboardingService BonboardingService
 
-@* SiteShell is this demo's own chrome - header, navigation, footer - and stands in for your layout's
-   markup. The part every application needs is the BonboardingRoot below it. *@
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-<SiteShell @bind-IsDark="_dark">
-    @Body
-</SiteShell>
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-@* One host renders every tour the application starts, wherever it is started from. *@
-@* The site's theme switch drives the tours as well as the page: in the dark theme, a tour that leaves
-   its own Theme unset is drawn dark. A tour that sets one keeps it whichever theme the site is in,
-   which is what lets the theming page demonstrate the option. *@
-<BonboardingRoot Theme="@HostTheme" />
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-@code {
-    private bool _dark;
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-    // The host's Theme overrides the tour's, so it is only passed for a tour that has not chosen one.
-    private BonboardingTheme? HostTheme
-        => _dark && BonboardingService.Active?.Tour.Theme is null ? BonboardingTheme.Dark : null;
+    <Header />
 
-    protected override void OnInitialized() => BonboardingService.SessionsChanged += OnSessionsChanged;
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
 
-    // HostTheme depends on which tour is active.
-    private void OnSessionsChanged(object? sender, EventArgs e) => _ = InvokeAsync(StateHasChanged);
-
-    public void Dispose() => BonboardingService.SessionsChanged -= OnSessionsChanged;
-}
+    <Footer />
+</div>
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bonboarding/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Layout/ReconnectModal.razor.css b/src/Utilities/Bonboarding/Demo/Client/Layout/ReconnectModal.razor.css
index 5b67f7b77c4..13e12dba178 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Layout/ReconnectModal.razor.css
+++ b/src/Utilities/Bonboarding/Demo/Client/Layout/ReconnectModal.razor.css
@@ -21,14 +21,14 @@
 
 
 #components-reconnect-modal {
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1);
+    color: var(--bb-text);
+    background-color: var(--bb-surface);
     width: 20rem;
     margin: 20vh auto;
     padding: 2rem;
     border: 0;
-    border-radius: var(--bo-crn-xlarge);
-    box-shadow: var(--bo-shdw-64);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
     opacity: 0;
     transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
     animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
@@ -42,7 +42,7 @@
 }
 
 #components-reconnect-modal::backdrop {
-    background-color: var(--bo-clr-bg-overlay);
+    background-color: var(--bb-scrim);
     animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
     opacity: 1;
 }
@@ -92,22 +92,22 @@
 #components-reconnect-modal button {
     border: 0;
     cursor: pointer;
-    background-color: var(--bo-clr-brand-bg);
-    color: var(--bo-clr-brand-fg-on-bg);
+    background-color: var(--bb-primary);
+    color: var(--bb-primary-text);
     min-height: 2rem;
-    padding: var(--bo-sp-snudge) var(--bo-sp-xxl);
+    padding: .3125rem var(--fl-space-xxl);
     font-family: inherit;
-    font-size: var(--bo-fnt-size-300);
-    font-weight: var(--bo-fnt-weight-semibold);
-    border-radius: var(--bo-crn-medium);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    border-radius: var(--bb-radius);
 }
 
     #components-reconnect-modal button:hover {
-        background-color: var(--bo-clr-brand-bg-hover);
+        background-color: var(--bb-primary-hover);
     }
 
     #components-reconnect-modal button:active {
-        background-color: var(--bo-clr-brand-bg-pressed);
+        background-color: var(--bb-primary-active);
     }
 
 .components-rejoining-animation {
@@ -118,7 +118,7 @@
 
     .components-rejoining-animation div {
         position: absolute;
-        border: 3px solid var(--bo-clr-brand-stroke);
+        border: 3px solid var(--bb-primary);
         opacity: 1;
         border-radius: 50%;
         animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/Dynamic.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/Dynamic.razor
index fc89eb03334..b0201d72c1e 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/Dynamic.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/Dynamic.razor
@@ -1,106 +1,115 @@
 @page "/dynamic"
 @inject IBonboardingService BonboardingService
 
-<PageTitle>Dynamic targets</PageTitle>
-
-<h1>Dynamic targets</h1>
-
-<p class="page-intro">
-    Real applications render late, re-render often, and sometimes never show the element a tour
-    expects. Each step declares what should happen in that case, and waiting is driven by a mutation
-    observer rather than a polling timer.
-</p>
-
-<section class="demo-section">
-    <h2>Waiting for an element that does not exist yet</h2>
+<PageTitle>Dynamic targets · Bonboarding</PageTitle>
+
+<div class="bb-intro">
+    <h1>Dynamic targets</h1>
+    <p class="bb-subtitle">
+        Real applications render late, re-render often, and sometimes never show the element a tour expects. Each
+        step declares what should happen in that case, and waiting is driven by a mutation observer rather than a
+        polling timer.
+    </p>
+</div>
 
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Waiting for an element that does not exist yet</h3>
     <p>
         Start the tour, then reveal the panel. The second step is waiting for
         <code>data-bonboarding-anchor="late-panel"</code> and picks it up the moment it appears.
     </p>
 
-    <div class="demo-actions">
-        <button type="button" class="btn btn-primary" @onclick="StartWaitTourAsync">Run the waiting tour</button>
-        <button type="button" class="btn" data-bonboarding-anchor="reveal" @onclick="Reveal">
-            @(_revealed ? "Hide the panel" : "Reveal the panel")
-        </button>
-        <button type="button" class="btn" @onclick="RevealSlowly">Reveal after 2 seconds</button>
-    </div>
-
-    @if (_revealed)
-    {
-        <div class="card" data-bonboarding-anchor="late-panel">
-            <h3>Rendered on demand</h3>
-            <p>
-                This panel did not exist when the tour started. The step waited for it, scrolled it into
-                view and positioned against it.
-            </p>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="StartWaitTourAsync">Run the waiting tour</button>
+            <button type="button" class="btn btn-secondary" data-bonboarding-anchor="reveal" @onclick="Reveal">
+                @(_revealed ? "Hide the panel" : "Reveal the panel")
+            </button>
+            <button type="button" class="btn btn-secondary" @onclick="RevealSlowly">Reveal after 2 seconds</button>
         </div>
-    }
-</section>
 
-<section class="demo-section">
-    <h2>Missing-target strategies</h2>
+        @if (_revealed)
+        {
+            <div class="demo-panel" data-bonboarding-anchor="late-panel">
+                <p class="demo-panel-title">Rendered on demand</p>
+                <p>
+                    This panel did not exist when the tour started. The step waited for it, scrolled it into
+                    view and positioned against it.
+                </p>
+            </div>
+        }
+    </div>
+</section>
 
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Missing-target strategies</h3>
     <p>
         Each button runs a two-step tour whose first step points at an element that is not on this page.
         Only the strategy differs.
     </p>
 
-    <div class="demo-actions">
-        <button type="button" class="btn" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Skip)">Skip</button>
-        <button type="button" class="btn" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Center)">Centre</button>
-        <button type="button" class="btn" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Wait)">Wait, then skip</button>
-        <button type="button" class="btn" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Fail)">Fail</button>
-    </div>
-
-    @if (_failure is not null)
-    {
-        <div class="note note-danger" role="alert">
-            <Icon Path="@Icons.Error" />
-            <span><strong>The tour failed, as asked:</strong> @_failure</span>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">MissingTarget</span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Skip)">Skip</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Center)">Centre</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Wait)">Wait, then skip</button>
+            <button type="button" class="btn btn-secondary" @onclick="() => StartMissingAsync(BonboardingMissingTargetBehavior.Fail)">Fail</button>
         </div>
-    }
-</section>
 
-<section class="demo-section">
-    <h2>Let the user do it</h2>
+        @if (_failure is not null)
+        {
+            <div class="bb-note bb-note-danger" role="alert">
+                <strong>The tour failed, as asked:</strong> @_failure
+            </div>
+        }
+    </div>
+</section>
 
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Let the user do it</h3>
     <p>
         A step with an <code>BonboardingAdvanceTrigger</code> waits for a real interaction. The overlay becomes
         click-through around the target automatically, so the user can actually press the button they are
         being told about.
     </p>
 
-    <div class="demo-actions">
-        <button type="button" class="btn btn-primary" @onclick="StartInteractiveTourAsync">Run the interactive tour</button>
-        <button type="button" class="btn" data-bonboarding-anchor="do-it" @onclick="Increment">
-            Clicked @_clicks @(_clicks == 1 ? "time" : "times")
-        </button>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="StartInteractiveTourAsync">Run the interactive tour</button>
+            <button type="button" class="btn btn-secondary" data-bonboarding-anchor="do-it" @onclick="Increment">
+                Clicked @_clicks @(_clicks == 1 ? "time" : "times")
+            </button>
+        </div>
     </div>
 </section>
 
-<section class="demo-section">
-    <h2>Targets chosen at run time</h2>
-
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Targets chosen at run time</h3>
     <p>
         <code>BonboardingStepTarget.Dynamic</code> defers the decision until the step activates, so a tour can point
         at whichever row, tab or card is relevant right now.
     </p>
 
-    <div class="demo-actions">
-        @foreach (var row in Rows)
-        {
-            <button type="button"
-                    class="btn @(row == _selectedRow ? "btn-primary" : null)"
-                    aria-pressed="@(row == _selectedRow ? "true" : "false")"
-                    data-bonboarding-anchor="row-@row"
-                    @onclick="() => _selectedRow = row">Row @row</button>
-        }
-        <button type="button" class="btn" @onclick="StartDynamicTourAsync">Point at the selected row</button>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="bb-toolbar">
+            <div class="bb-segmented" role="group" aria-label="Selected row">
+                @foreach (var row in Rows)
+                {
+                    <button type="button"
+                            aria-pressed="@(row == _selectedRow ? "true" : "false")"
+                            data-bonboarding-anchor="row-@row"
+                            @onclick="() => _selectedRow = row">Row @row</button>
+                }
+            </div>
+            <button type="button" class="btn btn-primary" @onclick="StartDynamicTourAsync">Point at the selected row</button>
+        </div>
     </div>
 
-    <pre><code>@DynamicExample</code></pre>
+    <pre class="bb-code">@DynamicExample</pre>
 </section>
 
 @code {
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/Events.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/Events.razor
index 01cf7086109..6ec195aa46a 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/Events.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/Events.razor
@@ -2,92 +2,97 @@
 @implements IDisposable
 @inject IBonboardingService BonboardingService
 
-<PageTitle>Events and persistence</PageTitle>
-
-<h1>Events &amp; persistence</h1>
-
-<p class="page-intro">
-    Every moment of a tour is published as an event, including how long each step was on screen.
-    Subscribe to <code>IBonboardingService.EventRaised</code> for something quick, or register an
-    <code>IBonboardingObserver</code> in DI to forward the stream to your analytics provider.
-</p>
+<PageTitle>Events &amp; persistence · Bonboarding</PageTitle>
+
+<div class="bb-intro">
+    <h1>Events &amp; persistence</h1>
+    <p class="bb-subtitle">
+        Every moment of a tour is published as an event, including how long each step was on screen. Subscribe to
+        <code>IBonboardingService.EventRaised</code> for something quick, or register an <code>IBonboardingObserver</code>
+        in DI to forward the stream to your analytics provider.
+    </p>
+</div>
 
-<section class="demo-section">
-    <h2>Live event stream</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Live event stream</h3>
 
-    <div class="demo-actions">
-        <button type="button" class="btn btn-primary" @onclick="StartAsync">Run a tour and watch the log</button>
-        <button type="button" class="btn" @onclick="Clear">Clear the log</button>
-    </div>
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-primary" @onclick="StartAsync">Run a tour and watch the log</button>
+            <button type="button" class="btn btn-secondary" @onclick="Clear">Clear the log</button>
+        </div>
 
-    <AppWindow />
+        <AppWindow />
 
-    @if (_log.Count == 0)
-    {
-        <p class="muted">Nothing yet. Start the tour above.</p>
-    }
-    else
-    {
-        <div class="log" role="log" aria-label="Tour events">
+        <div class="bb-log event-log" role="log" aria-label="Tour events">
+            @if (_log.Count == 0)
+            {
+                <div class="bb-log-empty">Nothing yet. Start the tour above.</div>
+            }
             @foreach (var entry in _log)
             {
-                <div class="log-row">
-                    <span class="log-time">@entry.Time.ToString("HH:mm:ss.fff")</span>
-                    <span class="log-kind">@entry.Kind</span>
+                <div class="bb-log-line event-log-row">
+                    <span class="event-log-time">@entry.Time.ToString("HH:mm:ss.fff")</span>
+                    <span class="event-log-kind">@entry.Kind</span>
                     <span>@entry.Detail</span>
                 </div>
             }
         </div>
-    }
+    </div>
 </section>
 
-<section class="demo-section">
-    <h2>Persistence</h2>
-
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Persistence</h3>
     <p>
-        Progress is written to the registered <code>IBonboardingStore</code> after every step. The default
-        store uses <code>localStorage</code> with an in-memory mirror, so reads still work while
-        prerendering and in private browsing. Swap it for a server-side store with one call.
+        Progress is written to the registered <code>IBonboardingStore</code> after every step. The default store uses
+        <code>localStorage</code> with an in-memory mirror, so reads still work while prerendering and in private
+        browsing. Swap it for a server-side store with one call.
     </p>
 
-    <div class="demo-actions">
-        <button type="button" class="btn" @onclick="RefreshRecordAsync">Read the saved record</button>
-        <button type="button" class="btn" @onclick="ResetAsync">Forget this tour</button>
-        <button type="button" class="btn" @onclick="ResetAllAsync">Forget every tour</button>
-    </div>
-
-    @if (_record is not null)
-    {
-        <div class="table-wrap">
-            <table class="facts">
-                <tbody>
-                    <tr><th>Tour</th><td>@_record.TourId</td></tr>
-                    <tr><th>Version</th><td>@_record.Version</td></tr>
-                    <tr><th>Current step</th><td>@(_record.CurrentStepId ?? "-")</td></tr>
-                    <tr><th>Completed</th><td>@_record.Completed</td></tr>
-                    <tr><th>Dismissed</th><td>@_record.Dismissed</td></tr>
-                    <tr><th>Visited</th><td>@string.Join(", ", _record.VisitedStepIds)</td></tr>
-                    <tr><th>Updated</th><td>@_record.UpdatedAt.ToLocalTime().ToString("g")</td></tr>
-                </tbody>
-            </table>
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Store</span>
+            <button type="button" class="btn btn-secondary" @onclick="RefreshRecordAsync">Read the saved record</button>
+            <button type="button" class="btn btn-secondary" @onclick="ResetAsync">Forget this tour</button>
+            <button type="button" class="btn btn-secondary" @onclick="ResetAllAsync">Forget every tour</button>
         </div>
-    }
-    else if (_recordChecked)
-    {
-        <p class="muted">No saved record for <code>@TourId</code>.</p>
-    }
+
+        @if (_record is not null)
+        {
+            <dl class="bb-params">
+                <dt>Tour</dt><dd>@_record.TourId</dd>
+                <dt>Version</dt><dd>@_record.Version</dd>
+                <dt>Current step</dt><dd>@(_record.CurrentStepId ?? "-")</dd>
+                <dt>Completed</dt><dd>@_record.Completed</dd>
+                <dt>Dismissed</dt><dd>@_record.Dismissed</dd>
+                <dt>Visited</dt><dd>@string.Join(", ", _record.VisitedStepIds)</dd>
+                <dt>Updated</dt><dd>@_record.UpdatedAt.ToLocalTime().ToString("g")</dd>
+            </dl>
+        }
+        else if (_recordChecked)
+        {
+            <p class="bb-empty">No saved record for <code>@TourId</code>.</p>
+        }
+        else
+        {
+            <p class="bb-muted">Run the tour above, then read what the store kept of it.</p>
+        }
+    </div>
 </section>
 
-<section class="demo-section">
-    <h2>Wiring it up</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Wiring it up</h3>
+    <p>An observer receives every event of every tour, and is registered once in DI.</p>
 
-    <pre><code>@ObserverExample</code></pre>
+    <pre class="bb-code">@ObserverExample</pre>
 </section>
 
-<section class="demo-section">
-    <h2>A custom store</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A custom store</h3>
+    <p>Progress can live wherever your users' other data does - a profile, a table, a document.</p>
 
-    <pre><code>@StoreExample</code></pre>
+    <pre class="bb-code">@StoreExample</pre>
 </section>
 
 @code {
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/Flows.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/Flows.razor
index b7ff6e6e708..f360817ff41 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/Flows.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/Flows.razor
@@ -1,86 +1,95 @@
 @page "/flows"
 @inject IBonboardingService BonboardingService
 
-<PageTitle>Conditional and branching flows</PageTitle>
+<PageTitle>Conditional &amp; branching · Bonboarding</PageTitle>
 
-<h1>Conditional &amp; branching</h1>
-
-<p class="page-intro">
-    Not every user should see every step. Steps can be gated by a condition, tours can fork on an
-    answer, and Back walks the path the user actually took rather than the order the steps were
-    declared in.
-</p>
-
-<section class="demo-section">
-    <h2>Conditional steps</h2>
+<div class="bb-intro">
+    <h1>Conditional &amp; branching</h1>
+    <p class="bb-subtitle">
+        Not every user should see every step. Steps can be gated by a condition, tours can fork on an answer, and
+        Back walks the path the user actually took rather than the order the steps were declared in.
+    </p>
+</div>
 
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Conditional steps</h3>
     <p>
-        The billing step only appears for an administrator, and the progress indicator counts only the
-        steps that will actually be shown. Change the role and run the tour again.
+        The billing step only appears for an administrator, and the progress indicator counts only the steps that
+        will actually be shown. Change the role and run the tour again.
     </p>
 
-    <div class="controls">
-        <div class="field">
-            <label for="role">Signed in as</label>
-            <select id="role" @bind="_role">
-                <option value="Viewer">Viewer</option>
-                <option value="Member">Member</option>
-                <option value="Administrator">Administrator</option>
-            </select>
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-primary" @onclick="StartConditionalAsync">Run the conditional tour</button>
         </div>
 
-        <div class="field">
-            <label for="beta">Feature flag</label>
-            <select id="beta" @bind="_betaEnabled">
-                <option value="false">Beta off</option>
-                <option value="true">Beta on</option>
-            </select>
+        <div class="bb-fields">
+            <label class="bb-field">
+                Signed in as
+                <select @bind="_role">
+                    <option value="Viewer">Viewer</option>
+                    <option value="Member">Member</option>
+                    <option value="Administrator">Administrator</option>
+                </select>
+            </label>
+
+            <label class="bb-field">
+                Feature flag
+                <select @bind="_betaEnabled">
+                    <option value="false">Beta off</option>
+                    <option value="true">Beta on</option>
+                </select>
+            </label>
         </div>
 
-        <button type="button" class="btn btn-primary" @onclick="StartConditionalAsync">Run the conditional tour</button>
+        <AppWindow>
+            @if (_betaEnabled)
+            {
+                <div class="tile" data-bonboarding-anchor="beta-panel">
+                    <div class="tile-title">Beta</div>
+                    <div class="tile-value">Insights</div>
+                </div>
+            }
+        </AppWindow>
     </div>
-
-    <AppWindow>
-        @if (_betaEnabled)
-        {
-            <div class="tile" data-bonboarding-anchor="beta-panel">
-                <div class="tile-title">Beta</div>
-                <div class="tile-value">Insights</div>
-            </div>
-        }
-    </AppWindow>
 </section>
 
-<section class="demo-section">
-    <h2>Branching on an answer</h2>
-
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Branching on an answer</h3>
     <p>
-        Footer buttons carry an effect. Combined with <code>BonboardingStepActionEffect.GoTo</code> this is the
-        whole of a branching tour: no state machine to write.
+        Footer buttons carry an effect. Combined with <code>BonboardingStepActionEffect.GoTo</code> this is the whole
+        of a branching tour: no state machine to write.
     </p>
 
-    <div class="demo-actions">
-        <button type="button" class="btn btn-primary" @onclick="StartBranchingAsync">Run the branching tour</button>
-        @if (_branchTaken is not null)
-        {
-            <span class="pill">Branch taken: @_branchTaken</span>
-        }
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="StartBranchingAsync">Run the branching tour</button>
+            @if (_branchTaken is not null)
+            {
+                <span class="bb-badge bb-badge-success">Branch taken: @_branchTaken</span>
+            }
+        </div>
+        <p class="bb-muted">The branches point at the product on the conditional tour's sample above.</p>
     </div>
 
-    <pre><code>@BranchExample</code></pre>
+    <pre class="bb-code">@BranchExample</pre>
 </section>
 
-<section class="demo-section">
-    <h2>Validation before advancing</h2>
-
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Validation before advancing</h3>
     <p>
-        <code>CanAdvance</code> blocks the forward button until the step is satisfied. Here the tour will
-        not move on until the field contains something.
+        <code>CanAdvance</code> blocks the forward button until the step is satisfied. Here the tour will not move on
+        until the field contains something.
     </p>
 
-    <div class="demo-actions">
-        <input type="text" data-bonboarding-anchor="project-name" placeholder="Project name" aria-label="Project name" @bind="_projectName" @bind:event="oninput" />
-        <button type="button" class="btn btn-primary" @onclick="StartValidatingAsync">Run the validating tour</button>
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <div class="bb-toolbar">
+            <input type="text" data-bonboarding-anchor="project-name" placeholder="Project name" aria-label="Project name" @bind="_projectName" @bind:event="oninput" />
+            <button type="button" class="btn btn-primary" @onclick="StartValidatingAsync">Run the validating tour</button>
+        </div>
     </div>
 </section>
 
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..5af32164b9e
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,155 @@
+@page "/getting-started"
+@inject IBonboardingService BonboardingService
+
+<PageTitle>Getting started · Bonboarding</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        Four pieces of wiring and a first tour: install the package, register the services, reference the
+        stylesheet and host one <code>BonboardingRoot</code> - then mark an element and point a step at it.
+    </p>
+</div>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install the package</h3>
+    <p>Bit.Bonboarding targets .NET 8, .NET 9 and .NET 10, and depends on nothing but Blazor itself.</p>
+    <pre class="bb-code">dotnet add package Bit.Bonboarding</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Register the services</h3>
+    <p>
+        Everything is registered as scoped - per circuit on Blazor Server, per application on WebAssembly - which
+        matches the lifetime of a user's onboarding state. Global defaults are set in the same call.
+    </p>
+    <pre class="bb-code"><span class="k">using</span> Bit.Bonboarding;
+
+builder.Services.AddBitBonboardingServices(options =>
+{
+    options.Placement = BonboardingPlacement.Bottom;
+    options.Progress = BonboardingProgressStyle.Bar;
+    options.Labels.Skip = <span class="s">"Not now"</span>;
+    options.StorageKeyPrefix = <span class="s">"acme:onboarding:"</span>;
+});</pre>
+    <div class="bb-note bb-note-warn">
+        A Blazor Web App has two projects and two DI containers: register in <strong>both</strong>, with the same
+        options. A missing registration surfaces as a failure to resolve <code>IBonboardingService</code> during
+        prerendering. This site does it through one extension method both <code>Program.cs</code> files call.
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Reference the stylesheet</h3>
+    <p>
+        In <code>App.razor</code> (Blazor Web App) or <code>index.html</code> (WebAssembly), before your own stylesheet
+        so your overrides of its <code>--bit-bonboarding-*</code> variables win. There is no script tag to add: the
+        library imports its own JavaScript module.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">link</span> rel=<span class="s">"stylesheet"</span> href=<span class="s">"@@Assets["_content/Bit.Bonboarding/bit-bonboarding.css"]"</span> /&gt;</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Host one BonboardingRoot</h3>
+    <p>
+        One host renders whichever tour is running, from anywhere in the application. Put it somewhere that outlives
+        navigation - the main layout, or beside the router as this site does - because a host on a page would be
+        disposed by the navigation a multi-page tour performs. Then import the namespace in <code>_Imports.razor</code>.
+    </p>
+    <pre class="bb-code"><span class="c">@@* MainLayout.razor *@@</span>
+&lt;<span class="k">div</span> class=<span class="s">"page"</span>&gt;
+    @@Body
+&lt;/<span class="k">div</span>&gt;
+
+&lt;<span class="k">BonboardingRoot</span> /&gt;
+
+<span class="c">@@* _Imports.razor *@@</span>
+@@using Bit.Bonboarding</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Write a first tour</h3>
+    <p>
+        Mark the element a step is about with <code>data-bonboarding-anchor</code>, then start a tour that points at it.
+        This is the setup check from the guide, running on this page: if the card appears next to the button, with
+        the spotlight around it and the arrow keys working, the wiring is complete.
+    </p>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <button type="button" class="btn btn-primary" data-bonboarding-anchor="probe" @onclick="RunAsync">Test the setup</button>
+    </div>
+
+    <pre class="bb-code">@ProbeExample</pre>
+
+    <p>
+        The same tour can be declared in markup with <code>&lt;BonboardingTour&gt;</code> and
+        <code>&lt;BonboardingStep&gt;</code> - the landing page's welcome tour is written that way.
+    </p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Where to start a tour</h3>
+    <p>
+        The library is prerender-safe, but <code>OnInitializedAsync</code> runs during prerendering and again after
+        hydration - in two different scopes. Start tours from <code>OnAfterRenderAsync(firstRender: true)</code>, from a
+        user action, or with <code>AutoStart</code>, which already does the right thing.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">BonboardingTour</span> Id=<span class="s">"welcome"</span> AutoStart=<span class="s">"BonboardingAutoStart.Once"</span>&gt;
+    ...
+&lt;/<span class="k">BonboardingTour</span>&gt;
+
+<span class="k">await</span> BonboardingService.StartAsync(tour);       <span class="c">// always start, resuming saved progress</span>
+<span class="k">await</span> BonboardingService.StartOnceAsync(tour);   <span class="c">// only if not already completed or dismissed</span>
+<span class="k">await</span> BonboardingService.RestartAsync(tour);     <span class="c">// forget progress and start from the top</span></pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Where to go next</h3>
+    <ul class="bb-detail-list">
+        <li><a href="placement">Placement &amp; spotlight</a> - where the popover goes, and what the overlay does with a click.</li>
+        <li><a href="dynamic">Dynamic targets</a> - elements that render late, re-render or never appear.</li>
+        <li><a href="flows">Conditional &amp; branching</a> - different tours for different users.</li>
+        <li><a href="theming">Theming &amp; RTL</a> - make the card look like your product.</li>
+    </ul>
+</section>
+
+@code {
+    private Task RunAsync() => BonboardingService.StartAsync(new BonboardingTourDefinition
+    {
+        Id = "probe",
+        Persist = false,
+        Steps =
+        {
+            new BonboardingStepDefinition
+            {
+                Target = BonboardingStepTarget.Anchor("probe"),
+                Title = "It works",
+                Description = "Positioning, spotlight and keyboard navigation are all live.",
+            },
+        },
+    });
+
+    private const string ProbeExample = """
+        @inject IBonboardingService BonboardingService
+
+        <button data-bonboarding-anchor="probe" @onclick="RunAsync">Test</button>
+
+        @code {
+            private Task RunAsync() => BonboardingService.StartAsync(new BonboardingTourDefinition
+            {
+                Id = "probe",
+                Persist = false,
+                Steps =
+                {
+                    new BonboardingStepDefinition
+                    {
+                        Target = BonboardingStepTarget.Anchor("probe"),
+                        Title = "It works",
+                        Description = "Positioning, spotlight and keyboard navigation are all live.",
+                    },
+                },
+            });
+        }
+        """;
+}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/Headless.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/Headless.razor
index 615ed2709db..1be16907de2 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/Headless.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/Headless.razor
@@ -1,48 +1,52 @@
 @page "/headless"
 @inject IBonboardingService BonboardingService
 
-<PageTitle>Headless UI</PageTitle>
-
-<h1>Headless UI</h1>
+<PageTitle>Headless UI · Bonboarding</PageTitle>
+
+<div class="bb-intro">
+    <h1>Headless UI</h1>
+    <p class="bb-subtitle">
+        When the default card is not what you want, replace it. The library still owns the popover element, so
+        measurement, collision-aware placement, focus management and dialog semantics keep working; you own
+        everything inside it.
+    </p>
+</div>
 
-<p class="page-intro">
-    When the default card is not what you want, replace it. The library still owns the popover
-    element, so measurement, collision-aware placement, focus management and dialog semantics keep
-    working; you own everything inside it.
-</p>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A card the library did not draw</h3>
 
-<section class="demo-section">
-    <h2>A card the library did not draw</h2>
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the custom-rendered tour</button>
+            <span class="bb-badge">Rendered by this page, not by the library</span>
+        </div>
 
-    <div class="demo-actions">
-        <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the custom-rendered tour</button>
-        <span class="pill">Rendered by this page, not by the library</span>
+        <AppWindow />
     </div>
-
-    <AppWindow />
 </section>
 
-<section class="demo-section">
-    <h2>Three levels of customisation</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Three levels of customisation</h3>
 
-    <div class="table-wrap">
-        <table>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th>Level</th><th>How</th><th>Use it when</th></tr>
             </thead>
             <tbody>
                 <tr>
-                    <td>Restyle</td>
+                    <td class="bb-table-key">Restyle</td>
                     <td><code>--bit-bonboarding-*</code> custom properties</td>
                     <td>The layout is right, the colours are not.</td>
                 </tr>
                 <tr>
-                    <td>Recompose</td>
+                    <td class="bb-table-key">Recompose</td>
                     <td><code>BonboardingStepDefinition.Header</code>, <code>.Body</code>, <code>.Footer</code></td>
                     <td>One step needs a form, an image or a different set of buttons.</td>
                 </tr>
                 <tr>
-                    <td>Replace</td>
+                    <td class="bb-table-key">Replace</td>
                     <td><code>BonboardingRoot.ChildContent</code>, or a tour or step <code>Template</code></td>
                     <td>The card should look nothing like the default.</td>
                 </tr>
@@ -51,15 +55,15 @@
     </div>
 </section>
 
-<section class="demo-section">
-    <h2>A per-step body</h2>
-
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Replacing the card</h3>
     <p>
-        The second step of the tour above renders a form inside the popover and disables its own Next
-        button until the form is filled in. It is ordinary Razor.
+        The tour above is drawn by a second <code>BonboardingRoot</code> on this page, handed the session it started and
+        given its own <code>ChildContent</code>. A single step can do the same with a template of its own, leaving the
+        rest of the tour on the default chrome. It is ordinary Razor.
     </p>
 
-    <pre><code>@Example</code></pre>
+    <pre class="bb-code">@Example</pre>
 </section>
 
 @* A second, independently rendered host, driven by the session started below. Custom content
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/Home.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/Home.razor
index 2dc86876d62..4d628a47d56 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/Home.razor
@@ -1,131 +1,307 @@
 @page "/"
+@layout MainLayout
+
+<PageTitle>Bonboarding - onboarding and product tours for Blazor</PageTitle>
+
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with a
+   JavaScript tour library → persona tiles → FAQ → final call to action. Everything else on the site
+   is a documentation page under DocsLayout. The hero's sample is a live product rather than a
+   picture of one - a tour library is best introduced by taking the tour. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Product tours for Blazor,<br /><span class="bb-hero-accent">decided in C#.</span></h1>
+            <p class="bb-hero-sub">
+                Multi-step product tours, spotlights, contextual hints and full application walkthroughs,
+                written in C# and Razor. There is no JavaScript tour engine underneath: the browser layer
+                only measures, observes and routes keys, and every decision about what to show, when and
+                where is made in C#.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bonboarding</pre>
+            <div class="bb-hero-actions">
+                <button type="button" class="btn btn-primary bb-btn-lg" @onclick="StartTourAsync">Take the tour</button>
+                <a href="getting-started" class="btn btn-secondary bb-btn-lg">Get started →</a>
+                <button type="button" class="btn btn-secondary bb-btn-lg" @onclick="RestartTourAsync">Restart from the top</button>
+            </div>
+        </div>
 
-<PageTitle>Bit.Bonboarding - onboarding and product tours for Blazor</PageTitle>
+        @* The product the welcome tour below walks through, framed as a window. Every element the
+           tour points at carries a data-bonboarding-anchor attribute, and nothing else. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Dashboard.razor</span>
+                </div>
+                <AppWindow />
+            </div>
+        </div>
+    </section>
 
-<div class="homepage">
-    <section class="homepage-section hero-section">
-        <div class="homepage-section-content">
-            <div class="hero-copy">
-                <a class="hero-eyebrow" href="mcp-server">
-                    <Icon Path="@Icons.Sparkle" />
-                    No JavaScript tour engine - and an MCP server for your AI agent
-                </a>
+    @* ============================== Proof strip ============================== *@
 
-                <h1>Product tours for Blazor, <span class="accent">decided in C#</span></h1>
+    <section class="bb-proof">
+        <div><strong>Engine in C#</strong><span>placement, waiting, branching and routing</span></div>
+        <div><strong>No JavaScript tour engine</strong><span>one small module measures, observes and routes keys</span></div>
+        <div><strong>Prerender-safe</strong><span>Server, WebAssembly and Web App, on .NET 8, 9 and 10</span></div>
+        <div><strong>Accessible by design</strong><span>dialog semantics, focus trap, live announcements</span></div>
+    </section>
 
-                <p class="hero-lead">
-                    Multi-step product tours, spotlights, contextual hints and full application
-                    walkthroughs, written in C# and Razor. The browser layer does nothing but measure,
-                    observe and route keys; every decision about what to show and when lives in the engine.
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>The hard parts of a tour, done once</h2>
+        <p class="bb-section-sub">
+            Each of these is a page of the docs with a working tour on it - and every tour on this site
+            is the library's own default card, restyled through its CSS custom properties.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Positioning that behaves</h3>
+                <p class="bb-card-desc">
+                    Collision-aware placement computed in C#: shift before flip, arrow clamping, viewport
+                    padding, and sane behaviour for targets larger than the screen.
                 </p>
-
-                <div class="hero-actions">
-                    <button type="button" class="btn btn-primary btn-lg" @onclick="StartTourAsync">
-                        <Icon Path="@Icons.Play" />
-                        Take the tour
-                    </button>
-                    <button type="button" class="btn btn-lg" @onclick="RestartTourAsync">Restart from the beginning</button>
-                </div>
-
-                <div class="install-line">
-                    <code><span class="prompt">&gt; </span>dotnet add package Bit.Bonboarding</code>
-                </div>
-            </div>
-
-            @* The product the welcome tour below walks through. Every element it points at carries a
-               data-bonboarding-anchor attribute, and nothing else. *@
-            <AppWindow />
+                <a href="placement" class="btn btn-outline">Placement &amp; spotlight →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Elements that are not there yet</h3>
+                <p class="bb-card-desc">
+                    Wait, skip, centre or fail, per step. Waiting uses a mutation observer rather than a
+                    polling timer, and a target replaced by a re-render is rebound rather than lost.
+                </p>
+                <a href="dynamic" class="btn btn-outline">Dynamic targets →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Branching and conditions</h3>
+                <p class="bb-card-desc">
+                    Steps can be gated, tours can fork on an answer, and Back follows the path the user
+                    actually took rather than the order the steps were declared in.
+                </p>
+                <a href="flows" class="btn btn-outline">Conditional &amp; branching →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Route-aware</h3>
+                <p class="bb-card-desc">
+                    A tour can span pages: it navigates for you and waits for the page to render. Wander
+                    off mid-tour and it holds its place instead of dragging you back.
+                </p>
+                <a href="workspace" class="btn btn-outline">Multi-page tour →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Yours to restyle</h3>
+                <p class="bb-card-desc">
+                    Public CSS custom properties, per-step templates, or a completely headless popover that
+                    still gets measurement, placement and focus management for free.
+                </p>
+                <a href="theming" class="btn btn-outline">Theming &amp; RTL →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Analytics-grade events</h3>
+                <p class="bb-card-desc">
+                    Every moment of a tour is an event - including how long each step was on screen - and
+                    progress is stored after every step, so a user resumes where they left off.
+                </p>
+                <a href="events" class="btn btn-outline">Events &amp; persistence →</a>
+            </section>
         </div>
     </section>
 
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">One tour, two ways to write it</span>
-            <h2>The whole tour, in markup</h2>
-            <p class="section-lead">
-                This is the tour running above. Steps point at elements through
-                <code>data-bonboarding-anchor</code> attributes, so they survive re-renders and work with
-                elements that do not exist yet.
-            </p>
+    @* ============================== Code walkthrough ============================== *@
 
-            <div class="code-pair">
-                <div>
-                    <h3>As components</h3>
-                    <p>Declared next to the page it tours, and started from a button or on first visit.</p>
-                    <pre><code>@MarkupExample</code></pre>
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>The tour above, in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Mark what you want to point at</h3>
+                    <p>
+                        A <code>data-bonboarding-anchor</code> attribute is all a target needs. It survives
+                        re-renders, works on elements that do not exist yet, and needs no
+                        <code>ElementReference</code>. CSS selectors work too.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
                 </div>
-
-                <div>
-                    <h3>Or as data</h3>
+                <pre class="bb-code">&lt;<span class="k">button</span> data-bonboarding-anchor=<span class="s">"new-project"</span>&gt;New project&lt;/<span class="k">button</span>&gt;
+&lt;<span class="k">input</span> type=<span class="s">"search"</span> data-bonboarding-anchor=<span class="s">"search"</span> /&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Declare the tour next to the page</h3>
                     <p>
-                        The components build a <code>BonboardingTourDefinition</code>. Constructing one directly
-                        is equally supported - it is what you want when tours come from configuration.
+                        <code>BonboardingTour</code> renders nothing itself: the one <code>BonboardingRoot</code>
+                        your app hosts draws whichever tour is running. A step without a target is a centred card.
                     </p>
-                    <pre><code>@CodeExample</code></pre>
+                    <a href="placement">Placement &amp; spotlight →</a>
                 </div>
+                <pre class="bb-code">&lt;<span class="k">BonboardingTour</span> Id=<span class="s">"welcome"</span>
+                 AutoStart=<span class="s">"BonboardingAutoStart.Once"</span>&gt;
+    &lt;<span class="k">BonboardingStep</span> Anchor=<span class="s">"new-project"</span>
+                     Title=<span class="s">"Create a project"</span> /&gt;
+    &lt;<span class="k">BonboardingStep</span> Anchor=<span class="s">"search"</span>
+                     Title=<span class="s">"Find anything"</span> /&gt;
+&lt;/<span class="k">BonboardingTour</span>&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Or build it as data</h3>
+                    <p>
+                        The components build a <code>BonboardingTourDefinition</code>; constructing one directly is
+                        equally supported, and is what you want when tours come from configuration or a CMS.
+                    </p>
+                    <a href="flows">Conditional &amp; branching →</a>
+                </div>
+                <pre class="bb-code"><span class="k">var</span> tour = <span class="k">new</span> BonboardingTourDefinition
+{
+    Id = <span class="s">"welcome"</span>,
+    Steps =
+    {
+        <span class="k">new</span> BonboardingStepDefinition
+        {
+            Target = BonboardingStepTarget.Anchor(<span class="s">"new-project"</span>),
+            Title = <span class="s">"Create a project"</span>,
+        },
+        <span class="k">new</span> BonboardingStepDefinition
+        {
+            Target = <span class="s">"#search-box"</span>,   <span class="c">// a CSS selector converts implicitly</span>
+            Title = <span class="s">"Find anything"</span>,
+        },
+    },
+};
+
+<span class="k">await</span> BonboardingService.StartOnceAsync(tour);   <span class="c">// skipped once finished or dismissed</span></pre>
             </div>
         </div>
     </section>
 
-    <section class="homepage-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">What is in the box</span>
-            <h2>The hard parts of a tour, done once</h2>
-            <p class="section-lead">
-                Each of these is a page of the docs with a working tour on it, and every tour on this site
-                is the library's own default card - restyled in Fluent 2 through its CSS variables.
-            </p>
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not wrap a JavaScript tour library?</h2>
+        <p class="bb-section-sub">
+            A wrapper keeps the tour's state on the other side of interop, so every condition, branch and
+            route change becomes a round trip. Bonboarding keeps the decisions in C#, next to the application
+            state they depend on.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A JavaScript tour library compared with Bonboarding">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>JavaScript library through interop</th><th>Bonboarding</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Where the tour runs</td><td>A JavaScript engine, called through interop</td><td>A C# session - the browser only measures, observes and routes keys</td></tr>
+                    <tr><td>Conditions and branches</td><td>Written in JavaScript, or a round trip per step</td><td><code>When</code>, <code>ResolveNext</code> and <code>CanAdvance</code> - C# delegates over your state</td></tr>
+                    <tr><td>Steps on other pages</td><td>Stop, navigate and restart by hand</td><td><code>Route</code> on the step: the engine navigates and waits for the page</td></tr>
+                    <tr><td>Elements that render late</td><td>Your own timers and retries</td><td>Wait, skip, centre or fail per step, on a mutation observer</td></tr>
+                    <tr><td>Testing the flow</td><td>Needs a browser</td><td>The DOM seam is an interface - the engine is unit-tested without one</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
 
-            <div class="feature-grid">
-                @foreach (var feature in Features)
-                {
-                    if (feature.Href is null)
-                    {
-                        <div class="feature-card">
-                            <span class="feature-card-icon"><Icon Path="@feature.Icon" /></span>
-                            <h3>@feature.Title</h3>
-                            <p>@feature.Description</p>
-                        </div>
-                    }
-                    else
-                    {
-                        <a class="feature-card" href="@feature.Href">
-                            <span class="feature-card-icon"><Icon Path="@feature.Icon" /></span>
-                            <h3>@feature.Title</h3>
-                            <p>@feature.Description</p>
-                        </a>
-                    }
-                }
-            </div>
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bonboarding?</h3>
+                <p class="bb-card-desc">Install, register, link the stylesheet, host one root - a first tour in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to see it live?</h3>
+                <p class="bb-card-desc">Every page of the docs is a working tour, with the options it demonstrates one click away.</p>
+                <a href="placement" class="btn btn-outline">Open the demos →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
         </div>
     </section>
 
-    <section class="homepage-section alt-section">
-        <div class="homepage-section-content">
-            <span class="section-eyebrow">The docs</span>
-            <h2>Every page is a working tour</h2>
-            <p class="section-lead">Start anywhere: each one demonstrates a single capability in depth.</p>
-
-            <div class="demo-index">
-                @foreach (var group in NavItem.Groups)
-                {
-                    <div class="demo-index-group">
-                        <h3><Icon Path="@group.Icon" />@group.Category</h3>
-                        @foreach (var item in group.Items)
-                        {
-                            <a class="demo-index-link" href="@item.Url">
-                                <span class="title">@item.Title</span>
-                                <span class="desc">@item.Description</span>
-                            </a>
-                        }
-                    </div>
-                }
-            </div>
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this a wrapper around a JavaScript tour library?</summary>
+                <p>
+                    No. The browser layer is a single small module that measures elements, watches them for
+                    movement, scrolls, and routes keyboard events. Which step comes next, whether it is shown,
+                    where the popover goes and what happens when a target is missing are all decided in C#.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    Blazor Server, Blazor WebAssembly and Blazor Web App (Server, WebAssembly or Auto), on .NET 8,
+                    9 and 10, including while prerendering. Start tours from <code>OnAfterRenderAsync</code>, a
+                    user action or <code>AutoStart</code> - this site runs on InteractiveAuto.
+                </p>
+            </details>
+            <details>
+                <summary>Does it remember how far a user got?</summary>
+                <p>
+                    Yes. Progress is written to the registered <code>IBonboardingStore</code> after every step -
+                    by default <code>localStorage</code> with an in-memory mirror - so a user resumes where they
+                    were, and <code>StartOnceAsync</code> skips a tour they already finished or dismissed.
+                </p>
+            </details>
+            <details>
+                <summary>Can it look like my product?</summary>
+                <p>
+                    Every value of the default card is a <code>--bit-bonboarding-*</code> custom property, a step
+                    can replace its header, body or footer, and a host can render the whole card itself while
+                    the library keeps placing and focusing it.
+                </p>
+            </details>
+            <details>
+                <summary>Is it accessible?</summary>
+                <p>
+                    The popover is a labelled dialog with a focus trap and focus restoration, the tour is driven
+                    from the keyboard, every step is announced in a live region, and reduced motion and forced
+                    colors are honoured.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Show people around</h2>
+        <p class="bb-section-sub">One package, one service registration, one stylesheet and one host - and any page can have a tour.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bonboarding</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="placement" class="btn btn-secondary bb-btn-lg">Browse the demos</a>
         </div>
     </section>
 </div>
 
-@* The tour itself. It renders nothing; BonboardingRoot in the layout displays it. *@
+@* The tour itself. It renders nothing; the BonboardingRoot beside the router (Routes.razor)
+   displays it. The last step points at the site's own search button by CSS selector - a target does
+   not have to be marked up for the tour, any element on the page will do. *@
 <BonboardingTour @ref="_tour" Id="welcome" Title="Welcome tour" Version="1">
 
     <BonboardingStep Id="intro"
@@ -157,8 +333,10 @@
                      Placement="BonboardingPlacement.BottomEnd" />
 
     <BonboardingStep Id="done"
+                     Selector=".bb-search-trigger"
                      Title="That is the tour"
-                     Description="Every page under Docs demonstrates one capability in more depth."
+                     Description="Every page of the docs demonstrates one capability in more depth. Press / or Ctrl+K anywhere to search them."
+                     Placement="BonboardingPlacement.BottomEnd"
                      DoneLabel="Finish" />
 
 </BonboardingTour>
@@ -166,74 +344,7 @@
 @code {
     private BonboardingTour? _tour;
 
-    private sealed record Feature(string Title, string Description, string Icon, string? Href);
-
-    private static readonly Feature[] Features =
-    [
-        new("Positioning that behaves",
-            "Collision-aware placement computed in C#: shift before flip, arrow clamping, viewport padding, and correct behaviour for targets larger than the screen.",
-            Icons.Target, "placement"),
-        new("Elements that are not there yet",
-            "Wait, skip, centre or fail. Waiting uses a mutation observer rather than a polling timer, and a target replaced by a re-render is rebound rather than reported as lost.",
-            Icons.Clock, "dynamic"),
-        new("Branching and conditions",
-            "Steps can be gated, tours can fork, and Back follows the path the user actually took rather than the declaration order.",
-            Icons.Branch, "flows"),
-        new("Route-aware",
-            "A tour can span pages. Navigate away mid-tour and it waits for you instead of dragging you back.",
-            Icons.Pages, "workspace"),
-        new("Yours to restyle",
-            "Public CSS variables, per-step templates, or a completely headless popover that still gets measurement, placement and focus management for free.",
-            Icons.Palette, "theming"),
-        // Not a page of its own: it is true of every tour on every page.
-        new("Accessibility built in",
-            "Dialog semantics, focus trap and restoration, keyboard navigation, live-region announcements, reduced motion and forced-colors support.",
-            Icons.Accessibility, null),
-    ];
-
     private Task StartTourAsync() => _tour is null ? Task.CompletedTask : _tour.StartAsync();
 
     private Task RestartTourAsync() => _tour is null ? Task.CompletedTask : _tour.RestartAsync();
-
-    private const string MarkupExample = """
-        <BonboardingTour @ref="tour" Id="welcome">
-            <BonboardingStep Anchor="new-project"
-                             Title="Create a project"
-                             Description="Everything starts here." />
-
-            <BonboardingStep Anchor="search"
-                             Title="Find anything"
-                             Placement="BonboardingPlacement.Bottom"
-                             Description="Search across every project you can see." />
-        </BonboardingTour>
-
-        @* Mark the targets, anywhere in your markup: *@
-        <button data-bonboarding-anchor="new-project">New project</button>
-        """;
-
-    private const string CodeExample = """
-        var tour = new BonboardingTourDefinition
-        {
-            Id = "welcome",
-            Steps =
-            {
-                new BonboardingStepDefinition
-                {
-                    Id = "create",
-                    Target = BonboardingStepTarget.Anchor("new-project"),
-                    Title = "Create a project",
-                    Description = "Everything starts here.",
-                },
-                new BonboardingStepDefinition
-                {
-                    Id = "search",
-                    Target = "#search-box",          // a CSS selector converts implicitly
-                    Placement = BonboardingPlacement.Bottom,
-                    Title = "Find anything",
-                },
-            },
-        };
-
-        await BonboardingService.StartOnceAsync(tour);       // skipped if the user already finished it
-        """;
 }
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/McpServer.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/McpServer.razor
index b47f7388ec8..3545f026774 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/McpServer.razor
@@ -3,91 +3,69 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server</PageTitle>
+<PageTitle>MCP server · Bonboarding</PageTitle>
 
-<h1>MCP server</h1>
-
-<p class="page-intro">
-    This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent building tours
-    with Bit.Bonboarding reads the library itself - its compiled API documentation, its guide, its
-    stylesheet and these demo pages - instead of guessing at an API it half remembers. Every tool is
-    read-only.
-</p>
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
+        This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent building tours with
+        Bit.Bonboarding reads the library itself - its compiled API documentation, its guide, its stylesheet and these
+        demo pages - instead of guessing at an API it half remembers. Every tool is read-only.
+    </p>
+</div>
 
-<section class="demo-section">
-    <h2>Connect a client</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
-        The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The
-        same tools are also served, version by version, through the bit platform's own server at
+        The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
+        are also served, version by version, through the bit platform's own server at
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre><code>@ClientConfig</code></pre>
+    <pre class="bb-code">@ClientConfig</pre>
 </section>
 
-<section class="demo-section">
-    <h2>Tools</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
-    <div class="table-wrap">
-        <table>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th>Tool</th><th>What it answers</th></tr>
             </thead>
             <tbody>
-                <tr>
-                    <td><code>SearchBonboarding</code></td>
-                    <td>Everything at once - the guide, every public member, the theme variables and the demo sources - each hit with the exact follow-up call.</td>
-                </tr>
-                <tr>
-                    <td><code>GetBonboardingSetupGuide</code></td>
-                    <td>The complete wiring for one render mode: server, wasm, auto or standalone-wasm.</td>
-                </tr>
-                <tr>
-                    <td><code>GetBonboardingGuideSection</code></td>
-                    <td>One section of the reference guide, or the index of sections.</td>
-                </tr>
-                <tr>
-                    <td><code>GetBonboardingApi</code></td>
-                    <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
-                </tr>
-                <tr>
-                    <td><code>GetBonboardingThemeVariables</code></td>
-                    <td>Every <code>--bit-bonboarding-*</code> variable with its light and dark value.</td>
-                </tr>
-                <tr>
-                    <td><code>InspectBonboardingPlacement</code></td>
-                    <td>Where the library's own placement engine puts a popover for a given target, popover and viewport, and why.</td>
-                </tr>
-                <tr>
-                    <td><code>GetBonboardingSourceFile</code></td>
-                    <td>One demo file verbatim - every page here is a working tour - or the index of files.</td>
-                </tr>
+                @foreach (var tool in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        <td>@((MarkupString)tool.Description)</td>
+                    </tr>
+                }
             </tbody>
         </table>
     </div>
 
     <p>
-        The guide, the API, the theme and the sources are also exposed as <code>bonboarding://</code> resources,
-        and three prompts - <code>add-bonboarding-to-app</code>, <code>implement-bonboarding-tour</code> and
+        The guide, the API, the theme and the sources are also exposed as <code>bonboarding://</code> resources, and
+        three prompts - <code>add-bonboarding-to-app</code>, <code>implement-bonboarding-tour</code> and
         <code>debug-bonboarding-tour</code> - walk an agent through the common jobs in the right order.
     </p>
 </section>
 
-<section class="demo-section">
-    <h2>The same tools over plain HTTP</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
-        <li><a href="/api/mcp/SearchBonboarding?query=advance%20when%20the%20user%20clicks" target="_blank" rel="noopener">/api/mcp/SearchBonboarding?query=advance when the user clicks</a></li>
-        <li><a href="/api/mcp/GetBonboardingApi?typeName=BonboardingStep" target="_blank" rel="noopener">/api/mcp/GetBonboardingApi?typeName=BonboardingStep</a></li>
-        <li><a href="/api/mcp/GetBonboardingThemeVariables" target="_blank" rel="noopener">/api/mcp/GetBonboardingThemeVariables</a></li>
-        <li><a href="/api/mcp/InspectBonboardingPlacement?targetX=1200&amp;targetY=20&amp;targetWidth=60&amp;targetHeight=30&amp;placement=Right" target="_blank" rel="noopener">/api/mcp/InspectBonboardingPlacement?targetX=1200&amp;targetY=20&amp;targetWidth=60&amp;targetHeight=30&amp;placement=Right</a></li>
-        <li><a href="/api/mcp/GetBonboardingSourceFile?path=Demo/Client/Pages/Flows.razor" target="_blank" rel="noopener">/api/mcp/GetBonboardingSourceFile?path=Demo/Client/Pages/Flows.razor</a></li>
+    <ul class="bb-detail-list">
+        @foreach (var (href, text) in HttpExamples)
+        {
+            <li><a href="@href" target="_blank" rel="noopener">@text</a></li>
+        }
     </ul>
 </section>
 
@@ -103,4 +81,34 @@
           }
         }
         """;
+
+    // The server's tools, in the order an agent usually needs them. The one place to change when a tool is
+    // added, renamed or retired; the description is markup.
+    private static readonly (string Name, string Description)[] Tools =
+    [
+        ("SearchBonboarding",
+            "Everything at once - the guide, every public member, the theme variables and the demo sources - each hit with the exact follow-up call."),
+        ("GetBonboardingSetupGuide",
+            "The complete wiring for one render mode: server, wasm, auto or standalone-wasm."),
+        ("GetBonboardingGuideSection",
+            "One section of the reference guide, or the index of sections."),
+        ("GetBonboardingApi",
+            "One public type with every parameter, property and method, its real default and its documentation - or the index of types."),
+        ("GetBonboardingThemeVariables",
+            "Every <code>--bit-bonboarding-*</code> variable with its light and dark value."),
+        ("InspectBonboardingPlacement",
+            "Where the library's own placement engine puts a popover for a given target, popover and viewport, and why."),
+        ("GetBonboardingSourceFile",
+            "One demo file verbatim - every page here is a working tour - or the index of files."),
+    ];
+
+    private static readonly (string Href, string Text)[] HttpExamples =
+    [
+        ("/api/mcp/SearchBonboarding?query=advance%20when%20the%20user%20clicks", "/api/mcp/SearchBonboarding?query=advance when the user clicks"),
+        ("/api/mcp/GetBonboardingApi?typeName=BonboardingStep", "/api/mcp/GetBonboardingApi?typeName=BonboardingStep"),
+        ("/api/mcp/GetBonboardingThemeVariables", "/api/mcp/GetBonboardingThemeVariables"),
+        ("/api/mcp/InspectBonboardingPlacement?targetX=1200&targetY=20&targetWidth=60&targetHeight=30&placement=Right",
+            "/api/mcp/InspectBonboardingPlacement?targetX=1200&targetY=20&targetWidth=60&targetHeight=30&placement=Right"),
+        ("/api/mcp/GetBonboardingSourceFile?path=Demo/Client/Pages/Flows.razor", "/api/mcp/GetBonboardingSourceFile?path=Demo/Client/Pages/Flows.razor"),
+    ];
 }
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/NotFound.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/NotFound.razor
index 30c66e1fde8..d18e6ce9915 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/NotFound.razor
@@ -4,23 +4,14 @@
 @* Covers both a deep link the server could not route (Program.cs re-executes it here) and client-side
    navigation to an unknown route (via the router's NotFoundPage parameter). *@
 
-<PageTitle>Not found - Bit.Bonboarding</PageTitle>
+<PageTitle>Not found · Bonboarding</PageTitle>
 
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">404</span>
-
-    <h1>This page does not exist</h1>
-
-    <p>
-        There is nothing at this address. Every page of the docs is a working tour, and they start with
-        placement and the spotlight.
-    </p>
-
-    <div class="hero-actions">
-        <a class="btn btn-primary btn-lg" href="@NavItem.All[0].Url">
-            Read the docs
-            <Icon Path="@Icons.ArrowRight" />
-        </a>
-        <a class="btn btn-lg" href="/">Back to home</a>
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
     </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
 </div>
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/PlacementLab.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/PlacementLab.razor
index 2fdd29a6ebc..618c3948443 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/PlacementLab.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/PlacementLab.razor
@@ -1,114 +1,119 @@
 @page "/placement"
 @inject IBonboardingService BonboardingService
 
-<PageTitle>Placement and spotlight</PageTitle>
-
-<h1>Placement &amp; spotlight</h1>
-
-<p class="page-intro">
-    Positioning is computed in C# from a measured rectangle. Pick a target near an edge and a
-    placement that cannot fit, and watch the engine slide the popover along the target rather than
-    jumping it to another side; it only flips when sliding is not enough.
-</p>
-
-<section class="demo-section">
-    <h2>Try it</h2>
+<PageTitle>Placement &amp; spotlight · Bonboarding</PageTitle>
+
+<div class="bb-intro">
+    <h1>Placement &amp; spotlight</h1>
+    <p class="bb-subtitle">
+        Positioning is computed in C# from a measured rectangle. Pick a target near an edge and a placement that
+        cannot fit, and watch the engine slide the popover along the target rather than jumping it to another
+        side; it only flips when sliding is not enough.
+    </p>
+</div>
 
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
     <p>
         The panel below scrolls. Steps four and five sit outside the visible area, which exercises
         scroll-into-view and the observers that keep the popover glued to a moving target.
     </p>
 
-    <div class="controls">
-        <div class="field">
-            <label for="placement">Placement</label>
-            <select id="placement" @bind="_placement">
-                @foreach (var value in Enum.GetValues<BonboardingPlacement>())
-                {
-                    <option value="@value">@value</option>
-                }
-            </select>
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the tour</button>
         </div>
 
-        <div class="field">
-            <label for="shape">Spotlight shape</label>
-            <select id="shape" @bind="_shape">
-                @foreach (var value in Enum.GetValues<BonboardingSpotlightShape>())
-                {
-                    <option value="@value">@value</option>
-                }
-            </select>
+        <div class="bb-fields">
+            <label class="bb-field">
+                Placement
+                <select @bind="_placement">
+                    @foreach (var value in Enum.GetValues<BonboardingPlacement>())
+                    {
+                        <option value="@value">@value</option>
+                    }
+                </select>
+            </label>
+
+            <label class="bb-field">
+                Spotlight shape
+                <select @bind="_shape">
+                    @foreach (var value in Enum.GetValues<BonboardingSpotlightShape>())
+                    {
+                        <option value="@value">@value</option>
+                    }
+                </select>
+            </label>
+
+            <label class="bb-field">
+                Spotlight padding
+                <input type="number" min="0" max="40" step="2" @bind="_spotlightPadding" />
+            </label>
+
+            <label class="bb-field">
+                Popover offset
+                <input type="number" min="0" max="60" step="2" @bind="_offset" />
+            </label>
+
+            <label class="bb-field">
+                Interaction
+                <select @bind="_interaction">
+                    @foreach (var value in Enum.GetValues<BonboardingInteractionMode>())
+                    {
+                        <option value="@value">@value</option>
+                    }
+                </select>
+            </label>
         </div>
 
-        <div class="field">
-            <label for="padding">Spotlight padding</label>
-            <input id="padding" type="number" min="0" max="40" step="2" @bind="_spotlightPadding" />
-        </div>
-
-        <div class="field">
-            <label for="offset">Popover offset</label>
-            <input id="offset" type="number" min="0" max="60" step="2" @bind="_offset" />
-        </div>
-
-        <div class="field">
-            <label for="interaction">Interaction</label>
-            <select id="interaction" @bind="_interaction">
-                @foreach (var value in Enum.GetValues<BonboardingInteractionMode>())
+        <div class="playground">
+            <div class="playground-inner">
+                @foreach (var target in Targets)
                 {
-                    <option value="@value">@value</option>
+                    <div class="dot-target"
+                         data-bonboarding-anchor="@target.Anchor"
+                         style="left:@(target.Left); top:@(target.Top)">@target.Label</div>
                 }
-            </select>
-        </div>
-
-        <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the tour</button>
-    </div>
-
-    <div class="playground">
-        <div class="playground-inner">
-            @foreach (var target in Targets)
-            {
-                <div class="dot-target"
-                     data-bonboarding-anchor="@target.Anchor"
-                     style="left:@(target.Left); top:@(target.Top)">@target.Label</div>
-            }
+            </div>
         </div>
     </div>
 </section>
 
-<section class="demo-section">
-    <h2>What the options do</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> What the options do</h3>
 
-    <div class="table-wrap">
-        <table>
+    <div class="bb-scroll">
+        <table class="bb-table">
             <thead>
                 <tr><th>Option</th><th>Effect</th></tr>
             </thead>
             <tbody>
                 <tr>
-                    <td><code>Placement</code></td>
+                    <td class="bb-table-key"><code>Placement</code></td>
                     <td>The side and alignment to try first. <code>Auto</code> picks the side with the most free space.</td>
                 </tr>
                 <tr>
-                    <td><code>PlacementFallbacks</code></td>
+                    <td class="bb-table-key"><code>PlacementFallbacks</code></td>
                     <td>An explicit order to try when the preferred placement does not fit. Left unset, the engine derives one.</td>
                 </tr>
                 <tr>
-                    <td><code>SpotlightShape</code></td>
+                    <td class="bb-table-key"><code>SpotlightShape</code></td>
                     <td><code>Rounded</code>, <code>Rectangle</code>, <code>Circle</code>, or <code>None</code> to dim without a cut-out.</td>
                 </tr>
                 <tr>
-                    <td><code>SpotlightPadding</code></td>
+                    <td class="bb-table-key"><code>SpotlightPadding</code></td>
                     <td>Breathing room around the target. It also grows the rectangle the popover is positioned against.</td>
                 </tr>
                 <tr>
-                    <td><code>Interaction</code></td>
+                    <td class="bb-table-key"><code>Interaction</code></td>
                     <td>
                         <code>Blocked</code> swallows every click outside the popover, <code>TargetOnly</code> makes the
                         spotlight hole click-through, and <code>Free</code> leaves the page entirely usable.
                     </td>
                 </tr>
                 <tr>
-                    <td><code>Scroll</code></td>
+                    <td class="bb-table-key"><code>Scroll</code></td>
                     <td>How an off-screen target is brought into view, including doing nothing at all.</td>
                 </tr>
             </tbody>
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/Theming.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/Theming.razor
index 2274bf9a3cf..60ebf89635c 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/Theming.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/Theming.razor
@@ -1,86 +1,92 @@
 @page "/theming"
 @inject IBonboardingService BonboardingService
 
-<PageTitle>Theming and RTL</PageTitle>
-
-<h1>Theming &amp; RTL</h1>
-
-<p class="page-intro">
-    Every value in the default look is a CSS custom property under <code>.bit-bonboarding-root</code>. Restyling
-    the library is a matter of overriding variables in your own stylesheet, with no selector fights
-    and no framework to install.
-</p>
-
-<section class="demo-section">
-    <h2>Try it</h2>
-
-    <div class="controls">
-        <div class="field">
-            <label for="theme">Theme</label>
-            <select id="theme" @bind="_theme">
-                <option value="">Not set (follows the site)</option>
-                @foreach (var value in Enum.GetValues<BonboardingTheme>())
-                {
-                    <option value="@value">@value</option>
-                }
-            </select>
-        </div>
+<PageTitle>Theming &amp; RTL · Bonboarding</PageTitle>
+
+<div class="bb-intro">
+    <h1>Theming &amp; RTL</h1>
+    <p class="bb-subtitle">
+        Every value in the default look is a CSS custom property under <code>.bit-bonboarding-root</code>. Restyling the
+        library is a matter of overriding variables in your own stylesheet, with no selector fights and no framework
+        to install.
+    </p>
+</div>
 
-        <div class="field">
-            <label for="direction">Direction</label>
-            <select id="direction" @bind="_direction">
-                @foreach (var value in Enum.GetValues<BonboardingDirection>())
-                {
-                    <option value="@value">@value</option>
-                }
-            </select>
-        </div>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Try it</h3>
+    <p>
+        Pick a theme, a direction, a progress style and a skin, then run the tour over the product below. With the
+        theme left to the site, its last step points at the header's light/dark switch - press it while the card is
+        up.
+    </p>
 
-        <div class="field">
-            <label for="progress">Progress</label>
-            <select id="progress" @bind="_progress">
-                @foreach (var value in Enum.GetValues<BonboardingProgressStyle>())
-                {
-                    <option value="@value">@value</option>
-                }
-            </select>
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the tour</button>
         </div>
 
-        <div class="field">
-            <label for="skin">Skin</label>
-            <select id="skin" @bind="_skin">
-                <option value="">Fluent 2 (this site)</option>
-                <option value="brand-popover">Brand (amber on navy)</option>
-            </select>
+        <div class="bb-fields">
+            <label class="bb-field">
+                Theme
+                <select @bind="_theme">
+                    <option value="">Not set (follows the site)</option>
+                    @foreach (var value in Enum.GetValues<BonboardingTheme>())
+                    {
+                        <option value="@value">@value</option>
+                    }
+                </select>
+            </label>
+
+            <label class="bb-field">
+                Direction
+                <select @bind="_direction">
+                    @foreach (var value in Enum.GetValues<BonboardingDirection>())
+                    {
+                        <option value="@value">@value</option>
+                    }
+                </select>
+            </label>
+
+            <label class="bb-field">
+                Progress
+                <select @bind="_progress">
+                    @foreach (var value in Enum.GetValues<BonboardingProgressStyle>())
+                    {
+                        <option value="@value">@value</option>
+                    }
+                </select>
+            </label>
+
+            <label class="bb-field">
+                Skin
+                <select @bind="_skin">
+                    <option value="">Fluent 2 (this site)</option>
+                    <option value="brand-popover">Brand (amber on navy)</option>
+                </select>
+            </label>
         </div>
 
-        <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the tour</button>
-    </div>
+        <div class="bb-note">
+            Left unset - or set to <code>System</code> - the tour leaves its colours to your stylesheet, and this site's
+            stylesheet follows its own light/dark switch. <code>Light</code> and <code>Dark</code> win over the switch.
+        </div>
 
-    <div class="note">
-        <Icon Path="@Icons.Info" />
-        <span>
-            Left unset, the tour follows this site's theme switch. Any other value wins over the switch:
-            <code>System</code> leaves the choice to your stylesheet, which here means the light palette.
-        </span>
+        <AppWindow />
     </div>
-
-    <AppWindow />
 </section>
 
-<section class="demo-section">
-    <h2>Localisation</h2>
-
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Localisation</h3>
     <p>
-        Button text comes from an <code>BonboardingLabels</code> instance, set globally or per tour. For
-        resource files or a translation service, register your own
-        <code>IBonboardingLocalizer</code> instead.
+        Button text comes from an <code>BonboardingLabels</code> instance, set globally or per tour. For resource files
+        or a translation service, register your own <code>IBonboardingLocalizer</code> instead.
     </p>
 
-    <div class="demo-actions">
-        <button type="button" class="btn" @onclick='() => StartLocalizedAsync("en")'>English</button>
-        <button type="button" class="btn" @onclick='() => StartLocalizedAsync("de")'>Deutsch</button>
-        <button type="button" class="btn" @onclick='() => StartLocalizedAsync("ar")'>العربية (RTL)</button>
+    <div class="bb-try">
+        <button type="button" class="btn btn-secondary" @onclick='() => StartLocalizedAsync("en")'>English</button>
+        <button type="button" class="btn btn-secondary" @onclick='() => StartLocalizedAsync("de")'>Deutsch</button>
+        <button type="button" class="btn btn-secondary" @onclick='() => StartLocalizedAsync("ar")'>العربية (RTL)</button>
     </div>
 
     <p>
@@ -89,16 +95,27 @@
     </p>
 </section>
 
-<section class="demo-section">
-    <h2>The variables</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The variables</h3>
+    <p>
+        This site does exactly what the snippet below shows: every tour card on it is the library's default markup
+        with Fluent 2 values poured into these variables, light and dark, in the demo's <code>wwwroot/demo.css</code>.
+        Apart from shielding the card from the site's own global element styles, none of the library's rules is
+        overridden.
+    </p>
 
+    <pre class="bb-code">@ThemeExample</pre>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Following your own theme switch</h3>
     <p>
-        This site does exactly what the snippet below shows: every tour card on it is the library's
-        default markup with Fluent 2 values poured into these variables, light and dark, in the demo's
-        <code>wwwroot/css/app.css</code>. Not one of the library's selectors is overridden.
+        A tour that leaves its theme unset is drawn with <code>data-bonboarding-theme="system"</code>, and the library's
+        stylesheet gives that the light palette. Map it to your application's dark theme in CSS, as this site does - or
+        bind the switch to the host instead, which overrides the tour and the global setting alike.
     </p>
 
-    <pre><code>@ThemeExample</code></pre>
+    <pre class="bb-code">@FollowExample</pre>
 </section>
 
 @code {
@@ -184,6 +201,20 @@
                 Description = "Change the skin above to see a completely different visual identity, with no library changes.",
                 Placement = BonboardingPlacement.BottomEnd,
             },
+            new BonboardingStepDefinition
+            {
+                Id = "site-theme",
+                // The site's own header, found by CSS selector: a target does not have to be marked up
+                // for the tour.
+                Target = BonboardingStepTarget.Css(".bb-theme-toggle"),
+                Title = "Follows the site",
+                Description = "This tour leaves its colours to the stylesheet, and this site's follows its own switch. Press it: the card changes theme with the page.",
+                Placement = BonboardingPlacement.BottomEnd,
+                // The spotlight hole is click-through, so the switch can be used while the card is up.
+                Interaction = BonboardingInteractionMode.TargetOnly,
+                // Only true of a tour that has not chosen a palette of its own.
+                When = _ => ValueTask.FromResult(_theme is null or BonboardingTheme.System),
+            },
         },
     };
 
@@ -201,4 +232,17 @@
         /* Or scope it to one tour with PopoverClass. */
         .checkout-tour { --bit-bonboarding-accent: #16a34a; }
         """;
+
+    private const string FollowExample = """
+        /* This site: a tour with no theme of its own goes dark with the page. */
+        :root[bit-theme="dark"] .bit-bonboarding-root[data-bonboarding-theme="system"] {
+            --bit-bonboarding-surface: #15191E;
+            --bit-bonboarding-text: #E6ECF2;
+            --bit-bonboarding-accent: #4FA3F4;
+            /* ... */
+        }
+
+        @* Or from C#: the host's Theme overrides the tour's and the global one. *@
+        <BonboardingRoot Theme="@(_dark ? BonboardingTheme.Dark : BonboardingTheme.Light)" />
+        """;
 }
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/Workspace.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/Workspace.razor
index 09a11b3ab6d..d1397afdb8c 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/Workspace.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/Workspace.razor
@@ -2,39 +2,48 @@
 @inject IBonboardingService BonboardingService
 @inject NavigationManager Navigation
 
-<PageTitle>Multi-page tour</PageTitle>
+<PageTitle>Multi-page tour · Bonboarding</PageTitle>
 
-<h1>Multi-page tour</h1>
+<div class="bb-intro">
+    <h1>Multi-page tour</h1>
+    <p class="bb-subtitle">
+        Steps can declare the route they belong to. The engine navigates there, waits for the page to render, and
+        only then shows the step. If you wander off mid-tour it holds its place instead of dragging you back, and
+        picks up where it left off when you return.
+    </p>
+</div>
 
-<p class="page-intro">
-    Steps can declare the route they belong to. The engine navigates there, waits for the page to
-    render, and only then shows the step. If you wander off mid-tour it holds its place instead of
-    dragging you back, and picks up where it left off when you return.
-</p>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A tour across two pages</h3>
+    <p>
+        The tour starts here, crosses to the settings page for two steps and comes back for the last one - the
+        navigation is the engine's, not this page's.
+    </p>
 
-<section class="demo-section">
-    <h2>A tour across two pages</h2>
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the multi-page tour</button>
+            <a class="btn btn-secondary" href="workspace/settings">Go to settings manually</a>
+        </div>
 
-    <div class="demo-actions">
-        <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the multi-page tour</button>
-        <a class="btn" href="workspace/settings">Go to settings manually</a>
-    </div>
+        <div class="bb-note">
+            While the tour is on a settings step, try navigating back here with the docs navigation. The tour waits,
+            and resumes the moment you return.
+        </div>
 
-    <div class="note">
-        <Icon Path="@Icons.Info" />
-        <span>
-            While the tour is on a settings step, try navigating back here with the nav panel. The tour
-            waits, and resumes the moment you return.
-        </span>
+        <AppWindow OnSettingsClick="GoToSettings" />
     </div>
-
-    <AppWindow OnSettingsClick="GoToSettings" />
 </section>
 
-<section class="demo-section">
-    <h2>Giving a step a route</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Giving a step a route</h3>
+    <p>
+        The tour itself is plain data, defined once in C# and started from either page, which keeps its step ids
+        stable - what makes resuming across a reload work.
+    </p>
 
-    <pre><code>@Example</code></pre>
+    <pre class="bb-code">@Example</pre>
 </section>
 
 @code {
diff --git a/src/Utilities/Bonboarding/Demo/Client/Pages/WorkspaceSettings.razor b/src/Utilities/Bonboarding/Demo/Client/Pages/WorkspaceSettings.razor
index afb7fea0c47..c1a6f735778 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Pages/WorkspaceSettings.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Pages/WorkspaceSettings.razor
@@ -1,52 +1,56 @@
 @page "/workspace/settings"
 @inject IBonboardingService BonboardingService
 
-<PageTitle>Workspace settings</PageTitle>
-
-<h1>Workspace settings</h1>
-
-<p class="page-intro">
-    The second half of the multi-page tour lives here. Starting the tour from this page works just
-    as well: the engine navigates backwards to the first step's route.
-</p>
-
-<section class="demo-section">
-    <h2>Settings</h2>
-
-    <div class="demo-actions">
-        <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the multi-page tour</button>
-        <a class="btn" href="workspace">Back to the workspace</a>
-    </div>
+<PageTitle>Workspace settings · Bonboarding</PageTitle>
+
+<div class="bb-intro">
+    <h1>Workspace settings</h1>
+    <p class="bb-subtitle">
+        The second half of the multi-page tour lives here. Starting the tour from this page works just as well: the
+        engine navigates backwards to the first step's route.
+    </p>
+</div>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Settings</h3>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <button type="button" class="btn btn-primary" @onclick="StartAsync">Run the multi-page tour</button>
+            <a class="btn btn-secondary" href="workspace">Back to the workspace</a>
+        </div>
 
-    <div class="grid">
-        <div class="card" data-bonboarding-anchor="profile">
-            <h3>Profile</h3>
-            <div>
-                <label for="display-name">Display name</label>
-                <input id="display-name" type="text" value="Alex Morgan" />
+        <div class="demo-settings">
+            <div class="demo-panel" data-bonboarding-anchor="profile">
+                <p class="demo-panel-title">Profile</p>
+                <label class="bb-field">
+                    Display name
+                    <input type="text" value="Alex Morgan" />
+                </label>
             </div>
-        </div>
 
-        <div class="card" data-bonboarding-anchor="api-keys">
-            <h3>API keys</h3>
-            <p class="muted">Two active keys.</p>
-            <div class="table-wrap">
-                <table>
-                    <thead>
-                        <tr><th>Name</th><th>Created</th></tr>
-                    </thead>
-                    <tbody>
-                        <tr><td>ci-pipeline</td><td>3 months ago</td></tr>
-                        <tr><td>local-dev</td><td>11 days ago</td></tr>
-                    </tbody>
-                </table>
+            <div class="demo-panel" data-bonboarding-anchor="api-keys">
+                <p class="demo-panel-title">API keys</p>
+                <p>Two active keys.</p>
+                <div class="bb-scroll">
+                    <table class="bb-table">
+                        <thead>
+                            <tr><th>Name</th><th>Created</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>ci-pipeline</td><td>3 months ago</td></tr>
+                            <tr><td>local-dev</td><td>11 days ago</td></tr>
+                        </tbody>
+                    </table>
+                </div>
             </div>
-        </div>
 
-        <div class="card" data-bonboarding-anchor="danger">
-            <h3>Danger zone</h3>
-            <p class="muted">Deleting a workspace cannot be undone.</p>
-            <button type="button" class="btn">Delete workspace</button>
+            <div class="demo-panel" data-bonboarding-anchor="danger">
+                <p class="demo-panel-title">Danger zone</p>
+                <p>Deleting a workspace cannot be undone.</p>
+                <button type="button" class="btn btn-secondary">Delete workspace</button>
+            </div>
         </div>
     </div>
 </section>
diff --git a/src/Utilities/Bonboarding/Demo/Client/Routes.razor b/src/Utilities/Bonboarding/Demo/Client/Routes.razor
index 105855d4577..c65a78e5438 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Routes.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Routes.razor
@@ -1,6 +1,20 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
+
+@* One host renders every tour the application starts, wherever it is started from - the part of
+   this file every application needs. It sits beside the router rather than inside a layout so a
+   tour survives every navigation, including the ones a multi-page tour makes itself.
+
+   No Theme is passed: a tour that leaves its own Theme unset is drawn with data-bonboarding-theme
+   "system", which leaves the choice to the application's stylesheet - and this site's (demo.css)
+   follows its own light/dark switch there. A tour that sets Light or Dark keeps it whichever theme
+   the site is in, which is what the theming page demonstrates. *@
+<BonboardingRoot />
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/AppFooter.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/AppFooter.razor
deleted file mode 100644
index 306731d877f..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/AppFooter.razor
+++ /dev/null
@@ -1,73 +0,0 @@
-@inject IJSRuntime JS
-
-@* The bit platform footer: who makes this, where to go next, and how to reach the team. *@
-
-<footer class="footer">
-    <section>
-        <div>
-            <div class="bit-logo" role="img" aria-label="bit platform"></div>
-            <p class="blurb">
-                Bonboarding is part of bit platform &mdash; a platform that simplifies the development
-                process for freelancers and software companies through its clean project templates
-                and easy-to-use one-click build and deployment feature.
-            </p>
-        </div>
-
-        <div class="link-columns">
-            @foreach (var group in NavItem.Groups)
-            {
-                <div class="link-column">
-                    <h6>@group.Category</h6>
-                    @foreach (var item in group.Items)
-                    {
-                        <a href="@item.Url">@item.Title</a>
-                    }
-                </div>
-            }
-
-            <div class="link-column">
-                <h6>Project</h6>
-                <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bonboarding" target="_blank" rel="noopener noreferrer">Source</a>
-                <a href="https://www.nuget.org/packages/Bit.Bonboarding" target="_blank" rel="noopener noreferrer">NuGet package</a>
-                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
-                <button type="button" class="go-to-top" @onclick="GoToTop">
-                    <Icon Path="@Icons.ArrowUp" />
-                    Back to top
-                </button>
-            </div>
-        </div>
-    </section>
-
-    <section>
-        <div class="address-info">
-            <a class="address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
-            <div class="country">Netherlands</div>
-            <a class="tel" href="tel:+31684207362">+31 6 84207362</a>
-        </div>
-
-        <div>
-            <div class="social-link-group">
-                <a class="social-link twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
-                <a class="social-link github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
-                <a class="social-link youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
-                <a class="social-link linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
-            </div>
-            <div class="copy-right-txt">Copyright &copy; 2026 bit platform &middot; All rights reserved</div>
-        </div>
-    </section>
-</footer>
-
-@code {
-    private async Task GoToTop()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("boScrollToTop");
-        }
-        catch
-        {
-            // Scrolling back up is a convenience the page already offers through the scrollbar; if
-            // the script is unavailable there is nothing worth telling the reader about.
-        }
-    }
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/AppHeader.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/AppHeader.razor
deleted file mode 100644
index dc9188d84cf..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/AppHeader.razor
+++ /dev/null
@@ -1,81 +0,0 @@
-@* The site header: the mark, the library's name and the two top-level destinations at one end; the
-   repository and the theme switch at the other.
-
-   It is the one piece of chrome the landing page and the docs share, and it adapts to which of the
-   two it is sitting on: the menu button only exists on a docs page, because the landing page has no
-   nav panel to open. *@
-
-<header class="app-header">
-    <div class="app-header-inner">
-        <div class="header-start">
-            @* Only exists on a docs page, and only at the widths where the nav panel is a drawer;
-               CSS hides it above them. *@
-            @if (IsHomePage is false)
-            {
-                <button type="button" class="icon-btn menu-btn" @onclick="OnToggleNav"
-                        aria-label="Toggle navigation" aria-controls="nav-panel"
-                        aria-expanded="@(IsNavOpen ? "true" : "false")">
-                    <Icon Path="@Icons.Menu" />
-                </button>
-            }
-
-            <a class="header-brand" href="/" aria-label="Bonboarding home">
-                <span class="logo" aria-hidden="true"></span>
-                <span class="wordmark">Bonboarding</span>
-            </a>
-
-            <span class="header-version">@Version</span>
-
-            <nav class="header-links" aria-label="Sections">
-                <a class="link@(IsHomePage ? " active" : "")" href="/"
-                   aria-current="@(IsHomePage ? "page" : null)">Home</a>
-                <a class="link@(IsHomePage ? "" : " active")" href="@NavItem.All[0].Url"
-                   aria-current="@(IsHomePage ? null : "page")">Docs</a>
-            </nav>
-        </div>
-
-        <div class="header-end">
-            <a class="icon-btn" target="_blank" rel="noopener noreferrer"
-               aria-label="Bit.Bonboarding on GitHub (opens in a new tab)"
-               href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bonboarding">
-                <span class="github-mark" aria-hidden="true"></span>
-            </a>
-
-            @* Exact complements: CSS shows the sun in the dark theme and the moon in the light one,
-               so exactly one of the pair is ever visible - including on the prerendered document,
-               before anything has been told which theme is applied. *@
-            <button type="button" class="icon-btn dark-theme" @onclick="OnToggleTheme"
-                    title="Switch to the light theme" aria-label="Switch to the light theme">
-                <Icon Path="@Icons.Sun" />
-            </button>
-            <button type="button" class="icon-btn light-theme" @onclick="OnToggleTheme"
-                    title="Switch to the dark theme" aria-label="Switch to the dark theme">
-                <Icon Path="@Icons.Moon" />
-            </button>
-        </div>
-    </div>
-</header>
-
-@code {
-    /// <summary>The frameworks the library targets, shown next to the name.</summary>
-    private const string Version = "net8+";
-
-    /// <summary>
-    /// True on the landing page. The shell owns this - it is the same flag that decides whether the
-    /// page gets the docs chrome at all - so the two can never disagree about which of the site's two
-    /// faces is on screen.
-    /// </summary>
-    [Parameter] public bool IsHomePage { get; set; }
-
-    /// <summary>Whether the nav drawer is currently open, for the menu button's aria-expanded.</summary>
-    [Parameter] public bool IsNavOpen { get; set; }
-
-    /// <summary>Raised by the menu button at the widths where the nav panel is a drawer.</summary>
-    [Parameter] public EventCallback OnToggleNav { get; set; }
-
-    /// <summary>
-    /// Raised by the theme switch. The shell owns flipping the theme, because the tours have to
-    /// follow it as well as the page.
-    /// </summary>
-    [Parameter] public EventCallback OnToggleTheme { get; set; }
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/AppNavPanel.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/AppNavPanel.razor
deleted file mode 100644
index 3ffcd585ba5..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/AppNavPanel.razor
+++ /dev/null
@@ -1,46 +0,0 @@
-@* The docs navigation. A sticky column beside the content on wide screens and a drawer over it on
-   narrow ones - the switch is entirely in CSS, so the same markup and the same state serve both.
-   The groups and their order come from NavItem, so a page is filed once. *@
-
-<nav id="nav-panel" class="nav-panel @(IsOpen ? "open" : null)" aria-label="Documentation">
-    <ul class="nav-panel-list nav-panel-home">
-        <li>
-            <NavLink href="/" Match="NavLinkMatch.All">
-                <Icon Path="@Icons.Play" />
-                Overview
-            </NavLink>
-        </li>
-    </ul>
-
-    @foreach (var group in NavItem.Groups)
-    {
-        <div class="nav-group">
-            <p class="nav-group-title" id="@GroupId(group.Category)">
-                <Icon Path="@group.Icon" />
-                @group.Category
-            </p>
-
-            <ul class="nav-panel-list" aria-labelledby="@GroupId(group.Category)">
-                @foreach (var item in group.Items)
-                {
-                    <li>
-                        @* Prefix matching, so the multi-page tour's entry stays lit on its second
-                           page, workspace/settings. NavLink only matches a prefix up to a path
-                           separator, so "flows" can never light up for a "flowsomething". *@
-                        <NavLink href="@item.Href" Match="NavLinkMatch.Prefix">
-                            @item.Title
-                        </NavLink>
-                    </li>
-                }
-            </ul>
-        </div>
-    }
-</nav>
-
-@code {
-    /// <summary>Whether the drawer is open. Ignored above the breakpoint, where the panel is always in place.</summary>
-    [Parameter] public bool IsOpen { get; set; }
-
-    private static string GroupId(string category)
-        => $"nav-group-{category.ToLowerInvariant().Replace(' ', '-')}";
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/AppWindow.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/AppWindow.razor
index b778f0b2e42..3d20a929543 100644
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/AppWindow.razor
+++ b/src/Utilities/Bonboarding/Demo/Client/Shared/AppWindow.razor
@@ -4,11 +4,11 @@
 <div class="app-window">
     <div class="app-toolbar">
         <button type="button" class="btn btn-primary" data-bonboarding-anchor="new-project">New project</button>
-        <button type="button" class="btn" data-bonboarding-anchor="import">Import</button>
+        <button type="button" class="btn btn-secondary" data-bonboarding-anchor="import">Import</button>
         <input type="text" placeholder="Search projects" aria-label="Search projects" data-bonboarding-anchor="search" />
         <span class="spacer"></span>
-        <button type="button" class="btn" data-bonboarding-anchor="settings" @onclick="OnSettingsClick">Settings</button>
-        <button type="button" class="btn" data-bonboarding-anchor="account" aria-label="Account">@Initials</button>
+        <button type="button" class="btn btn-secondary" data-bonboarding-anchor="settings" @onclick="OnSettingsClick">Settings</button>
+        <button type="button" class="btn btn-secondary" data-bonboarding-anchor="account" aria-label="Account">@Initials</button>
     </div>
 
     <div class="app-body">
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/DocBreadcrumb.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/DocBreadcrumb.razor
deleted file mode 100644
index 526ae399cb2..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/DocBreadcrumb.razor
+++ /dev/null
@@ -1,34 +0,0 @@
-@* Where in the docs the current page sits. What it adds is the name of the group, which is the one
-   thing the page's own title cannot tell the reader. The group is not itself a destination, so it
-   is printed rather than linked.
-
-   On a page that belongs to an entry without being it - workspace/settings, the second half of the
-   multi-page tour - the entry is linked, because it is where the reader came from. *@
-
-@if (Current is not null)
-{
-    <nav class="doc-breadcrumb" aria-label="Breadcrumb">
-        <a href="@NavItem.All[0].Url">Docs</a>
-        <Icon Path="@Icons.ChevronRight" />
-        <span>@Current.Category</span>
-        <Icon Path="@Icons.ChevronRight" />
-        @if (IsExact)
-        {
-            <span class="current" aria-current="page">@Current.Title</span>
-        }
-        else
-        {
-            <a href="@Current.Url">@Current.Title</a>
-        }
-    </nav>
-}
-
-@code {
-    /// <summary>The entry the route belongs to, or null on a route that is not a docs page.</summary>
-    [Parameter] public NavItem? Current { get; set; }
-
-    /// <summary>The route being shown, relative to the app base and without its leading slash.</summary>
-    [Parameter] public string Href { get; set; } = "";
-
-    private bool IsExact => string.Equals(Current?.Href, Href, StringComparison.OrdinalIgnoreCase);
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/DocPager.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/DocPager.razor
deleted file mode 100644
index df631f93506..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/DocPager.razor
+++ /dev/null
@@ -1,43 +0,0 @@
-@* The pages either side of this one, at the foot of it. Both entries come from NavItem, which is
-   also what orders the nav panel, so the two can never disagree about what "next" means. *@
-
-@if (_previous is not null || _next is not null)
-{
-    <nav class="doc-pager" aria-label="Page navigation">
-        @if (_previous is not null)
-        {
-            <a class="previous" href="@_previous.Url" rel="prev">
-                <span class="pager-dir">
-                    <Icon Path="@Icons.ArrowLeft" />
-                    Previous
-                </span>
-                <span class="pager-title">@_previous.Title</span>
-            </a>
-        }
-
-        @if (_next is not null)
-        {
-            @* The class, not the source order, puts this in the second column: a page with no
-               previous entry still has to leave the first column empty rather than sliding its
-               "next" into it, or the two ends of the sequence would point the same way. *@
-            <a class="next" href="@_next.Url" rel="next">
-                <span class="pager-dir">
-                    Next
-                    <Icon Path="@Icons.ArrowRight" />
-                </span>
-                <span class="pager-title">@_next.Title</span>
-            </a>
-        }
-    </nav>
-}
-
-@code {
-    /// <summary>The route being shown, relative to the app base and without its leading slash.</summary>
-    [Parameter] public string Href { get; set; } = "";
-
-    private NavItem? _previous;
-    private NavItem? _next;
-
-    protected override void OnParametersSet()
-        => (_previous, _next) = NavItem.Neighbours(Href);
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/Icon.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/Icon.razor
deleted file mode 100644
index c3087cf72d0..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/Icon.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@* One icon from the set in Icons.cs.
-
-   Always aria-hidden: an icon in this site is either next to its own label or inside a control
-   that carries an aria-label of its own, so announcing it a second time would only repeat the
-   button. focusable="false" is for the browsers that still put an <svg> in the tab order. *@
-
-<svg class="icon @Class" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-    @((MarkupString)Path)
-</svg>
-
-@code {
-    /// <summary>The icon's geometry: one of the constants on <see cref="Icons"/>.</summary>
-    [Parameter, EditorRequired] public string Path { get; set; } = "";
-
-    /// <summary>An extra class for the caller to size or position this instance with.</summary>
-    [Parameter] public string? Class { get; set; }
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/Icons.cs b/src/Utilities/Bonboarding/Demo/Client/Shared/Icons.cs
deleted file mode 100644
index b13f914367e..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/Icons.cs
+++ /dev/null
@@ -1,75 +0,0 @@
-namespace Bit.Bonboarding.Demo.Client.Shared;
-
-/// <summary>
-/// The site's icon set: the inner markup of a 24×24 icon, without the <c>&lt;svg&gt;</c> element
-/// around it. <see cref="Icon"/> supplies that, along with the class the stylesheet paints them
-/// through.
-/// <para>
-/// They are drawn as strokes rather than filled outlines, at the weight Fluent's regular icons are
-/// drawn at, and they carry no colour of their own: <c>svg.icon</c> in app.css strokes them with
-/// <c>currentColor</c>, so an icon is the colour of whatever it sits inside and follows that thing
-/// through every theme, hover and disabled state.
-/// </para>
-/// <para>
-/// They live in C# rather than in a sprite or an icon font because the site is prerendered: markup
-/// that is part of the document costs no request and cannot arrive after the first paint.
-/// </para>
-/// </summary>
-public static class Icons
-{
-    // ── Chrome ───────────────────────────────────────────────────────────────
-
-    public const string Menu = """<path d="M3.5 6.5h17M3.5 12h17M3.5 17.5h17" />""";
-
-    public const string Sun = """<circle cx="12" cy="12" r="4.25" /><path d="M12 2.75v2M12 19.25v2M2.75 12h2M19.25 12h2M5.4 5.4l1.4 1.4M17.2 17.2l1.4 1.4M18.6 5.4l-1.4 1.4M6.8 17.2l-1.4 1.4" />""";
-
-    public const string Moon = """<path d="M20.4 14.3A8.6 8.6 0 0 1 9.7 3.6 8.6 8.6 0 1 0 20.4 14.3Z" />""";
-
-    public const string ChevronRight = """<path d="m9.5 5.5 6.5 6.5-6.5 6.5" />""";
-
-    public const string ArrowRight = """<path d="M3.75 12h16.5m-6.25-6.25L20.25 12l-6.25 6.25" />""";
-
-    public const string ArrowLeft = """<path d="M20.25 12H3.75m6.25-6.25L3.75 12l6.25 6.25" />""";
-
-    public const string ArrowUp = """<path d="M12 20.25V3.75M5.75 10 12 3.75 18.25 10" />""";
-
-    public const string Play = """<path d="M7.75 4.75 19 12 7.75 19.25Z" />""";
-
-    /// <summary>A message bar's informational mark.</summary>
-    public const string Info = """<circle cx="12" cy="12" r="8.75" /><path d="M12 11v5.25M12 7.75v.01" />""";
-
-    /// <summary>A message bar's error mark.</summary>
-    public const string Error = """<circle cx="12" cy="12" r="8.75" /><path d="M12 7.5v5.25M12 16.25v.01" />""";
-
-    // ── Capabilities ─────────────────────────────────────────────────────────
-
-    /// <summary>Placement and the spotlight: a target with a ring around it.</summary>
-    public const string Target = """<circle cx="12" cy="12" r="8.75" /><circle cx="12" cy="12" r="4.75" /><circle cx="12" cy="12" r="1" />""";
-
-    /// <summary>Dynamic targets: waiting for something to turn up.</summary>
-    public const string Clock = """<circle cx="12" cy="12" r="8.75" /><path d="M12 7.25V12l3.25 2" />""";
-
-    /// <summary>Conditional and branching flows: one path splitting in two.</summary>
-    public const string Branch = """<circle cx="6.5" cy="5.5" r="2.25" /><circle cx="6.5" cy="18.5" r="2.25" /><circle cx="17.5" cy="7.5" r="2.25" /><path d="M6.5 7.75v8.5M17.5 9.75c0 4.25-11 2.75-11 6.5" />""";
-
-    /// <summary>Multi-page tours: one document stacked on another.</summary>
-    public const string Pages = """<path d="M9.25 3.25h6.5l3.5 3.5v10a1.5 1.5 0 0 1-1.5 1.5h-8.5a1.5 1.5 0 0 1-1.5-1.5v-12a1.5 1.5 0 0 1 1.5-1.5Z" /><path d="M5.25 7.25v12a1.5 1.5 0 0 0 1.5 1.5h8.5" />""";
-
-    /// <summary>Theming: a palette.</summary>
-    public const string Palette = """<path d="M12 3.25a8.75 8.75 0 1 0 0 17.5c1.1 0 1.75-.75 1.75-1.6 0-.95-.75-1.4-.75-2.4 0-1.1.9-1.75 2-1.75h2.25a3.5 3.5 0 0 0 3.5-3.5c0-4.6-3.9-8.25-8.75-8.25Z" /><circle cx="7.75" cy="11.25" r="1" /><circle cx="10.75" cy="7.5" r="1" /><circle cx="15.25" cy="7.75" r="1" />""";
-
-    /// <summary>Headless UI: your own markup inside the library's frame.</summary>
-    public const string Code = """<path d="m8.5 7.25-4.75 4.75 4.75 4.75M15.5 7.25l4.75 4.75-4.75 4.75" />""";
-
-    /// <summary>Events: a trace of activity over time.</summary>
-    public const string Pulse = """<path d="M2.75 12.5h3.5l2.25-6 3.75 12 2.75-9 1.75 3h4.5" />""";
-
-    /// <summary>Accessibility.</summary>
-    public const string Accessibility = """<circle cx="12" cy="4.75" r="1.75" /><path d="M4.75 8.75h14.5M12 8.75v5.5m0 0-3 6.25m3-6.25 3 6.25" />""";
-
-    /// <summary>The guides, as a group: finding your way around.</summary>
-    public const string Compass = """<circle cx="12" cy="12" r="8.75" /><path d="m15.25 8.75-1.9 4.6-4.6 1.9 1.9-4.6Z" />""";
-
-    /// <summary>Anything generated, and the MCP server.</summary>
-    public const string Sparkle = """<path d="m11 3.5 1.9 5.6 5.6 1.9-5.6 1.9-1.9 5.6-1.9-5.6-5.6-1.9 5.6-1.9Z" /><path d="M18 15.5v4M20 17.5h-4" />""";
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/NavItem.cs b/src/Utilities/Bonboarding/Demo/Client/Shared/NavItem.cs
deleted file mode 100644
index ddbcba32cfb..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/NavItem.cs
+++ /dev/null
@@ -1,101 +0,0 @@
-namespace Bit.Bonboarding.Demo.Client.Shared;
-
-/// <summary>
-/// One entry of the docs navigation. The list itself is <see cref="All"/>, and it is the site's
-/// single index: the nav panel groups it, the landing page prints it, the breadcrumb reads a page's
-/// group out of it and the pager walks it in order. A page therefore appears everywhere by having an
-/// entry here, and none of those can disagree about what the site contains.
-/// </summary>
-/// <param name="Title">The label shown in the nav panel.</param>
-/// <param name="Href">The route, relative to the app base.</param>
-/// <param name="Category">The group this page is filed under; see <see cref="Groups"/>.</param>
-/// <param name="Description">What the page demonstrates, in one sentence.</param>
-/// <param name="Icon">The mark the landing page shows beside the page; one of <see cref="Icons"/>.</param>
-public sealed record NavItem(
-    string Title,
-    string Href,
-    string Category,
-    string Description,
-    string Icon)
-{
-    /// <summary>The route as a link target.</summary>
-    public string Url => $"/{Href}";
-
-    // The group names, written out once so a typo in an entry below cannot silently invent a new
-    // group, and in the order the docs are meant to be read.
-    private const string Guides = "Guides";
-    private const string Customise = "Customise";
-    private const string Ai = "AI";
-
-    /// <summary>Every docs page, in the order they are meant to be read.</summary>
-    public static readonly NavItem[] All =
-    [
-        new("Placement & spotlight", "placement", Guides,
-            "Collision-aware positioning computed in C#: shift before flip, spotlight shapes and padding, and what the overlay does with a click.",
-            Icons.Target),
-        new("Dynamic targets", "dynamic", Guides,
-            "Elements that render late, re-render or never appear, steps that wait for the user to act, and targets picked at run time.",
-            Icons.Clock),
-        new("Conditional & branching", "flows", Guides,
-            "Steps gated on a condition, tours that fork on an answer, and validation before the tour moves on.",
-            Icons.Branch),
-        new("Multi-page tour", "workspace", Guides,
-            "A tour that spans routes: it navigates for you, waits for the page to render, and holds its place if you wander off.",
-            Icons.Pages),
-        new("Theming & RTL", "theming", Customise,
-            "The --bit-bonboarding-* custom properties, light and dark, progress styles, localised labels and right-to-left tours.",
-            Icons.Palette),
-        new("Headless UI", "headless", Customise,
-            "Replace the card entirely and keep collision-aware placement, focus management and dialog semantics.",
-            Icons.Code),
-        new("Events & persistence", "events", Customise,
-            "The event stream to forward to analytics, and the store that remembers how far each user got.",
-            Icons.Pulse),
-        new("MCP server", "mcp-server", Ai,
-            "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing at it.",
-            Icons.Sparkle),
-    ];
-
-    /// <summary>
-    /// <see cref="All"/> in groups, in reading order. Both the order of the groups and the order
-    /// within them come from the order of <see cref="All"/>, so re-filing a page is a one-line edit
-    /// above and nothing here has to be kept in step with it.
-    /// </summary>
-    public static readonly (string Category, string Icon, NavItem[] Items)[] Groups =
-    [
-        .. All.GroupBy(item => item.Category)
-              .Select(group => (group.Key, CategoryIcon(group.Key), group.ToArray()))
-    ];
-
-    /// <summary>
-    /// The entry a route belongs to, or null when it is not a docs page. A route under an entry
-    /// counts as that entry - workspace/settings is the second half of the multi-page tour, not a
-    /// page of its own.
-    /// </summary>
-    public static NavItem? ByHref(string href)
-        => Array.Find(All, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase))
-        ?? Array.Find(All, item => href.StartsWith($"{item.Href}/", StringComparison.OrdinalIgnoreCase));
-
-    /// <summary>
-    /// The pages either side of <paramref name="href"/> in reading order, for the pager at the foot
-    /// of every page. Both are null for a route that is not itself an entry.
-    /// </summary>
-    public static (NavItem? Previous, NavItem? Next) Neighbours(string href)
-    {
-        var index = Array.FindIndex(All, item => string.Equals(item.Href, href, StringComparison.OrdinalIgnoreCase));
-        if (index < 0) return (null, null);
-
-        return (index > 0 ? All[index - 1] : null,
-                index < All.Length - 1 ? All[index + 1] : null);
-    }
-
-    // The one place a group is tied to a picture, so two pages in the same group cannot be given
-    // two different ones.
-    private static string CategoryIcon(string category) => category switch
-    {
-        Guides => Icons.Compass,
-        Customise => Icons.Palette,
-        Ai => Icons.Sparkle,
-        _ => Icons.Compass,
-    };
-}
diff --git a/src/Utilities/Bonboarding/Demo/Client/Shared/SiteShell.razor b/src/Utilities/Bonboarding/Demo/Client/Shared/SiteShell.razor
deleted file mode 100644
index cf0a85ccc96..00000000000
--- a/src/Utilities/Bonboarding/Demo/Client/Shared/SiteShell.razor
+++ /dev/null
@@ -1,135 +0,0 @@
-@implements IDisposable
-@inject NavigationManager Nav
-@inject IJSRuntime JS
-
-@* The site's chrome, in Fluent 2: the skip link, the sticky header, the nav panel, the reading column
-   with its breadcrumb and pager, and the footer. It is the demo's own layout and nothing a tour
-   depends on - MainLayout wraps the page in it and hosts BonboardingRoot beside it.
-
-   The home page is deliberately outside the docs part of that. It is a landing page rather than a
-   document: no nav panel and no reading column - it lays out its own full-bleed sections. Only the
-   header and the footer are shared.
-
-   The styles live in wwwroot/css/app.css and are written against the Fluent 2 tokens in
-   wwwroot/css/theme.css; nothing here is built from a component library, because the demo carries
-   no dependency other than Bit.Bonboarding itself. *@
-
-<a class="skip-link" href="#main-content">Skip to main content</a>
-
-<div class="app-shell">
-    <AppHeader IsHomePage="_isHomePage" IsNavOpen="_isNavOpen"
-               OnToggleNav="ToggleNav" OnToggleTheme="ToggleThemeAsync" />
-
-    <div class="layout-row">
-        @if (_isHomePage)
-        {
-            <div class="site-content home">
-                <main id="main-content">
-                    @ChildContent
-                </main>
-
-                <AppFooter />
-            </div>
-        }
-        else
-        {
-            @* Only rendered at the widths where the panel is a drawer - CSS hides it above them -
-               and only while it is open, so it never covers a page that has nothing to close. *@
-            @if (_isNavOpen)
-            {
-                <button type="button" class="nav-panel-overlay" aria-label="Close navigation" @onclick="CloseNav"></button>
-            }
-
-            <AppNavPanel IsOpen="_isNavOpen" />
-
-            <div class="site-content">
-                <main id="main-content" class="page-container">
-                    <DocBreadcrumb Current="_current" Href="@_href" />
-
-                    @ChildContent
-
-                    <DocPager Href="@_href" />
-                </main>
-
-                <AppFooter />
-            </div>
-        }
-    </div>
-</div>
-
-@code {
-    /// <summary>The page.</summary>
-    [Parameter] public RenderFragment? ChildContent { get; set; }
-
-    /// <summary>
-    /// Whether the dark theme is applied. The theme itself is owned by js/demo.js, which applies it
-    /// before the first paint; this is the shell reporting it, so the layout can hand it on to the
-    /// tours.
-    /// </summary>
-    [Parameter] public bool IsDark { get; set; }
-
-    [Parameter] public EventCallback<bool> IsDarkChanged { get; set; }
-
-    private bool _isNavOpen;
-    private bool _isHomePage;
-    private string _href = "";
-    private NavItem? _current;
-
-    protected override void OnInitialized()
-    {
-        UpdateRoute();
-        Nav.LocationChanged += OnLocationChanged;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        // Prerendering never gets here, so this is the first moment there is a browser to ask.
-        if (firstRender is false) return;
-
-        await ReportThemeAsync("boGetTheme");
-    }
-
-    private Task ToggleThemeAsync() => ReportThemeAsync("boToggleTheme");
-
-    private async Task ReportThemeAsync(string identifier)
-    {
-        string theme;
-        try
-        {
-            theme = await JS.InvokeAsync<string>(identifier);
-        }
-        catch (Exception exception) when (exception is JSException or JSDisconnectedException or TaskCanceledException)
-        {
-            // The theme is a preference, not a feature: if the script is missing or the circuit is
-            // going away there is nothing to tell the reader, and the page keeps the theme it has.
-            return;
-        }
-
-        var isDark = theme == "dark";
-        if (isDark == IsDark) return;
-
-        await IsDarkChanged.InvokeAsync(isDark);
-    }
-
-    private void ToggleNav() => _isNavOpen = _isNavOpen is false;
-
-    private void CloseNav() => _isNavOpen = false;
-
-    // Following a link inside the drawer closes it: on the widths where the drawer exists it covers
-    // the page the reader just asked for.
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        _isNavOpen = false;
-        UpdateRoute();
-        InvokeAsync(StateHasChanged);
-    }
-
-    private void UpdateRoute()
-    {
-        _href = Nav.ToBaseRelativePath(Nav.Uri).Split('?', '#')[0].Trim('/');
-        _isHomePage = _href.Length == 0;
-        _current = NavItem.ByHref(_href);
-    }
-
-    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
-}
diff --git a/src/Utilities/Bonboarding/Demo/Server/Bit.Bonboarding.Demo.Server.csproj b/src/Utilities/Bonboarding/Demo/Server/Bit.Bonboarding.Demo.Server.csproj
index 76f6e443586..c1bff9631b8 100644
--- a/src/Utilities/Bonboarding/Demo/Server/Bit.Bonboarding.Demo.Server.csproj
+++ b/src/Utilities/Bonboarding/Demo/Server/Bit.Bonboarding.Demo.Server.csproj
@@ -42,10 +42,13 @@
     <EmbeddedResource Include="..\..\Bit.Bonboarding\Styles\bit-bonboarding.css" LogicalName="BonboardingDocs/bit-bonboarding.css" />
 
     <!-- Every demo page - each one is a working tour - plus the fake product UI they point at and the
-         client half of the hosting. The MCP page describes this server rather than the library, and
-         the reconnect modal is the template's own, so neither teaches anything about tours. -->
+         client half of the hosting, Routes.razor with the one BonboardingRoot among it. The MCP page
+         describes this server rather than the library, and the not-found page teaches nothing about
+         tours. Nor does the site chrome: Layout\ (the header, docs shell, search, footer and the
+         template's reconnect modal) and the DocsCatalog.cs that drives it are what every Utilities
+         demo shares. -->
     <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Pages\McpServer.razor;..\Client\Layout\ReconnectModal.razor">
+                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
       <LogicalName>BonboardingSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
     </EmbeddedResource>
 
diff --git a/src/Utilities/Bonboarding/Demo/Server/Components/App.razor b/src/Utilities/Bonboarding/Demo/Server/Components/App.razor
index a3d04aa88d7..7889d67c038 100644
--- a/src/Utilities/Bonboarding/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bonboarding/Demo/Server/Components/App.razor
@@ -4,55 +4,54 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Bit.Bonboarding - a Blazor-native onboarding and product tour library: spotlights, branching and multi-page tours, with every decision made in C#." />
-    <meta name="color-scheme" content="light dark" />
-    @* Painted behind the browser's own chrome on the platforms that colour it. js/demo.js keeps it
-       in step with the theme the page is actually in. *@
     <meta name="theme-color" content="#FFFFFF" />
+    <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Bonboarding (Bit.Bonboarding) - a Blazor-native onboarding and product tour library: spotlights, contextual hints, branching and multi-page tours, with every decision made in C#." />
 
-    @* What a link to the site looks like when it is shared. *@
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Bit.Bonboarding" />
     <meta property="og:title" content="Bonboarding - onboarding and product tours for Blazor" />
     <meta property="og:description" content="Spotlights, branching and multi-page product tours for Blazor. Every decision made in C#; the browser only measures, observes and routes keys." />
     <meta name="twitter:card" content="summary" />
 
-    <base href="/" />
     <ResourcePreloader />
-    <link rel="icon" href="favicon.ico" type="image/x-icon" />
-    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
-    @* The library's stylesheet first: the site's own one restyles the tour card through the library's
-       custom properties, which only works if it comes later in the cascade. *@
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then the library's
+       stylesheet, then this demo's own sample styles. demo.css comes after the library on purpose:
+       it restyles the tour card through the library's --bit-bonboarding-* custom properties, which
+       only wins over the library's defaults later in the cascade - the order the theming page tells
+       an application to use. *@
+    <link rel="stylesheet" href="@Assets["app.css"]" />
     <link rel="stylesheet" href="@Assets["_content/Bit.Bonboarding/bit-bonboarding.css"]" />
-    <link rel="stylesheet" href="@Assets["css/theme.css"]" />
-    <link rel="stylesheet" href="@Assets["css/app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
     <link rel="stylesheet" href="@Assets["Bit.Bonboarding.Demo.Server.styles.css"]" />
-
-    @* The theme is applied here, in the head, rather than from js/demo.js at the end of the body:
-       the stylesheets key off the data-theme attribute, and setting it after the first paint would
-       show the reader a flash of the other theme. The same decision js/demo.js makes for the app's
-       lifetime - see window.boTheme there - kept short enough to inline. *@
-    <script>
-        (function () {
-            var stored = null;
-            try { stored = localStorage.getItem('bo-theme'); } catch (e) { /* no stored preference */ }
-            var theme = (stored === 'light' || stored === 'dark')
-                ? stored
-                : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-            document.documentElement.setAttribute('data-theme', theme);
-        })();
-    </script>
-
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
     <HeadOutlet @rendermode="InteractiveAuto" />
 </head>
 
 <body>
+    @* InteractiveAuto: the first visit runs on the server while the WebAssembly runtime downloads,
+       later ones in the browser - which is why both projects register the Bonboarding services. The
+       pages are prerendered either way, so the first response carries the docs. *@
     <Routes @rendermode="InteractiveAuto" />
+    @* The server half of Auto runs over a circuit, and this is what the reader sees while it
+       reconnects. *@
     <ReconnectModal />
-    @* Loaded before the Blazor script so the window.bo* helpers exist by the time the app is interactive. *@
-    <script src="@Assets["js/demo.js"]"></script>
+    <div id="blazor-error-ui" data-nosnippet>
+        An unhandled error has occurred.
+        <a href="." class="reload">Reload</a>
+        <span class="dismiss">&#128473;</span>
+    </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bonboarding/Demo/Server/Components/Pages/Error.razor b/src/Utilities/Bonboarding/Demo/Server/Components/Pages/Error.razor
index 3ed6c986fa0..ec57e24c311 100644
--- a/src/Utilities/Bonboarding/Demo/Server/Components/Pages/Error.razor
+++ b/src/Utilities/Bonboarding/Demo/Server/Components/Pages/Error.razor
@@ -1,28 +1,27 @@
 @page "/Error"
+@layout MainLayout
 @using System.Diagnostics
 
-<PageTitle>Error - Bit.Bonboarding</PageTitle>
+<PageTitle>Error · Bonboarding</PageTitle>
 
-<div class="error-page">
-    <span class="error-code" aria-hidden="true">500</span>
-
-    <h1>An error occurred while processing your request</h1>
+<div class="bb-error">
+    <h1>500</h1>
+    <p>An error occurred while processing your request.</p>
 
     @if (ShowRequestId)
     {
-        <p>Request ID: <code>@RequestId</code></p>
+        <p class="bb-error-hint">Request ID: <code>@RequestId</code></p>
     }
 
-    <p>
-        Swapping to the <strong>Development</strong> environment will display more detailed information
-        about the error that occurred. It should never be enabled for a deployed application: it can show
-        sensitive information from exceptions to end users. For local debugging, set the
-        <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong> and
-        restart the app.
+    <p class="bb-error-hint">
+        Swapping to the <strong>Development</strong> environment will display more detailed information about the
+        error that occurred. It should never be enabled for a deployed application: it can show sensitive information
+        from exceptions to end users. For local debugging, set the <strong>ASPNETCORE_ENVIRONMENT</strong> environment
+        variable to <strong>Development</strong> and restart the app.
     </p>
 
-    <div class="hero-actions">
-        <a class="btn btn-primary btn-lg" href="/">Back to home</a>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
     </div>
 </div>
 
diff --git a/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSetupGuide.cs b/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSetupGuide.cs
index e013f0a34a7..fafc9042e40 100644
--- a/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSetupGuide.cs
+++ b/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSetupGuide.cs
@@ -26,7 +26,7 @@ public static partial class BonboardingSetupGuide
         "Demo/Server/Program.cs",
         "Demo/Client/Program.cs",
         "Demo/Server/Components/App.razor",
-        "Demo/Client/Layout/MainLayout.razor",
+        "Demo/Client/Routes.razor",
         "Demo/Client/_Imports.razor",
     ];
 
@@ -81,8 +81,9 @@ private static string FromDemo(string title, string summary)
         builder.AppendLine(summary).AppendLine();
         builder.AppendLine(Checklist).AppendLine();
         builder.AppendLine("## The files, from this demo").AppendLine();
-        builder.AppendLine("Everything below compiles as-is once the projects and namespaces are renamed to your own - except `<SiteShell>` in `MainLayout.razor`, ")
-               .AppendLine("which is the demo's own header, navigation and footer: put your layout's markup in its place.").AppendLine();
+        builder.AppendLine("Everything below compiles as-is once the projects and namespaces are renamed to your own - except what `Routes.razor` ")
+               .AppendLine("points at: `Layout.DocsLayout` and `Pages.NotFound` are the demo's own site chrome, so name your layout and not-found page instead. ")
+               .AppendLine("The part every application needs is the one `<BonboardingRoot />` beside the router.").AppendLine();
 
         foreach (var path in _hostingFiles)
         {
diff --git a/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSourceCatalog.cs b/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSourceCatalog.cs
index 110290e29fc..6df0993f3ab 100644
--- a/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSourceCatalog.cs
+++ b/src/Utilities/Bonboarding/Demo/Server/Services/BonboardingSourceCatalog.cs
@@ -249,7 +249,6 @@ private static string KindOf(string path)
         if (path.StartsWith("Demo/Client/Pages/", StringComparison.OrdinalIgnoreCase)) return "Page";
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
-            path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -279,7 +278,7 @@ private static int CountLines(string content)
 
     /// <summary>
     /// A one-line description of a source file, taken from whatever the file itself already says:
-    /// its leading razor/C# comment, or - for a page - its &lt;PageTitle&gt;.
+    /// its leading razor/C# comment, or - for a page - the subtitle of its title block, or its &lt;PageTitle&gt;.
     /// </summary>
     private static string? DescribeSource(string content)
     {
@@ -300,6 +299,10 @@ private static int CountLines(string content)
             return Summarize(XmlTagRegex().Replace(text, string.Empty));
         }
 
+        // A demo page opens with its title block, whose subtitle says what the page shows.
+        var intro = IntroSubtitleRegex().Match(content);
+        if (intro.Success) return Summarize(XmlTagRegex().Replace(intro.Groups["text"].Value, string.Empty));
+
         var title = PageTitleRegex().Match(content);
         if (title.Success) return Summarize(title.Groups["text"].Value);
 
@@ -374,6 +377,9 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"///\s*<summary>(?<text>.*?)</summary>", RegexOptions.Singleline)]
     private static partial Regex XmlSummaryRegex();
 
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
+    private static partial Regex IntroSubtitleRegex();
+
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
     private static partial Regex PageTitleRegex();
 
diff --git a/src/Utilities/Bonboarding/Demo/Server/wwwroot/app.css b/src/Utilities/Bonboarding/Demo/Server/wwwroot/app.css
new file mode 100644
index 00000000000..7b51a42ea90
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Server/wwwroot/app.css
@@ -0,0 +1,2820 @@
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Server/wwwroot/css/app.css b/src/Utilities/Bonboarding/Demo/Server/wwwroot/css/app.css
deleted file mode 100644
index bcde8cf811e..00000000000
--- a/src/Utilities/Bonboarding/Demo/Server/wwwroot/css/app.css
+++ /dev/null
@@ -1,2021 +0,0 @@
-/* Bit.Bonboarding Demo - base, site chrome and page styles.
-
-   The docs shell (the skip link, the header, the navigation panel, the reading column with its
-   breadcrumb and pager, the footer and the landing page), the pieces a demo page is built from
-   (section cards, Fluent's buttons, fields, tables, badges and message bars), the fake product UI the
-   tours point at, and - at the very end - the tour card itself, restyled to Fluent 2 through nothing
-   but the library's own custom properties.
-
-   Everything here is written by hand against the Fluent 2 tokens in theme.css rather than built
-   from a component library, because the demo carries no dependency other than Bit.Bonboarding
-   itself: the library has to look right next to an application that uses no CSS framework, and
-   the demo proves it.
-
-   One rule holds the file together: no raw values. A colour, a radius, a duration or a step of
-   spacing comes from a token, so the whole site re-themes from one file and nothing can drift. */
-
-/* ── Base ──────────────────────────────────────────────────────────────────── */
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-* {
-    -webkit-text-size-adjust: none;
-    -webkit-font-smoothing: antialiased;
-    -webkit-tap-highlight-color: transparent;
-}
-
-html {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    scroll-behavior: smooth;
-    /* Anything the browser scrolls to - a fragment link, a control receiving focus - has to land
-       below the sticky header rather than under it. WCAG 2.2 "Focus Not Obscured (Minimum)". */
-    scroll-padding-top: calc(var(--bo-layout-header) + var(--bo-layout-header-gap));
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-}
-
-body {
-    width: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: var(--bo-fnt-family-base);
-    font-size: var(--bo-fnt-size-400);
-    line-height: var(--bo-fnt-line-prose);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-3);
-}
-
-code, kbd, pre, samp {
-    font-family: var(--bo-fnt-family-mono);
-}
-
-h1, h2, h3, h4, h5, h6, p, pre, ul {
-    margin: 0;
-}
-
-/* The site's element rules stop at the tour card. The card is the library's surface, styled through
-   its own variables (see the foot of this file) and in a theme of its own choosing, so a heading
-   colour or a link colour from the page around it would be the wrong one as often as the right one.
-   :where keeps every one of these at zero specificity, so any class rule still beats them. */
-:where(h1, h2, h3, h4):where(:not(.bit-bonboarding-root *)) {
-    font-family: var(--bo-fnt-family-display);
-    font-weight: var(--bo-fnt-weight-semibold);
-    /* Fluent 2 sets its display sizes tight and slightly negative-tracked; the ramp only reads as
-       a ramp if the headings keep that treatment while the prose below them does not. */
-    letter-spacing: -0.01em;
-    text-wrap: balance;
-    color: var(--bo-clr-fg-1);
-}
-
-:where(a):where(:not(.bit-bonboarding-root *)) {
-    color: var(--bo-clr-brand-fg);
-    text-underline-offset: 0.125em;
-}
-
-:where(a):where(:not(.bit-bonboarding-root *)):hover {
-    color: var(--bo-clr-brand-fg-hover);
-}
-
-:where(a):where(:not(.bit-bonboarding-root *)):active {
-    color: var(--bo-clr-brand-fg-pressed);
-}
-
-:where(strong):where(:not(.bit-bonboarding-root *)) {
-    font-weight: var(--bo-fnt-weight-semibold);
-    color: var(--bo-clr-fg-1);
-}
-
-img, svg {
-    max-width: 100%;
-}
-
-/* Icons. One set, stroked at Fluent's regular weight and drawn in the colour of whatever it sits
-   inside, so an icon never has to be re-coloured for a theme, a hover state or a surface. The
-   geometry is authored in Shared/Icons.cs and rendered by Shared/Icon.razor; every rule that sizes
-   an icon below sets only its width and height and leaves the paint here. */
-svg.icon {
-    flex: none;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-html, body, .nav-panel, pre, .log, .table-wrap, .playground {
-    scrollbar-width: thin;
-    scrollbar-color: var(--bo-clr-stroke-1) transparent;
-}
-
-h1:focus, h2:focus {
-    outline: none;
-}
-
-/* Fluent 2's focus indicator: a solid two-pixel stroke in the theme's highest-contrast neutral,
-   held one step off the control so it never sits on top of the control's own border. Scoped to the
-   site's own chrome and pages, so it never lands on the tour card, which draws its own. */
-.skip-link:focus-visible,
-.app-shell :is(a, button):focus-visible {
-    outline: var(--bo-strk-thick) solid var(--bo-clr-stroke-focus);
-    outline-offset: var(--bo-strk-thick);
-}
-
-/* ── Skip link ─────────────────────────────────────────────────────────────── */
-
-/* The nav panel puts a dozen links between the top of the document and the first word of the page.
-   This is the way past them for anyone driving the site from the keyboard. */
-.skip-link {
-    position: fixed;
-    z-index: 2000;
-    top: var(--bo-sp-s);
-    inset-inline-start: var(--bo-sp-s);
-    padding: var(--bo-sp-s) var(--bo-sp-l);
-    font-size: var(--bo-fnt-size-300);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-300);
-    text-decoration: none;
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-1);
-    border-radius: var(--bo-crn-medium);
-    box-shadow: var(--bo-shdw-16);
-    transform: translateY(-200%);
-}
-
-.skip-link:focus-visible {
-    transform: translateY(0);
-}
-
-/* ── Shell ─────────────────────────────────────────────────────────────────── */
-
-.app-shell {
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
-    flex-flow: column nowrap;
-}
-
-.layout-row {
-    flex: 1 1 auto;
-    width: 100%;
-    display: flex;
-    align-items: stretch;
-    min-height: 0;
-}
-
-.site-content {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    background-color: var(--bo-clr-bg-3);
-}
-
-.site-content > main {
-    flex: 1 0 auto;
-}
-
-/* min-width:0 is what lets a wide table or a long code line scroll inside the column instead of
-   stretching it. */
-.page-container {
-    width: 100%;
-    min-width: 0;
-    max-width: calc(var(--bo-layout-content) + 2 * var(--bo-sp-xxxl));
-    margin: 0 auto;
-    padding: var(--bo-sp-4xl) var(--bo-sp-xxxl) var(--bo-sp-6xl);
-}
-
-@media (max-width: 63.9375rem) {
-    .page-container {
-        padding: var(--bo-sp-xxxl) var(--bo-sp-xxl) var(--bo-sp-5xl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .page-container {
-        padding: var(--bo-sp-xxl) var(--bo-sp-l) var(--bo-sp-4xl);
-    }
-}
-
-/* ── Header ────────────────────────────────────────────────────────────────── */
-
-/* Fluent's acrylic, near enough: the header is a translucent pane over whatever is scrolling
-   underneath it, and it grows a shadow the moment there is something underneath it to lift away
-   from (js/demo.js sets data-scrolled). */
-.app-header {
-    top: 0;
-    z-index: 1000;
-    width: 100%;
-    position: sticky;
-    backdrop-filter: blur(1.25rem) saturate(1.6);
-    -webkit-backdrop-filter: blur(1.25rem) saturate(1.6);
-    background-color: color-mix(in srgb, var(--bo-clr-bg-1) 85%, transparent);
-    border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    transition: box-shadow var(--bo-dur-normal) var(--bo-crv-easy-ease);
-}
-
-.app-header[data-scrolled="true"] {
-    box-shadow: var(--bo-shdw-4);
-}
-
-/* A browser without backdrop-filter would show the page scrolling through the bar. Paint it. */
-@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    .app-header {
-        background-color: var(--bo-clr-bg-1);
-    }
-}
-
-.app-header-inner {
-    gap: var(--bo-sp-s);
-    display: flex;
-    flex-wrap: nowrap;
-    margin-inline: auto;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--bo-layout-header);
-    max-width: var(--bo-layout-max);
-    padding-inline: var(--bo-sp-xl);
-}
-
-.header-start,
-.header-end {
-    gap: var(--bo-sp-xs);
-    display: flex;
-    flex: 0 1 auto;
-    min-width: 0;
-    align-items: center;
-}
-
-.header-end {
-    flex-shrink: 0;
-}
-
-/* The mark and the library's name, as one link. The mark alone is shared with every bit site; the
-   name says which one this is. */
-.header-brand {
-    gap: var(--bo-sp-mnudge);
-    display: flex;
-    flex: none;
-    align-items: center;
-    text-decoration: none;
-    padding: var(--bo-sp-xs) var(--bo-sp-s);
-    margin-inline-end: var(--bo-sp-m);
-    border-radius: var(--bo-crn-medium);
-}
-
-.header-brand .logo {
-    flex: none;
-    width: 1.75rem;
-    height: 1.75rem;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.header-brand .wordmark {
-    flex: none;
-    font-family: var(--bo-fnt-family-display);
-    font-size: var(--bo-fnt-size-500);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-500);
-    letter-spacing: -0.02em;
-    color: var(--bo-clr-fg-1);
-}
-
-.header-brand:hover .wordmark {
-    color: var(--bo-clr-brand-fg);
-}
-
-.header-version {
-    flex: none;
-    font-size: var(--bo-fnt-size-200);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-200);
-    padding: var(--bo-sp-xxs) var(--bo-sp-snudge);
-    color: var(--bo-clr-brand-fg);
-    background-color: var(--bo-clr-brand-wash);
-    border-radius: var(--bo-crn-circular);
-}
-
-@media (max-width: 35.9375rem) {
-    .header-version {
-        display: none;
-    }
-}
-
-.header-links {
-    gap: var(--bo-sp-xxs);
-    display: flex;
-    align-items: center;
-    margin-inline-start: var(--bo-sp-s);
-}
-
-/* Fluent's tab treatment: the label carries the state, and a rounded indicator under the selected
-   one says where you are without a second colour or a box. */
-.header-links .link {
-    position: relative;
-    display: flex;
-    white-space: nowrap;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bo-fnt-size-300);
-    font-weight: var(--bo-fnt-weight-medium);
-    line-height: var(--bo-fnt-line-300);
-    padding: var(--bo-sp-s) var(--bo-sp-m);
-    color: var(--bo-clr-fg-2);
-    border-radius: var(--bo-crn-medium);
-    transition: color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                background-color var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-.header-links .link:hover {
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.header-links .link:active {
-    background-color: var(--bo-clr-bg-1-pressed);
-}
-
-.header-links .link.active {
-    color: var(--bo-clr-fg-1);
-    font-weight: var(--bo-fnt-weight-semibold);
-}
-
-.header-links .link.active::after {
-    content: '';
-    left: var(--bo-sp-m);
-    right: var(--bo-sp-m);
-    bottom: calc(var(--bo-sp-s) * -1);
-    height: var(--bo-strk-thicker);
-    position: absolute;
-    background-color: var(--bo-clr-brand-stroke);
-    border-radius: var(--bo-crn-circular);
-}
-
-@media (max-width: 47.9375rem) {
-    .header-links {
-        display: none;
-    }
-}
-
-/* Fluent's subtle icon button: no border and no fill until it is pointed at. */
-.icon-btn {
-    padding: 0;
-    flex: none;
-    width: 2rem;
-    height: 2rem;
-    cursor: pointer;
-    display: flex;
-    border: none;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    color: var(--bo-clr-fg-2);
-    border-radius: var(--bo-crn-medium);
-    transition: background-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                color var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-.icon-btn:hover {
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.icon-btn:active {
-    background-color: var(--bo-clr-bg-1-pressed);
-}
-
-.icon-btn svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.github-mark {
-    flex: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    background-color: currentColor;
-    -webkit-mask: url('../images/github-mark.svg') center / contain no-repeat;
-    mask: url('../images/github-mark.svg') center / contain no-repeat;
-}
-
-/* The two theme buttons are exact complements, so exactly one of the pair is visible in every
-   possible state - including a document with no data-theme attribute at all. */
-:root[data-theme='dark'] .light-theme {
-    display: none;
-}
-
-:root:not([data-theme='dark']) .dark-theme {
-    display: none;
-}
-
-:root[data-theme='dark'] .logo,
-:root[data-theme='dark'] .footer .bit-logo {
-    background-image: url('../images/bit-logo-dark.svg');
-}
-
-:root:not([data-theme='dark']) .logo,
-:root:not([data-theme='dark']) .footer .bit-logo {
-    background-image: url('../images/bit-logo-light.svg');
-}
-
-/* The nav drawer's handle. It only exists at the widths where the panel is a drawer. */
-.menu-btn {
-    display: none;
-    margin-inline-end: var(--bo-sp-xs);
-}
-
-@media (max-width: 63.9375rem) {
-    .menu-btn {
-        display: flex;
-    }
-}
-
-@media (max-width: 29.9375rem) {
-    .app-header-inner {
-        padding-inline: var(--bo-sp-s);
-    }
-}
-
-/* ── Nav panel ─────────────────────────────────────────────────────────────── */
-
-.nav-panel {
-    top: var(--bo-layout-header);
-    z-index: 900;
-    flex: 0 0 var(--bo-layout-nav);
-    align-self: flex-start;
-    position: sticky;
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-    padding: var(--bo-sp-l) var(--bo-sp-m) var(--bo-sp-xxxl);
-    background-color: var(--bo-clr-bg-1);
-    height: calc(100vh - var(--bo-layout-header));
-    border-inline-end: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.nav-group {
-    margin-top: var(--bo-sp-l);
-}
-
-.nav-group-title {
-    gap: var(--bo-sp-s);
-    display: flex;
-    align-items: center;
-    font-size: var(--bo-fnt-size-200);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--bo-clr-fg-3);
-    padding: var(--bo-sp-s) var(--bo-sp-m) var(--bo-sp-xs);
-}
-
-.nav-group-title svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.nav-panel-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.nav-panel-list a {
-    gap: var(--bo-sp-s);
-    display: flex;
-    position: relative;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-300);
-    padding: var(--bo-sp-snudge) var(--bo-sp-m);
-    margin-bottom: var(--bo-strk-thick);
-    color: var(--bo-clr-fg-2);
-    border-radius: var(--bo-crn-medium);
-    transition: background-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                color var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-.nav-panel-list a svg {
-    width: 1rem;
-    height: 1rem;
-}
-
-.nav-panel-list a:hover {
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.nav-panel-list a:active {
-    background-color: var(--bo-clr-bg-1-pressed);
-}
-
-/* Fluent's selected nav item: a tinted row with a short rounded indicator at the inline start,
-   inset from the row's own edges so it reads as a marker rather than as a border. */
-.nav-panel-list a.active {
-    font-weight: var(--bo-fnt-weight-semibold);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.nav-panel-list a.active::before {
-    content: '';
-    top: 20%;
-    bottom: 20%;
-    position: absolute;
-    width: var(--bo-strk-thicker);
-    inset-inline-start: 0;
-    border-radius: var(--bo-crn-circular);
-    background-color: var(--bo-clr-brand-stroke);
-}
-
-/* Below the panel's breakpoint it becomes a drawer over the page, opened from the header's menu
-   button. */
-.nav-panel-overlay {
-    display: none;
-}
-
-@media (max-width: 63.9375rem) {
-    /* visibility, not just the off-screen transform: a translated drawer is still focusable, so
-       without it the closed panel's links stay in the tab order of the page they are covering.
-       It opens below the header rather than over it, so the button that opened it is still on
-       screen and is also the button that closes it. */
-    .nav-panel {
-        left: 0;
-        z-index: 1200;
-        position: fixed;
-        top: var(--bo-layout-header);
-        height: calc(100dvh - var(--bo-layout-header));
-        width: min(20rem, 85vw);
-        flex-basis: 0;
-        visibility: hidden;
-        padding-top: var(--bo-sp-xxl);
-        transform: translateX(-100%);
-        box-shadow: var(--bo-shdw-64);
-        transition: transform var(--bo-dur-normal) var(--bo-crv-decelerate-mid),
-                    visibility var(--bo-dur-normal);
-    }
-
-    .nav-panel.open {
-        visibility: visible;
-        transform: translateX(0);
-    }
-
-    .nav-panel-overlay {
-        inset: var(--bo-layout-header) 0 0 0;
-        z-index: 1100;
-        display: block;
-        border: none;
-        padding: 0;
-        position: fixed;
-        background-color: var(--bo-clr-bg-overlay);
-    }
-}
-
-/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
-
-.doc-breadcrumb {
-    gap: var(--bo-sp-xs);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bo-sp-m);
-    font-size: var(--bo-fnt-size-200);
-    line-height: var(--bo-fnt-line-300);
-    color: var(--bo-clr-fg-3);
-}
-
-.doc-breadcrumb a {
-    text-decoration: none;
-    color: var(--bo-clr-fg-3);
-    padding: var(--bo-sp-xxs) var(--bo-sp-xs);
-    border-radius: var(--bo-crn-small);
-}
-
-.doc-breadcrumb a:hover {
-    color: var(--bo-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.doc-breadcrumb svg {
-    width: 0.75rem;
-    height: 0.75rem;
-    color: var(--bo-clr-fg-4);
-}
-
-.doc-breadcrumb span {
-    padding: var(--bo-sp-xxs) var(--bo-sp-xs);
-}
-
-.doc-breadcrumb .current {
-    color: var(--bo-clr-fg-2);
-}
-
-/* ── Pager ─────────────────────────────────────────────────────────────────── */
-
-.doc-pager {
-    gap: var(--bo-sp-l);
-    display: grid;
-    margin-top: var(--bo-sp-4xl);
-    padding-top: var(--bo-sp-xxl);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-top: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.doc-pager a {
-    gap: var(--bo-sp-xxs);
-    display: flex;
-    flex-flow: column nowrap;
-    text-decoration: none;
-    padding: var(--bo-sp-m) var(--bo-sp-l);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-medium);
-    transition: border-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                box-shadow var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-.doc-pager a:hover {
-    border-color: var(--bo-clr-brand-stroke);
-    box-shadow: var(--bo-shdw-4);
-}
-
-.doc-pager a.next {
-    grid-column: 2;
-    text-align: end;
-}
-
-.doc-pager .pager-dir {
-    gap: var(--bo-sp-xs);
-    display: flex;
-    align-items: center;
-    font-size: var(--bo-fnt-size-200);
-    line-height: var(--bo-fnt-line-200);
-    color: var(--bo-clr-fg-3);
-}
-
-.doc-pager a.next .pager-dir {
-    justify-content: flex-end;
-}
-
-.doc-pager .pager-dir svg {
-    width: 0.75rem;
-    height: 0.75rem;
-}
-
-.doc-pager .pager-title {
-    font-size: var(--bo-fnt-size-400);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-400);
-    color: var(--bo-clr-brand-fg);
-}
-
-@media (max-width: 35.9375rem) {
-    .doc-pager {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .doc-pager a.next {
-        grid-column: 1;
-    }
-}
-
-/* ── Footer ────────────────────────────────────────────────────────────────── */
-
-.footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-flow: column nowrap;
-    background-color: var(--bo-clr-bg-1);
-    border-top: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.footer section {
-    width: 100%;
-    max-width: var(--bo-layout-max);
-    padding: var(--bo-sp-6xl) var(--bo-sp-xxxl);
-}
-
-.footer section:first-child {
-    display: grid;
-    gap: var(--bo-sp-4xl);
-    align-items: start;
-    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
-}
-
-.footer section:last-child {
-    gap: var(--bo-sp-xxl);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--bo-sp-xxl) var(--bo-sp-xxxl);
-    border-top: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.footer a {
-    text-decoration: none;
-}
-
-.footer .blurb {
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-prose);
-    max-width: var(--bo-layout-measure);
-    color: var(--bo-clr-fg-3);
-}
-
-.footer .bit-logo {
-    width: 2rem;
-    height: 1.6875rem;
-    margin-bottom: var(--bo-sp-l);
-    background-size: contain;
-    background-position: left center;
-    background-repeat: no-repeat;
-}
-
-.footer .link-columns {
-    gap: var(--bo-sp-xxl);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-}
-
-.footer .link-column {
-    display: flex;
-    gap: var(--bo-sp-xs);
-    flex-flow: column nowrap;
-    align-items: flex-start;
-}
-
-.footer .link-column h6 {
-    font-size: var(--bo-fnt-size-300);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-300);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    margin-bottom: var(--bo-sp-xs);
-    color: var(--bo-clr-fg-3);
-}
-
-.footer .link-column a {
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-500);
-    color: var(--bo-clr-fg-2);
-}
-
-.footer .link-column a:hover {
-    color: var(--bo-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .go-to-top {
-    gap: var(--bo-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    margin-top: var(--bo-sp-s);
-    font-family: inherit;
-    font-size: var(--bo-fnt-size-300);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-300);
-    padding: var(--bo-sp-s) var(--bo-sp-m);
-    color: var(--bo-clr-fg-2);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-1);
-    border-radius: var(--bo-crn-medium);
-    transition: background-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                border-color var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-.footer .go-to-top:hover {
-    color: var(--bo-clr-fg-1);
-    border-color: var(--bo-clr-stroke-accessible);
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.footer .go-to-top svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.footer .address-info {
-    display: flex;
-    gap: var(--bo-sp-xxs);
-    flex-flow: column nowrap;
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-500);
-    color: var(--bo-clr-fg-3);
-}
-
-.footer .address-info .address,
-.footer .address-info .tel,
-.footer .address-info .country {
-    padding-inline-start: var(--bo-sp-xl);
-    background-repeat: no-repeat;
-    background-position-y: 0.3125rem;
-}
-
-.footer .address-info .address,
-.footer .address-info .tel {
-    color: var(--bo-clr-fg-2);
-}
-
-.footer .address-info .address:hover,
-.footer .address-info .tel:hover {
-    color: var(--bo-clr-brand-fg);
-    text-decoration: underline;
-}
-
-.footer .address-info .address {
-    background-image: url('../images/footer/location-icon.svg');
-}
-
-.footer .address-info .tel {
-    background-image: url('../images/footer/tel-icon.svg');
-}
-
-.footer .social-link-group {
-    gap: var(--bo-sp-m);
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-.footer .social-link {
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--bo-crn-circular);
-    background-color: var(--bo-clr-fg-4);
-    background-size: 1.125rem;
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: background-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                transform var(--bo-dur-faster) var(--bo-crv-decelerate-mid);
-}
-
-.footer .social-link:hover {
-    transform: translateY(-0.125rem);
-}
-
-.footer .twitter-link { background-image: url('../images/footer/twitter-icon.svg'); }
-.footer .twitter-link:hover { background-color: #1DA1F2; }
-.footer .github-link { background-image: url('../images/footer/github-icon.svg'); }
-.footer .github-link:hover { background-color: #24292F; }
-.footer .youtube-link { background-image: url('../images/footer/youtube-icon.svg'); }
-.footer .youtube-link:hover { background-color: #FF0000; }
-.footer .linkedin-link { background-image: url('../images/footer/linkedin-icon.svg'); }
-.footer .linkedin-link:hover { background-color: #0077B5; }
-
-.footer .copy-right-txt {
-    line-height: var(--bo-fnt-line-300);
-    margin-top: var(--bo-sp-m);
-    font-size: var(--bo-fnt-size-200);
-    text-align: end;
-    color: var(--bo-clr-fg-3);
-}
-
-@media (max-width: 63.9375rem) {
-    .footer section,
-    .footer section:last-child {
-        padding-inline: var(--bo-sp-xxl);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .footer section {
-        padding-block: var(--bo-sp-4xl);
-    }
-
-    .footer section:first-child {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .footer section:last-child {
-        align-items: flex-start;
-        flex-flow: column nowrap;
-        justify-content: flex-start;
-    }
-
-    .footer .social-link-group {
-        justify-content: flex-start;
-    }
-
-    .footer .copy-right-txt {
-        text-align: start;
-    }
-}
-
-/* ── Page title, lead and sections ─────────────────────────────────────────── */
-
-/* Every page opens the same way: a title, then a paragraph of prose - not another frame. */
-.page-container > h1 {
-    font-size: var(--bo-fnt-size-900);
-    line-height: var(--bo-fnt-line-900);
-    letter-spacing: -0.03em;
-    margin-bottom: var(--bo-sp-l);
-    overflow-wrap: anywhere;
-}
-
-/* The lead is set one step up the ramp from the body of the page, so a reader who only reads the
-   first paragraph still gets the whole answer to "what is this page for". */
-.page-intro {
-    font-size: var(--bo-fnt-size-500);
-    line-height: var(--bo-fnt-line-prose);
-    margin-bottom: var(--bo-sp-4xl);
-    max-width: var(--bo-layout-measure);
-    color: var(--bo-clr-fg-3);
-}
-
-@media (max-width: 47.9375rem) {
-    .page-container > h1 {
-        font-size: var(--bo-fnt-size-800);
-        line-height: var(--bo-fnt-line-800);
-    }
-
-    .page-intro {
-        font-size: var(--bo-fnt-size-400);
-    }
-}
-
-/* A hairline-bordered surface carrying Fluent's lightest elevation. On a documentation page the
-   same card repeats several times, so anything heavier reads as noise long before it reads as
-   depth - but a flat card on a flat canvas leaves the page with no layers at all. */
-.demo-section {
-    padding: var(--bo-sp-xxxl);
-    margin-bottom: var(--bo-sp-xxl);
-    scroll-margin-top: calc(var(--bo-layout-header) + var(--bo-layout-header-gap));
-    color: var(--bo-clr-fg-2);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-large);
-    box-shadow: var(--bo-shdw-2);
-}
-
-.demo-section:last-of-type {
-    margin-bottom: 0;
-}
-
-/* One rhythm for everything a section holds - prose, a toolbar, the fake product, a code box, a
-   table - so no page has to space its own pieces. */
-.demo-section > * + * {
-    margin-top: var(--bo-sp-l);
-}
-
-/* The heading sits over a hairline, so the eye can find the boundary between sections while
-   scrolling a long page instead of relying on whitespace alone. */
-.demo-section > h2 {
-    font-size: var(--bo-fnt-size-600);
-    line-height: var(--bo-fnt-line-600);
-    letter-spacing: -0.02em;
-    padding-bottom: var(--bo-sp-m);
-    overflow-wrap: anywhere;
-    border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.demo-section h3 {
-    font-size: var(--bo-fnt-size-500);
-    line-height: var(--bo-fnt-line-500);
-}
-
-.demo-section p {
-    font-size: var(--bo-fnt-size-400);
-    line-height: var(--bo-fnt-line-prose);
-    max-width: var(--bo-layout-measure);
-}
-
-.demo-section ul {
-    padding-inline-start: var(--bo-sp-xxl);
-}
-
-.demo-section li + li {
-    margin-top: var(--bo-sp-xs);
-}
-
-.demo-section li a {
-    overflow-wrap: anywhere;
-}
-
-@media (max-width: 47.9375rem) {
-    .demo-section {
-        padding: var(--bo-sp-xl);
-    }
-}
-
-/* Inline code, wherever a page sets one in prose. */
-:where(:not(pre) > code):where(:not(.bit-bonboarding-root *)) {
-    font-size: 0.875em;
-    padding: 0.0625rem 0.25rem;
-    overflow-wrap: anywhere;
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-3);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-small);
-}
-
-/* A code box: the recessed surface, one step down from the card it sits in. */
-:where(pre):where(:not(.bit-bonboarding-root *)) {
-    overflow: auto;
-    font-size: var(--bo-fnt-size-300);
-    line-height: 1.6;
-    padding: var(--bo-sp-l) var(--bo-sp-xl);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-3);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-medium);
-}
-
-.muted {
-    color: var(--bo-clr-fg-3);
-}
-
-/* ── Layout helpers ────────────────────────────────────────────────────────── */
-
-/* A run of controls: the buttons that drive a sample, and what they report back. */
-.demo-actions {
-    gap: var(--bo-sp-s);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-/* The settings a tour is started with, gathered on one recessed strip above the thing they drive. */
-.controls {
-    gap: var(--bo-sp-l);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    padding: var(--bo-sp-l);
-    background-color: var(--bo-clr-bg-2);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-large);
-}
-
-.grid {
-    gap: var(--bo-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-}
-
-.card {
-    padding: var(--bo-sp-xl);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-large);
-    box-shadow: var(--bo-shdw-2);
-}
-
-.card > * + * {
-    margin-top: var(--bo-sp-s);
-}
-
-.card h3 {
-    font-size: var(--bo-fnt-size-400);
-    line-height: var(--bo-fnt-line-400);
-}
-
-.card p {
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-prose);
-}
-
-/* ── Buttons ───────────────────────────────────────────────────────────────── */
-
-/* Fluent's secondary button: the neutral surface with a hairline, at Fluent's medium control
-   height. .btn-primary is the brand-filled one; a page has at most one per row, because two
-   buttons in the brand colour side by side say neither is the main one. */
-.btn {
-    gap: var(--bo-sp-s);
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    min-height: 2rem;
-    padding: var(--bo-sp-snudge) var(--bo-sp-m);
-    font-family: inherit;
-    font-size: var(--bo-fnt-size-300);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-300);
-    text-decoration: none;
-    white-space: nowrap;
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-1);
-    border-radius: var(--bo-crn-medium);
-    transition: background-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                border-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                color var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-.btn:hover {
-    color: var(--bo-clr-fg-1);
-    border-color: var(--bo-clr-stroke-accessible);
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.btn:active {
-    background-color: var(--bo-clr-bg-1-pressed);
-}
-
-.btn-primary {
-    color: var(--bo-clr-brand-fg-on-bg);
-    background-color: var(--bo-clr-brand-bg);
-    border-color: transparent;
-}
-
-.btn-primary:hover {
-    color: var(--bo-clr-brand-fg-on-bg);
-    border-color: transparent;
-    background-color: var(--bo-clr-brand-bg-hover);
-}
-
-.btn-primary:active {
-    background-color: var(--bo-clr-brand-bg-pressed);
-}
-
-.btn:disabled {
-    cursor: default;
-    color: var(--bo-clr-fg-disabled);
-    background-color: var(--bo-clr-bg-disabled);
-    border-color: var(--bo-clr-stroke-2);
-}
-
-.btn svg {
-    width: 1.125rem;
-    height: 1.125rem;
-}
-
-/* Fluent's large size, for the landing page: 44px tall, the minimum a finger can reliably hit. */
-.btn-lg {
-    min-height: 2.75rem;
-    padding: var(--bo-sp-m) var(--bo-sp-xxl);
-    font-size: var(--bo-fnt-size-400);
-    line-height: var(--bo-fnt-line-400);
-}
-
-.btn-lg svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-/* ── Fields ────────────────────────────────────────────────────────────────── */
-
-.field {
-    flex: 0 1 11rem;
-    min-width: 9rem;
-}
-
-:where(label):where(:not(.bit-bonboarding-root *)) {
-    display: block;
-    margin-bottom: var(--bo-sp-xs);
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-300);
-    color: var(--bo-clr-fg-1);
-}
-
-/* Fluent's input: a hairline box whose bottom edge is drawn in the accessible neutral, so the
-   field reads as a field even at rest, and which takes a brand-coloured underline on focus. */
-:where(input[type="text"], input[type="number"], select):where(:not(.bit-bonboarding-root *)) {
-    width: 100%;
-    min-width: 0;
-    height: 2rem;
-    outline: none;
-    padding: 0 var(--bo-sp-mnudge);
-    font-family: inherit;
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-300);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-1);
-    border-bottom-color: var(--bo-clr-stroke-accessible);
-    border-radius: var(--bo-crn-medium);
-    transition: border-color var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-:where(input):where(:not(.bit-bonboarding-root *))::placeholder {
-    color: var(--bo-clr-fg-3);
-}
-
-:where(input[type="text"], input[type="number"], select):where(:not(.bit-bonboarding-root *)):hover {
-    border-color: var(--bo-clr-stroke-accessible);
-}
-
-:where(input[type="text"], input[type="number"], select):where(:not(.bit-bonboarding-root *)):focus {
-    border-color: var(--bo-clr-stroke-1);
-    border-bottom-color: var(--bo-clr-brand-stroke);
-    box-shadow: inset 0 calc(var(--bo-strk-thin) * -1) 0 var(--bo-clr-brand-stroke);
-}
-
-/* Fluent's dropdown: the same box as the input, with its own chevron instead of the platform's. */
-:where(select):where(:not(.bit-bonboarding-root *)) {
-    cursor: pointer;
-    appearance: none;
-    padding-inline-end: var(--bo-sp-xxxl);
-    background-image: var(--bo-select-chevron);
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    background-position: right var(--bo-sp-s) center;
-}
-
-:where(select):where(:not(.bit-bonboarding-root *)):dir(rtl) {
-    background-position: left var(--bo-sp-s) center;
-}
-
-/* A field sitting in a row of buttons gets their width rather than the column's. */
-.demo-actions input[type="text"] {
-    width: auto;
-    flex: 0 1 16rem;
-}
-
-/* ── Tables ────────────────────────────────────────────────────────────────── */
-
-.table-wrap {
-    overflow-x: auto;
-}
-
-:where(table):where(:not(.bit-bonboarding-root *)) {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-300);
-}
-
-:where(th, td):where(:not(.bit-bonboarding-root *)) {
-    text-align: start;
-    vertical-align: top;
-    padding: var(--bo-sp-s) var(--bo-sp-m);
-    border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-:where(th):where(:not(.bit-bonboarding-root *)) {
-    font-weight: var(--bo-fnt-weight-semibold);
-    color: var(--bo-clr-fg-1);
-}
-
-:where(td):where(:not(.bit-bonboarding-root *)) {
-    color: var(--bo-clr-fg-2);
-}
-
-/* The name a row describes is one word: it scrolls with its table rather than breaking in the
-   middle of an identifier. */
-td:first-child code {
-    white-space: nowrap;
-    overflow-wrap: normal;
-}
-
-:where(tbody tr:hover td):where(:not(.bit-bonboarding-root *)) {
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-/* A two-column table of facts, with the names down the side rather than across the top. */
-table.facts th {
-    width: 10rem;
-    color: var(--bo-clr-fg-3);
-    font-weight: var(--bo-fnt-weight-regular);
-}
-
-/* ── Badges and message bars ───────────────────────────────────────────────── */
-
-/* Fluent's tinted badge. */
-.pill {
-    display: inline-flex;
-    align-items: center;
-    padding: var(--bo-sp-xxs) var(--bo-sp-s);
-    font-size: var(--bo-fnt-size-200);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-200);
-    color: var(--bo-clr-brand-fg);
-    background-color: var(--bo-clr-brand-wash);
-    border-radius: var(--bo-crn-circular);
-}
-
-/* Fluent's message bar: a tinted strip with the icon that says what kind of message it is. */
-.note {
-    gap: var(--bo-sp-s);
-    display: flex;
-    align-items: flex-start;
-    padding: var(--bo-sp-m) var(--bo-sp-l);
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-300);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-brand-bg-subtle);
-    border: var(--bo-strk-thin) solid color-mix(in srgb, var(--bo-clr-brand-stroke) 30%, transparent);
-    border-radius: var(--bo-crn-medium);
-}
-
-.note svg {
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--bo-clr-brand-fg);
-}
-
-.note-danger {
-    background-color: var(--bo-clr-danger-bg);
-    border-color: var(--bo-clr-danger-stroke);
-}
-
-.note-danger svg {
-    color: var(--bo-clr-danger-fg);
-}
-
-/* ── The fake product the tours point at ───────────────────────────────────── */
-
-/* A small application window: a toolbar, a sidebar and a dashboard. It is a container so it can
-   rearrange itself for the room it actually has - the reading column, the landing page's hero and
-   a phone are three very different widths. */
-.app-window {
-    container-type: inline-size;
-    overflow: hidden;
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-1);
-    border-radius: var(--bo-crn-xlarge);
-    box-shadow: var(--bo-shdw-8);
-}
-
-.app-toolbar {
-    gap: var(--bo-sp-s);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: var(--bo-sp-s) var(--bo-sp-m);
-    background-color: var(--bo-clr-bg-2);
-    border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.app-toolbar input[type="text"] {
-    width: auto;
-    flex: 0 1 13rem;
-}
-
-.app-toolbar .spacer {
-    margin-inline-start: auto;
-}
-
-.app-body {
-    display: grid;
-    min-height: 16rem;
-    grid-template-columns: 11rem minmax(0, 1fr);
-}
-
-.app-side {
-    gap: var(--bo-strk-thick);
-    display: flex;
-    flex-direction: column;
-    padding: var(--bo-sp-s);
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-300);
-    border-inline-end: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.app-side span {
-    position: relative;
-    padding: var(--bo-sp-snudge) var(--bo-sp-m);
-    color: var(--bo-clr-fg-2);
-    border-radius: var(--bo-crn-medium);
-}
-
-/* The same selected-item treatment as the site's own nav panel. */
-.app-side span.sel {
-    font-weight: var(--bo-fnt-weight-semibold);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.app-side span.sel::before {
-    content: '';
-    top: 20%;
-    bottom: 20%;
-    position: absolute;
-    width: var(--bo-strk-thicker);
-    inset-inline-start: 0;
-    border-radius: var(--bo-crn-circular);
-    background-color: var(--bo-clr-brand-stroke);
-}
-
-.app-main {
-    gap: var(--bo-sp-m);
-    display: flex;
-    flex-direction: column;
-    padding: var(--bo-sp-l);
-    background-color: var(--bo-clr-bg-3);
-}
-
-.app-metrics {
-    gap: var(--bo-sp-m);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
-}
-
-.tile {
-    padding: var(--bo-sp-m) var(--bo-sp-l);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-large);
-    box-shadow: var(--bo-shdw-2);
-}
-
-.tile-title {
-    font-size: var(--bo-fnt-size-200);
-    line-height: var(--bo-fnt-line-200);
-    color: var(--bo-clr-fg-3);
-}
-
-.tile-value {
-    margin-top: var(--bo-sp-xs);
-    font-family: var(--bo-fnt-family-display);
-    font-size: var(--bo-fnt-size-600);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-600);
-    letter-spacing: -0.02em;
-    color: var(--bo-clr-fg-1);
-}
-
-@container (max-width: 34rem) {
-    .app-body {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .app-side {
-        flex-flow: row wrap;
-        border-inline-end: none;
-        border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    }
-
-    .app-side span.sel::before {
-        top: auto;
-        left: var(--bo-sp-m);
-        right: var(--bo-sp-m);
-        bottom: 0;
-        width: auto;
-        height: var(--bo-strk-thicker);
-    }
-}
-
-/* The placement playground: a scrolling canvas with targets pinned near its edges. The dot grid is
-   there so it reads as a surface to place things on rather than as an empty box. */
-.playground {
-    position: relative;
-    height: 22rem;
-    overflow: auto;
-    background-color: var(--bo-clr-bg-2);
-    background-image: radial-gradient(var(--bo-clr-stroke-1) var(--bo-strk-thin), transparent var(--bo-strk-thin));
-    background-size: var(--bo-sp-l) var(--bo-sp-l);
-    border: var(--bo-strk-thin) dashed var(--bo-clr-stroke-1);
-    border-radius: var(--bo-crn-large);
-}
-
-.playground-inner {
-    position: relative;
-    width: 100%;
-    height: 40rem;
-}
-
-.dot-target {
-    position: absolute;
-    display: grid;
-    place-items: center;
-    width: 5.5rem;
-    height: 2.5rem;
-    font-size: var(--bo-fnt-size-200);
-    font-weight: var(--bo-fnt-weight-semibold);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-1);
-    border-radius: var(--bo-crn-medium);
-    box-shadow: var(--bo-shdw-4);
-}
-
-/* The live event stream on the events page. */
-.log {
-    max-height: 20rem;
-    overflow: auto;
-    font-family: var(--bo-fnt-family-mono);
-    font-size: var(--bo-fnt-size-200);
-    line-height: var(--bo-fnt-line-300);
-    background-color: var(--bo-clr-bg-3);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-medium);
-}
-
-.log-row {
-    gap: var(--bo-sp-m);
-    display: flex;
-    padding: var(--bo-sp-xs) var(--bo-sp-m);
-    color: var(--bo-clr-fg-2);
-    border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.log-row:last-child {
-    border-bottom: none;
-}
-
-.log-time {
-    color: var(--bo-clr-fg-3);
-}
-
-.log-kind {
-    min-width: 9rem;
-    font-weight: var(--bo-fnt-weight-semibold);
-    color: var(--bo-clr-brand-fg);
-}
-
-/* ── Landing page ──────────────────────────────────────────────────────────── */
-
-/* The landing page is not a document, so it does not get the docs' reading column: it owns the
-   full width and lays out its own sections, which alternate surfaces and are separated by the same
-   hairline the rest of the chrome uses. SiteShell renders it without the nav panel. */
-
-.site-content.home {
-    background-color: var(--bo-clr-bg-1);
-}
-
-.homepage-section {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-.homepage-section.alt-section {
-    background-color: var(--bo-clr-bg-3);
-    border-top: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.homepage-section-content {
-    width: 100%;
-    margin: 0 auto;
-    max-width: var(--bo-layout-max);
-    padding: var(--bo-sp-7xl) var(--bo-sp-xxxl);
-}
-
-.section-eyebrow {
-    display: block;
-    font-size: var(--bo-fnt-size-200);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-200);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    margin-bottom: var(--bo-sp-m);
-    color: var(--bo-clr-brand-fg);
-}
-
-.homepage-section h2 {
-    font-size: var(--bo-fnt-size-800);
-    line-height: var(--bo-fnt-line-800);
-    margin-bottom: var(--bo-sp-m);
-}
-
-.section-lead {
-    font-size: var(--bo-fnt-size-400);
-    line-height: var(--bo-fnt-line-prose);
-    margin-bottom: var(--bo-sp-4xl);
-    max-width: var(--bo-layout-measure);
-    color: var(--bo-clr-fg-3);
-}
-
-/* What the library is on one side; the product it is touring on the other. */
-.hero-section {
-    position: relative;
-    overflow: hidden;
-}
-
-/* A single wash of the brand behind the headline. It is the one decorative thing on the page, and
-   it is there so the hero does not read as the first card of a stack of cards. */
-.hero-section::before {
-    content: '';
-    position: absolute;
-    top: -20rem;
-    inset-inline-start: 50%;
-    width: 75rem;
-    height: 45rem;
-    pointer-events: none;
-    transform: translateX(-70%);
-    background: radial-gradient(closest-side, var(--bo-clr-brand-wash), transparent);
-}
-
-.hero-section .homepage-section-content {
-    gap: var(--bo-sp-6xl);
-    display: grid;
-    position: relative;
-    align-items: center;
-    padding-top: var(--bo-sp-6xl);
-    padding-bottom: var(--bo-sp-6xl);
-    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
-}
-
-.hero-eyebrow {
-    gap: var(--bo-sp-s);
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: var(--bo-sp-xl);
-    font-size: var(--bo-fnt-size-200);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-200);
-    padding: var(--bo-sp-xs) var(--bo-sp-m);
-    text-decoration: none;
-    color: var(--bo-clr-brand-fg);
-    background-color: var(--bo-clr-brand-wash);
-    border-radius: var(--bo-crn-circular);
-}
-
-.hero-eyebrow svg {
-    width: 0.875rem;
-    height: 0.875rem;
-}
-
-.hero-copy h1 {
-    line-height: 1.08;
-    margin-bottom: var(--bo-sp-xl);
-    letter-spacing: -0.03em;
-    font-size: clamp(2.5rem, 4.5vw, 3.75rem);
-}
-
-/* The part of the headline that says what is different takes the brand colour; the rest of the
-   line stays in the text colour, so the headline is still a headline rather than an object. */
-.hero-copy h1 .accent {
-    color: var(--bo-clr-brand-fg);
-}
-
-.hero-lead {
-    font-size: var(--bo-fnt-size-500);
-    line-height: var(--bo-fnt-line-prose);
-    margin-bottom: var(--bo-sp-xxl);
-    max-width: 34rem;
-    color: var(--bo-clr-fg-3);
-}
-
-.hero-actions {
-    gap: var(--bo-sp-m);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--bo-sp-xxl);
-}
-
-/* The install line, as a thing to copy rather than a thing to read. */
-.install-line {
-    display: flex;
-    max-width: 26rem;
-    align-items: center;
-    padding: var(--bo-sp-s) var(--bo-sp-l);
-    background-color: var(--bo-clr-bg-3);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-medium);
-}
-
-.install-line code {
-    overflow: auto hidden;
-    white-space: nowrap;
-    padding: 0;
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-300);
-    background: none;
-    border: none;
-}
-
-.install-line .prompt {
-    user-select: none;
-    color: var(--bo-clr-fg-4);
-}
-
-/* Two code boxes side by side: the same tour as markup and as data. */
-.code-pair {
-    gap: var(--bo-sp-xxl);
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.code-pair h3 {
-    font-size: var(--bo-fnt-size-500);
-    line-height: var(--bo-fnt-line-500);
-    margin-bottom: var(--bo-sp-xs);
-}
-
-.code-pair p {
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-prose);
-    margin-bottom: var(--bo-sp-m);
-    color: var(--bo-clr-fg-3);
-}
-
-.code-pair pre {
-    background-color: var(--bo-clr-bg-1);
-}
-
-/* What is in the box: one card per capability, each a link into the page that proves it. */
-.feature-grid {
-    gap: var(--bo-sp-l);
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
-}
-
-.feature-card {
-    display: block;
-    padding: var(--bo-sp-xxl);
-    text-decoration: none;
-    background-color: var(--bo-clr-bg-1);
-    border: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-    border-radius: var(--bo-crn-large);
-    transition: border-color var(--bo-dur-faster) var(--bo-crv-easy-ease),
-                box-shadow var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-a.feature-card:hover {
-    border-color: var(--bo-clr-brand-stroke);
-    box-shadow: var(--bo-shdw-8);
-}
-
-.feature-card-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--bo-sp-m);
-    color: var(--bo-clr-brand-fg);
-    background-color: var(--bo-clr-brand-wash);
-    border-radius: var(--bo-crn-medium);
-}
-
-.feature-card-icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.feature-card h3 {
-    font-size: var(--bo-fnt-size-500);
-    line-height: var(--bo-fnt-line-500);
-    margin-bottom: var(--bo-sp-s);
-}
-
-.feature-card p {
-    font-size: var(--bo-fnt-size-300);
-    line-height: var(--bo-fnt-line-prose);
-    color: var(--bo-clr-fg-3);
-}
-
-/* The full index of the docs, grouped the way the nav panel groups it - because the landing page
-   has no nav panel, and a reader who arrives at the root should be able to reach any page without
-   first having to find their way into the docs. */
-.demo-index {
-    gap: var(--bo-sp-4xl);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-}
-
-.demo-index-group h3 {
-    gap: var(--bo-sp-s);
-    display: flex;
-    align-items: center;
-    font-family: var(--bo-fnt-family-base);
-    font-size: var(--bo-fnt-size-200);
-    line-height: var(--bo-fnt-line-200);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding-bottom: var(--bo-sp-s);
-    margin-bottom: var(--bo-sp-s);
-    color: var(--bo-clr-fg-3);
-    border-bottom: var(--bo-strk-thin) solid var(--bo-clr-stroke-2);
-}
-
-.demo-index-group h3 svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--bo-clr-brand-fg);
-}
-
-.demo-index-link {
-    display: block;
-    text-decoration: none;
-    padding: var(--bo-sp-s);
-    margin-inline-start: calc(var(--bo-sp-s) * -1);
-    border-radius: var(--bo-crn-medium);
-    transition: background-color var(--bo-dur-faster) var(--bo-crv-easy-ease);
-}
-
-.demo-index-link:hover {
-    background-color: var(--bo-clr-bg-1-hover);
-}
-
-.demo-index-link .title {
-    display: block;
-    font-size: var(--bo-fnt-size-300);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: var(--bo-fnt-line-300);
-    color: var(--bo-clr-brand-fg);
-}
-
-.demo-index-link .desc {
-    display: block;
-    font-size: var(--bo-fnt-size-200);
-    line-height: var(--bo-fnt-line-300);
-    color: var(--bo-clr-fg-3);
-}
-
-@media (max-width: 63.9375rem) {
-    .homepage-section-content {
-        padding: var(--bo-sp-6xl) var(--bo-sp-xxl);
-    }
-
-    .hero-section .homepage-section-content {
-        gap: var(--bo-sp-4xl);
-        padding-top: var(--bo-sp-4xl);
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .code-pair {
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-
-@media (max-width: 47.9375rem) {
-    .homepage-section-content {
-        padding: var(--bo-sp-4xl) var(--bo-sp-l);
-    }
-
-    .homepage-section h2 {
-        font-size: var(--bo-fnt-size-700);
-        line-height: var(--bo-fnt-line-700);
-    }
-
-    .hero-actions .btn {
-        flex: 1 1 12rem;
-    }
-}
-
-/* ── Not-found and error pages ─────────────────────────────────────────────── */
-
-.error-page {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    flex-flow: column nowrap;
-    padding: var(--bo-sp-7xl) 0 var(--bo-sp-6xl);
-}
-
-.error-page .error-code {
-    font-family: var(--bo-fnt-family-display);
-    font-size: var(--bo-fnt-size-1000);
-    font-weight: var(--bo-fnt-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.03em;
-    color: var(--bo-clr-brand-fg);
-}
-
-.error-page h1 {
-    font-size: var(--bo-fnt-size-800);
-    line-height: var(--bo-fnt-line-800);
-    margin: var(--bo-sp-l) 0 var(--bo-sp-m);
-}
-
-.error-page p {
-    max-width: 34rem;
-    font-size: var(--bo-fnt-size-400);
-    line-height: var(--bo-fnt-line-prose);
-    margin-bottom: var(--bo-sp-xxl);
-    color: var(--bo-clr-fg-3);
-}
-
-.error-page .hero-actions {
-    justify-content: center;
-    margin-bottom: 0;
-}
-
-/* ── Blazor error UI ───────────────────────────────────────────────────────── */
-
-#blazor-error-ui {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    display: none;
-    position: fixed;
-    z-index: 1500;
-    font-size: var(--bo-fnt-size-300);
-    padding: var(--bo-sp-m) var(--bo-sp-4xl) var(--bo-sp-m) var(--bo-sp-xl);
-    color: var(--bo-clr-fg-1);
-    background-color: var(--bo-clr-bg-5);
-    border-top: var(--bo-strk-thin) solid var(--bo-clr-stroke-1);
-    box-shadow: var(--bo-shdw-16);
-}
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: var(--bo-sp-m);
-    top: var(--bo-sp-s);
-}
-
-.blazor-error-boundary {
-    padding: var(--bo-sp-l);
-    color: var(--bo-clr-danger-fg);
-    background-color: var(--bo-clr-danger-bg);
-    border: var(--bo-strk-thin) solid var(--bo-clr-danger-stroke);
-    border-radius: var(--bo-crn-medium);
-}
-
-.blazor-error-boundary::after {
-    content: "An error has occurred.";
-}
-
-/* ── The tour card, in Fluent 2 ────────────────────────────────────────────── */
-
-/* Not a single selector of the library's is overridden here: the default card is restyled purely
-   through the --bit-bonboarding-* custom properties it publishes, which is exactly what the theming
-   page tells an application to do. The values come from the ramps rather than from the semantic
-   layer above because a tour picks its own light or dark palette (its Theme option) independently
-   of the page around it, so each of the two has to be spelled out in full.
-
-   The card is Fluent's flyout: Background1, shadow16 to lift it off the overlay, and the XLarge
-   radius every floating surface on this site takes. Its buttons are Fluent's medium buttons, its
-   type is Body1 under a Subtitle2 title. The arrow, the overlay opacity and the duration are
-   written inline by the engine and stay its decision. */
-
-.bit-bonboarding-root {
-    --bit-bonboarding-surface: var(--bo-grey-100);
-    --bit-bonboarding-surface-subtle: var(--bo-grey-96);
-    --bit-bonboarding-text: var(--bo-grey-14);
-    --bit-bonboarding-text-muted: var(--bo-grey-26);
-    --bit-bonboarding-border: var(--bo-grey-88);
-    --bit-bonboarding-border-strong: var(--bo-grey-82);
-
-    --bit-bonboarding-accent: var(--bo-brand-80);
-    --bit-bonboarding-accent-hover: var(--bo-brand-70);
-    --bit-bonboarding-accent-active: var(--bo-brand-60);
-    --bit-bonboarding-accent-text: var(--bo-grey-100);
-    --bit-bonboarding-accent-soft: var(--bo-brand-140);
-
-    --bit-bonboarding-danger: var(--bo-red-80);
-    --bit-bonboarding-danger-hover: var(--bo-red-90);
-
-    --bit-bonboarding-spotlight-ring: rgba(255, 255, 255, 0.9);
-    --bit-bonboarding-spotlight-glow: color-mix(in srgb, var(--bo-brand-80) 40%, transparent);
-
-    --bit-bonboarding-radius: var(--bo-crn-xlarge);
-    --bit-bonboarding-radius-sm: var(--bo-crn-medium);
-    --bit-bonboarding-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    /* Fluent's focus stroke: neutral, not brand, so it still shows on a brand-filled button. */
-    --bit-bonboarding-focus-ring: 0 0 0 var(--bo-strk-thin) var(--bo-grey-100), 0 0 0 0.1875rem var(--bo-grey-14);
-
-    --bit-bonboarding-font: var(--bo-fnt-family-base);
-    --bit-bonboarding-font-size: var(--bo-fnt-size-300);
-    --bit-bonboarding-font-size-sm: var(--bo-fnt-size-300);
-    --bit-bonboarding-title-size: var(--bo-fnt-size-400);
-    --bit-bonboarding-title-weight: var(--bo-fnt-weight-semibold);
-    --bit-bonboarding-line-height: 1.4286;
-
-    --bit-bonboarding-ease: var(--bo-crv-decelerate-mid);
-}
-
-.bit-bonboarding-root[data-bonboarding-theme="dark"] {
-    --bit-bonboarding-surface: var(--bo-grey-16);
-    --bit-bonboarding-surface-subtle: var(--bo-grey-24);
-    --bit-bonboarding-text: var(--bo-grey-100);
-    --bit-bonboarding-text-muted: var(--bo-grey-84);
-    --bit-bonboarding-border: var(--bo-grey-24);
-    --bit-bonboarding-border-strong: var(--bo-grey-38);
-
-    --bit-bonboarding-accent: var(--bo-brand-70);
-    --bit-bonboarding-accent-hover: var(--bo-brand-80);
-    --bit-bonboarding-accent-active: var(--bo-brand-60);
-    --bit-bonboarding-accent-text: var(--bo-grey-100);
-    --bit-bonboarding-accent-soft: var(--bo-brand-40);
-
-    --bit-bonboarding-danger: var(--bo-red-80);
-    --bit-bonboarding-danger-hover: var(--bo-red-dark-fg);
-
-    --bit-bonboarding-spotlight-ring: rgba(255, 255, 255, 0.42);
-    --bit-bonboarding-spotlight-glow: color-mix(in srgb, var(--bo-brand-100) 32%, transparent);
-
-    --bit-bonboarding-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bit-bonboarding-focus-ring: 0 0 0 var(--bo-strk-thin) var(--bo-grey-16), 0 0 0 0.1875rem var(--bo-grey-100);
-}
-
-/* A deliberately different identity, for the theming page's skin picker. It is applied with the
-   tour's PopoverClass, which lands on the card rather than on the root, so these win over the
-   Fluent values above without a single extra selector. */
-.brand-popover {
-    --bit-bonboarding-surface: #101828;
-    --bit-bonboarding-surface-subtle: #1D2939;
-    --bit-bonboarding-text: #F9FAFB;
-    --bit-bonboarding-text-muted: #CBD5E1;
-    --bit-bonboarding-border: #1F2A3D;
-    --bit-bonboarding-border-strong: #344054;
-    --bit-bonboarding-accent: #F59E0B;
-    --bit-bonboarding-accent-hover: #FBBF24;
-    --bit-bonboarding-accent-active: #D97706;
-    --bit-bonboarding-accent-text: #1F1300;
-    --bit-bonboarding-accent-soft: rgba(245, 158, 11, 0.35);
-    --bit-bonboarding-radius: 6px;
-}
diff --git a/src/Utilities/Bonboarding/Demo/Server/wwwroot/css/theme.css b/src/Utilities/Bonboarding/Demo/Server/wwwroot/css/theme.css
deleted file mode 100644
index 5e52dbae9a8..00000000000
--- a/src/Utilities/Bonboarding/Demo/Server/wwwroot/css/theme.css
+++ /dev/null
@@ -1,309 +0,0 @@
-/* Bit.Bonboarding Demo - design tokens.
-
-   The demo carries no dependency other than Bit.Bonboarding itself, so the design system it is built
-   on is written out here rather than pulled from a component library. It is Microsoft's Fluent 2,
-   transcribed exactly as the Bit.Bmotion and Bit.Brouter demos transcribe it: the brand ramp, the
-   neutral ramps, the type ramp, the corner radii, the elevation shadows and the motion curves all
-   carry Fluent's own names and Fluent's own values.
-
-   Two layers, in the order a token should be reached for:
-
-     1. Ramps      --bo-brand-10..160, --bo-grey-*.  Raw colour. Outside this file they are only
-                   read by the tour skin at the foot of app.css, which has to pick a light or a
-                   dark value per tour rather than per page.
-     2. Semantic   --bo-clr-*, --bo-fnt-*, --bo-crn-*, --bo-shdw-*, --bo-dur-*, --bo-crv-*.
-                   What a token is *for*. This is the layer to write CSS against.
-
-   The brand ramp is Fluent's own Microsoft-blue ramp shifted so that shade 80 lands exactly on
-   bit's #1276C6: the two are within a just-noticeable difference of each other to begin with, so
-   the site stays on brand and on Fluent at the same time.
-
-   The theme is selected by the data-theme attribute on <html>, which the bootstrap script in
-   App.razor sets before first paint (see js/demo.js). The bare :root selector carries the light
-   palette so a document with no attribute at all - a browser with JS disabled - still renders a
-   complete theme rather than unstyled markup. */
-
-/* ── 1. Ramps ──────────────────────────────────────────────────────────────── */
-
-:root {
-    /* Brand. Fluent's blue ramp, anchored on bit's accent at shade 80. */
-    --bo-brand-10: #0A1C2A;
-    --bo-brand-20: #0D293E;
-    --bo-brand-30: #103551;
-    --bo-brand-40: #124265;
-    --bo-brand-50: #144F7D;
-    --bo-brand-60: #145D94;
-    --bo-brand-70: #1567AC;
-    --bo-brand-80: #1276C6;
-    --bo-brand-90: #2B90E7;
-    --bo-brand-100: #4BA7FD;
-    --bo-brand-110: #67B4FD;
-    --bo-brand-120: #7CC0FF;
-    --bo-brand-130: #9CCEFF;
-    --bo-brand-140: #BADEFF;
-    --bo-brand-150: #D6EBFF;
-    --bo-brand-160: #EDF5FE;
-
-    /* Neutrals. Fluent's grey ramp, named by lightness the way Fluent names it. */
-    --bo-grey-8: #141414;
-    --bo-grey-10: #1A1A1A;
-    --bo-grey-12: #1F1F1F;
-    --bo-grey-14: #242424;
-    --bo-grey-16: #292929;
-    --bo-grey-20: #333333;
-    --bo-grey-24: #3D3D3D;
-    --bo-grey-26: #424242;
-    --bo-grey-30: #4D4D4D;
-    --bo-grey-38: #616161;
-    --bo-grey-44: #707070;
-    --bo-grey-60: #999999;
-    --bo-grey-68: #ADADAD;
-    --bo-grey-82: #D1D1D1;
-    --bo-grey-84: #D6D6D6;
-    --bo-grey-88: #E0E0E0;
-    --bo-grey-92: #EBEBEB;
-    --bo-grey-94: #F0F0F0;
-    --bo-grey-96: #F5F5F5;
-    --bo-grey-98: #FAFAFA;
-    --bo-grey-100: #FFFFFF;
-
-    /* Fluent's shared red, for the one thing on this site that can go wrong on purpose: a tour
-       that is asked to fail when its target is missing. */
-    --bo-red-10: #3F1011;
-    --bo-red-20: #6E0811;
-    --bo-red-80: #D13438;
-    --bo-red-90: #BC2F32;
-    --bo-red-140: #EEACB2;
-    --bo-red-150: #FDF3F4;
-    --bo-red-dark-fg: #E37D80;
-    --bo-red-light-fg: #B10E1C;
-}
-
-/* ── 2. Semantic - light ───────────────────────────────────────────────────── */
-
-:root,
-:root[data-theme="light"] {
-    color-scheme: light;
-
-    /* Brand. Backgrounds take shade 80 and darken on interaction, exactly as Fluent does; text
-       and links take shade 70, which is the shade that clears 4.5:1 on both of the surfaces this
-       site paints - the white card and the grey canvas behind it. */
-    --bo-clr-brand-bg: var(--bo-brand-80);
-    --bo-clr-brand-bg-hover: var(--bo-brand-70);
-    --bo-clr-brand-bg-pressed: var(--bo-brand-60);
-    --bo-clr-brand-bg-subtle: var(--bo-brand-160);
-    --bo-clr-brand-fg: var(--bo-brand-70);
-    --bo-clr-brand-fg-hover: var(--bo-brand-60);
-    --bo-clr-brand-fg-pressed: var(--bo-brand-50);
-    --bo-clr-brand-fg-on-bg: var(--bo-grey-100);
-    --bo-clr-brand-stroke: var(--bo-brand-80);
-
-    /* Neutral backgrounds. Background1 is the raised surface - a card, the header, the nav panel;
-       the canvas the whole page is painted on is Background3, one step down from it. */
-    --bo-clr-bg-1: var(--bo-grey-100);
-    --bo-clr-bg-1-hover: var(--bo-grey-96);
-    --bo-clr-bg-1-pressed: var(--bo-grey-88);
-    --bo-clr-bg-2: var(--bo-grey-98);
-    --bo-clr-bg-3: var(--bo-grey-96);
-    --bo-clr-bg-3-hover: var(--bo-grey-92);
-    --bo-clr-bg-4: var(--bo-grey-94);
-    --bo-clr-bg-5: var(--bo-grey-92);
-    --bo-clr-bg-disabled: var(--bo-grey-94);
-    --bo-clr-bg-overlay: rgba(0, 0, 0, 0.4);
-
-    /* Neutral foregrounds. */
-    --bo-clr-fg-1: var(--bo-grey-14);
-    --bo-clr-fg-2: var(--bo-grey-26);
-    --bo-clr-fg-3: var(--bo-grey-38);
-    --bo-clr-fg-4: var(--bo-grey-44);
-    --bo-clr-fg-disabled: var(--bo-grey-68);
-
-    /* Neutral strokes. Stroke2 draws the hairlines that separate the site's surfaces; Stroke1
-       draws the edge of a control; StrokeAccessible is the one that clears 3:1 against both
-       surfaces, so it is what a control's own border becomes on hover. */
-    --bo-clr-stroke-1: var(--bo-grey-82);
-    --bo-clr-stroke-2: var(--bo-grey-88);
-    --bo-clr-stroke-accessible: var(--bo-grey-38);
-    --bo-clr-stroke-focus: var(--bo-grey-14);
-
-    /* Status. */
-    --bo-clr-danger-bg: var(--bo-red-150);
-    --bo-clr-danger-fg: var(--bo-red-light-fg);
-    --bo-clr-danger-stroke: var(--bo-red-140);
-
-    /* Fluent's elevation set. The alpha pairs are Fluent's own: a tight ambient shadow under a
-       wider directional one, so a raised surface reads as raised at any size. */
-    --bo-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bo-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bo-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bo-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.14), 0 0 0.125rem rgba(0, 0, 0, 0.12);
-    --bo-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.24), 0 0 0.5rem rgba(0, 0, 0, 0.2);
-
-    /* The tint a brand-coloured surface is washed with. color-mix keeps it tied to the brand
-       rather than freezing one theme's hex value. */
-    --bo-clr-brand-wash: color-mix(in srgb, var(--bo-brand-80) 10%, transparent);
-
-    /* The chevron a closed <select> draws, in the colour of a secondary label. A data URI cannot
-       read a custom property, so each theme carries its own copy. */
-    --bo-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
-}
-
-/* ── 2. Semantic - dark ────────────────────────────────────────────────────── */
-
-/* Fluent's dark theme is a neutral grey theme rather than a tinted one, and it inverts the
-   surface relationship rather than the ramp: the canvas is the darkest surface and a card sits
-   above it, one step lighter. Everything below mirrors the light block role for role. */
-
-:root[data-theme="dark"] {
-    color-scheme: dark;
-
-    --bo-clr-brand-bg: var(--bo-brand-70);
-    --bo-clr-brand-bg-hover: var(--bo-brand-80);
-    --bo-clr-brand-bg-pressed: var(--bo-brand-60);
-    --bo-clr-brand-bg-subtle: var(--bo-brand-20);
-    --bo-clr-brand-fg: var(--bo-brand-100);
-    --bo-clr-brand-fg-hover: var(--bo-brand-110);
-    --bo-clr-brand-fg-pressed: var(--bo-brand-120);
-    --bo-clr-brand-fg-on-bg: var(--bo-grey-100);
-    --bo-clr-brand-stroke: var(--bo-brand-100);
-
-    --bo-clr-bg-1: var(--bo-grey-12);
-    --bo-clr-bg-1-hover: var(--bo-grey-16);
-    --bo-clr-bg-1-pressed: var(--bo-grey-20);
-    --bo-clr-bg-2: var(--bo-grey-10);
-    --bo-clr-bg-3: var(--bo-grey-8);
-    --bo-clr-bg-3-hover: var(--bo-grey-12);
-    --bo-clr-bg-4: var(--bo-grey-16);
-    --bo-clr-bg-5: var(--bo-grey-20);
-    --bo-clr-bg-disabled: var(--bo-grey-16);
-    --bo-clr-bg-overlay: rgba(0, 0, 0, 0.65);
-
-    --bo-clr-fg-1: var(--bo-grey-100);
-    --bo-clr-fg-2: var(--bo-grey-84);
-    --bo-clr-fg-3: var(--bo-grey-68);
-    --bo-clr-fg-4: var(--bo-grey-60);
-    --bo-clr-fg-disabled: var(--bo-grey-38);
-
-    --bo-clr-stroke-1: var(--bo-grey-30);
-    --bo-clr-stroke-2: var(--bo-grey-20);
-    --bo-clr-stroke-accessible: var(--bo-grey-68);
-    --bo-clr-stroke-focus: var(--bo-grey-100);
-
-    --bo-clr-danger-bg: var(--bo-red-10);
-    --bo-clr-danger-fg: var(--bo-red-dark-fg);
-    --bo-clr-danger-stroke: var(--bo-red-20);
-
-    /* Fluent deepens the alphas so an elevated surface still reads against a near-black canvas,
-       where a light-theme shadow would vanish. */
-    --bo-shdw-2: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bo-shdw-4: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bo-shdw-8: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bo-shdw-16: 0 0.5rem 1rem rgba(0, 0, 0, 0.28), 0 0 0.125rem rgba(0, 0, 0, 0.24);
-    --bo-shdw-64: 0 2rem 4rem rgba(0, 0, 0, 0.4), 0 0 0.5rem rgba(0, 0, 0, 0.28);
-
-    --bo-clr-brand-wash: color-mix(in srgb, var(--bo-brand-100) 14%, transparent);
-
-    --bo-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADADAD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
-}
-
-/* ── 2. Semantic - shape, type, motion and layout ──────────────────────────── */
-
-/* The parts of Fluent that do not change with the palette. */
-
-:root {
-    /* Corner radius. Fluent 2's scale: controls take Medium, surfaces take Large, and anything
-       that floats over the page takes XLarge. */
-    --bo-crn-small: 0.125rem;
-    --bo-crn-medium: 0.25rem;
-    --bo-crn-large: 0.375rem;
-    --bo-crn-xlarge: 0.5rem;
-    --bo-crn-circular: 62.4375rem;
-
-    /* Stroke width. */
-    --bo-strk-thin: 0.0625rem;
-    --bo-strk-thick: 0.125rem;
-    --bo-strk-thicker: 0.1875rem;
-
-    /* Spacing. Fluent's ramp, and the only source of a margin or a padding in this site. */
-    --bo-sp-xxs: 0.125rem;
-    --bo-sp-xs: 0.25rem;
-    --bo-sp-snudge: 0.375rem;
-    --bo-sp-s: 0.5rem;
-    --bo-sp-mnudge: 0.625rem;
-    --bo-sp-m: 0.75rem;
-    --bo-sp-l: 1rem;
-    --bo-sp-xl: 1.25rem;
-    --bo-sp-xxl: 1.5rem;
-    --bo-sp-xxxl: 2rem;
-    --bo-sp-4xl: 2.5rem;
-    --bo-sp-5xl: 3rem;
-    --bo-sp-6xl: 4rem;
-    --bo-sp-7xl: 5rem;
-
-    /* Type. Segoe UI Variable is Fluent 2's typeface and ships with Windows 11; the rest of the
-       stack is the platform's own UI face, so the site is never the reason a font is downloaded. */
-    --bo-fnt-family-base: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bo-fnt-family-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui, sans-serif;
-    --bo-fnt-family-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-    /* Fluent's type ramp. The sizes are the ramp as published; the leading on the body sizes is
-       opened up from Fluent's own because this site is read as prose rather than scanned as an
-       application surface. */
-    --bo-fnt-size-200: 0.75rem;    /* Caption1   12 */
-    --bo-fnt-size-300: 0.875rem;   /* Body1      14 */
-    --bo-fnt-size-400: 1rem;       /* Body2      16 */
-    --bo-fnt-size-500: 1.25rem;    /* Subtitle1  20 */
-    --bo-fnt-size-600: 1.5rem;     /* Title3     24 */
-    --bo-fnt-size-700: 1.75rem;    /* Title2     28 */
-    --bo-fnt-size-800: 2rem;       /* Title1     32 */
-    --bo-fnt-size-900: 2.5rem;     /* LargeTitle 40 */
-    --bo-fnt-size-1000: 4.25rem;   /* Display    68 */
-
-    --bo-fnt-line-200: 1rem;
-    --bo-fnt-line-300: 1.25rem;
-    --bo-fnt-line-400: 1.375rem;
-    --bo-fnt-line-500: 1.75rem;
-    --bo-fnt-line-600: 2rem;
-    --bo-fnt-line-700: 2.25rem;
-    --bo-fnt-line-800: 2.5rem;
-    --bo-fnt-line-900: 3.25rem;
-
-    /* Prose leading, used wherever a run of text is longer than a label. */
-    --bo-fnt-line-prose: 1.625;
-
-    --bo-fnt-weight-regular: 400;
-    --bo-fnt-weight-medium: 500;
-    --bo-fnt-weight-semibold: 600;
-
-    /* Motion. Fluent's duration ramp and its curve set - a decelerating curve for anything
-       entering, an accelerating one for anything leaving, and easyEase for a state change that
-       does neither. */
-    --bo-dur-faster: 100ms;
-    --bo-dur-fast: 150ms;
-    --bo-dur-normal: 200ms;
-
-    --bo-crv-decelerate-mid: cubic-bezier(0, 0, 0, 1);
-    --bo-crv-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
-
-    /* Layout. The decisions a design system leaves to the product: how wide the reading column
-       runs, how far prose may stretch before it gets hard to follow, and how much room the nav
-       panel takes. */
-    --bo-layout-max: 90rem;        /* 1440px - the outer rail-to-rail width */
-    --bo-layout-content: 60rem;    /* 960px  - the article column; the fake product UI needs room */
-    --bo-layout-measure: 72ch;
-    --bo-layout-header: 3.5rem;    /* 56px - every sticky offset below is derived from this */
-    --bo-layout-nav: 16.5rem;      /* 264px */
-    /* Breathing room between the sticky header and whatever has been scrolled to. WCAG 2.2's
-       "focus not obscured" is why this is a token rather than a number. */
-    --bo-layout-header-gap: 1.5rem;
-}
-
-/* Chrome transitions only. A tour's own motion is the library's business and it honours reduced
-   motion itself (see ReducedMotion in the README). */
-@media (prefers-reduced-motion: reduce) {
-    :root {
-        --bo-dur-faster: 0.01ms;
-        --bo-dur-fast: 0.01ms;
-        --bo-dur-normal: 0.01ms;
-    }
-}
diff --git a/src/Utilities/Bonboarding/Demo/Server/wwwroot/demo.css b/src/Utilities/Bonboarding/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..ff933cd0773
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,378 @@
+/* ============================================================================================
+   Bonboarding demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Bonboarding's own: the tour card, restyled through the
+   library's custom properties, and the small fake product the tours point at. The product is
+   written against the kit's --bb-* names, so it follows the light/dark theme with no rules of its
+   own for either.
+   ============================================================================================ */
+
+/* ---------- The tour card, in Fluent 2 ----------
+
+   Restyled purely through the --bit-bonboarding-* custom properties the library publishes, which is
+   exactly what the theming page tells an application to do. This file is linked after the library's
+   stylesheet, so a plain .bit-bonboarding-root here wins over its defaults.
+
+   A tour picks its palette independently of the page around it - Theme = Light stays light on a
+   dark site - so the light and the dark palettes are spelled out in full below, with the values of
+   the site kit's own two palettes, rather than through the --bb-* roles, which follow the site. */
+
+.bit-bonboarding-root {
+    --bit-bonboarding-surface: #FFFFFF;
+    --bit-bonboarding-surface-subtle: #F5F5F5;
+    --bit-bonboarding-text: #1A1A1A;
+    --bit-bonboarding-text-muted: #525252;
+    --bit-bonboarding-border: #E0E0E0;
+    --bit-bonboarding-border-strong: #ADADAD;
+
+    --bit-bonboarding-accent: #1276C6;
+    --bit-bonboarding-accent-hover: #0B6AB4;
+    --bit-bonboarding-accent-active: #095A9B;
+    --bit-bonboarding-accent-text: #FFFFFF;
+    --bit-bonboarding-accent-soft: rgba(18, 118, 198, .35);
+
+    --bit-bonboarding-danger: #D2393B;
+    --bit-bonboarding-danger-hover: #9D2225;
+
+    --bit-bonboarding-spotlight-ring: rgba(255, 255, 255, .9);
+    --bit-bonboarding-spotlight-glow: rgba(18, 118, 198, .40);
+
+    /* Fluent's flyout: the XLarge corner every floating surface takes, and shadow16 to lift it off
+       the overlay. */
+    --bit-bonboarding-radius: var(--fl-radius-xlarge);
+    --bit-bonboarding-radius-sm: var(--fl-radius-medium);
+    --bit-bonboarding-shadow: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    /* Fluent's focus stroke: neutral rather than brand, so it still shows on a brand-filled button. */
+    --bit-bonboarding-focus-ring: 0 0 0 1px #FFFFFF, 0 0 0 3px #000000;
+
+    --bit-bonboarding-font: var(--bb-font-sans);
+    --bit-bonboarding-font-size: var(--fl-font-size-200);
+    --bit-bonboarding-font-size-sm: var(--fl-font-size-200);
+    --bit-bonboarding-title-size: var(--fl-font-size-300);
+    --bit-bonboarding-title-weight: var(--fl-weight-semibold);
+    --bit-bonboarding-line-height: 1.43;
+
+    --bit-bonboarding-ease: var(--fl-curve-decelerate-mid);
+}
+
+/* The dark palette: a tour that asked for it, and - since "system" leaves the choice to the
+   application's stylesheet - a tour that left its theme unset while the site is dark. That second
+   selector is the whole of "the tours follow the site's theme switch". */
+.bit-bonboarding-root[data-bonboarding-theme="dark"],
+:root[bit-theme="dark"] .bit-bonboarding-root[data-bonboarding-theme="system"] {
+    --bit-bonboarding-surface: #15191E;
+    --bit-bonboarding-surface-subtle: #22272C;
+    --bit-bonboarding-text: #E6ECF2;
+    --bit-bonboarding-text-muted: #B9BEC4;
+    --bit-bonboarding-border: #2B3138;
+    --bit-bonboarding-border-strong: #454C53;
+
+    --bit-bonboarding-accent: #4FA3F4;
+    --bit-bonboarding-accent-hover: #61AEFB;
+    --bit-bonboarding-accent-active: #7DBEFF;
+    --bit-bonboarding-accent-text: #0F1318;
+    --bit-bonboarding-accent-soft: rgba(79, 163, 244, .45);
+
+    --bit-bonboarding-danger: #E67A73;
+    --bit-bonboarding-danger-hover: #FEA199;
+
+    --bit-bonboarding-overlay-opacity: .68;
+
+    --bit-bonboarding-spotlight-ring: rgba(255, 255, 255, .42);
+    --bit-bonboarding-spotlight-glow: rgba(79, 163, 244, .32);
+
+    --bit-bonboarding-shadow: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --bit-bonboarding-focus-ring: 0 0 0 1px #0F1318, 0 0 0 3px #FFFFFF;
+}
+
+/* A deliberately different identity, for the theming page's skin picker. It is applied with the
+   tour's PopoverClass, which lands on the card rather than on the root, so these win over the
+   Fluent values above without a single extra selector. */
+.brand-popover {
+    --bit-bonboarding-surface: #101828;
+    --bit-bonboarding-surface-subtle: #1D2939;
+    --bit-bonboarding-text: #F9FAFB;
+    --bit-bonboarding-text-muted: #CBD5E1;
+    --bit-bonboarding-border: #1F2A3D;
+    --bit-bonboarding-border-strong: #344054;
+    --bit-bonboarding-accent: #F59E0B;
+    --bit-bonboarding-accent-hover: #FBBF24;
+    --bit-bonboarding-accent-active: #D97706;
+    --bit-bonboarding-accent-text: #1F1300;
+    --bit-bonboarding-accent-soft: rgba(245, 158, 11, .35);
+    --bit-bonboarding-radius: 6px;
+}
+
+/* The site kit styles a few elements globally - headings take the page's text color and display
+   face, and anything focusable with tabindex="-1" (which the router's focus target and the card
+   both are) drops its ring and its shadow. Neither belongs inside the card, whose colors come from
+   the tour's own palette, so the card is shielded from them here. */
+.bit-bonboarding-root :is(h1, h2, h3, h4, h5, h6) {
+    color: inherit;
+    font-family: inherit;
+    text-wrap: wrap;
+}
+
+.bit-bonboarding-root .bit-bonboarding-popover:focus-visible {
+    box-shadow: var(--bit-bonboarding-shadow), var(--bit-bonboarding-focus-ring);
+}
+
+/* ---------- The fake product the tours point at ----------
+
+   A small application window: a toolbar, a sidebar and a dashboard. It is a container so it can
+   rearrange itself for the room it actually has - the docs column, the landing page's hero and a
+   phone are three very different widths. Every element a tour points at carries a
+   data-bonboarding-anchor attribute and nothing else. */
+.app-window {
+    container-type: inline-size;
+    overflow: hidden;
+    margin-top: 1rem;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-demo > .app-window:first-child,
+.bb-demo-bar + .app-window {
+    margin-top: 0;
+}
+
+/* In the landing page's window frame the frame is the chrome, so the product drops its own. */
+.bb-browser .app-window {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.app-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.app-toolbar input[type="text"] {
+    flex: 0 1 13rem;
+    min-width: 0;
+}
+
+.app-toolbar .spacer {
+    margin-inline-start: auto;
+}
+
+.app-body {
+    display: grid;
+    min-height: 16rem;
+    grid-template-columns: 11rem minmax(0, 1fr);
+}
+
+.app-side {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    border-inline-end: 1px solid var(--bb-border);
+}
+
+.app-side span {
+    position: relative;
+    padding: .3125rem .75rem;
+    color: var(--bb-text-muted);
+    border-radius: var(--bb-radius);
+}
+
+/* The same selected-row treatment as the site's own docs navigation. */
+.app-side span.sel {
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.app-side span.sel::before {
+    content: "";
+    position: absolute;
+    top: 20%;
+    bottom: 20%;
+    inset-inline-start: 0;
+    width: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.app-main {
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+    padding: 1rem;
+    background: var(--bb-bg);
+}
+
+.app-metrics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+    gap: .75rem;
+}
+
+.tile {
+    padding: .75rem 1rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.tile-title {
+    font-size: var(--fl-font-size-100);
+    line-height: 1.33;
+    color: var(--bb-text-soft);
+}
+
+.tile-value {
+    margin-top: .25rem;
+    font-family: var(--bb-font-display);
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.02em;
+    color: var(--bb-text);
+}
+
+@container (max-width: 34rem) {
+    .app-body {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .app-side {
+        flex-flow: row wrap;
+        border-inline-end: 0;
+        border-bottom: 1px solid var(--bb-border);
+    }
+
+    .app-side span.sel::before {
+        top: auto;
+        bottom: 0;
+        left: .75rem;
+        right: .75rem;
+        width: auto;
+        height: 3px;
+    }
+}
+
+/* A panel a page renders on demand or files settings under - a plain surface with a title. */
+.demo-panel {
+    min-width: 0;
+    margin-top: 1rem;
+    padding: 1rem 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+}
+
+.demo-panel > :last-child {
+    margin-bottom: 0;
+}
+
+.demo-panel-title {
+    margin-bottom: .5rem;
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* The settings page: three panels that wrap under each other once the column is too narrow. */
+.demo-settings {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+    gap: 1rem;
+}
+
+.demo-settings > .demo-panel {
+    margin-top: 0;
+}
+
+.demo-panel .bb-field input {
+    width: 100%;
+}
+
+/* ---------- The placement playground ----------
+
+   A scrolling canvas with targets pinned near its edges. The dot grid is there so it reads as a
+   surface to place things on rather than as an empty box. */
+.playground {
+    position: relative;
+    height: 22rem;
+    overflow: auto;
+    background-color: var(--bb-bg);
+    background-image: radial-gradient(var(--bb-border-strong) 1px, transparent 1px);
+    background-size: 1rem 1rem;
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    scrollbar-width: thin;
+}
+
+.playground-inner {
+    position: relative;
+    width: 100%;
+    height: 40rem;
+}
+
+.dot-target {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    width: 5.5rem;
+    height: 2.5rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    box-shadow: var(--fl-shadow-4);
+}
+
+/* ---------- The events page's live stream - the kit's .bb-log, one column per field ---------- */
+.event-log {
+    max-height: 20rem;
+    margin: 1rem 0 0;
+}
+
+.event-log-row {
+    display: flex;
+    gap: .75rem;
+}
+
+.event-log-time {
+    flex: none;
+    color: var(--bb-code-comment);
+}
+
+.event-log-kind {
+    flex: none;
+    min-width: 9rem;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-code-keyword);
+}
+
+@media (max-width: 600px) {
+    .event-log-row {
+        flex-wrap: wrap;
+        gap: 0 .75rem;
+    }
+
+    .event-log-kind {
+        min-width: 0;
+    }
+}
diff --git a/src/Utilities/Bonboarding/Demo/Server/wwwroot/js/demo.js b/src/Utilities/Bonboarding/Demo/Server/wwwroot/js/demo.js
deleted file mode 100644
index ec46be4e34a..00000000000
--- a/src/Utilities/Bonboarding/Demo/Server/wwwroot/js/demo.js
+++ /dev/null
@@ -1,92 +0,0 @@
-// Browser-side helpers for the demo shell. They live in a plain script (not a module) because the
-// components call them by name through IJSRuntime, and the file is loaded from App.razor before
-// blazor.web.js so every function exists by the time the app becomes interactive.
-//
-// Nothing here has anything to do with tours: every tour on this site is run by Bit.Bonboarding and
-// its own script. What this file does is the handful of things the site's chrome needs and a
-// component cannot do on its own: keep the theme, and listen to the window.
-
-// ── Theme ────────────────────────────────────────────────────────────────────
-//
-// The stylesheets key off the data-theme attribute on <html>. The same decision is inlined into the
-// <head> by App.razor and runs before the first paint, so the stored theme is applied to the
-// document rather than swapped in afterwards - which would show the reader a flash of the wrong one.
-
-window.boTheme = {
-    // Deliberately outside the "bit-bonboarding-demo:" prefix the tours are stored under, so the
-    // Events page's "Forget every tour" button forgets tours and not the reader's theme.
-    KEY: 'bo-theme',
-
-    // The stored choice if there is one, otherwise whatever the operating system asks for. Reading
-    // localStorage can throw outright (a browser with site data blocked), so a failure here falls
-    // through to the system preference rather than taking the page down with it.
-    preferred() {
-        let stored = null;
-        try { stored = localStorage.getItem(window.boTheme.KEY); } catch { /* no stored preference */ }
-        if (stored === 'light' || stored === 'dark') return stored;
-        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-
-    current() {
-        return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
-    },
-
-    apply(theme) {
-        const value = theme === 'dark' ? 'dark' : 'light';
-        document.documentElement.setAttribute('data-theme', value);
-
-        // The colour some browsers paint their own chrome in: the --bo-clr-bg-1 of each theme in
-        // theme.css, which a meta tag cannot read a variable for.
-        document.querySelector('meta[name="theme-color"]')?.setAttribute('content', value === 'dark' ? '#1F1F1F' : '#FFFFFF');
-    },
-
-    set(theme) {
-        window.boTheme.apply(theme);
-        try { localStorage.setItem(window.boTheme.KEY, theme); } catch { /* preference is not persisted */ }
-    },
-};
-
-// Both return the theme now applied, so the layout can hand it on to BonboardingRoot without asking
-// a second time.
-window.boGetTheme = function () {
-    return window.boTheme.current();
-};
-
-window.boToggleTheme = function () {
-    const next = window.boTheme.current() === 'dark' ? 'light' : 'dark';
-    window.boTheme.set(next);
-    return next;
-};
-
-window.boTheme.apply(window.boTheme.preferred());
-
-// ── Header ───────────────────────────────────────────────────────────────────
-//
-// The header is a translucent pane. It grows a shadow the moment there is something scrolled
-// underneath it to lift away from, and loses it again at the top of the page - so the elevation
-// says "there is more above" rather than being decoration that is always on.
-
-(function watchHeader() {
-    const update = () => {
-        const header = document.querySelector('.app-header');
-        if (!header) return;
-        header.setAttribute('data-scrolled', window.scrollY > 4 ? 'true' : 'false');
-    };
-
-    let queued = false;
-    window.addEventListener('scroll', () => {
-        if (queued) return;
-        queued = true;
-        requestAnimationFrame(() => {
-            queued = false;
-            update();
-        });
-    }, { passive: true });
-
-    document.addEventListener('DOMContentLoaded', update);
-    update();
-})();
-
-window.boScrollToTop = function () {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-};
diff --git a/src/Utilities/Bonboarding/Demo/Server/wwwroot/site.js b/src/Utilities/Bonboarding/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bonboarding/Demo/Server/wwwroot/theme.js b/src/Utilities/Bonboarding/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bonboarding/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Borm/Demo/Client/DocsCatalog.cs b/src/Utilities/Borm/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..6c823065c75
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,230 @@
+using Bit.Borm.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Borm.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Borm";
+
+    public const string PackageId = "Bit.Borm";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Borm";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Borm is a schema-driven form engine for Blazor: describe a form once - from a C# type, a fluent builder " +
+        "or JSON Schema - and it renders, validates and keeps the state of it, with every decision made in C#. " +
+        "Every page of this site is a working form.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["wizard", "repeater", "json schema", "validation", "combobox"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/json-schema", "JSON Schema"),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register AddBorm(), link the stylesheet and render a first form from an annotated model.",
+                "install setup nuget package AddBorm program.cs stylesheet bit-borm.css imports render mode first form BormView",
+                typeof(GettingStarted)),
+            new("/quickstart", "From a C# type",
+                "BormSchemaGenerator.Generate<T>() turns a model and its DataAnnotations into a complete form.",
+                "schema generator generate poco model dataannotations reflection required range display inherited zero config",
+                typeof(Quickstart)),
+            new("/builder", "Fluent builder + conditions",
+                "BormBuilder.For<T>() configures fields with typed expressions, and VisibleWhen shows the company fields for business accounts.",
+                "fluent builder BormBuilder expression field required email pattern radio VisibleWhen condition conditional",
+                typeof(BuilderDemo)),
+            new("/json-schema", "JSON Schema",
+                "A live JSON Schema editor: the form regenerates as you type, and Export writes it back out, conditions and steps intact.",
+                "json schema import export round trip $ref allOf if then dependentRequired enum format x-widget x-visibleWhen x-steps TryImport",
+                typeof(JsonSchemaDemo)),
+        ]),
+        new("Fields & layout",
+        [
+            new("/layout", "Layout & field types",
+                "Columns and ColumnSpan lay a form out on a responsive grid, with [Flags] and List<TEnum> multi-selects and a nested object group.",
+                "layout grid columns ColumnSpan responsive flags enum multiselect checkbox list nested object group autocomplete",
+                typeof(LayoutDemo)),
+            new("/field-polish", "Affixes, counters & live updates",
+                "Prefixes and suffixes inside the border, a character counter, static headings, a clear button, a password reveal and a switch.",
+                "prefix suffix affix CharacterCount counter UpdateOnInput debounce Static heading Clearable Revealable password AsSwitch Suggest datalist",
+                typeof(FieldPolishDemo)),
+            new("/combobox-tags", "Combobox, tags & change handlers",
+                "A type-to-filter combobox, chips for a list of strings, and an OnChange handler that fills in another field.",
+                "combobox AsCombobox allowCustom datalist tags chips AsTags OnChange SetSibling ClearSibling listener handler",
+                typeof(ComboboxAndTagsDemo)),
+            new("/files", "File upload",
+                "IBrowserFile fields with an accept list, size and type rules checked again after the picker, and the chosen files listed back.",
+                "file upload IBrowserFile InputFile accept MaxFileSize multiple attachments",
+                typeof(FileUploadDemo)),
+            new("/composition", "Groups, custom layout & resilience",
+                "Named fieldsets, a page that lays out BormField one at a time, per-field undo, and an options service that is allowed to fail.",
+                "group fieldset legend GroupName BormField custom layout ResetField IsDirty OptionsLoadFailed InvalidateOptions AsSearch",
+                typeof(CompositionDemo)),
+            new("/custom-renderer", "Custom renderer",
+                "A star-rating component registered under a key with RegisterCustom, validated like any built-in control.",
+                "custom renderer RegisterCustom CustomRenderer BormInputBase registry widget star rating",
+                typeof(CustomRendererDemo)),
+        ]),
+        new("Repeaters & wizards",
+        [
+            new("/array", "Array / repeater",
+                "A repeating editor with add, remove and reorder, computed line and invoice totals, and focus that follows the rows.",
+                "array repeater list items add remove reorder move computed total Items min itemNoun Disabled",
+                typeof(ArrayDemo)),
+            new("/per-row-conditions", "Per-row conditions",
+                "A condition on a repeater's item template means that row: each contact switches its own fields.",
+                "per row condition repeater scoped VisibleWhen RequiredWhen ClearOnHide SeedMinItems duplicable",
+                typeof(PerRowConditionsDemo)),
+            new("/wizard", "Multi-step wizard",
+                "Steps that validate before advancing, a step that only appears for business accounts, and a clickable stepper.",
+                "wizard steps stepper Step multi-step per-step validation conditional step Next Back",
+                typeof(WizardDemo)),
+        ]),
+        new("Validation",
+        [
+            new("/validation", "Validation modes",
+                "When a field revalidates before and after the first submit, an error summary, Reset, and a debounced async rule.",
+                "validation trigger revalidation OnBlur OnChange OnSubmit error summary reset MustAsync async debounce IsValidatingField read-only",
+                typeof(ValidationModesDemo)),
+            new("/dependent-fields", "Dependent fields",
+                "RevalidateOn settles a cross-field rule from either side, and clearing a hidden field updates the computed estimate.",
+                "dependent fields RevalidateOn cross-field compare Must confirm email dates computed ClearOnHide deps",
+                typeof(DependentFieldsDemo)),
+            new("/settled-answers", "Locked fields, tidy values & date windows",
+                "ReadOnlyWhen locks a settled answer, Trim and Normalize fix values instead of complaining, and date ranges are enforced.",
+                "ReadOnlyWhen read-only lock Trim Normalize date time Range min max IsSubmitSuccessful",
+                typeof(SettledAnswersDemo)),
+            new("/data-annotations", "DataAnnotations & IValidatableObject",
+                "UseDataAnnotations() runs a model's cross-property IValidatableObject rules, composed with a FluentValidation validator.",
+                "dataannotations IValidatableObject UseDataAnnotations attributes Required Range cross-property form-level compose",
+                typeof(DataAnnotationsDemo)),
+            new("/fluent-validation", "FluentValidation",
+                "UseFluentValidation() runs an existing AbstractValidator<T> and maps every failure onto its field.",
+                "fluentvalidation AbstractValidator UseFluentValidation Bit.Borm.FluentValidation validator rules cross-field",
+                typeof(FluentValidationDemo)),
+        ]),
+        new("State & data",
+        [
+            new("/cascading", "Async & cascading options",
+                "OptionsFrom loads choices on demand and reloads them when the field they depend on changes.",
+                "async cascading options OptionsFrom dependsOn load country city select RequiredWhen ClearOnHide",
+                typeof(CascadingOptionsDemo)),
+            new("/state-api", "Editing an existing record",
+                "Reset(values) rebases a loaded record, with Snapshot, ValidateFieldAsync, GetFieldState and the repeater operations.",
+                "BormState state api Reset Snapshot draft ValidateFieldAsync GetFieldState SwapArrayItems ClearArrayItems SingleErrorPerField ReadOnly dirty",
+                typeof(StateApiDemo)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server InspectBormSchema",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Borm/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Borm/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Borm/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Borm/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Borm/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/Footer.razor b/src/Utilities/Borm/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Borm/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/Header.razor b/src/Utilities/Borm/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/Header.razor.css b/src/Utilities/Borm/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Borm/Demo/Client/Layout/MainLayout.razor
index 7f7a4576877..44980dda101 100644
--- a/src/Utilities/Borm/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Borm/Demo/Client/Layout/MainLayout.razor
@@ -1,17 +1,30 @@
 @inherits LayoutComponentBase
 
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. *@
-<div class="app-shell" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
-    <aside class="app-nav">
-        <NavMenu />
-    </aside>
-    <main class="app-main">
-        <header class="app-top">
-            <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Borm" target="_blank" rel="noopener">GitHub</a>
-            <a href="https://www.nuget.org/packages/Bit.Borm" target="_blank" rel="noopener">NuGet</a>
-            <a href="https://bitplatform.dev" target="_blank" rel="noopener">bitplatform.dev</a>
-        </header>
-        @Body
-    </main>
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
+
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
+
+    <Footer />
 </div>
diff --git a/src/Utilities/Borm/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Borm/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Borm/Demo/Client/Layout/NavMenu.razor b/src/Utilities/Borm/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index 07f140ca055..00000000000
--- a/src/Utilities/Borm/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="app-nav-top">
-    <a class="app-brand" href="">bit <span>Borm</span></a>
-    <button class="app-nav-toggle" title="Toggle navigation" aria-expanded="@(!_collapsed ? "true" : "false")" @onclick="Toggle">
-        <span></span><span></span><span></span>
-    </button>
-</div>
-
-<nav class="@(_collapsed ? "app-nav-links collapse" : "app-nav-links")">
-    <NavLink href="" Match="NavLinkMatch.All" @onclick="Collapse">Overview</NavLink>
-    <NavLink href="quickstart" @onclick="Collapse">From a C# type</NavLink>
-    <NavLink href="builder" @onclick="Collapse">Fluent builder + conditions</NavLink>
-    <NavLink href="array" @onclick="Collapse">Array / repeater</NavLink>
-    <NavLink href="wizard" @onclick="Collapse">Multi-step wizard</NavLink>
-    <NavLink href="layout" @onclick="Collapse">Layout &amp; field types</NavLink>
-    <NavLink href="field-polish" @onclick="Collapse">Affixes, counters &amp; live updates</NavLink>
-    <NavLink href="combobox-tags" @onclick="Collapse">Combobox, tags &amp; handlers</NavLink>
-    <NavLink href="per-row-conditions" @onclick="Collapse">Per-row conditions</NavLink>
-    <NavLink href="settled-answers" @onclick="Collapse">Locked fields &amp; tidy values</NavLink>
-    <NavLink href="composition" @onclick="Collapse">Groups, layout &amp; resilience</NavLink>
-    <NavLink href="state-api" @onclick="Collapse">Editing an existing record</NavLink>
-    <NavLink href="validation" @onclick="Collapse">Validation modes</NavLink>
-    <NavLink href="dependent-fields" @onclick="Collapse">Dependent fields</NavLink>
-    <NavLink href="cascading" @onclick="Collapse">Async &amp; cascading options</NavLink>
-    <NavLink href="files" @onclick="Collapse">File upload</NavLink>
-    <NavLink href="json-schema" @onclick="Collapse">JSON Schema</NavLink>
-    <NavLink href="data-annotations" @onclick="Collapse">DataAnnotations</NavLink>
-    <NavLink href="fluent-validation" @onclick="Collapse">FluentValidation</NavLink>
-    <NavLink href="custom-renderer" @onclick="Collapse">Custom renderer</NavLink>
-    <NavLink href="mcp-server" @onclick="Collapse">MCP Server</NavLink>
-</nav>
-
-@code {
-    // Collapsed only matters on a narrow screen, where the links fold under the toggle; on a wide one
-    // the stylesheet shows them regardless.
-    private bool _collapsed = true;
-
-    private void Toggle() => _collapsed = !_collapsed;
-
-    private void Collapse() => _collapsed = true;
-}
diff --git a/src/Utilities/Borm/Demo/Client/Pages/ArrayDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/ArrayDemo.razor
index 9115f26697a..196384ca714 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/ArrayDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/ArrayDemo.razor
@@ -1,35 +1,36 @@
 @page "/array"
 @implements IDisposable
 
-<PageTitle>Array / repeater</PageTitle>
+<PageTitle>Array / repeater · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Array / repeater</h1>
-    <p>
+    <p class="bb-subtitle">
         Array fields render a repeating editor with add, remove and reorder. Each item is a nested
         object validated like any other field, and its errors travel with it when rows move. The
         <em>Total</em> below is a <strong>computed field</strong>: the schema derives it from the lines,
         so no page code keeps it in sync.
     </p>
-    <p>
-        Try it with the keyboard. Adding a line puts the caret in it; removing one moves the caret to
-        the line that took its place — rather than dropping it on the page body, which is where a
-        button that deletes itself normally leaves you. An invoice needs at least one line, so the last
-        one cannot be removed; on a repeater that can be emptied, the caret goes to the add button.
-    </p>
 </div>
 
-<div class="demo-card">
-    <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Save invoice"
-              ShowErrorSummary="true" Disabled="_locked" />
+<div class="bb-note">
+    Try it with the keyboard. Adding a line puts the caret in it; removing one moves the caret to
+    the line that took its place — rather than dropping it on the page body, which is where a
+    button that deletes itself normally leaves you. An invoice needs at least one line, so the last
+    one cannot be removed; on a repeater that can be emptied, the caret goes to the add button.
 </div>
 
-<div class="demo-card" style="margin-top:1rem;">
-    <label style="display:flex;gap:.5rem;align-items:center;font-size:.9rem;">
-        <input type="checkbox" checked="@_locked" @onchange="@(e => _locked = e.Value is bool b && b)" />
-        Lock the invoice (<code>Disabled</code>)
-    </label>
-    <p style="color:#64748b;font-size:.82rem;margin:.4rem 0 0;">
+<div class="bb-demo">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live form</span>
+        <label class="bb-check">
+            <input type="checkbox" checked="@_locked" @onchange="@(e => _locked = e.Value is bool b && b)" />
+            <span>Lock the invoice (<code>Disabled</code>)</span>
+        </label>
+    </div>
+    <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Save invoice"
+              ShowErrorSummary="true" Disabled="_locked" />
+    <p class="demo-footnote">
         <code>Disabled</code> makes the form inoperable — every control and button, the repeater's
         buttons included. It is deliberately not the same as <code>ReadOnly</code>, which keeps the
         fields focusable and readable for a review screen.
@@ -38,12 +39,12 @@
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Saved ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Saved ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/BuilderDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/BuilderDemo.razor
index c04d03063f4..366b908f3a4 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/BuilderDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/BuilderDemo.razor
@@ -1,27 +1,25 @@
 @page "/builder"
 
-<PageTitle>Fluent builder + conditions</PageTitle>
+<PageTitle>Fluent builder + conditions · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Fluent builder + conditions</h1>
-    <p>Configure fields with a type-safe fluent API. The company fields below appear only when the account type is <em>Business</em>.</p>
+    <p class="bb-subtitle">Configure fields with a type-safe fluent API. The company fields below appear only when the account type is <em>Business</em>.</p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView Definition="_schema" Model="_model" OnValidSubmit="HandleSubmit" SubmitText="Sign up" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result">
-        <strong>Submitted ✓</strong>
-        <pre>@_json</pre>
-    </div>
+    <div class="bb-note bb-note-success demo-result"><strong>Submitted ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/CascadingOptionsDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/CascadingOptionsDemo.razor
index 6afcefa6fdc..58fd0e6ab94 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/CascadingOptionsDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/CascadingOptionsDemo.razor
@@ -2,11 +2,11 @@
 @implements IDisposable
 @inject DemoDirectory Directory
 
-<PageTitle>Async &amp; cascading options</PageTitle>
+<PageTitle>Async &amp; cascading options · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Async &amp; cascading options</h1>
-    <p>
+    <p class="bb-subtitle">
         Options do not have to be baked into the schema. <code>OptionsFrom</code> loads them on demand and
         declares which fields they depend on — pick a country and the city list reloads (dropping any
         selection that no longer exists). The company field below is <em>conditionally required</em> and
@@ -14,18 +14,19 @@
     </p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Save address" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Saved ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Saved ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/ComboboxAndTagsDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/ComboboxAndTagsDemo.razor
index f4c2777b544..ea6f5c37662 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/ComboboxAndTagsDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/ComboboxAndTagsDemo.razor
@@ -2,11 +2,11 @@
 @implements IDisposable
 @using Bit.Borm.Demo.Client.Forms
 
-<PageTitle>Combobox, tags &amp; change handlers</PageTitle>
+<PageTitle>Combobox, tags &amp; change handlers · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Combobox, tags &amp; change handlers</h1>
-    <p>
+    <p class="bb-subtitle">
         Three things a generated form needs once it stops being a demo. A dropdown with two hundred
         countries in it should be typed into, not scrolled. A list of labels should be chips, not a
         repeater with reorder buttons on every word. And "when the country changes, clear the city" is
@@ -15,18 +15,19 @@
     </p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Save profile" ShowErrorSummary="true" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Saved ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Saved ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/CompositionDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/CompositionDemo.razor
index 233ab716e78..08d9a57a6c9 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/CompositionDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/CompositionDemo.razor
@@ -2,11 +2,11 @@
 @implements IDisposable
 @inject DemoDirectory Directory
 
-<PageTitle>Groups, custom layout &amp; resilience</PageTitle>
+<PageTitle>Groups, custom layout &amp; resilience · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Groups, custom layout &amp; resilience</h1>
-    <p>
+    <p class="bb-subtitle">
         Three things a form needs once it stops being a demo. Fields that cluster into named
         <code>&lt;fieldset&gt;</code>s a screen reader announces; a layout the page owns, built from
         <code>&lt;BormField&gt;</code>; and a dropdown whose service is allowed to fall over
@@ -15,10 +15,10 @@
     </p>
 </div>
 
-<div class="demo-split">
-    <div class="demo-card">
-        <h2 style="margin-top:0;font-size:1.05rem;">Grouped, rendered whole</h2>
-        <p style="color:#64748b;font-size:.85rem;">
+<div class="bb-split bb-page-wide">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Grouped, rendered whole</span></div>
+        <p class="bb-card-desc">
             <code>[Display(GroupName = "…")]</code> — or <code>f.Group("…")</code> — clusters a run of
             fields into one labelled fieldset.
         </p>
@@ -27,67 +27,69 @@
         <BormView State="_grouped" ShowSubmitButton="false" IdPrefix="grouped_" />
     </div>
 
-    <div class="demo-card">
-        <h2 style="margin-top:0;font-size:1.05rem;">The same schema, the page's layout</h2>
-        <p style="color:#64748b;font-size:.85rem;">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">The same schema, the page's layout</span></div>
+        <p class="bb-card-desc">
             Placed one field at a time, interleaved with the page's own markup. Labels, validation,
             conditions and the <code>aria-*</code> wiring all still come from the schema.
         </p>
 
-        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;">
-            <BormField State="_custom" Name="ReporterName" />
-            <BormField State="_custom" Name="ReporterEmail" />
-        </div>
-
-        <p style="margin:1rem 0 .5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;">
-            Routing
-        </p>
-        <BormField State="_custom" Name="Team" />
-
-        <div style="display:flex;gap:.5rem;align-items:flex-end;">
-            <div style="flex:1;"><BormField State="_custom" Name="Component" /></div>
-            <button type="button" class="bit-borm-btn bit-borm-btn--sm" @onclick="RetryComponents">Retry</button>
-        </div>
-
-        <label style="display:flex;gap:.4rem;align-items:center;font-size:.82rem;color:#475569;margin-top:.6rem;">
-            <input type="checkbox" checked="@_breakTheService" @onchange="ToggleService" />
-            Break the component service
-        </label>
-        @if (_lastFailure is not null)
-        {
-            <p style="font-size:.8rem;color:#b45309;margin:.4rem 0 0;">
-                Logged from <code>OnOptionsLoadFailed</code>: @_lastFailure
-            </p>
-        }
-
-        <hr style="border:none;border-top:1px solid #e2e8f0;margin:1.25rem 0;" />
-
-        @* AsSearch(): the same string value, but the browser gives it a clear affordance, a search key
-           on the on-screen keyboard and history from previous searches. *@
-        <BormField State="_custom" Name="RelatedTicket" />
-        <div style="margin-top:.75rem;"><BormField State="_custom" Name="Subject" /></div>
-        <div style="margin-top:.75rem;"><BormField State="_custom" Name="Details" /></div>
-
-        <div class="bit-borm-form__actions">
-            <button type="button" class="bit-borm-btn bit-borm-btn--primary" @onclick="Submit">Raise ticket</button>
-            <button type="button" class="bit-borm-btn" disabled="@(!_custom.IsDirty("Subject"))" @onclick='() => _custom.ResetField("Subject")'>
-                Undo subject
-            </button>
-            <span style="align-self:center;font-size:.82rem;color:#64748b;">
-                @(_custom.IsFormDirty ? $"{_custom.DirtyFields.Count} unsaved change(s)" : "No unsaved changes")
-            </span>
+        @* The theme's custom properties are declared on .bit-borm-form - the element BormView renders -
+           so a layout of the page's own carries the class to dress its fields the same way. *@
+        <div class="bit-borm-form demo-own-layout">
+            <div class="demo-two-up">
+                <BormField State="_custom" Name="ReporterName" />
+                <BormField State="_custom" Name="ReporterEmail" />
+            </div>
+
+            <p class="bb-overline">Routing</p>
+            <BormField State="_custom" Name="Team" />
+
+            <BormField State="_custom" Name="Component" />
+
+            <div class="demo-service">
+                <button type="button" class="bit-borm-btn bit-borm-btn--sm" @onclick="RetryComponents">Retry</button>
+                <label class="bb-check">
+                    <input type="checkbox" checked="@_breakTheService" @onchange="ToggleService" />
+                    Break the component service
+                </label>
+            </div>
+            @if (_lastFailure is not null)
+            {
+                <p class="demo-failure">
+                    Logged from <code>OnOptionsLoadFailed</code>: @_lastFailure
+                </p>
+            }
+
+            <hr />
+
+            @* AsSearch(): the same string value, but the browser gives it a clear affordance, a search key
+               on the on-screen keyboard and history from previous searches. *@
+            <BormField State="_custom" Name="RelatedTicket" />
+            <BormField State="_custom" Name="Subject" />
+            <BormField State="_custom" Name="Details" />
+
+            <div class="bit-borm-form__actions">
+                <button type="button" class="bit-borm-btn bit-borm-btn--primary" @onclick="Submit">Raise ticket</button>
+                <button type="button" class="bit-borm-btn" disabled="@(!_custom.IsDirty("Subject"))" @onclick='() => _custom.ResetField("Subject")'>
+                    Undo subject
+                </button>
+                <span class="bb-soft">
+                    @(_custom.IsFormDirty ? $"{_custom.DirtyFields.Count} unsaved change(s)" : "No unsaved changes")
+                </span>
+            </div>
         </div>
     </div>
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Raised ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Raised ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
@@ -118,12 +120,15 @@ var state = new BormState(schema, new BormModelDataAccessor(model));
 state.OptionsLoadFailed += (path, ex) => logger.LogWarning(ex, "Options for {Path} failed", path);
 
 // 3. The page owns the layout. BormField places one field wherever you want it while the
-//    schema keeps the label, the rules, the conditions and the accessibility wiring.
-<div style="display:grid;grid-template-columns:1fr 1fr;">
-    <BormField State="state" Name="ReporterName" />
-    <BormField State="state" Name="ReporterEmail" />
+//    schema keeps the label, the rules, the conditions and the accessibility wiring. The theme's
+//    custom properties live on .bit-borm-form, so the page's own wrapper carries the class.
+<div class="bit-borm-form">
+    <div style="display:grid;grid-template-columns:1fr 1fr;">
+        <BormField State="state" Name="ReporterName" />
+        <BormField State="state" Name="ReporterEmail" />
+    </div>
+    <BormField State="state" Name="Subject" />
 </div>
-<BormField State="state" Name="Subject" />
 
 // 4. Per-field undo, and dirtiness that is a comparison rather than a flag: typing a character and
 //    deleting it again leaves the field clean, so this button switches itself off.
diff --git a/src/Utilities/Borm/Demo/Client/Pages/CustomRendererDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/CustomRendererDemo.razor
index 4d97a9cec43..0b2fe829a75 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/CustomRendererDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/CustomRendererDemo.razor
@@ -1,24 +1,25 @@
 @page "/custom-renderer"
 
-<PageTitle>Custom renderer</PageTitle>
+<PageTitle>Custom renderer · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Custom renderer</h1>
-    <p>Renderers are pluggable. The <em>rating</em> field below is drawn by a custom star-rating component registered against the key <code>"rating"</code> — the engine, validation and state are unchanged.</p>
+    <p class="bb-subtitle">Renderers are pluggable. The <em>rating</em> field below is drawn by a custom star-rating component registered against the key <code>"rating"</code> — the engine, validation and state are unchanged.</p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView Definition="_schema" Data="_data" OnValidSubmit="HandleSubmit" SubmitText="Send feedback" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Thanks ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Thanks ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/DataAnnotationsDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/DataAnnotationsDemo.razor
index 40a85431fa2..2dfad5ab08f 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/DataAnnotationsDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/DataAnnotationsDemo.razor
@@ -3,35 +3,36 @@
 @using Bit.Borm.Demo.Client.Forms
 @using FluentValidation
 
-<PageTitle>DataAnnotations &amp; IValidatableObject</PageTitle>
+<PageTitle>DataAnnotations &amp; IValidatableObject · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>DataAnnotations &amp; IValidatableObject</h1>
-    <p>
+    <p class="bb-subtitle">
         The schema generator already reads the attributes it can turn into field rules, so
         <code>[Required]</code> and <code>[Range]</code> need nothing extra. What no attribute can
         express is a rule that reads more than one property — check out after check in, guests within
         the room's capacity — and in .NET that is <code>IValidatableObject</code>.
         <code>UseDataAnnotations()</code> runs it, exactly as <code>UseFluentValidation()</code> runs a
         FluentValidation validator — and the two <em>compose</em>, so a model that carries both gets
-        both. The rule below about a reference for large bookings is a FluentValidation rule sitting
+        both. The rule about single spaces in the guest's name is a FluentValidation rule sitting
         alongside the model's own; a complaint the two layers would word identically on the same field
         is still read once.
     </p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Book the room" ShowErrorSummary="true" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Booked ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Booked ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/DependentFieldsDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/DependentFieldsDemo.razor
index 689d691aed9..7cc6e8f790b 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/DependentFieldsDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/DependentFieldsDemo.razor
@@ -1,11 +1,11 @@
 @page "/dependent-fields"
 @implements IDisposable
 
-<PageTitle>Dependent fields</PageTitle>
+<PageTitle>Dependent fields · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Dependent fields</h1>
-    <p>
+    <p class="bb-subtitle">
         A rule that reads two values lives on one of them, so only one of the two changes ever runs it.
         Get the confirmation wrong, then fix the <em>first</em> box to agree with what you typed — the
         complaint underneath the confirmation is now wrong, and without <code>RevalidateOn</code> it
@@ -14,17 +14,31 @@
     </p>
 </div>
 
-<div class="demo-card">
-    <div class="demo-toolbar">
-        <label class="demo-toolbar__check">
-            <input type="checkbox" checked="@_wired" @onchange="ToggleWiring" />
-            Revalidate dependents
-        </label>
+<div class="bb-note">
+    Try each of these:
+    <ol class="bb-detail-list">
+        <li>Type an email, then a different one below it, then <em>correct the first</em>.</li>
+        <li>Set a return date before the departure date, then move the <em>departure</em> back.</li>
+        <li>Book fewer rooms than travellers, then reduce the <em>travellers</em>.</li>
+        <li>
+            Tick the hire car, give it some days, then untick it — the estimate drops the car again,
+            because clearing a hidden field is a change like any other.
+        </li>
+    </ol>
+</div>
+
+<div class="bb-demo">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live form</span>
         <span class="demo-hint">
             @(_wired
                 ? "As shipped. Fixing either side settles both."
                 : "Turned off, so you can watch the stale message the declaration exists to prevent.")
         </span>
+        <label class="bb-check">
+            <input type="checkbox" checked="@_wired" @onchange="ToggleWiring" />
+            Revalidate dependents
+        </label>
     </div>
 
     <BormView State="_state"
@@ -34,32 +48,16 @@
               SubmitText="Request trip" />
 </div>
 
-<p class="demo-status">
-    Try each of these:
-    <br />1. Type an email, then a different one below it, then <em>correct the first</em>.
-    <br />2. Set a return date before the departure date, then move the <em>departure</em> back.
-    <br />3. Book fewer rooms than travellers, then reduce the <em>travellers</em>.
-    <br />4. Tick the hire car, give it some days, then untick it — the estimate drops the car again,
-    because clearing a hidden field is a change like any other.
-</p>
-
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Trip requested ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Trip requested ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
-<style>
-    .demo-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; font-size: .85rem; color: #475569; }
-    .demo-toolbar__check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
-    .demo-hint { color: #64748b; }
-    .demo-status { max-width: 760px; margin-top: 1rem; font-size: .85rem; color: #475569; line-height: 1.7; }
-</style>
-
 @code {
     private const string Source =
 """
diff --git a/src/Utilities/Borm/Demo/Client/Pages/FieldPolishDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/FieldPolishDemo.razor
index 20f427c365a..666e1789a45 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/FieldPolishDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/FieldPolishDemo.razor
@@ -1,11 +1,11 @@
 @page "/field-polish"
 @implements IDisposable
 
-<PageTitle>Affixes, counters &amp; live updates</PageTitle>
+<PageTitle>Affixes, counters &amp; live updates · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Affixes, counters &amp; live updates</h1>
-    <p>
+    <p class="bb-subtitle">
         The details that separate a generated form from a designed one. A price field wearing a currency
         symbol; a summary that counts down to its limit as you type; a section heading that belongs to
         the schema rather than to the page around it. The preview on the right is driven by
@@ -14,23 +14,24 @@
     </p>
 </div>
 
-<div class="demo-split">
-    <div class="demo-card">
+<div class="bb-split bb-page-wide">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
         <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Publish listing" />
     </div>
 
-    <div class="demo-card">
-        <h2 style="margin-top:0;font-size:1.05rem;">Live preview</h2>
-        <p style="color:#64748b;font-size:.85rem;">Updates as you type, straight from the model.</p>
-        <div style="border:1px solid #e2e8f0;border-radius:10px;padding:1rem;">
+    <div class="bb-demo demo-preview">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live preview</span></div>
+        <p class="bb-card-desc">Updates as you type, straight from the model.</p>
+        <div class="demo-listing">
             <strong>@(string.IsNullOrWhiteSpace(_model.Title) ? "Untitled listing" : _model.Title)</strong>
-            <p style="color:#475569;font-size:.85rem;margin:.35rem 0;">
-                @(string.IsNullOrWhiteSpace(_model.Summary) ? "No summary yet." : _model.Summary)
-            </p>
-            <div style="font-size:.85rem;color:#0f172a;">
-                @_model.Price.ToString("C0") / month · @_model.FloorArea m² · @(_model.City is "" ? "—" : _model.City)
+            <p>@(string.IsNullOrWhiteSpace(_model.Summary) ? "No summary yet." : _model.Summary)</p>
+            <div class="demo-listing__meta">
+                @* The euro the price field's prefix shows: the app runs with invariant globalization, whose
+                   currency symbol is the generic ¤. *@
+                €@_model.Price.ToString("N0") / month · @_model.FloorArea m² · @(_model.City is "" ? "—" : _model.City)
             </div>
-            <div style="font-size:.8rem;color:@(_model.Published ? "#059669" : "#94a3b8");margin-top:.4rem;">
+            <div class="demo-listing__state @(_model.Published ? "demo-listing__state--published" : null)">
                 @(_model.Published ? "● Published" : "○ Draft")
             </div>
         </div>
@@ -39,12 +40,12 @@
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Published ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Published ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/FileUploadDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/FileUploadDemo.razor
index 6dcd4e1be80..ea62e1bdcd2 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/FileUploadDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/FileUploadDemo.razor
@@ -1,11 +1,11 @@
 @page "/files"
 @implements IDisposable
 
-<PageTitle>File upload</PageTitle>
+<PageTitle>File upload · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>File upload</h1>
-    <p>
+    <p class="bb-subtitle">
         <code>BormFieldType.File</code> renders Blazor's <code>InputFile</code>, keeps the chosen
         <code>IBrowserFile</code>s on the model, and lists them back with their sizes. The browser's
         <code>accept</code> attribute is only a filter in the picker, so size and type are validated again
@@ -13,18 +13,19 @@
     </p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Upload" ShowErrorSummary="true" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Received ✓</strong> <pre>@_summary</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Received ✓</strong><pre>@_summary</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/FluentValidationDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/FluentValidationDemo.razor
index 07f0fb0cf14..1c3a80588ec 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/FluentValidationDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/FluentValidationDemo.razor
@@ -1,25 +1,26 @@
 @page "/fluent-validation"
 @inject global::FluentValidation.IValidator<JobApplication> Validator
 
-<PageTitle>FluentValidation</PageTitle>
+<PageTitle>FluentValidation · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>FluentValidation</h1>
-    <p>Reuse your existing <code>AbstractValidator&lt;T&gt;</code>. Borm runs it against the bound model and maps each failure onto its field by property path — including cross-field rules. Try entering 5+ years of experience and leaving the motivation short.</p>
+    <p class="bb-subtitle">Reuse your existing <code>AbstractValidator&lt;T&gt;</code>. Borm runs it against the bound model and maps each failure onto its field by property path — including cross-field rules. Try entering 5+ years of experience and leaving the motivation short.</p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Apply" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Application received ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Application received ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Borm/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..5fcadcc2560
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,147 @@
+@page "/getting-started"
+@using System.ComponentModel.DataAnnotations
+
+<PageTitle>Getting started · Borm</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package, one service registration and one stylesheet - then an annotated model becomes a
+        working form: labelled, validated, accessible, and handed back to you populated once it is valid.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        <code>Bit.Borm</code> is the whole engine - the schema, the builders, JSON Schema import and export,
+        the state, the rules, the components and the stylesheet - with no dependency beyond Blazor itself. It
+        targets .NET 8, 9 and 10. FluentValidation support is a separate, optional package.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.Borm
+<span class="c"># only if your models already have FluentValidation validators</span>
+dotnet add package Bit.Borm.FluentValidation</pre>
+    <p class="bb-card-desc">Every public type lives in one namespace, prefixed <code>Borm</code>, so one line in <code>_Imports.razor</code> brings them all into scope:</p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.Borm</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
+    <p class="bb-card-desc">
+        <code>AddBorm()</code> registers the field renderer registry - the map from a field type to the
+        component that draws it. Register it in every container that renders a form: in a Blazor Web App that
+        is both the server and the client project, because every page is prerendered on the server first.
+    </p>
+    <pre class="bb-code"><span class="c">// Program.cs - in every project that renders a form</span>
+builder.Services.AddBorm();</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Link the stylesheet</h3>
+    <p class="bb-card-desc">
+        It is not injected for you. Without it a form still works, as plain HTML; the stylesheet adds the
+        theme, the grid and the error colours. There is no script to add - Borm has no JavaScript at all.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">link</span> rel=<span class="s">"stylesheet"</span> href=<span class="s">"_content/Bit.Borm/bit-borm.css"</span> /&gt;</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A first form</h3>
+    <p class="bb-card-desc">
+        Annotate a plain model and let the schema generator do the work. <code>BormView</code> builds a
+        <code>BormState</code> for the definition and the model, renders every field, and calls
+        <code>OnValidSubmit</code> once the submit passes validation.
+    </p>
+    <pre class="bb-code"><span class="k">public class</span> Contact
+{
+    [Required, MaxLength(80)]
+    <span class="k">public string</span> Name { <span class="k">get</span>; <span class="k">set</span>; } = <span class="s">""</span>;
+
+    [Required, EmailAddress]
+    <span class="k">public string</span> Email { <span class="k">get</span>; <span class="k">set</span>; } = <span class="s">""</span>;
+
+    [Range(18, 120)]
+    <span class="k">public int</span> Age { <span class="k">get</span>; <span class="k">set</span>; }
+}</pre>
+    <pre class="bb-code">&lt;<span class="k">BormView</span> Definition=<span class="s">"_definition"</span>
+          Model=<span class="s">"_model"</span>
+          OnValidSubmit=<span class="s">"HandleValidSubmit"</span> /&gt;
+
+<span class="k">@@code</span> {
+    <span class="k">private readonly</span> BormDefinition _definition = BormSchemaGenerator.Generate&lt;Contact&gt;();
+    <span class="k">private readonly</span> Contact _model = <span class="k">new</span>();
+
+    <span class="k">private</span> Task HandleValidSubmit(BormState state)
+    {
+        <span class="c">// _model is populated and valid here</span>
+        <span class="k">return</span> Task.CompletedTask;
+    }
+}</pre>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <BormView Definition="_definition" Model="_model" OnValidSubmit="HandleValidSubmit" />
+        @if (_submitted is not null)
+        {
+            <div class="bb-note bb-note-success demo-result"><strong>Valid ✓</strong><pre>@_submitted</pre></div>
+        }
+    </div>
+
+    <div class="bb-note">
+        Supply a <code>State</code> instead of a <code>Definition</code> when the page wants to hold the state
+        itself - to wire up a validator, read its dirty fields or drive it from code. Every DOM id the form
+        renders starts with <code>borm_</code> and is derived from the field's path, so two forms on one page
+        that share field names each need their own <code>IdPrefix</code>.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Hosting models</h3>
+    <p class="bb-card-desc">
+        Borm has no JavaScript and no browser-only API, so it runs the same way under every Blazor hosting model.
+        A form prerenders as plain HTML and becomes interactive once the page does - give the page an interactive
+        render mode, since a form in static server rendering cannot respond to input.
+    </p>
+    <ul class="bb-detail-list">
+        <li><strong>Blazor WebAssembly</strong> - <code>AddBorm()</code> in <code>Program.cs</code>, the stylesheet in <code>index.html</code>.</li>
+        <li><strong>Blazor Server</strong> - the same, in the server's <code>Program.cs</code> and <code>App.razor</code>. A field that updates on input sends every keystroke over the circuit, so prefer the default update-on-change, or a debounce, on a busy form.</li>
+        <li><strong>Blazor Web App</strong> - <code>AddBorm()</code> in both the server and the client project, so both containers resolve the renderer registry.</li>
+        <li><strong>Blazor Hybrid</strong> - <code>AddBorm()</code> in <code>MauiProgram.cs</code>, the stylesheet in <code>wwwroot/index.html</code>.</li>
+    </ul>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Where to go next</h3>
+    <ul class="bb-detail-list">
+        <li><a href="quickstart">From a C# type</a> - what the generator reads from a model and its attributes.</li>
+        <li><a href="builder">Fluent builder + conditions</a> - typed, refactor-safe field configuration, and fields that show and hide.</li>
+        <li><a href="json-schema">JSON Schema</a> - a form from a document the server owns, and back out again.</li>
+        <li><a href="validation">Validation modes</a> - when fields revalidate, the error summary, and async rules.</li>
+        <li><a href="mcp-server">MCP server</a> - point an AI agent at this site and it reads the library instead of guessing.</li>
+    </ul>
+</div>
+
+@code {
+    private readonly BormDefinition _definition = BormSchemaGenerator.Generate<Contact>();
+    private readonly Contact _model = new();
+    private string? _submitted;
+
+    private Task HandleValidSubmit(BormState state)
+    {
+        _submitted = $"Name: {_model.Name}{Environment.NewLine}Email: {_model.Email}{Environment.NewLine}Age: {_model.Age}";
+        return Task.CompletedTask;
+    }
+
+    /// <summary>The model of the guide's first form, exactly as the README writes it.</summary>
+    public sealed class Contact
+    {
+        [Required, MaxLength(80)]
+        public string Name { get; set; } = "";
+
+        [Required, EmailAddress]
+        public string Email { get; set; } = "";
+
+        [Range(18, 120)]
+        public int Age { get; set; }
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Pages/Home.razor b/src/Utilities/Borm/Demo/Client/Pages/Home.razor
index 76a24546fc3..4c1e8cb683a 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/Home.razor
@@ -1,30 +1,329 @@
 @page "/"
+@layout MainLayout
 
-<PageTitle>bit Borm</PageTitle>
+<PageTitle>Borm - schema-driven forms for Blazor</PageTitle>
 
-<div class="demo-intro">
-    <h1>Borm</h1>
-    <p>A schema-driven form engine for Blazor. Define a form once — from a C# type or JSON Schema — and Borm renders it, validates it, and manages its state.</p>
-</div>
+@* The landing page: hero → proof strip → capability grid → code walkthrough → comparison with a
+   hand-written EditForm → persona tiles → FAQ → final call to action. Everything else on the site is
+   a documentation page under DocsLayout. The hero's sample is a live form rather than a picture of
+   one: the schema in the window is the one rendered under it. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Blazor forms, <br /><span class="bb-hero-accent">described once.</span></h1>
+            <p class="bb-hero-sub">
+                Describe a form from a C# type, with a fluent builder or as a JSON Schema document - and
+                Borm renders it, validates it and keeps its state: conditions, computed values, cascading
+                options, wizards and repeaters included. Every decision is made in C#, and there is no
+                JavaScript at all.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Borm</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="quickstart" class="btn btn-secondary bb-btn-lg">Live demos</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The sample, framed as a window: the schema on top, and the form it renders underneath -
+           live, so the first thing a visitor can do here is tick the box and watch a field appear. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">ContactUs.razor</span>
+                </div>
+                <pre class="bb-code">BormBuilder.For&lt;<span class="k">Contact</span>&gt;()
+    .Title(<span class="s">"Contact us"</span>)
+    .Field(x =&gt; x.Name, f =&gt; f.Required().Placeholder(<span class="s">"Your name"</span>))
+    .Field(x =&gt; x.Email, f =&gt; f.AsEmail().Required().Trim())
+    .Field(x =&gt; x.IsBusiness, f =&gt; f.Label(<span class="s">"I'm asking for a company"</span>))
+    .Field(x =&gt; x.Company, f =&gt; f
+        .VisibleWhen(nameof(Contact.IsBusiness), BormConditionOperator.IsTrue))
+    .Build();</pre>
+                <div class="home-hero-live">
+                    <BormView Definition="_hero" Model="_contact" OnValidSubmit="Send" SubmitText="Send" IdPrefix="hero_" />
+                    @if (_sent)
+                    {
+                        <p class="home-hero-sent" role="status">Valid ✓ - <code>OnValidSubmit</code> has a populated <code>Contact</code>.</p>
+                    }
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>Three ways in</strong><span>a C# type, a fluent builder or a JSON Schema document</span></div>
+        <div><strong>Decided in C#</strong><span>rules, conditions and computed values - no JavaScript</span></div>
+        <div><strong>Accessible by default</strong><span>real labels, <code>aria-*</code>, focus that goes where the error is</span></div>
+        <div><strong>Every hosting model</strong><span>WebAssembly, Server, Web App and Hybrid</span></div>
+    </section>
+
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>Everything a form needs once it stops being a demo</h2>
+        <p class="bb-section-sub">
+            The schema is plain C# - a <code>BormDefinition</code> you can generate, build, import, check, tailor
+            and export with no UI at all - and the state, <code>BormState</code>, runs the rules and walks the
+            wizard without a browser. The components only draw what it decided.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Three ways to define a form</h3>
+                <p class="bb-card-desc">
+                    Generate one from a model and its DataAnnotations, build one with typed expressions
+                    (<code>x =&gt; x.Address.City</code>), or import a JSON Schema document - and export any of them back out.
+                </p>
+                <a href="quickstart" class="btn btn-outline">From a C# type →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Validation that runs when you say</h3>
+                <p class="bb-card-desc">
+                    Built-in, custom, cross-field and async rules, <code>IValidatableObject</code> and FluentValidation -
+                    on submit, blur or change, separately before and after the first submit.
+                </p>
+                <a href="validation" class="btn btn-outline">Validation modes →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Conditional fields</h3>
+                <p class="bb-card-desc">
+                    Show, hide, disable, lock or require a field from other answers - per row inside a repeater - and
+                    clear what the user abandoned, so it never reaches your model.
+                </p>
+                <a href="builder" class="btn btn-outline">Fluent builder + conditions →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Wizards and repeaters</h3>
+                <p class="bb-card-desc">
+                    Steps that validate before advancing and a clickable stepper; rows that add, remove and reorder,
+                    with errors and the caret that follow their row.
+                </p>
+                <a href="wizard" class="btn btn-outline">Multi-step wizard →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Data that follows the form</h3>
+                <p class="bb-card-desc">
+                    Computed values, options loaded on demand and reloaded when what they depend on changes, change
+                    handlers, dirty tracking, snapshots and resets onto a stored record.
+                </p>
+                <a href="cascading" class="btn btn-outline">Async &amp; cascading options →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Yours to restyle and extend</h3>
+                <p class="bb-card-desc">
+                    Every colour is a <code>--bit-borm-*</code> custom property - this site re-tints them to its own
+                    theme - every string goes through <code>IBormMessageProvider</code>, and any control can be replaced.
+                </p>
+                <a href="custom-renderer" class="btn btn-outline">Custom renderer →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== Code walkthrough ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Describe the form</h3>
+                    <p>
+                        A field is configured where it is named, with the property's own type: rename the property
+                        and the form follows. Conditions, rules and layout live in the same place.
+                    </p>
+                    <a href="builder">Fluent builder →</a>
+                </div>
+                <pre class="bb-code"><span class="k">var</span> schema = BormBuilder.For&lt;AccountSignup&gt;()
+    .Field(x =&gt; x.FullName, f =&gt; f.Required().MinLength(2))
+    .Field(x =&gt; x.AccountKind, f =&gt; f.AsRadio())
+    .Field(x =&gt; x.CompanyName, f =&gt; f
+        .Required(<span class="s">"Company name is required for business accounts."</span>)
+        .VisibleWhen(<span class="s">"AccountKind"</span>, BormConditionOperator.Equals, <span class="s">"Business"</span>))
+    .Build();</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Render it</h3>
+                    <p>
+                        <code>BormView</code> draws every field, the error summary and the buttons, and calls you back
+                        only once the submit is valid. Want the layout yourself? Place fields one at a time with
+                        <code>BormField</code>.
+                    </p>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">BormView</span> Definition=<span class="s">"schema"</span> Model=<span class="s">"_model"</span>
+          ShowErrorSummary=<span class="s">"true"</span> OnValidSubmit=<span class="s">"Save"</span> /&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Hold the state</h3>
+                    <p>
+                        Stash a draft and put it back as the new baseline, check one answer without judging the whole
+                        form, read everything known about a field - <code>BormState</code> is the form, minus the drawing.
+                    </p>
+                    <a href="state-api">Editing an existing record →</a>
+                </div>
+                <pre class="bb-code"><span class="k">var</span> state = <span class="k">new</span> BormState(schema, <span class="k">new</span> BormModelDataAccessor(model));
+
+<span class="k">var</span> draft = state.Snapshot();                  <span class="c">// every path the schema binds, with its value</span>
+state.Reset(draft);                            <span class="c">// written back, and made the new baseline</span>
+<span class="k">await</span> state.ValidateFieldAsync(<span class="s">"Customer"</span>);    <span class="c">// one answer, not the whole form</span>
+<span class="k">var</span> field = state.GetFieldState(<span class="s">"Customer"</span>);   <span class="c">// IsDirty, IsTouched, Error, Messages</span></pre>
+            </div>
+        </div>
+    </section>
 
-<div class="demo-card">
-    <h2 style="margin-top:0">What's in the box</h2>
-    <ul style="line-height:1.9; color:#334155">
-        <li><strong>Schema from C# types</strong> — zero-config generation via reflection + DataAnnotations.</li>
-        <li><strong>Schema from JSON Schema</strong> — <code>$ref</code>, <code>allOf</code>, <code>if</code>/<code>then</code> and <code>dependentRequired</code> included; export any form back to JSON, conditions and steps intact.</li>
-        <li><strong>Fluent builder</strong> — type-safe, expression-based field configuration, including nested members, object groups and arrays.</li>
-        <li><strong>Validation</strong> — built-in rules, custom sync/async rules, cross-field and form-level rules, <code>IValidatableObject</code>, and FluentValidation through the <code>Bit.Borm.FluentValidation</code> package.</li>
-        <li><strong>Validation modes</strong> — decide when fields revalidate, before and after the first submit.</li>
-        <li><strong>Conditional behaviour</strong> — show, hide, disable or conditionally require fields, and clear hidden values.</li>
-        <li><strong>Async &amp; cascading options</strong> — load choices from a service and reload them when a dependency changes.</li>
-        <li><strong>Multi-step wizards</strong> — per-step validation, conditional steps and a clickable stepper.</li>
-        <li><strong>Array / repeater fields</strong> — add, insert, remove and reorder, with errors that follow their item.</li>
-        <li><strong>File upload</strong> — <code>IBrowserFile</code> binding with size and type rules.</li>
-        <li><strong>Accessible by default</strong> — labelled controls, <code>aria-*</code> wiring, and an error summary that takes focus and links to each field.</li>
-        <li><strong>Pluggable renderers</strong> — dependency-free HTML by default; register your own widgets.</li>
-    </ul>
-    <p style="color:#475569">
-        Install it with <code>dotnet add package Bit.Borm</code>, call <code>builder.Services.AddBorm()</code> and link
-        <code>_content/Bit.Borm/bit-borm.css</code> - then pick a demo from the sidebar to see each capability in action.
-    </p>
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not write the EditForm by hand?</h2>
+        <p class="bb-section-sub">
+            Blazor's <code>EditForm</code> gives you validation plumbing and leaves every field, every condition and
+            every step to markup you write and keep in step. Borm moves all of that into a schema.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A hand-written EditForm compared with Borm">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>Hand-written EditForm</th><th>Borm</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Field markup</td><td>A label, an input and a message written per field</td><td>Rendered from the schema, labels and <code>aria-*</code> included</td></tr>
+                    <tr><td>Conditional fields</td><td><code>@@if</code> blocks, and clearing what was hidden by hand</td><td><code>VisibleWhen</code>, <code>RequiredWhen</code>, <code>ClearOnHide()</code></td></tr>
+                    <tr><td>Cross-field rules</td><td>Revalidating the other field yourself</td><td><code>RevalidateOn(...)</code>, and <code>[Compare]</code> wired automatically</td></tr>
+                    <tr><td>Wizards and repeaters</td><td>Built from scratch</td><td><code>Step(...)</code> and <code>Array(...)</code>, with focus management</td></tr>
+                    <tr><td>A schema from the server</td><td>Not supported</td><td>JSON Schema import and export</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Borm?</h3>
+                <p class="bb-card-desc">Install, register, link the stylesheet - and render a validated form from an annotated model.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Does the server own the schema?</h3>
+                <p class="bb-card-desc">Paste a JSON Schema document into the live editor and watch the form it becomes - then export it back.</p>
+                <a href="json-schema" class="btn btn-outline">Open the JSON Schema editor →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is there any JavaScript?</summary>
+                <p>
+                    None. Every decision - validation, conditions, computed values, the wizard's position - is made
+                    in C#, and the renderers are plain HTML elements, so there is no script to ship or to load.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    Any interactive one, on .NET 8, 9 and 10: WebAssembly, Server, Auto and Hybrid. A form prerenders
+                    as plain HTML and becomes interactive with the page; in static server rendering it cannot respond to
+                    input, so give its page an interactive render mode.
+                </p>
+            </details>
+            <details>
+                <summary>Can I keep my DataAnnotations and FluentValidation validators?</summary>
+                <p>
+                    Yes. The generator turns attributes into field rules, <code>UseDataAnnotations()</code> runs a
+                    model's <code>IValidatableObject</code>, and <code>UseFluentValidation()</code> from
+                    <code>Bit.Borm.FluentValidation</code> runs an <code>AbstractValidator&lt;T&gt;</code> - and the two compose.
+                </p>
+            </details>
+            <details>
+                <summary>Can I lay the form out myself?</summary>
+                <p>
+                    Yes - <code>Columns</code> and <code>ColumnSpan</code> for a grid, named groups for fieldsets, and
+                    <code>BormField</code> to place one field at a time in markup of your own, keeping its label, rules and
+                    accessibility wiring. Any control can be replaced through the renderer registry.
+                </p>
+            </details>
+            <details>
+                <summary>Is it trimming or AOT safe?</summary>
+                <p>
+                    No. Generating a schema reads a model's properties by reflection, so <code>Bit.Borm</code> is not
+                    marked as trimmable: a trimmed app keeps it whole, and the models it binds to are kept by the app that
+                    declares them.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Describe it once</h2>
+        <p class="bb-section-sub">One package, one service and one stylesheet - and a model becomes a form.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Borm</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="quickstart" class="btn btn-secondary bb-btn-lg">Browse the demos</a>
+        </div>
+    </section>
 </div>
+
+@code {
+    private readonly Contact _contact = new();
+    private bool _sent;
+
+    private readonly BormDefinition _hero = BormBuilder.For<Contact>()
+        .Title("Contact us")
+        .Field(x => x.Name, f => f.Required().Placeholder("Your name"))
+        .Field(x => x.Email, f => f.AsEmail().Required().Trim())
+        .Field(x => x.IsBusiness, f => f.Label("I'm asking for a company"))
+        .Field(x => x.Company, f => f
+            .VisibleWhen(nameof(Contact.IsBusiness), BormConditionOperator.IsTrue))
+        .Build();
+
+    private Task Send(BormState state)
+    {
+        _sent = true;
+        return Task.CompletedTask;
+    }
+
+    // The hero's model: the README's opening example.
+    public sealed class Contact
+    {
+        public string Name { get; set; } = "";
+        public string Email { get; set; } = "";
+        public bool IsBusiness { get; set; }
+        public string? Company { get; set; }
+    }
+}
diff --git a/src/Utilities/Borm/Demo/Client/Pages/JsonSchemaDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/JsonSchemaDemo.razor
index a226887ce37..4cf4c288009 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/JsonSchemaDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/JsonSchemaDemo.razor
@@ -1,10 +1,10 @@
 @page "/json-schema"
 
-<PageTitle>JSON Schema</PageTitle>
+<PageTitle>JSON Schema · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>JSON Schema</h1>
-    <p>
+    <p class="bb-subtitle">
         Edit the JSON Schema on the left and the form regenerates on the right — no compiled model
         required. Alongside the standard keywords (<code>$ref</code>, <code>allOf</code>,
         <code>if</code>/<code>then</code>, <code>dependentRequired</code>, <code>enum</code>,
@@ -14,22 +14,24 @@
     </p>
 </div>
 
-<div class="demo-split">
-    <div>
-        <textarea @bind="_json" @bind:event="oninput" spellcheck="false" aria-label="JSON Schema"></textarea>
-        <div style="margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap">
-            <button class="bit-borm-btn bit-borm-btn--primary" @onclick="Rebuild">Apply schema</button>
-            <button class="bit-borm-btn" @onclick="ExportRoundTrip">Export (round-trip)</button>
-            <button class="bit-borm-btn" @onclick="LoadConditional">Load conditional example</button>
-            <button class="bit-borm-btn" @onclick="LoadWizard">Load wizard example</button>
+<div class="bb-split bb-page-wide">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Schema</span></div>
+        <textarea class="demo-json-editor" @bind="_json" @bind:event="oninput" spellcheck="false" aria-label="JSON Schema"></textarea>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="Rebuild">Apply schema</button>
+            <button type="button" class="btn btn-secondary" @onclick="ExportRoundTrip">Export (round-trip)</button>
+            <button type="button" class="btn btn-secondary" @onclick="LoadConditional">Load conditional example</button>
+            <button type="button" class="btn btn-secondary" @onclick="LoadWizard">Load wizard example</button>
         </div>
         @if (_error is not null)
         {
-            <p style="color:#dc2626; font-size:.85rem" role="alert">@_error</p>
+            <p class="bb-note bb-note-danger demo-json-error" role="alert">@_error</p>
         }
     </div>
 
-    <div class="demo-card">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">The form it becomes</span></div>
         @if (_schema is not null)
         {
             <BormView @key="_version" Definition="_schema" Data="_data"
@@ -40,12 +42,12 @@
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Submitted values ✓</strong> <pre>@_resultJson</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Submitted values ✓</strong><pre>@_resultJson</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/LayoutDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/LayoutDemo.razor
index 2a4917360fb..02ce3541039 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/LayoutDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/LayoutDemo.razor
@@ -1,10 +1,10 @@
 @page "/layout"
 
-<PageTitle>Layout &amp; field types</PageTitle>
+<PageTitle>Layout &amp; field types · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Layout &amp; field types</h1>
-    <p>
+    <p class="bb-subtitle">
         Forms are not always one field per row. Set <code>Columns</code> on the definition and
         <code>ColumnSpan</code> on individual fields to get a responsive grid that collapses to a single
         column on small screens. This form also shows a <code>[Flags]</code> enum <em>and</em> a plain
@@ -12,18 +12,19 @@
     </p>
 </div>
 
-<div class="demo-card" style="max-width:900px">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView Definition="_schema" Model="_model" OnValidSubmit="HandleSubmit" SubmitText="Save profile" ShowResetButton="true" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Saved ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Saved ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/McpServer.razor b/src/Utilities/Borm/Demo/Client/Pages/McpServer.razor
index 90911dbc698..2881a44df4e 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/McpServer.razor
@@ -3,19 +3,19 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server</PageTitle>
+<PageTitle>MCP server · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>MCP server</h1>
-    <p>
+    <p class="bb-subtitle">
         This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing form code with
         Bit.Borm reads the library itself - its compiled API documentation, its guide, its stylesheet, its own JSON
         Schema importer and these demo pages - instead of guessing at an API it half remembers. Every tool is read-only.
     </p>
 </div>
 
-<section class="demo-card mcp-card">
-    <h2>Connect a client</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
@@ -23,49 +23,28 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <div class="demo-source">
-        <pre><code>@ClientConfig</code></pre>
-    </div>
+    <pre class="bb-code">@ClientConfig</pre>
 </section>
 
-<section class="demo-card mcp-card">
-    <h2>Tools</h2>
-
-    <table class="mcp-table">
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><code>SearchBorm</code></td>
-                <td>Everything at once - the guide, every public member, the setup guides, the theme, the stylesheet and the demo's working forms - each hit with the exact follow-up call that returns its full text.</td>
-            </tr>
-            <tr>
-                <td><code>GetBormSetupGuide</code></td>
-                <td>The complete wiring for one hosting model: web-app, webassembly, server or hybrid - <code>AddBorm()</code> in every container that renders a form, and the stylesheet link.</td>
-            </tr>
-            <tr>
-                <td><code>GetBormGuideSection</code></td>
-                <td>One section of the reference guide, or the index of sections.</td>
-            </tr>
-            <tr>
-                <td><code>GetBormApi</code></td>
-                <td>One public type with every parameter, property and method, its real default and its documentation - or the index of types.</td>
-            </tr>
-            <tr>
-                <td><code>GetBormTheme</code></td>
-                <td>The <code>--bit-borm-*</code> custom properties with their light and dark values and what each one is for - or one of them in full, with the override to write in every colour mode.</td>
-            </tr>
-            <tr>
-                <td><code>InspectBormSchema</code></td>
-                <td>What the library makes of a JSON Schema document - the form it becomes, field by field, what <code>Validate()</code> reports, what the importer drops without a word, and the document it exports back - or a sample schema, to see the format.</td>
-            </tr>
-            <tr>
-                <td><code>GetBormSourceFile</code></td>
-                <td>One demo or library file verbatim - every page here is a working form - or the index of files.</td>
-            </tr>
-        </tbody>
-    </table>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
+
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var tool in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        <td>@((MarkupString)tool.Description)</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
 
     <p>
         The guide, the API, the theme, a sample schema and the sources are also exposed as <code>borm://</code>
@@ -74,65 +53,22 @@
     </p>
 </section>
 
-<section class="demo-card mcp-card">
-    <h2>The same tools over plain HTTP</h2>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
-        <li><a href="/api/mcp/SearchBorm?query=cascading%20options" target="_blank" rel="noopener">/api/mcp/SearchBorm?query=cascading options</a></li>
-        <li><a href="/api/mcp/GetBormApi?typeName=BormState" target="_blank" rel="noopener">/api/mcp/GetBormApi?typeName=BormState</a></li>
-        <li><a href="/api/mcp/GetBormTheme" target="_blank" rel="noopener">/api/mcp/GetBormTheme</a></li>
-        <li><a href="/api/mcp/InspectBormSchema" target="_blank" rel="noopener">/api/mcp/InspectBormSchema</a></li>
-        <li><a href="/api/mcp/GetBormSourceFile?path=Demo/Client/Pages/WizardDemo.razor" target="_blank" rel="noopener">/api/mcp/GetBormSourceFile?path=Demo/Client/Pages/WizardDemo.razor</a></li>
+    <ul class="bb-detail-list">
+        @foreach (var (href, text) in HttpExamples)
+        {
+            <li><a href="@href" target="_blank" rel="noopener">@text</a></li>
+        }
     </ul>
 </section>
 
-@* The demo's stylesheet has no table styles of its own - every other page is a form - so the few this
-   page needs live with it, built on the site's own --demo-* palette. *@
-<style>
-    .mcp-card {
-        margin-bottom: 1.25rem;
-        line-height: 1.55;
-    }
-
-    .mcp-card h2 {
-        margin: 0 0 .6rem;
-        font-size: 1.15rem;
-    }
-
-    .mcp-card p {
-        margin: .4rem 0;
-        color: var(--demo-muted);
-    }
-
-    .mcp-card .demo-source {
-        margin-top: .75rem;
-    }
-
-    .mcp-table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: .9rem;
-        margin-bottom: .6rem;
-    }
-
-    .mcp-table th,
-    .mcp-table td {
-        padding: .45rem .6rem;
-        border-bottom: 1px solid var(--demo-border);
-        text-align: left;
-        vertical-align: top;
-    }
-
-    .mcp-table td:first-child {
-        white-space: nowrap;
-    }
-</style>
-
 @code {
     private const string ClientConfig = """
         // .mcp.json (Claude Code, VS Code, and anything else reading this shape)
@@ -145,4 +81,33 @@
           }
         }
         """;
+
+    // The server's tools, in the order an agent usually needs them. The one place to change when a tool is
+    // added, renamed or retired; the description is markup.
+    private static readonly (string Name, string Description)[] Tools =
+    [
+        ("SearchBorm",
+            "Everything at once - the guide, every public member, the setup guides, the theme, the stylesheet and the demo's working forms - each hit with the exact follow-up call that returns its full text."),
+        ("GetBormSetupGuide",
+            "The complete wiring for one hosting model: web-app, webassembly, server or hybrid - <code>AddBorm()</code> in every container that renders a form, and the stylesheet link."),
+        ("GetBormGuideSection",
+            "One section of the reference guide, or the index of sections."),
+        ("GetBormApi",
+            "One public type with every parameter, property and method, its real default and its documentation - or the index of types."),
+        ("GetBormTheme",
+            "The <code>--bit-borm-*</code> custom properties with their light and dark values and what each one is for - or one of them in full, with the override to write in every colour mode."),
+        ("InspectBormSchema",
+            "What the library makes of a JSON Schema document - the form it becomes, field by field, what <code>Validate()</code> reports, what the importer drops without a word, and the document it exports back - or a sample schema, to see the format."),
+        ("GetBormSourceFile",
+            "One demo or library file verbatim - every page here is a working form - or the index of files."),
+    ];
+
+    private static readonly (string Href, string Text)[] HttpExamples =
+    [
+        ("/api/mcp/SearchBorm?query=cascading%20options", "/api/mcp/SearchBorm?query=cascading options"),
+        ("/api/mcp/GetBormApi?typeName=BormState", "/api/mcp/GetBormApi?typeName=BormState"),
+        ("/api/mcp/GetBormTheme", "/api/mcp/GetBormTheme"),
+        ("/api/mcp/InspectBormSchema", "/api/mcp/InspectBormSchema"),
+        ("/api/mcp/GetBormSourceFile?path=Demo/Client/Pages/WizardDemo.razor", "/api/mcp/GetBormSourceFile?path=Demo/Client/Pages/WizardDemo.razor"),
+    ];
 }
diff --git a/src/Utilities/Borm/Demo/Client/Pages/NotFound.razor b/src/Utilities/Borm/Demo/Client/Pages/NotFound.razor
index 7b6441b5349..5219b4f339f 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/NotFound.razor
@@ -1,9 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<PageTitle>Not found</PageTitle>
+<PageTitle>Not found · Borm</PageTitle>
 
-<div class="demo-intro">
-    <h1>Not found</h1>
-    <p>Sorry, the content you are looking for does not exist.</p>
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
 </div>
diff --git a/src/Utilities/Borm/Demo/Client/Pages/PerRowConditionsDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/PerRowConditionsDemo.razor
index 6a7aa942983..545b050d5f6 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/PerRowConditionsDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/PerRowConditionsDemo.razor
@@ -1,11 +1,11 @@
 @page "/per-row-conditions"
 @implements IDisposable
 
-<PageTitle>Per-row conditions</PageTitle>
+<PageTitle>Per-row conditions · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Per-row conditions</h1>
-    <p>
+    <p class="bb-subtitle">
         A condition written on a repeater's item template means <em>this row</em>. Change one contact's
         method and only that contact's fields switch — the rest of the list is untouched, and the row's
         chosen field is the only one that has to be filled in. Paths are resolved against the object
@@ -14,18 +14,19 @@
     </p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Save sheet" ShowErrorSummary="true" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Saved ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Saved ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/Quickstart.razor b/src/Utilities/Borm/Demo/Client/Pages/Quickstart.razor
index 2b0d40ccefd..98fcb67d433 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/Quickstart.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/Quickstart.razor
@@ -1,35 +1,36 @@
 @page "/quickstart"
 
-<PageTitle>From a C# type</PageTitle>
+<PageTitle>From a C# type · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>From a C# type</h1>
-    <p>
+    <p class="bb-subtitle">
         One line generates a complete form from any POCO. Labels, field types, options and validation
         come from the type and its DataAnnotations — and fields inherited from a base class come first,
         in the order the class reads.
     </p>
 </div>
 
-<div class="demo-card">
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     @* ConfigureState settles the state the view builds for you, so wanting one setting does not mean
-   constructing, holding and disposing a BormState by hand. *@
-<BormView Definition="_schema" Model="_model"
-          ConfigureState="s => s.ValidationTrigger = BormValidationTrigger.OnBlur"
-          OnValidSubmit="HandleSubmit" SubmitText="Create account" />
+       constructing, holding and disposing a BormState by hand. *@
+    <BormView Definition="_schema" Model="_model"
+              ConfigureState="s => s.ValidationTrigger = BormValidationTrigger.OnBlur"
+              OnValidSubmit="HandleSubmit" SubmitText="Create account" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result">
+    <div class="bb-note bb-note-success demo-result">
         <strong>Submitted ✓</strong>
         <pre>@_json</pre>
     </div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/SettledAnswersDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/SettledAnswersDemo.razor
index cfd980b2dac..b234ef42afc 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/SettledAnswersDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/SettledAnswersDemo.razor
@@ -2,11 +2,11 @@
 @implements IDisposable
 @using Bit.Borm.Demo.Client.Forms
 
-<PageTitle>Locked fields, tidy values &amp; date windows</PageTitle>
+<PageTitle>Locked fields, tidy values &amp; date windows · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Locked fields, tidy values &amp; date windows</h1>
-    <p>
+    <p class="bb-subtitle">
         Three things a form needs once it survives its first submit. <code>ReadOnlyWhen</code> locks an
         answer that has been settled without hiding it from a keyboard or a screen reader.
         <code>Trim()</code> and <code>Normalize(…)</code> fix the value rather than complaining about it.
@@ -14,30 +14,33 @@
     </p>
 </div>
 
-<div class="demo-split">
-    <div class="demo-card">
+<div class="bb-split bb-page-wide">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
         <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Save booking" />
     </div>
 
-    <div class="demo-card">
-        <h2 style="margin-top:0;font-size:1.05rem;">What the model holds</h2>
-        <p style="color:#64748b;font-size:.85rem;">
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">What the model holds</span></div>
+        <p class="bb-card-desc">
             Tick <em>confirmed</em> and the reference and arrival lock — still readable, still copyable,
             still in the tab order. Type spaces around the email, or a lower-case reference, then leave
             the field.
         </p>
-        <pre style="background:#0f172a;color:#e2e8f0;border-radius:10px;padding:1rem;font-size:.82rem;overflow-x:auto;">@Dump</pre>
+        <div class="demo-readout">
+            <pre>@Dump</pre>
+        </div>
 
         @if (_state.IsSubmitSuccessful)
         {
-            <p style="color:#059669;font-weight:600;margin-bottom:0;">Saved ✓</p>
+            <p class="bb-note bb-note-success demo-saved">Saved ✓</p>
         }
     </div>
 </div>
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Pages/StateApiDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/StateApiDemo.razor
index 24a42213397..a20dc6a568a 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/StateApiDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/StateApiDemo.razor
@@ -2,11 +2,11 @@
 @implements IDisposable
 @using Bit.Borm.Demo.Client.Forms
 
-<PageTitle>Editing an existing record</PageTitle>
+<PageTitle>Editing an existing record · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Editing an existing record</h1>
-    <p>
+    <p class="bb-subtitle">
         A form that opens blank and is submitted once needs almost none of this. A form that loads a
         record, is saved, reloads what the server actually stored and carries on being edited needs all
         of it: rebasing onto new data so "unsaved changes" means something, checking one answer without
@@ -15,42 +15,41 @@
     </p>
 </div>
 
-<div class="demo-card">
-    <div class="demo-toolbar">
-        <button type="button" class="bit-borm-btn" @onclick="LoadRecord">Load record from server</button>
-        <button type="button" class="bit-borm-btn" @onclick="SaveRoundTrip" disabled="@(!_state.IsFormDirty)">Save &amp; rebase</button>
-        <button type="button" class="bit-borm-btn" @onclick="SwapFirstTwoLines" disabled="@(LineCount < 2)">Swap first two lines</button>
-        <button type="button" class="bit-borm-btn bit-borm-btn--danger" @onclick="ClearLines" disabled="@(LineCount == 0)">Clear all lines</button>
-        <button type="button" class="bit-borm-btn" @onclick="CheckCustomer">Check just the customer</button>
-        <button type="button" class="bit-borm-btn" @onclick="StashDraft">Stash a draft</button>
-        <button type="button" class="bit-borm-btn" @onclick="RestoreDraft" disabled="@(_draft is null)">Restore the draft</button>
-        <label class="demo-toggle"><input type="checkbox" checked="@_reviewMode" @onchange="ToggleReview" /> Review mode</label>
-        <label class="demo-toggle"><input type="checkbox" checked="@_state.SingleErrorPerField" @onchange="ToggleSingleError" /> One error per field</label>
+<div class="bb-demo">
+    <div class="bb-demo-bar">
+        <span class="bb-demo-label">Live form</span>
+        <label class="bb-check"><input type="checkbox" checked="@_reviewMode" @onchange="ToggleReview" /> Review mode</label>
+        <label class="bb-check"><input type="checkbox" checked="@_state.SingleErrorPerField" @onchange="ToggleSingleError" /> One error per field</label>
+    </div>
+
+    <div class="bb-toolbar">
+        <button type="button" class="btn btn-secondary" @onclick="LoadRecord">Load record from server</button>
+        <button type="button" class="btn btn-secondary" @onclick="SaveRoundTrip" disabled="@(!_state.IsFormDirty)">Save &amp; rebase</button>
+        <button type="button" class="btn btn-secondary" @onclick="SwapFirstTwoLines" disabled="@(LineCount < 2)">Swap first two lines</button>
+        <button type="button" class="btn btn-secondary" @onclick="ClearLines" disabled="@(LineCount == 0)">Clear all lines</button>
+        <button type="button" class="btn btn-secondary" @onclick="CheckCustomer">Check just the customer</button>
+        <button type="button" class="btn btn-secondary" @onclick="StashDraft">Stash a draft</button>
+        <button type="button" class="btn btn-secondary" @onclick="RestoreDraft" disabled="@(_draft is null)">Restore the draft</button>
     </div>
 
     <BormView State="_state" OnValidSubmit="HandleSubmit" SubmitText="Submit order" TitleLevel="2" />
-</div>
 
-<div class="demo-result" style="background:#eef2ff; border-color:#c7d2fe;">
-    <strong>State</strong>
-    <pre>@StateReadout</pre>
+    <div class="demo-readout">
+        <p class="bb-overline">State</p>
+        <pre>@StateReadout</pre>
+    </div>
 </div>
 
 @if (_saved)
 {
-    <div class="demo-result"><strong>Saved ✓</strong> The stored record is now the baseline — the form is clean again.</div>
+    <div class="bb-note bb-note-success demo-result"><strong>Saved ✓</strong> The stored record is now the baseline — the form is clean again.</div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
-<style>
-    .demo-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.5rem; }
-    .demo-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: #475569; }
-</style>
-
 @code {
     private const string Source =
 """
diff --git a/src/Utilities/Borm/Demo/Client/Pages/ValidationModesDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/ValidationModesDemo.razor
index db0b9fd67f2..739a1844ca2 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/ValidationModesDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/ValidationModesDemo.razor
@@ -2,11 +2,11 @@
 @implements IDisposable
 @inject DemoDirectory Directory
 
-<PageTitle>Validation modes</PageTitle>
+<PageTitle>Validation modes · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Validation modes, summary &amp; reset</h1>
-    <p>
+    <p class="bb-subtitle">
         Choose <em>when</em> a field revalidates, independently for before and after the first submit —
         the same <code>mode</code>/<code>reValidateMode</code> split React Hook Form popularised. The
         summary below lists every error in schema order and links to the control that needs fixing.
@@ -16,9 +16,11 @@
     </p>
 </div>
 
-<div class="demo-card">
-    <div class="demo-toolbar">
-        <label>
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
+
+    <div class="bb-fields">
+        <label class="bb-field">
             Before submit
             <select @onchange="e => SetTrigger(before: true, e)">
                 @foreach (var t in Triggers)
@@ -27,7 +29,7 @@
                 }
             </select>
         </label>
-        <label>
+        <label class="bb-field">
             After submit
             <select @onchange="e => SetTrigger(before: false, e)">
                 @foreach (var t in Triggers)
@@ -36,7 +38,7 @@
                 }
             </select>
         </label>
-        <label class="demo-toolbar__check">
+        <label class="bb-check">
             <input type="checkbox" checked="@_readOnly" @onchange="ToggleReadOnly" /> Read-only (review mode)
         </label>
     </div>
@@ -47,34 +49,27 @@
               ShowResetButton="true"
               OnValidSubmit="HandleSubmit"
               SubmitText="Create account" />
-</div>
 
-<p class="demo-status">
-    dirty: <strong>@_state.IsFormDirty</strong> ·
-    submitted: <strong>@_state.SubmitCount</strong> time(s) ·
-    saved: <strong>@_state.IsSubmitSuccessful</strong> ·
-    errors: <strong>@_state.AllMessages.Count()</strong> ·
-    @* Per field, not per form: a lookup on one box should not declare the whole form busy. *@
-    checking username: <strong>@(_state.IsValidatingField("Username") ? "yes — remote lookup in flight" : "no")</strong>
-</p>
+    <p class="demo-status">
+        dirty: <strong>@_state.IsFormDirty</strong> ·
+        submitted: <strong>@_state.SubmitCount</strong> time(s) ·
+        saved: <strong>@_state.IsSubmitSuccessful</strong> ·
+        errors: <strong>@_state.AllMessages.Count()</strong> ·
+        @* Per field, not per form: a lookup on one box should not declare the whole form busy. *@
+        checking username: <strong>@(_state.IsValidatingField("Username") ? "yes — remote lookup in flight" : "no")</strong>
+    </p>
+</div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>Account created ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>Account created ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
-<style>
-    .demo-toolbar { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; font-size: .85rem; color: #475569; }
-    .demo-toolbar select { margin-left: .4rem; padding: .25rem .4rem; border: 1px solid #cbd5e1; border-radius: 6px; }
-    .demo-toolbar__check { display: inline-flex; align-items: center; gap: .4rem; }
-    .demo-status { max-width: 760px; margin-top: 1rem; font-size: .85rem; color: #475569; }
-</style>
-
 @code {
     private const string Source =
 """
diff --git a/src/Utilities/Borm/Demo/Client/Pages/WizardDemo.razor b/src/Utilities/Borm/Demo/Client/Pages/WizardDemo.razor
index 4f71b4bffd7..663214c3f4f 100644
--- a/src/Utilities/Borm/Demo/Client/Pages/WizardDemo.razor
+++ b/src/Utilities/Borm/Demo/Client/Pages/WizardDemo.razor
@@ -1,30 +1,32 @@
 @page "/wizard"
 
-<PageTitle>Multi-step wizard</PageTitle>
+<PageTitle>Multi-step wizard · Borm</PageTitle>
 
-<div class="demo-intro">
+<div class="bb-intro">
     <h1>Multi-step wizard</h1>
-    <p>Group fields into steps. Each step validates before advancing, and steps can be shown conditionally — the company step here only appears for business accounts.</p>
-    <p>
-        Walk to the last step and then click back through the stepper. Every step you have already been
-        past stays clickable in <em>both</em> directions — it was validated on the way through, so
-        making you press Next through the rest just to fix one answer would be busywork. A step you
-        have never reached stays inert.
-    </p>
+    <p class="bb-subtitle">Group fields into steps. Each step validates before advancing, and steps can be shown conditionally — the company step here only appears for business accounts.</p>
 </div>
 
-<div class="demo-card">
+<div class="bb-note">
+    Walk to the last step and then click back through the stepper. Every step you have already been
+    past stays clickable in <em>both</em> directions — it was validated on the way through, so
+    making you press Next through the rest just to fix one answer would be busywork. A step you
+    have never reached stays inert.
+</div>
+
+<div class="bb-demo">
+    <div class="bb-demo-bar"><span class="bb-demo-label">Live form</span></div>
     <BormView Definition="_schema" Model="_model" OnValidSubmit="HandleSubmit" SubmitText="Finish" />
 </div>
 
 @if (_submitted)
 {
-    <div class="demo-result"><strong>All done ✓</strong> <pre>@_json</pre></div>
+    <div class="bb-note bb-note-success demo-result"><strong>All done ✓</strong><pre>@_json</pre></div>
 }
 
-<details class="demo-source">
-    <summary>View source</summary>
-    <pre><code>@Source</code></pre>
+<details class="bb-source demo-source">
+    <summary class="btn btn-secondary">View source</summary>
+    <pre class="bb-code"><code>@Source</code></pre>
 </details>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Renderers/StarRatingInput.razor b/src/Utilities/Borm/Demo/Client/Renderers/StarRatingInput.razor
index bb9316c67d0..062949354da 100644
--- a/src/Utilities/Borm/Demo/Client/Renderers/StarRatingInput.razor
+++ b/src/Utilities/Borm/Demo/Client/Renderers/StarRatingInput.razor
@@ -1,5 +1,9 @@
 @inherits BormInputBase
 
+@* A custom renderer: a row of star buttons, registered under the key "rating" (AddBorm in
+   Extensions/IServiceCollectionExtensions.cs) and asked for with CustomRenderer("rating"). It paints
+   itself with the form's own --bit-borm-* tokens, so it follows the form's theme - light, dark, or an
+   app's override - the way the built-in controls do. *@
 <div class="star-rating" role="radiogroup" aria-label="@Field.Label">
     @for (var n = 1; n <= Max; n++)
     {
@@ -14,10 +18,10 @@
 
 <style>
     .star-rating { display: inline-flex; align-items: center; gap: .15rem; }
-    .star { background: none; border: none; cursor: pointer; font-size: 1.6rem; line-height: 1; color: #d1d5db; padding: 0 .05rem; }
+    .star { background: none; border: none; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--bit-borm-border); padding: 0 .05rem; }
     .star--on { color: #f59e0b; }
     .star:disabled { cursor: not-allowed; }
-    .star-rating__value { margin-left: .6rem; color: #6b7280; font-size: .85rem; }
+    .star-rating__value { margin-left: .6rem; color: var(--bit-borm-muted); font-size: .85rem; }
 </style>
 
 @code {
diff --git a/src/Utilities/Borm/Demo/Client/Routes.razor b/src/Utilities/Borm/Demo/Client/Routes.razor
index 105855d4577..989f92736d1 100644
--- a/src/Utilities/Borm/Demo/Client/Routes.razor
+++ b/src/Utilities/Borm/Demo/Client/Routes.razor
@@ -1,6 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/Borm/Demo/Server/Bit.Borm.Demo.Server.csproj b/src/Utilities/Borm/Demo/Server/Bit.Borm.Demo.Server.csproj
index 178a323ba7b..7512207fd3f 100644
--- a/src/Utilities/Borm/Demo/Server/Bit.Borm.Demo.Server.csproj
+++ b/src/Utilities/Borm/Demo/Server/Bit.Borm.Demo.Server.csproj
@@ -44,9 +44,11 @@
 
         <!-- Every demo page - each one is a working form - plus the models, the validator, the custom
              renderer and the client half of the hosting. The MCP page describes this server rather than
-             the library, and the not-found page teaches nothing about forms. -->
+             the library, and the not-found page teaches nothing about forms. Nor does the site chrome:
+             Layout\ and the DocsCatalog.cs that drives it are the header, docs shell, search and footer
+             every Utilities demo shares. -->
         <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
+                          Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFound.razor">
             <LogicalName>BormSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
         </EmbeddedResource>
 
diff --git a/src/Utilities/Borm/Demo/Server/Components/App.razor b/src/Utilities/Borm/Demo/Server/Components/App.razor
index 09067ff944c..1e1d26091dd 100644
--- a/src/Utilities/Borm/Demo/Server/Components/App.razor
+++ b/src/Utilities/Borm/Demo/Server/Components/App.razor
@@ -2,15 +2,38 @@
 <html lang="en">
 
 <head>
+    @* The host page. Borm itself needs one line of it - the bit-borm.css link below; the rest is this
+       documentation site's: the site kit's stylesheets and scripts and the demo's own sample styles. *@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="bit Borm (Bit.Borm) - a schema-driven form engine for Blazor: forms from C# types, a fluent builder or JSON Schema, with validation, conditions, wizards and repeaters decided in C#." />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Borm (Bit.Borm) - a schema-driven form engine for Blazor: forms from C# types, a fluent builder or JSON Schema, with validation, conditions, wizards and repeaters decided in C#." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Borm" />
+    <meta property="og:title" content="Borm - schema-driven forms for Blazor" />
+    <meta property="og:description" content="Describe a form once - from a C# type, a fluent builder or JSON Schema - and Borm renders it, validates it and keeps its state, with every decision made in C#." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
     @* The library's stylesheet. It is not injected for you: without it the form renders as plain,
-       unstyled HTML - usable, but without the theme, the grid or the error colours. *@
+       unstyled HTML - usable, but without the theme, the grid or the error colours. demo.css re-tints
+       its tokens to the site's theme with selectors that outrank the library's own, so the order of
+       the two links does not decide which wins. *@
     <link rel="stylesheet" href="@Assets["_content/Bit.Borm/bit-borm.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Borm.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -27,6 +50,7 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Borm/Demo/Server/Services/BormSetupGuide.cs b/src/Utilities/Borm/Demo/Server/Services/BormSetupGuide.cs
index 26cf9f2236a..3d58b9ce81f 100644
--- a/src/Utilities/Borm/Demo/Server/Services/BormSetupGuide.cs
+++ b/src/Utilities/Borm/Demo/Server/Services/BormSetupGuide.cs
@@ -121,7 +121,11 @@ private static string Compose(Model model)
         if (model.IncludeDemo)
         {
             builder.AppendLine("## The files, from this demo").AppendLine();
-            builder.AppendLine("Everything below compiles as-is; rename the projects and namespaces to your own.").AppendLine();
+            builder.AppendLine("Everything below compiles as-is once the projects and namespaces are renamed to your own - except what is ")
+                   .AppendLine("this documentation site's own: in `App.razor`, `app.css`, `demo.css`, `theme.js` and `site.js` are the site's ")
+                   .AppendLine("chrome and theme, and the `DocsLayout` that `Routes.razor` names stands for your own layout. The one line Borm ")
+                   .AppendLine("needs in the host page is the `bit-borm.css` link.")
+                   .AppendLine();
 
             foreach (var path in _hostingFiles)
             {
diff --git a/src/Utilities/Borm/Demo/Server/Services/BormSourceCatalog.cs b/src/Utilities/Borm/Demo/Server/Services/BormSourceCatalog.cs
index 185c3c45b92..9283d59f31b 100644
--- a/src/Utilities/Borm/Demo/Server/Services/BormSourceCatalog.cs
+++ b/src/Utilities/Borm/Demo/Server/Services/BormSourceCatalog.cs
@@ -276,7 +276,6 @@ private static string KindOf(string path)
         if (path.StartsWith("Library/", StringComparison.OrdinalIgnoreCase)) return "Library";
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
-            path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
@@ -449,7 +448,8 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"///\s*<summary>(?<text>.*?)</summary>", RegexOptions.Singleline)]
     private static partial Regex XmlSummaryRegex();
 
-    [GeneratedRegex(@"<div class=""demo-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
+    // A page opens with its title block: the h1, then the paragraph that says what the page shows.
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex DemoIntroRegex();
 
     [GeneratedRegex(@"<h1>(?<text>.*?)</h1>", RegexOptions.Singleline)]
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/app.css b/src/Utilities/Borm/Demo/Server/wwwroot/app.css
index 591aa94c2a0..7b51a42ea90 100644
--- a/src/Utilities/Borm/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/app.css
@@ -1,283 +1,2820 @@
-/* The demo site's own palette and shell. Prefixed --demo-, not --bit-borm-: the library defines its theme
-   tokens under that prefix (on .bit-borm-form), and a page-level token of the same name with a different
-   meaning would change every form on the page. */
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
 :root {
-    --demo-bg: #f8fafc;
-    --demo-surface: #ffffff;
-    --demo-border: #e2e8f0;
-    --demo-text: #0f172a;
-    --demo-muted: #475569;
-    --demo-nav-bg: #0f172a;
-    --demo-nav-text: #cbd5e1;
-    --demo-nav-hover: #1e293b;
-    --demo-primary: #4f46e5;
-    --demo-primary-hover: #4338ca;
-    --demo-code-bg: #0f172a;
-    --demo-code-text: #e2e8f0;
-}
-
-* {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
 }
 
-html, body {
-    margin: 0;
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-    color: var(--demo-text);
-    background: var(--demo-bg);
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
 }
 
-/* Page headings take focus on navigation (FocusOnNavigate in Routes.razor) so a screen reader starts
-   reading at the new page; that focus is not something to draw a ring around. */
-h1:focus {
-    outline: none;
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
 }
 
-a {
-    color: var(--demo-primary);
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
 }
 
-/* The shell: a dark sidebar of demos beside the page. */
-.app-shell {
-    display: flex;
-    min-height: 100vh;
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
 }
 
-.app-nav {
-    width: 260px;
-    flex: none;
-    background: var(--demo-nav-bg);
-    color: var(--demo-nav-text);
-    padding: 1.25rem 1rem;
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
 }
 
-.app-nav-top {
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1.5rem;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
 }
 
-.app-brand {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: #fff;
-    text-decoration: none;
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
 }
 
-    .app-brand span {
-        color: #818cf8;
-    }
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
 
-.app-nav-toggle {
-    display: none;
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
     flex-direction: column;
-    gap: 4px;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
     background: none;
-    border: 1px solid #334155;
-    border-radius: 8px;
-    padding: .45rem .5rem;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
     cursor: pointer;
 }
 
-    .app-nav-toggle span {
-        display: block;
-        width: 18px;
-        height: 2px;
-        background: var(--demo-nav-text);
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
     }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
 
-.app-nav-links {
+.bb-landing {
     display: flex;
     flex-direction: column;
-    gap: .15rem;
 }
 
-    .app-nav-links a {
-        color: var(--demo-nav-text);
-        text-decoration: none;
-        padding: .5rem .65rem;
-        border-radius: 8px;
-        font-size: .9rem;
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
     }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
 
-        .app-nav-links a:hover {
-            background: var(--demo-nav-hover);
-            color: #fff;
-        }
+/* ---------- The window frame around the hero sample ----------
 
-        .app-nav-links a.active {
-            background: var(--demo-primary);
-            color: #fff;
-        }
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
 
-.app-main {
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
     flex: 1;
     min-width: 0;
-    padding: 1.5rem 2.5rem 2.5rem;
-    overflow-x: hidden;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
 }
 
-.app-top {
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
     display: flex;
-    justify-content: flex-end;
-    gap: 1.25rem;
-    font-size: .85rem;
-    margin-bottom: 1rem;
+    flex-direction: column;
+    gap: .25rem;
 }
 
-    .app-top a {
-        color: var(--demo-muted);
-        text-decoration: none;
-    }
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
 
-        .app-top a:hover {
-            color: var(--demo-primary);
-        }
+/* ---------- Sections ---------- */
 
-/* The building blocks every demo page uses. */
-.demo-intro {
-    max-width: 720px;
-    margin-bottom: 1.75rem;
+.bb-section {
+    margin-bottom: 0;
 }
 
-    .demo-intro h1 {
-        margin: 0 0 .35rem;
-        font-size: 1.7rem;
-    }
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
 
-    .demo-intro p {
-        color: var(--demo-muted);
-        margin: 0 0 .5rem;
-    }
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
 
-.demo-card {
-    background: var(--demo-surface);
-    border: 1px solid var(--demo-border);
-    border-radius: 14px;
-    padding: 1.75rem;
-    max-width: 760px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
 }
 
-.demo-result {
-    max-width: 760px;
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
     margin-top: 1.25rem;
-    background: #ecfdf5;
-    border: 1px solid #a7f3d0;
-    border-radius: 10px;
-    padding: 1rem 1.25rem;
 }
 
-    .demo-result pre {
-        margin: .5rem 0 0;
-        white-space: pre-wrap;
-        word-break: break-word;
-        font-size: .82rem;
-    }
+/* ---------- Final CTA ---------- */
 
-.demo-split {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-    max-width: 1100px;
-    align-items: start;
+.bb-final-cta {
+    text-align: center;
 }
 
-    .demo-split textarea {
-        width: 100%;
-        min-height: 460px;
-        font-family: ui-monospace, "Cascadia Code", monospace;
-        font-size: .8rem;
-        border: 1px solid #cbd5e1;
-        border-radius: 10px;
-        padding: 1rem;
-    }
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
 
-.demo-source {
-    max-width: 1100px;
-    margin-top: 1.5rem;
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
 }
 
-    .demo-source summary {
-        cursor: pointer;
-        font-weight: 600;
-        color: var(--demo-primary);
-        padding: .5rem 0;
-        user-select: none;
-    }
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
 
-        .demo-source summary:hover {
-            color: var(--demo-primary-hover);
-        }
+/* ---------- Responsive ---------- */
 
-    .demo-source pre {
-        margin: .5rem 0 0;
-        background: var(--demo-code-bg);
-        color: var(--demo-code-text);
-        border: 1px solid #1e293b;
-        border-radius: 12px;
-        padding: 1.25rem 1.5rem;
-        overflow-x: auto;
-        font-size: .82rem;
-        line-height: 1.55;
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
     }
 
-    .demo-source code {
-        font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
-        white-space: pre;
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
     }
 
-#blazor-error-ui {
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
     }
 
-@media (max-width: 900px) {
-    .app-shell {
-        flex-direction: column;
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
     }
+}
 
-    .app-nav {
-        width: auto;
-        padding: .75rem 1rem;
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
     }
 
-    .app-nav-top {
-        margin-bottom: 0;
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
     }
 
-    .app-nav-toggle {
-        display: flex;
+    .bb-hero {
+        padding-block: 3rem;
     }
 
-    .app-nav-links {
-        margin-top: .75rem;
+    .bb-hero-sub {
+        font-size: 1rem;
     }
 
-        .app-nav-links.collapse {
-            display: none;
-        }
+    .bb-section-sub {
+        font-size: 1rem;
+    }
 
-    .app-main {
-        padding: 1rem;
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
     }
 
-    .demo-split {
-        grid-template-columns: 1fr;
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
     }
 }
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/demo.css b/src/Utilities/Borm/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..471a44d936f
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,322 @@
+/* ============================================================================================
+   Borm demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file draws only what is Borm's own: the library's forms on the site's theme, and
+   the few readouts the pages put next to them. It is written against the kit's --bb-* names, so it
+   follows the light/dark theme with no colour of its own for either.
+   ============================================================================================ */
+
+/* --------------------------------------------------------------------------------------------
+   1. Borm's theme, on the site's tokens
+
+   bit-borm.css declares every token on the form itself (see "Theming" in the README), with a dark
+   palette that follows the OS and a data-theme switch on top. This site has a theme switch of its
+   own - bit-theme on <html> - so the forms take their colours from the kit's tokens, which already
+   change with it: one rule covers both themes, and a form is never light on a dark page because
+   the OS happened to disagree with the toggle.
+
+   html:root raises the rule above the library's own (.bit-borm-form, and [data-theme] .bit-borm-form),
+   which is linked after this file. The tokens the two themes share and the site has no opinion on -
+   the field gap, the form's maximum width, the focus border that follows the accent - are left to
+   the library. Any element carrying the class gets the theme: a page that lays fields out itself
+   with <BormField> puts it on its own wrapper (see Pages/CompositionDemo.razor).
+   -------------------------------------------------------------------------------------------- */
+
+html:root .bit-borm-form {
+    color-scheme: light;
+    /* The library names system-ui; the site's own type stack is the same family on Windows and
+       macOS, and keeps a form's labels in step with the prose around it everywhere else. */
+    font-family: inherit;
+
+    --bit-borm-accent: var(--bb-primary);
+    --bit-borm-accent-contrast: var(--bb-primary-text);
+    --bit-borm-surface: var(--bb-surface);
+    --bit-borm-surface-muted: var(--bb-surface-sunken);
+    --bit-borm-surface-disabled: var(--bb-surface-2);
+    --bit-borm-border: var(--bb-border-strong);
+    --bit-borm-error: var(--bb-danger);
+    --bit-borm-error-surface: var(--bb-danger-soft);
+    --bit-borm-warning: var(--bb-warning-text);
+    --bit-borm-text: var(--bb-text);
+    --bit-borm-muted: var(--bb-text-soft);
+    /* Fluent 2's control corner. */
+    --bit-borm-radius: var(--bb-radius);
+}
+
+/* The parts of a control the browser draws itself - the date picker, an open dropdown, the file
+   button - follow color-scheme rather than any token. */
+html:root[bit-theme="dark"] .bit-borm-form {
+    color-scheme: dark;
+}
+
+/* --------------------------------------------------------------------------------------------
+   2. The library's controls keep the library's look
+
+   The kit styles bare form elements (app.css 7b and 26), because most demos render plain inputs.
+   Borm renders its own, fully styled, and a few of the kit's rules outrank the library's - an
+   element selector plus two pseudo-classes beats one class. Where the library says something, it
+   is put back here, with exactly the library's values; where it is silent, the kit's look stays.
+   -------------------------------------------------------------------------------------------- */
+
+/* The kit's line height and minimum height would make every field a few pixels taller than the
+   library draws it, and the tag box's entry field taller than the box around it. */
+html:root .bit-borm-input,
+html:root .bit-borm-tags__entry {
+    line-height: normal;
+}
+
+html:root .bit-borm-tags__entry {
+    min-height: 0;
+}
+
+/* Hover: the kit darkens a field's border under the pointer. Borm has no hover state for a field,
+   and the kit's rule also outranked its invalid and focus colours - an invalid field lost its red,
+   and a focused one its accent, while the mouse was over it. */
+html:root .bit-borm-input:hover:not(:disabled) {
+    border-color: var(--bit-borm-border);
+}
+
+html:root .bit-borm-input--invalid:hover:not(:disabled) {
+    border-color: var(--bit-borm-error);
+}
+
+html:root .bit-borm-input:focus-visible:hover {
+    border-color: var(--bit-borm-border-focus);
+}
+
+/* Focus: the kit's field focus is Fluent's thicker bottom stroke, paid for out of the bottom
+   padding. Borm's is a ring, with its padding unchanged - and the kit's padding is not Borm's, so
+   every field shrank as it took focus and moved everything below it. */
+html:root .bit-borm-input:focus-visible {
+    border-bottom-width: 1px;
+    padding-bottom: .55rem;
+}
+
+html:root .bit-borm-tags__entry:focus-visible {
+    border-bottom: none;
+    padding-bottom: .15rem;
+}
+
+/* A checkbox drawn as a switch: the kit sizes every checkbox to a 1rem square, which made the
+   switch a square too. The forced-colors branch is the library's own - the native tick box. */
+html:root .bit-borm-switch {
+    inline-size: 2.25rem;
+    block-size: 1.25rem;
+}
+
+@media (forced-colors: active) {
+    html:root .bit-borm-switch {
+        inline-size: auto;
+        block-size: auto;
+    }
+}
+
+/* AsSearch() hands the field the browser's own clear button, which the kit hides on every search
+   box for the sake of a uniform look. */
+html:root .bit-borm-input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: searchfield-cancel-button;
+}
+
+/* --------------------------------------------------------------------------------------------
+   3. Around the forms
+   -------------------------------------------------------------------------------------------- */
+
+/* What a valid submit handed the page: the kit's success note, with the model under it. */
+.demo-result strong {
+    color: var(--bb-success-text);
+}
+
+.demo-result pre {
+    margin: .5rem 0 0;
+    font-size: .8125rem;
+    line-height: 1.6;
+    color: var(--bb-text);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+/* A live readout of the state or the model, next to or under the form that writes it. */
+.demo-readout {
+    margin: 1.25rem 0 0;
+}
+
+.demo-readout .bb-overline {
+    margin-bottom: .375rem;
+}
+
+.demo-readout pre {
+    margin: 0;
+    padding: .75rem 1rem;
+    overflow-x: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* A line of counters under a form. */
+.demo-status {
+    margin: 1.25rem 0 0;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.7;
+    color: var(--bb-text-muted);
+}
+
+.demo-status strong {
+    color: var(--bb-text);
+}
+
+/* A remark about the sample, under it and set off from it. */
+.demo-footnote {
+    margin: 1.25rem 0 0;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    color: var(--bb-text-muted);
+}
+
+/* A short instruction inside a sample's title bar, next to the switch it explains. */
+.demo-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+}
+
+/* "View source": the kit's secondary button as the disclosure's summary, with a caret that turns. */
+.demo-source > summary {
+    list-style: none;
+}
+
+.demo-source > summary::-webkit-details-marker {
+    display: none;
+}
+
+.demo-source > summary::before {
+    content: "▸";
+    font-size: .8em;
+    color: var(--bb-text-soft);
+}
+
+.demo-source[open] > summary::before {
+    content: "▾";
+}
+
+/* --------------------------------------------------------------------------------------------
+   4. Samples
+   -------------------------------------------------------------------------------------------- */
+
+/* Field polish: the listing the form previews, written from the model on every keystroke. */
+.demo-listing {
+    padding: 1rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+}
+
+.demo-listing p {
+    margin: .375rem 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.demo-listing__meta {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.demo-listing__state {
+    margin-top: .375rem;
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+}
+
+.demo-listing__state--published {
+    color: var(--bb-success-text);
+}
+
+/* Composition: the page's own layout of the schema's fields, spaced the way the library spaces a
+   form body. */
+.demo-own-layout {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bit-borm-gap);
+}
+
+.demo-two-up {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    gap: var(--bit-borm-gap);
+    align-items: start;
+}
+
+.demo-own-layout > .bb-overline {
+    margin: .5rem 0 -.5rem;
+}
+
+.demo-own-layout > hr {
+    margin: .25rem 0;
+}
+
+.demo-own-layout .bit-borm-form__actions {
+    margin-top: .25rem;
+    align-items: center;
+}
+
+.demo-own-layout .bit-borm-form__actions > .bb-soft {
+    font-size: var(--fl-font-size-200);
+}
+
+/* The switch that breaks the options service, and the button that retries it. */
+.demo-service {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem 1rem;
+    margin-top: -.5rem;
+}
+
+.demo-failure {
+    margin: -.5rem 0 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-warning-text);
+}
+
+/* JSON Schema: the editor the form is built from. */
+.demo-json-editor {
+    display: block;
+    min-height: 28rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    tab-size: 2;
+}
+
+.demo-json-editor + .bb-toolbar {
+    margin: .75rem 0 0;
+}
+
+.demo-json-error {
+    margin: .75rem 0 0;
+}
+
+/* The landing page's hero: the form the sample above it describes, live inside the window frame. */
+.home-hero-live {
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.home-hero-live .bit-borm-form__title {
+    font-size: var(--fl-font-size-400);
+}
+
+.home-hero-sent {
+    margin: .75rem 0 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-success-text);
+}
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Borm/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/site.js b/src/Utilities/Borm/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Borm/Demo/Server/wwwroot/theme.js b/src/Utilities/Borm/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Borm/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Borm/README.md b/src/Utilities/Borm/README.md
index dd6f201afad..da56b4e1119 100644
--- a/src/Utilities/Borm/README.md
+++ b/src/Utilities/Borm/README.md
@@ -92,12 +92,14 @@ Then render a `BormView` with a `Definition` and a `Model`, as above. The full w
 
 ## The demo
 
-The demo site, [borm.bitplatform.dev](https://borm.bitplatform.dev), is a set of working forms, one per topic of
-this guide: `/quickstart` (a schema from a C# type), `/builder` (the fluent builder and conditions), `/array`
-(repeaters and computed totals), `/wizard`, `/layout`, `/field-polish`, `/combobox-tags`, `/per-row-conditions`,
-`/settled-answers`, `/composition`, `/state-api`, `/validation`, `/dependent-fields`, `/cascading`, `/files`,
-`/json-schema` (a live JSON Schema editor with round-trip export), `/data-annotations`, `/fluent-validation` and
-`/custom-renderer`. Every page can show its own source.
+The demo site, [borm.bitplatform.dev](https://borm.bitplatform.dev), opens on an overview with a live form, and its
+documentation - starting at `/getting-started` - is a set of working forms, one per topic of this guide:
+`/quickstart` (a schema from a C# type), `/builder` (the fluent builder and conditions), `/array` (repeaters and
+computed totals), `/wizard`, `/layout`, `/field-polish`, `/combobox-tags`, `/per-row-conditions`, `/settled-answers`,
+`/composition`, `/state-api`, `/validation`, `/dependent-fields`, `/cascading`, `/files`, `/json-schema` (a live JSON
+Schema editor with round-trip export), `/data-annotations`, `/fluent-validation` and `/custom-renderer`. Every page can
+show its own source, and Ctrl+K (or `/`) searches them all. The site re-tints Borm's `--bit-borm-*` tokens to its own
+light and dark theme, which is what [Theming](#theming) describes.
 
 To run it locally:
 
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ChoiceTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ChoiceTests.cs
index 3710b369876..6bb07bf6995 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ChoiceTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ChoiceTests.cs
@@ -167,7 +167,7 @@ public async Task A_failing_options_service_says_so_and_the_form_recovers_once_i
 
         // The failure is shown in place of the choices, and reported to the page - not thrown at it.
         await Expect(component.Locator("option").First).ToHaveTextAsync("Options could not be loaded");
-        await Expect(page.Locator(".demo-card", new() { HasTextString = "OnOptionsLoadFailed" })).ToContainTextAsync("The component service is unavailable.");
+        await Expect(page.Locator(".bb-demo", new() { HasTextString = "OnOptionsLoadFailed" })).ToContainTextAsync("The component service is unavailable.");
 
         // Mended, a retry loads the team's components.
         await page.Locator("label", new() { HasTextString = "Break the component service" }).Locator("input").UncheckAsync();
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/DemoPagesTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/DemoPagesTests.cs
index e76acb28b10..2a76468cddf 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/DemoPagesTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/DemoPagesTests.cs
@@ -7,8 +7,9 @@ namespace Bit.Borm.Tests.E2E;
 
 /// <summary>
 /// Every page of the demo: each one is prerendered with its forms in the first response, turns interactive on
-/// WebAssembly with the library's stylesheet applied, and survives every button on it without an error. An unknown
-/// address gets the not-found page, and moving through the demos inside the app leaves working forms behind.
+/// WebAssembly with the library's stylesheet applied and the site's theme on its tokens, and survives every button on
+/// it without an error. An unknown address gets the not-found page, and moving through the demos inside the app leaves
+/// working forms behind.
 /// </summary>
 [TestClass]
 public sealed class DemoPagesTests : BormTest
@@ -43,16 +44,20 @@ public async Task Every_demo_page_prerenders_turns_interactive_styled_and_runs_e
             @"() => [...document.styleSheets].some(s => s.href && /^\/_content\/Bit\.Borm\/bit-borm(\.\w+)?\.css$/.test(new URL(s.href).pathname) && s.cssRules.length > 0)"),
             $"{path} did not load _content/Bit.Borm/bit-borm.css");
 
-        // ...and it styles the forms: the theme tokens and the width cap exist only in that stylesheet.
+        // ...and it styles the forms: the field gap and the width cap exist only in that stylesheet, and the demo's
+        // re-tint puts the site's brand on the accent (wwwroot/demo.css) - in the light theme this context asks for.
         for (int i = 0; i < forms; i++)
         {
             var form = page.Locator("form.bit-borm-form").Nth(i);
-            Assert.AreEqual("#4f46e5", await ComputedAsync(form, "--bit-borm-accent"), $"form {i} of {path} has no theme tokens");
+            Assert.AreEqual("1rem", await ComputedAsync(form, "--bit-borm-gap"), $"form {i} of {path} has no theme tokens");
             Assert.AreEqual("720px", await ComputedAsync(form, "max-width"), $"form {i} of {path} is not capped by the stylesheet");
+            Assert.AreEqual("#1276C6", await ComputedAsync(form, "--bit-borm-accent"), $"form {i} of {path} is not on the site's theme");
         }
 
-        // Every enabled button of the page must run without throwing: a dead or broken control is a demo bug.
-        var buttons = page.Locator(".app-main button:enabled:visible");
+        // Every enabled button of the page must run without throwing: a dead or broken control is a demo bug. The page
+        // is the docs column (or the landing page), not the site chrome around it; the copy buttons the site script
+        // hangs on its code blocks are that chrome too.
+        var buttons = page.Locator(":is(.bb-docs-content, .bb-landing) button:enabled:visible:not(.bb-copy-btn)");
         int count = Math.Min(await buttons.CountAsync(), 40);
         for (int i = 0; i < count; i++)
         {
@@ -88,10 +93,12 @@ public async Task An_unknown_address_gets_the_not_found_page_inside_the_app()
 
         Assert.AreEqual(404, response?.Status, "an unknown address did not answer 404");
         await WaitForInteractiveAsync(page);
-        await Expect(page.Locator("h1")).ToHaveTextAsync("Not found");
+        await Expect(page.Locator("h1")).ToHaveTextAsync("404");
+        await Expect(page.Locator("main")).ToContainTextAsync("There is no page at this address");
 
-        // The layout is there, and with it the way back to every demo.
-        await page.Locator(".app-nav-links a", new() { HasTextString = "Fluent builder" }).ClickAsync();
+        // The site shell is there, and with it the way back to every demo.
+        await Expect(page.Locator("header.bb-header")).ToBeVisibleAsync();
+        await page.Locator("footer.bb-footer").GetByRole(AriaRole.Link, new() { Name = "Fluent builder + conditions", Exact = true }).ClickAsync();
         await page.WaitForURLAsync(BaseUrl + "/builder");
         await Expect(Form(page)).ToBeVisibleAsync();
     }
@@ -99,19 +106,19 @@ public async Task An_unknown_address_gets_the_not_found_page_inside_the_app()
     [TestMethod]
     public async Task Navigating_between_the_demos_in_the_app_leaves_a_working_form_behind()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/getting-started");
         var problems = TrackProblems(page, BaseUrl);
 
         // Client-side navigation through every demo: each page's form state is disposed (an options lookup or an
         // async rule still in flight cancelled) and the next one built, all in the same WebAssembly instance.
-        var links = page.Locator(".app-nav-links a");
+        var links = page.Locator(".bb-docs-sidebar .bb-docs-section a");
         int count = await links.CountAsync();
         Assert.IsTrue(count > 15, $"the sidebar offers only {count} demos");
         for (int i = 1; i < count; i++)
         {
             var href = await links.Nth(i).GetAttributeAsync("href");
             await links.Nth(i).ClickAsync();
-            await page.WaitForURLAsync($"{BaseUrl}/{href}");
+            await page.WaitForURLAsync($"{BaseUrl}/{href!.TrimStart('/')}");
             await Expect(page.Locator("h1")).ToBeVisibleAsync();
             await WaitForQuietAsync(page);
         }
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/FieldTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/FieldTests.cs
index 87052841829..1444b03a3d7 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/FieldTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/FieldTests.cs
@@ -20,7 +20,7 @@ public async Task A_field_written_on_every_keystroke_drives_the_preview_and_its_
     {
         var page = await OpenAsync("/field-polish");
         var title = Control(page, "Title");
-        var preview = page.Locator(".demo-split > .demo-card").Nth(1);
+        var preview = page.Locator(".demo-preview");
 
         // UpdateOnInput(): the model is written while the caret is still in the box - no blur, no Enter.
         await title.PressSequentiallyAsync("Sunny loft");
@@ -58,7 +58,7 @@ public async Task The_clear_button_empties_the_field_and_leaves_the_caret_in_it(
         await Expect(city).ToHaveAttributeAsync("data-testid", "city");
         await city.PressSequentiallyAsync("Lisbon");
         await Expect(clear).ToBeVisibleAsync();
-        await Expect(page.Locator(".demo-split > .demo-card").Nth(1)).ToContainTextAsync("Lisbon");
+        await Expect(page.Locator(".demo-preview")).ToContainTextAsync("Lisbon");
 
         await clear.ClickAsync();
 
@@ -66,7 +66,7 @@ public async Task The_clear_button_empties_the_field_and_leaves_the_caret_in_it(
         await Expect(city).ToHaveValueAsync("");
         await Expect(city).ToBeFocusedAsync();
         await Expect(clear).ToHaveCountAsync(0);
-        await Expect(page.Locator(".demo-split > .demo-card").Nth(1)).Not.ToContainTextAsync("Lisbon");
+        await Expect(page.Locator(".demo-preview")).Not.ToContainTextAsync("Lisbon");
 
         // The suggestions are hints for the browser's own list, not a closed set.
         Assert.AreEqual("Amsterdam,Berlin,Lisbon,Paris,Warsaw",
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/Infrastructure/BormTest.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/Infrastructure/BormTest.cs
index 5ad0800b6d9..02ac07146d1 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/Infrastructure/BormTest.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/Infrastructure/BormTest.cs
@@ -17,8 +17,11 @@ namespace Bit.Borm.Tests.E2E.Infrastructure;
 /// </remarks>
 public abstract class BormTest
 {
-    /// <summary>The colour the stylesheet paints errors with under the light theme (<c>--bit-borm-error</c>).</summary>
-    protected const string ErrorColour = "rgb(220, 38, 38)";
+    /// <summary>
+    /// The colour errors are painted with under the light theme: <c>--bit-borm-error</c>, which the demo re-tints to the
+    /// site's own danger colour (<c>--bb-danger</c>, <c>#D2393B</c>) - see wwwroot/demo.css.
+    /// </summary>
+    protected const string ErrorColour = "rgb(210, 57, 59)";
 
     // What Blazor writes to the console when something went wrong for real: the WebAssembly renderer's
     // "Unhandled exception rendering component", and the critical log line every unhandled exception produces.
@@ -94,10 +97,10 @@ await context.RouteAsync(url => url.StartsWith(origin, StringComparison.OrdinalI
     }
 
     /// <summary>
-    /// A desktop-sized viewport with a light colour scheme, so the stylesheet's <c>prefers-color-scheme</c> theme is
-    /// the same on every machine, and reduced motion, which the stylesheet answers by dropping the border and
-    /// background transitions: a colour read right after a field turned invalid is its resting colour, not a frame of
-    /// the 150 ms fade towards it.
+    /// A desktop-sized viewport with a light colour scheme, so the site's theme - which follows the preference until
+    /// the toggle is used - is the same on every machine, and reduced motion, which the stylesheet answers by dropping
+    /// the border and background transitions: a colour read right after a field turned invalid is its resting colour,
+    /// not a frame of the 150 ms fade towards it.
     /// </summary>
     protected static BrowserNewContextOptions DefaultContextOptions(ColorScheme colorScheme = ColorScheme.Light, int width = 1280) => new()
     {
@@ -135,14 +138,14 @@ protected async Task<IPage> NewPageAsync(IBrowserContext context)
     /// <summary>
     /// Waits until the page runs in the browser and has settled. Every page is prerendered, so its form - inputs,
     /// buttons and all - is on screen long before anything handles a keystroke: a value typed then is overwritten
-    /// when WebAssembly takes the page over, and a click is simply lost. The layout's <c>data-interactive</c> marker
-    /// says the handlers are attached; a quiet DOM afterwards says the first interactive renders (the focus moved
-    /// to the heading, an options provider answering) are done.
+    /// when WebAssembly takes the page over, and a click is simply lost. The site shell's <c>data-interactive</c> marker
+    /// (on <c>.page</c>, Layout/MainLayout.razor) says the handlers are attached; a quiet DOM afterwards says the first
+    /// interactive renders (the focus moved to the heading, an options provider answering) are done.
     /// </summary>
     protected static async Task WaitForInteractiveAsync(IPage page)
     {
         await page.WaitForFunctionAsync(
-            "() => document.querySelector('.app-shell')?.dataset.interactive === 'true'",
+            "() => document.querySelector('.page')?.dataset.interactive === 'true'",
             null, new PageWaitForFunctionOptions { Timeout = 90_000 });
 
         await WaitForQuietAsync(page);
@@ -156,7 +159,7 @@ await page.WaitForFunctionAsync(
     protected static Task WaitForQuietAsync(IPage page, int quietMs = 250) => page.EvaluateAsync(
         """
         (quietMs) => new Promise(resolve => {
-          const root = document.querySelector('.app-main') ?? document.body;
+          const root = document.querySelector('main') ?? document.body;
           let timer;
           const done = () => { observer.disconnect(); clearTimeout(cap); resolve(); };
           const arm = () => { clearTimeout(timer); timer = setTimeout(done, quietMs); };
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/KeyboardTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/KeyboardTests.cs
index ffbbd0905e1..f45493aa3da 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/KeyboardTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/KeyboardTests.cs
@@ -90,8 +90,9 @@ public async Task A_read_only_answer_stays_in_the_tab_order_but_cannot_be_change
         await page.Keyboard.TypeAsync("XYZ");
         await Expect(reference).ToHaveValueAsync("bk-1024");
 
-        // The stylesheet marks the locked box as such.
-        Assert.AreEqual("rgb(250, 250, 250)", await ComputedAsync(reference, "background-color"), "the read-only background");
+        // The stylesheet marks the locked box as such: --bit-borm-surface-muted, which the demo re-tints to the site's
+        // sunken surface (--bb-surface-sunken, #F5F5F5).
+        Assert.AreEqual("rgb(245, 245, 245)", await ComputedAsync(reference, "background-color"), "the read-only background");
 
         // Unlocking gives it back.
         await Control(page, "Confirmed").FocusAsync();
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/README.md b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/README.md
index c255854b976..9007a1e368a 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/README.md
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/README.md
@@ -12,8 +12,9 @@ browser:
   mouse press causes before the click it starts, the implicit submission Enter triggers (which a form only gets with a
   submit button or a single text box), a tag box that belongs to no form, a debounced field written while the caret is
   still in it;
-- there is no stylesheet, so no theme tokens, no dark palette following the operating system, no grid that collapses
-  on a narrow screen and no error colours, and no `<datalist>` or `<input type="file">` doing their part;
+- there is no stylesheet, so no theme tokens, no dark palette following the operating system or the site's toggle, no
+  grid that collapses on a narrow screen and no error colours, and no `<datalist>` or `<input type="file">` doing their
+  part;
 - the demo pages, prerendered on the server and then run on WebAssembly with real application code, never run.
 
 This suite boots the demo (`Bit.Borm.Demo.Server`, which prerenders the pages and runs them on WebAssembly) and drives
@@ -32,13 +33,13 @@ the page around the form shows after a submit, the attributes a screen reader re
 | `ChoiceTests` | A label typed into the combobox, in any casing, stores the value behind it, and an answer on no list is kept and reported; choosing a country loads its cities and changing it clears the old city and reloads them; a plan fills in the seats, which stay editable; Enter or a comma adds a tag without submitting the form, a repeat is ignored, and Backspace on an empty box removes the last; a select's cities reload with the country and a city that no longer exists is dropped; an options service that fails says so and the form recovers once it is back. |
 | `FieldTests` | A field written on every keystroke drives the live preview and its counter while the caret is still in it, and the counter turns red instead of truncating; the clear button empties the field and leaves the caret in it; the reveal button shows the password and says so with `aria-pressed`; chosen files are listed and judged by type and size, clearing them puts the focus back on the field and the same file can be chosen again; a custom renderer takes part in validation like a built-in control. |
 | `JsonSchemaTests` | An edited schema regenerates the form, rules included; an invalid one is reported and the last good form stays; the conditional example brings `x-visibleWhen`, `dependentRequired`, `$ref` and its two-column layout through; the wizard example survives the round trip out to JSON and back, and Enter in its one-field step advances. |
-| `ThemingAndLayoutTests` | A dark colour-scheme preference switches the form's tokens and the controls with them, and switches back on the spot; a `data-theme` on an ancestor wins over the preference; two columns side by side collapse into one on a narrow screen, and a field spanning both is as wide as the two; reduced motion turns the transitions off. |
+| `ThemingAndLayoutTests` | On the demo, a dark colour-scheme preference puts the site in its dark theme and the forms' tokens, controls, `color-scheme` and error colours with it (the demo re-tints Borm's tokens to the site's), and switches back on the spot; the header's toggle wins over the preference in both directions, survives a page load, and toggling to what the system asks for hands the choice back to it. On a page that links nothing but `bit-borm.css`, the shipped palettes follow the preference and a `data-theme` on an ancestor wins over it in both directions. Two columns side by side collapse into one on a narrow screen, and a field spanning both is as wide as the two; reduced motion turns the transitions off. |
 | `KeyboardTests` | The signup form can be filled in and sent from the keyboard alone (Tab, the arrow keys in a radio group, Space, Enter); a field marked to autofocus has the caret when the page opens; a read-only answer stays in the tab order but cannot be changed. |
-| `DemoPagesTests` | Every demo page (the routes are read from the `@page` directives under `Demo/Client/Pages`, so a new page is swept without being listed) answers, is prerendered with its forms in the first response, turns interactive with `bit-borm.css` loaded and styling its forms, and runs every button on it without a console error, an unhandled exception, a failed request or the error banner; an unknown address gets the not-found page inside the app; navigating through every demo in the app leaves a working form behind; "View source" shows the page's code. |
+| `DemoPagesTests` | Every demo page (the routes are read from the `@page` directives under `Demo/Client/Pages`, so a new page is swept without being listed) answers, is prerendered with its forms in the first response, turns interactive with `bit-borm.css` loaded and styling its forms on the site's theme, and runs every button in its content (the docs column, or the landing page) without a console error, an unhandled exception, a failed request or the error banner; an unknown address gets the 404 page inside the site shell, whose footer still leads back to a demo; navigating through every page of the docs nav panel in the app leaves a working form behind; "View source" shows the page's code. |
 
 Every page is prerendered, so its form - inputs, buttons and all - is on screen before anything handles a keystroke:
 a value typed then is overwritten when WebAssembly takes the page over, and a click is lost. Each test waits until the
-page runs in the browser (`data-interactive="true"` on the layout's `.app-shell`) and the page has stopped changing,
+page runs in the browser (`data-interactive="true"` on the site shell's `.page`) and the page has stopped changing,
 and from then on waits for conditions (a message, a focused control, a value), never for a fixed time.
 
 Every test also fails on any uncaught page error and on any console error in which Blazor reports an unhandled
@@ -85,7 +86,8 @@ the Development environment so the build output finds its static web assets), wa
 between all tests and stops it when the run ends. Rebuilding the demo while a run is in progress changes the
 fingerprinted assets under the running server and fails the pages that boot afterwards, so rebuild between runs.
 Each test gets a browser context of its own - its own WebAssembly instance, so no form state leaks between tests -
-with a light colour scheme, so the stylesheet's `prefers-color-scheme` theme is the same on every machine, and reduced
+with a light colour scheme, so the site's theme (which follows `prefers-color-scheme` until its toggle is used) is the
+same on every machine, and reduced
 motion, which the stylesheet answers by dropping its transitions, so a colour read right after a field turned invalid
 is its resting colour. Every request that leaves the demo's origin is answered with an empty response, so a machine
 without internet access runs the suite just the same. The tests run one at a time: many of them race a keystroke
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/RepeaterTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/RepeaterTests.cs
index 6cb90f81443..7b6a20f7044 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/RepeaterTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/RepeaterTests.cs
@@ -104,7 +104,7 @@ public async Task Removing_the_last_line_leaves_the_caret_on_the_add_button()
         await Expect(Rows(page, "Lines")).ToHaveCountAsync(0);
         await Expect(AddButton(page)).ToBeFocusedAsync();
         await Expect(page.Locator("#borm_Lines [aria-live=polite]")).ToHaveTextAsync("No lines yet.");
-        await Expect(page.Locator(".demo-result pre").First).ToContainTextAsync("Lines     0   total: €0.00");
+        await Expect(page.Locator(".demo-readout pre")).ToContainTextAsync("Lines     0   total: €0.00");
     }
 
     [TestMethod]
@@ -169,7 +169,7 @@ public async Task Locking_the_invoice_disables_every_control_and_button_in_it()
         var page = await OpenAsync("/array");
         await AddLineAsync(page, "Chai");
 
-        await page.Locator(".demo-card label", new() { HasTextString = "Lock the invoice" }).Locator("input").CheckAsync();
+        await page.Locator("label", new() { HasTextString = "Lock the invoice" }).Locator("input").CheckAsync();
 
         await Expect(Control(page, "Customer")).ToBeDisabledAsync();
         await Expect(Control(page, "Lines[0].Description")).ToBeDisabledAsync();
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ThemingAndLayoutTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ThemingAndLayoutTests.cs
index 664a0767d00..8d0c07268fd 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ThemingAndLayoutTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ThemingAndLayoutTests.cs
@@ -5,63 +5,140 @@
 namespace Bit.Borm.Tests.E2E;
 
 /// <summary>
-/// The stylesheet as the browser resolves it: the dark theme following the operating system, a <c>data-theme</c>
-/// on an ancestor overriding it, the grid that collapses to one column on a narrow screen, and the transitions that
-/// reduced motion turns off. Every value is read back with getComputedStyle or getBoundingClientRect, never from the
-/// markup.
+/// The stylesheet as the browser resolves it. On the demo, the forms wear the site's theme: the site follows the
+/// operating system's colour scheme until its toggle is used, keeps the choice, and the forms follow the site - Borm's
+/// tokens re-tinted onto the site's (wwwroot/demo.css). On its own, the shipped stylesheet follows the operating system,
+/// and a <c>data-theme</c> on an ancestor overrides it. Then the grid that collapses to one column on a narrow screen,
+/// and the transitions that reduced motion turns off. Every value is read back with getComputedStyle or
+/// getBoundingClientRect, never from the markup.
 /// </summary>
 [TestClass]
 public sealed class ThemingAndLayoutTests : BormTest
 {
+    // The site's surfaces and text (app.css, --bit-clr-bg-pri / --bit-clr-fg-pri / --bit-clr-err), which the forms are
+    // re-tinted to.
+    private const string SiteLightSurface = "rgb(255, 255, 255)";
+    private const string SiteDarkSurface = "rgb(15, 19, 24)";
+    private const string SiteDarkText = "rgb(230, 236, 242)";
+    private const string SiteDarkError = "rgb(230, 122, 115)";
+
+    // The shipped stylesheet's own palettes (bit-borm.css), which a page without the demo's re-tint gets.
     private const string LightSurface = "rgb(255, 255, 255)";
     private const string DarkSurface = "rgb(17, 24, 39)";
 
     [TestMethod]
-    public async Task A_dark_colour_scheme_preference_switches_the_form_tokens_and_the_controls_with_them()
+    public async Task A_dark_colour_scheme_preference_puts_the_site_and_its_forms_in_the_dark_theme_and_back()
     {
         var page = await OpenAsync("/builder", DefaultContextOptions(ColorScheme.Dark));
         var form = Form(page);
         var input = Control(page, "FullName");
 
-        Assert.AreEqual("#111827", await ComputedAsync(form, "--bit-borm-surface"), "the dark surface token");
-        Assert.AreEqual("#f9fafb", await ComputedAsync(form, "--bit-borm-text"), "the dark text token");
+        Assert.AreEqual("dark", await SiteThemeAsync(page), "the site does not follow the dark preference");
+        Assert.AreEqual("#0F1318", await ComputedAsync(form, "--bit-borm-surface"), "the dark surface token");
+        Assert.AreEqual("#E6ECF2", await ComputedAsync(form, "--bit-borm-text"), "the dark text token");
         Assert.AreEqual("dark", await ComputedAsync(form, "color-scheme"), "the browser-drawn parts of the controls stay light");
-        Assert.AreEqual(DarkSurface, await ComputedAsync(input, "background-color"), "the dark input background");
-        Assert.AreEqual("rgb(249, 250, 251)", await ComputedAsync(form, "color"), "the dark form text");
+        Assert.AreEqual(SiteDarkSurface, await ComputedAsync(input, "background-color"), "the dark input background");
+        Assert.AreEqual(SiteDarkText, await ComputedAsync(form, "color"), "the dark form text");
 
         // The error colour is lighter on the dark surface, where the light theme's red would be too dim to read.
         await SubmitButton(page).ClickAsync();
         await Expect(Errors(page, "Email")).ToHaveCountAsync(1);
-        Assert.AreEqual("rgb(248, 113, 113)", await ComputedAsync(Control(page, "Email"), "border-top-color"), "the dark error border");
+        Assert.AreEqual(SiteDarkError, await ComputedAsync(Control(page, "Email"), "border-top-color"), "the dark error border");
 
-        // The preference changing under an open page restyles it on the spot: no reload, no re-render.
+        // The preference changing under an open page restyles it on the spot: no reload, no re-render. The browser
+        // reports the change to the page's media query listener with its next frame, not within the emulation call.
         await page.EmulateMediaAsync(new PageEmulateMediaOptions { ColorScheme = ColorScheme.Light });
-        Assert.AreEqual("#ffffff", await ComputedAsync(form, "--bit-borm-surface"), "the light surface token");
-        Assert.AreEqual(LightSurface, await ComputedAsync(input, "background-color"), "the light input background");
+        await EventuallyAsync(async () => await SiteThemeAsync(page) == "light", "the site followed the preference back to light");
+        Assert.AreEqual("#FFFFFF", await ComputedAsync(form, "--bit-borm-surface"), "the light surface token");
+        Assert.AreEqual(SiteLightSurface, await ComputedAsync(input, "background-color"), "the light input background");
         Assert.AreEqual(ErrorColour, await ComputedAsync(Control(page, "Email"), "border-top-color"), "the light error border");
         Assert.AreEqual("light", await ComputedAsync(form, "color-scheme"));
     }
 
     [TestMethod]
-    public async Task A_data_theme_on_an_ancestor_wins_over_the_operating_system_preference()
+    public async Task The_site_toggle_wins_over_the_preference_is_kept_and_hands_back_to_it()
     {
         // A dark site on a light system...
         var page = await OpenAsync("/builder");
         var input = Control(page, "FullName");
-        Assert.AreEqual(LightSurface, await ComputedAsync(input, "background-color"));
+        Assert.AreEqual(SiteLightSurface, await ComputedAsync(input, "background-color"));
 
-        await page.Locator(".app-shell").EvaluateAsync("e => e.dataset.theme = 'dark'");
-        Assert.AreEqual(DarkSurface, await ComputedAsync(input, "background-color"), "data-theme=dark under a light preference");
+        await ThemeToggle(page).ClickAsync();
+        await EventuallyAsync(async () => await SiteThemeAsync(page) == "dark", "the toggle put the site in the dark theme");
+        Assert.AreEqual(SiteDarkSurface, await ComputedAsync(input, "background-color"), "the toggle's dark under a light preference");
+        Assert.AreEqual("dark", await ComputedAsync(Form(page), "color-scheme"));
 
-        // ...and a light site on a dark one.
+        // ...and a light site on a dark one, which a page loaded afterwards keeps.
         await page.EmulateMediaAsync(new PageEmulateMediaOptions { ColorScheme = ColorScheme.Dark });
-        await page.Locator(".app-shell").EvaluateAsync("e => e.dataset.theme = 'light'");
-        Assert.AreEqual(LightSurface, await ComputedAsync(input, "background-color"), "data-theme=light under a dark preference");
+        await ThemeToggle(page).ClickAsync();
+        await EventuallyAsync(async () => await SiteThemeAsync(page) == "light", "the toggle put the site back in the light theme");
+        Assert.AreEqual(SiteLightSurface, await ComputedAsync(input, "background-color"), "the toggle's light under a dark preference");
         Assert.AreEqual("light", await ComputedAsync(Form(page), "color-scheme"));
 
+        await GotoAsync(page, "/layout");
+        await WaitForInteractiveAsync(page);
+        Assert.AreEqual("light", await SiteThemeAsync(page), "the choice did not survive a page load");
+        Assert.AreEqual(SiteLightSurface, await ComputedAsync(Control(page, "FirstName"), "background-color"), "the kept light under a dark preference");
+
+        // Toggling to what the system already asks for hands the choice back: the preference rules again.
+        await ThemeToggle(page).ClickAsync();
+        await EventuallyAsync(async () => await SiteThemeAsync(page) == "dark", "the toggle followed the preference again");
+        await page.EmulateMediaAsync(new PageEmulateMediaOptions { ColorScheme = ColorScheme.Light });
+        await EventuallyAsync(async () => await SiteThemeAsync(page) == "light", "the site followed the light preference once the choice was handed back");
+        Assert.AreEqual(SiteLightSurface, await ComputedAsync(Control(page, "FirstName"), "background-color"));
+    }
+
+    [TestMethod]
+    public async Task On_its_own_the_stylesheet_follows_the_preference_and_a_data_theme_on_an_ancestor_wins_over_it()
+    {
+        // The library's colour modes, on a page of the demo's origin that links bit-borm.css and nothing else: the demo
+        // re-tints its own forms to the site's theme, so this is where the shipped palettes are still what is drawn.
+        var page = await OpenAsync("/builder");
+        var stylesheet = await page.EvaluateAsync<string>("() => document.querySelector('link[href*=\"_content/Bit.Borm/bit-borm\"]').href");
+        await page.RouteAsync(BaseUrl + "/stylesheet-fixture", route => route.FulfillAsync(new RouteFulfillOptions
+        {
+            Status = 200,
+            ContentType = "text/html",
+            Body = $"""
+                    <!DOCTYPE html>
+                    <html><head><link rel="stylesheet" href="{stylesheet}" /></head>
+                    <body><div id="host"><form class="bit-borm-form">
+                        <input id="plain" class="bit-borm-input" />
+                        <input id="invalid" class="bit-borm-input bit-borm-input--invalid" />
+                    </form></div></body></html>
+                    """,
+        }));
+        await page.GotoAsync(BaseUrl + "/stylesheet-fixture", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });
+
+        var form = page.Locator("form.bit-borm-form");
+        var input = page.Locator("#plain");
+        var host = page.Locator("#host");
+        Assert.AreEqual("#ffffff", await ComputedAsync(form, "--bit-borm-surface"), "the light surface token");
+        Assert.AreEqual(LightSurface, await ComputedAsync(input, "background-color"));
+
+        // The operating system's dark preference switches the tokens and the controls with them.
+        await page.EmulateMediaAsync(new PageEmulateMediaOptions { ColorScheme = ColorScheme.Dark });
+        Assert.AreEqual("#111827", await ComputedAsync(form, "--bit-borm-surface"), "the dark surface token");
+        Assert.AreEqual("#f9fafb", await ComputedAsync(form, "--bit-borm-text"), "the dark text token");
+        Assert.AreEqual("dark", await ComputedAsync(form, "color-scheme"), "the browser-drawn parts of the controls stay light");
+        Assert.AreEqual(DarkSurface, await ComputedAsync(input, "background-color"), "the dark input background");
+        Assert.AreEqual("rgb(249, 250, 251)", await ComputedAsync(form, "color"), "the dark form text");
+        Assert.AreEqual("rgb(248, 113, 113)", await ComputedAsync(page.Locator("#invalid"), "border-top-color"), "the dark error border");
+
+        // A light site on a dark system...
+        await host.EvaluateAsync("e => e.dataset.theme = 'light'");
+        Assert.AreEqual(LightSurface, await ComputedAsync(input, "background-color"), "data-theme=light under a dark preference");
+        Assert.AreEqual("light", await ComputedAsync(form, "color-scheme"));
+        Assert.AreEqual("rgb(220, 38, 38)", await ComputedAsync(page.Locator("#invalid"), "border-top-color"), "the light error border");
+
+        // ...and a dark site on a light one.
+        await page.EmulateMediaAsync(new PageEmulateMediaOptions { ColorScheme = ColorScheme.Light });
+        await host.EvaluateAsync("e => e.dataset.theme = 'dark'");
+        Assert.AreEqual(DarkSurface, await ComputedAsync(input, "background-color"), "data-theme=dark under a light preference");
+
         // Without it, the preference rules again.
-        await page.Locator(".app-shell").EvaluateAsync("e => delete e.dataset.theme");
-        Assert.AreEqual(DarkSurface, await ComputedAsync(input, "background-color"), "the dark preference once data-theme is gone");
+        await host.EvaluateAsync("e => delete e.dataset.theme");
+        Assert.AreEqual(LightSurface, await ComputedAsync(input, "background-color"), "the light preference once data-theme is gone");
     }
 
     [TestMethod]
@@ -99,6 +176,13 @@ public async Task Reduced_motion_turns_the_transitions_off()
         Assert.AreEqual("0.15s, 0.15s", await ComputedAsync(Control(moving, "FullName"), "transition-duration"));
     }
 
+    /// <summary>The site's theme, as theme.js has put it on the root element.</summary>
+    private static Task<string> SiteThemeAsync(IPage page) =>
+        page.EvaluateAsync<string>("() => document.documentElement.getAttribute('bit-theme') ?? ''");
+
+    /// <summary>The header's light/dark switch.</summary>
+    private static ILocator ThemeToggle(IPage page) => page.Locator("header.bb-header .bb-theme-toggle");
+
     private static async Task<LocatorBoundingBoxResult> BoxOfAsync(ILocator locator)
     {
         var box = await locator.BoundingBoxAsync();
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ValidationTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ValidationTests.cs
index 5235babbfb2..65a72a1f156 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ValidationTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.E2E/ValidationTests.cs
@@ -196,7 +196,7 @@ public async Task Reset_restores_the_starting_values_and_clears_the_errors()
     public async Task Values_are_tidied_on_the_way_in_and_a_date_outside_its_window_is_reported()
     {
         var page = await OpenAsync("/settled-answers");
-        var model = page.Locator(".demo-split pre");
+        var model = page.Locator(".demo-readout pre");
 
         // Normalize and Trim fix the value rather than complain about it, in the box and in the model alike.
         await EnterAsync(Control(page, "Reference"), "  bk-2048 ");
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpOracleTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpOracleTests.cs
index b0d84611f1b..14eb30abf86 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpOracleTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpOracleTests.cs
@@ -312,16 +312,17 @@ public void The_guide_sections_cover_every_heading_of_the_readme()
     [TestMethod]
     public void Every_page_of_the_demo_menu_has_its_source()
     {
-        // The menu is the demo's own list of its forms; every one of them must be a file an agent can read.
-        var menu = BormSourceCatalog.GetSourceFile("Demo/Client/Layout/NavMenu.razor")!;
-        var routes = NavLinkRegex().Matches(menu).Select(match => $"/{match.Groups["route"].Value}").Where(route => route != "/mcp-server").ToArray();
+        // The docs catalog is the demo's own list of its forms - the nav panel, the search palette and the pager are all
+        // built from it; every one of them must be a file an agent can read. The catalog itself is site chrome, which
+        // the server does not hand out, so it is read here as the type it compiles to.
+        var routes = Bit.Borm.Demo.Client.DocsCatalog.AllPages.Select(page => page.Url).Where(route => route != "/mcp-server").ToArray();
 
         Assert.IsGreaterThan(15, routes.Length);
 
         foreach (var route in routes)
         {
-            Assert.IsTrue(BormSourceCatalog.SourceFiles.Any(file => string.Equals(file.Route, route, StringComparison.OrdinalIgnoreCase)),
-                $"The menu links to '{route}', and no embedded page declares it.");
+            Assert.IsTrue(BormSourceCatalog.SourceFiles.Any(file => file.Kind == "Page" && file.Title is not null && string.Equals(file.Route, route, StringComparison.OrdinalIgnoreCase)),
+                $"The menu links to '{route}', and no embedded page with a title declares it.");
         }
     }
 
@@ -373,7 +374,4 @@ public async Task Every_tool_is_reachable_as_a_plain_get_with_the_same_answer()
 
     [GeneratedRegex(@"^#{2,4} (?<text>.+)$")]
     private static partial Regex HeadingRegex();
-
-    [GeneratedRegex(@"<NavLink href=""(?<route>[^""]+)""")]
-    private static partial Regex NavLinkRegex();
 }
diff --git a/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpToolTests.cs b/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpToolTests.cs
index 544778ef676..cfc89d33956 100644
--- a/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpToolTests.cs
+++ b/src/Utilities/Borm/Tests/Bit.Borm.Tests.Mcp/McpToolTests.cs
@@ -347,6 +347,8 @@ public async Task The_source_index_lists_the_pages_what_they_share_and_the_style
         Assert.DoesNotContain("McpServer.razor", index);
         Assert.DoesNotContain("NotFound.razor", index);
         Assert.DoesNotContain("Error.razor", index);
+        Assert.DoesNotContain("Demo/Client/Layout/", index);
+        Assert.DoesNotContain("DocsCatalog.cs", index);
     }
 
     [TestMethod]
diff --git a/src/Utilities/Bortable/Demo/Client/Bit.Bortable.Demo.Client.csproj b/src/Utilities/Bortable/Demo/Client/Bit.Bortable.Demo.Client.csproj
index b7ac3208469..e2ce58bc76a 100644
--- a/src/Utilities/Bortable/Demo/Client/Bit.Bortable.Demo.Client.csproj
+++ b/src/Utilities/Bortable/Demo/Client/Bit.Bortable.Demo.Client.csproj
@@ -70,10 +70,10 @@ foreach (var file in files)
     content = Regex.Replace(content, @"(?m)^[ \t]*@page[ \t]+""[^""]*""[ \t]*\r?\n", "");
     // 2. The <PageTitle> that sets the browser tab title.
     content = Regex.Replace(content, @"(?s)[ \t]*<PageTitle>.*?</PageTitle>[ \t]*\r?\n", "");
-    // 3. The demo-header description block. Its end is found by balancing <div> tags rather than
+    // 3. The bb-intro title block. Its end is found by balancing <div> tags rather than
     //    with a lazy match, which would stop at the first </div> nested inside the header and
     //    leave the rest of it behind.
-    var header = Regex.Match(content, @"[ \t]*<div class=""demo-header"">");
+    var header = Regex.Match(content, @"[ \t]*<div class=""bb-intro"">");
     if (header.Success)
     {
         var depth = 0;
diff --git a/src/Utilities/Bortable/Demo/Client/DocsCatalog.cs b/src/Utilities/Bortable/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..8076c43fd9a
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,198 @@
+using Bit.Bortable.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bortable.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bortable";
+
+    public const string PackageId = "Bit.Bortable";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bortable";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bortable is a Blazor-native drag-and-drop sortable list inspired by SortableJS: reorder items, drag " +
+        "them between lists, clone, swap and multi-drag, with the sorting engine written in C#. This site is " +
+        "itself a Blazor app built on it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["handle", "clone", "swap", "nested", "events"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register the services, link the stylesheet and put your first list on a page.",
+                "install setup nuget package AddBitBortableServices quick start program.cs stylesheet render mode",
+                typeof(GettingStarted)),
+        ]),
+        new("Sorting",
+        [
+            new("/simple-list", "Simple list",
+                "Drag the items to reorder them; the bound list updates live with @bind-Items.",
+                "reorder sort bind-Items items itemtemplate basic list",
+                typeof(SimpleList)),
+            new("/shared", "Shared lists",
+                "Lists with the same Group exchange items, with a ghost preview of where the item lands.",
+                "group shared lists move between ItemClassSelector tint ghost",
+                typeof(Shared)),
+            new("/cloning", "Cloning",
+                "Pull=\"BortablePull.Clone\" copies an item into another list and keeps the original in place.",
+                "clone copy pull BortablePull source target",
+                typeof(Cloning)),
+            new("/disable-sort", "Disabling sorting",
+                "Sort=\"false\" and Put=\"false\": a list whose items can only be dragged out of it.",
+                "sort put disable read-only palette pick",
+                typeof(DisableSort)),
+            new("/handle", "Handle",
+                "Handle=\".handle\" limits dragging to a grip, so the rest of the row stays clickable.",
+                "handle grip drag handle selector",
+                typeof(HandleDemo)),
+            new("/filter", "Filter",
+                "A Filter predicate locks items so they cannot be picked up.",
+                "filter locked non-draggable predicate disabled item",
+                typeof(FilterDemo)),
+            new("/thresholds", "Swap thresholds",
+                "SwapThreshold, InvertSwap and InvertedSwapThreshold, with the swap zones drawn as you tune them.",
+                "threshold swapthreshold invertswap invertedswapthreshold direction zones dead zone",
+                typeof(Thresholds)),
+        ]),
+        new("Layouts & events",
+        [
+            new("/grid", "Grid",
+                "Point the list at a CSS grid container and it sorts a grid.",
+                "grid layout css grid tiles",
+                typeof(Grid)),
+            new("/nested", "Nested sortables",
+                "Every item holds a list of its own, and items move between branches and depths.",
+                "nested tree recursive branches depth",
+                typeof(Nested)),
+            new("/events", "Events",
+                "The SortableJS lifecycle callbacks - OnStart, OnEnd, OnAdd, OnRemove, OnUpdate - logged live.",
+                "events OnStart OnEnd OnAdd OnRemove OnUpdate OnSort OnChange callbacks log",
+                typeof(Events)),
+        ]),
+        new("Plugins",
+        [
+            new("/multi-drag", "Multi-drag",
+                "MultiDrag=\"true\": select several items and drag them together as one block.",
+                "multi drag multidrag select selection plugin",
+                typeof(MultiDragDemo)),
+            new("/swap", "Swap",
+                "Swap=\"true\": drop an item onto another to trade their places.",
+                "swap plugin trade places highlight",
+                typeof(SwapDemo)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, so an AI agent reads the library instead of guessing.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Examples/DemoCode.razor b/src/Utilities/Bortable/Demo/Client/Examples/DemoCode.razor
index cfb5245e6f0..d1c656cfcde 100644
--- a/src/Utilities/Bortable/Demo/Client/Examples/DemoCode.razor
+++ b/src/Utilities/Bortable/Demo/Client/Examples/DemoCode.razor
@@ -6,9 +6,9 @@
    built from more than one file names the others in Files (paths relative to Pages, separated
    by commas), and they are shown after it. *@
 
-<div class="demo-code">
+<div class="bb-source demo-code">
     <button type="button"
-            class="demo-code__toggle"
+            class="btn btn-secondary demo-code__toggle"
             aria-expanded="@_open.ToString().ToLowerInvariant()"
             @onclick="Toggle">
         <span class="demo-code__caret">@(_open ? "▾" : "▸")</span>
@@ -20,7 +20,7 @@
     {
         @if (_sources.Count == 0)
         {
-            <div class="demo-code__empty">Source for this page is not available.</div>
+            <div class="bb-empty demo-code__empty">Source for this page is not available.</div>
         }
         else
         {
@@ -28,9 +28,9 @@
             {
                 @if (_sources.Count > 1)
                 {
-                    <div class="demo-code__file">@path</div>
+                    <div class="bb-source-file demo-code__file">@path</div>
                 }
-                <pre class="demo-code__pre"><code class="demo-code__code">@source</code></pre>
+                <pre class="bb-code demo-code__pre"><code class="demo-code__code">@source</code></pre>
             }
         }
     }
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bortable/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bortable/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bortable/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bortable/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bortable/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/Footer.razor b/src/Utilities/Bortable/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bortable/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/Header.razor b/src/Utilities/Bortable/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bortable/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor
index a4b52089099..44980dda101 100644
--- a/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor
@@ -1,21 +1,30 @@
 @inherits LayoutComponentBase
 
-@* data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
-   long before its event handlers are, which is what the E2E suite waits out with it. *@
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
+
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
+
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
+
 <div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
-    <aside class="sidebar">
-        <NavMenu />
-    </aside>
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
+
+    <Header />
 
-    <main class="main">
-        <header class="top-row">
-            <a href="https://sortablejs.github.io/Sortable/" target="_blank" rel="noopener">SortableJS</a>
-            <a href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bortable" target="_blank" rel="noopener">GitHub</a>
-            <a href="https://learn.microsoft.com/aspnet/core/blazor/" target="_blank" rel="noopener">Blazor Docs</a>
-        </header>
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
+        </main>
+    </div>
 
-        <article class="content">
-            @Body
-        </article>
-    </main>
+    <Footer />
 </div>
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor.css
index 75a20468e16..22745885fe0 100644
--- a/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor.css
+++ b/src/Utilities/Bortable/Demo/Client/Layout/MainLayout.razor.css
@@ -1,78 +1,25 @@
-.page {
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
 }
 
-.sidebar {
-    background: linear-gradient(180deg, #042f2e 0%, #115e59 100%);
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.main {
+main {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
 }
 
-.top-row {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 1.5rem;
-    height: 3.5rem;
-    padding: 0 1.5rem;
-    background: var(--demo-surface);
-    border-bottom: 1px solid var(--demo-border);
-}
-
-    .top-row ::deep a {
-        color: var(--demo-muted);
-        font-weight: 500;
-        font-size: 0.9rem;
-        white-space: nowrap;
-    }
-
-    .top-row ::deep a:hover {
-        color: var(--demo-text);
-        text-decoration: none;
-    }
-
-.content {
-    flex: 1;
-    padding: 1.75rem 2rem;
-    min-width: 0;
-}
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: center;
-    }
-
-    .content {
-        padding: 1.25rem 1rem;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 260px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-        flex-shrink: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-    }
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
 }
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/NavMenu.razor b/src/Utilities/Bortable/Demo/Client/Layout/NavMenu.razor
deleted file mode 100644
index ef6df16d5c8..00000000000
--- a/src/Utilities/Bortable/Demo/Client/Layout/NavMenu.razor
+++ /dev/null
@@ -1,77 +0,0 @@
-<div class="nav-top">
-    <a class="brand" href="">
-        <span class="brand-mark">@((MarkupString)LogoSvg)</span>
-        <span class="brand-text">bit Bortable</span>
-    </a>
-    <button class="nav-toggle" title="Toggle navigation" @onclick="ToggleNavMenu">
-        <span></span><span></span><span></span>
-    </button>
-</div>
-
-<nav class="@NavMenuCssClass">
-    <NavLink class="nav-link" href="" Match="NavLinkMatch.All" @onclick="CollapseNavMenu">
-        <span class="nav-icon">≡</span> Simple list
-    </NavLink>
-    <NavLink class="nav-link" href="shared" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⇄</span> Shared lists
-    </NavLink>
-    <NavLink class="nav-link" href="cloning" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⎘</span> Cloning
-    </NavLink>
-    <NavLink class="nav-link" href="disable-sort" @onclick="CollapseNavMenu">
-        <span class="nav-icon">∅</span> Disabling sorting
-    </NavLink>
-    <NavLink class="nav-link" href="handle" @onclick="CollapseNavMenu">
-        <span class="nav-icon">☰</span> Handle
-    </NavLink>
-    <NavLink class="nav-link" href="filter" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⊘</span> Filter
-    </NavLink>
-    <NavLink class="nav-link" href="thresholds" @onclick="CollapseNavMenu">
-        <span class="nav-icon">◫</span> Thresholds
-    </NavLink>
-
-    <div class="nav-section">Examples</div>
-    <NavLink class="nav-link" href="grid" @onclick="CollapseNavMenu">
-        <span class="nav-icon">▦</span> Grid
-    </NavLink>
-    <NavLink class="nav-link" href="nested" @onclick="CollapseNavMenu">
-        <span class="nav-icon">↳</span> Nested
-    </NavLink>
-    <NavLink class="nav-link" href="events" @onclick="CollapseNavMenu">
-        <span class="nav-icon">◉</span> Events
-    </NavLink>
-
-    <div class="nav-section">Plugins</div>
-    <NavLink class="nav-link" href="multi-drag" @onclick="CollapseNavMenu">
-        <span class="nav-icon">❖</span> Multi-drag
-    </NavLink>
-    <NavLink class="nav-link" href="swap" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⇅</span> Swap
-    </NavLink>
-
-    <div class="nav-divider"></div>
-    <NavLink class="nav-link" href="mcp-server" @onclick="CollapseNavMenu">
-        <span class="nav-icon">⌘</span> MCP Server
-    </NavLink>
-</nav>
-
-@code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "nav-menu collapse" : "nav-menu";
-
-    // Three rows, the middle one lifted out of line and on its way down, beside a two-way arrow.
-    private const string LogoSvg =
-        "<svg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>" +
-        "<rect x='2' y='3' width='13' height='4.5' rx='1.5' fill='#99f6e4'/>" +
-        "<rect x='4' y='9.75' width='13' height='4.5' rx='1.5' fill='#2dd4bf' stroke='#f0fdfa' stroke-width='1'/>" +
-        "<rect x='2' y='16.5' width='13' height='4.5' rx='1.5' fill='#ccfbf1'/>" +
-        "<path d='M20.5 5v14' stroke='#f0fdfa' stroke-width='1.5' stroke-linecap='round'/>" +
-        "<path d='M18.5 7l2-2 2 2M18.5 17l2 2 2-2' stroke='#f0fdfa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>" +
-        "</svg>";
-
-    private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;
-
-    private void CollapseNavMenu() => collapseNavMenu = true;
-}
diff --git a/src/Utilities/Bortable/Demo/Client/Layout/NavMenu.razor.css b/src/Utilities/Bortable/Demo/Client/Layout/NavMenu.razor.css
deleted file mode 100644
index 745d385aaba..00000000000
--- a/src/Utilities/Bortable/Demo/Client/Layout/NavMenu.razor.css
+++ /dev/null
@@ -1,121 +0,0 @@
-.nav-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 3.5rem;
-    padding: 0 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    flex-shrink: 0;
-}
-
-.brand {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    color: #fff;
-    font-weight: 600;
-    font-size: 1.05rem;
-}
-
-.brand:hover {
-    text-decoration: none;
-}
-
-.brand-mark {
-    display: inline-flex;
-    align-items: center;
-}
-
-.nav-toggle {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    width: 36px;
-    height: 36px;
-    padding: 0 8px;
-    background: rgba(255, 255, 255, 0.08);
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-    .nav-toggle span {
-        display: block;
-        height: 2px;
-        background: #fff;
-        border-radius: 2px;
-    }
-
-.nav-menu {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 0.75rem;
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-.nav-menu ::deep .nav-link {
-    display: flex;
-    align-items: center;
-    gap: 0.65rem;
-    padding: 0.6rem 0.75rem;
-    color: rgba(255, 255, 255, 0.75);
-    font-size: 0.92rem;
-    font-weight: 500;
-    border-radius: 8px;
-}
-
-.nav-menu ::deep .nav-link:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: #fff;
-    text-decoration: none;
-}
-
-.nav-menu ::deep .nav-link.active {
-    background: rgba(255, 255, 255, 0.16);
-    color: #fff;
-}
-
-.nav-icon {
-    display: inline-flex;
-    width: 1.1rem;
-    justify-content: center;
-    font-size: 0.85rem;
-    color: #5eead4;
-}
-
-/* The group labels of the original demo's menu: Examples and Plugins. */
-.nav-section {
-    margin: 0.9rem 0 0.25rem;
-    padding: 0.75rem 0.75rem 0.2rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.nav-divider {
-    margin: 0.9rem 0 0.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-@media (max-width: 640.98px) {
-    .nav-menu.collapse {
-        display: none;
-    }
-}
-
-@media (min-width: 641px) {
-    .nav-toggle {
-        display: none;
-    }
-
-    .nav-menu.collapse {
-        display: flex;
-    }
-}
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/Cloning.razor b/src/Utilities/Bortable/Demo/Client/Pages/Cloning.razor
index c993368c951..543be2e912f 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/Cloning.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/Cloning.razor
@@ -1,10 +1,10 @@
 @page "/cloning"
 
-<PageTitle>Cloning - bit Bortable</PageTitle>
+<PageTitle>Cloning · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Cloning</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Cloning</h1>
+    <p class="bb-subtitle">
         Drag from the Source list to the Target. With <code>Pull="BortablePull.Clone"</code> the item is copied
         into the Target and the original stays in the Source - so the same item can be cloned again and again.
     </p>
@@ -12,26 +12,28 @@
 
 <DemoCode />
 
-<div class="demo-columns">
-    <div class="demo-col">
-        <div class="demo-col-title">Source (clone)</div>
-        <Bortable @bind-Items="_left" TItem="CloneDemoItem" Group="clone-shared" Id="clone-source"
-                  Pull="BortablePull.Clone" Clone="Duplicate"
-                  Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item.Name</ItemTemplate>
-        </Bortable>
+<div class="bb-demo">
+    <div class="demo-columns">
+        <div class="demo-col">
+            <div class="demo-col-title">Source (clone)</div>
+            <Bortable @bind-Items="_left" TItem="CloneDemoItem" Group="clone-shared" Id="clone-source"
+                      Pull="BortablePull.Clone" Clone="Duplicate"
+                      Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item.Name</ItemTemplate>
+            </Bortable>
+        </div>
+        <div class="demo-col">
+            <div class="demo-col-title">Target</div>
+            <Bortable @bind-Items="_right" TItem="CloneDemoItem" Group="clone-shared" Id="clone-target"
+                      Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item.Name</ItemTemplate>
+            </Bortable>
+        </div>
     </div>
-    <div class="demo-col">
-        <div class="demo-col-title">Target</div>
-        <Bortable @bind-Items="_right" TItem="CloneDemoItem" Group="clone-shared" Id="clone-target"
-                  Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item.Name</ItemTemplate>
-        </Bortable>
-    </div>
-</div>
 
-<p class="demo-order"><strong>Source:</strong> <span id="clone-source-order">@string.Join(", ", _left.Select(i => i.Name))</span></p>
-<p class="demo-order"><strong>Target:</strong> <span id="clone-target-order">@string.Join(", ", _right.Select(i => i.Name))</span></p>
+    <p class="demo-order"><strong>Source:</strong> <span id="clone-source-order">@string.Join(", ", _left.Select(i => i.Name))</span></p>
+    <p class="demo-order"><strong>Target:</strong> <span id="clone-target-order">@string.Join(", ", _right.Select(i => i.Name))</span></p>
+</div>
 
 @code {
     private IList<CloneDemoItem> _left = new List<CloneDemoItem>
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/DisableSort.razor b/src/Utilities/Bortable/Demo/Client/Pages/DisableSort.razor
index 8c8dd3f85df..85976c6b588 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/DisableSort.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/DisableSort.razor
@@ -1,10 +1,10 @@
 @page "/disable-sort"
 
-<PageTitle>Disabling sorting - bit Bortable</PageTitle>
+<PageTitle>Disabling sorting · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Disabling sorting</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Disabling sorting</h1>
+    <p class="bb-subtitle">
         The left list has <code>Sort="false"</code> and <code>Put="false"</code>, so its items cannot be reordered
         or received, but they can still be dragged out into the right list.
     </p>
@@ -12,26 +12,28 @@
 
 <DemoCode />
 
-<div class="demo-columns">
-    <div class="demo-col">
-        <div class="demo-col-title">Source (no sorting, no put)</div>
-        <Bortable @bind-Items="_left" TItem="string" Group="ds-shared" Id="disable-sort-source"
-                  Sort="false" Put="false"
-                  Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
+<div class="bb-demo">
+    <div class="demo-columns">
+        <div class="demo-col">
+            <div class="demo-col-title">Source (no sorting, no put)</div>
+            <Bortable @bind-Items="_left" TItem="string" Group="ds-shared" Id="disable-sort-source"
+                      Sort="false" Put="false"
+                      Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
+        <div class="demo-col">
+            <div class="demo-col-title">Target</div>
+            <Bortable @bind-Items="_right" TItem="string" Group="ds-shared" Id="disable-sort-target"
+                      Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
     </div>
-    <div class="demo-col">
-        <div class="demo-col-title">Target</div>
-        <Bortable @bind-Items="_right" TItem="string" Group="ds-shared" Id="disable-sort-target"
-                  Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
-    </div>
-</div>
 
-<p class="demo-order"><strong>Source:</strong> <span id="disable-sort-source-order">@string.Join(", ", _left)</span></p>
-<p class="demo-order"><strong>Target:</strong> <span id="disable-sort-target-order">@string.Join(", ", _right)</span></p>
+    <p class="demo-order"><strong>Source:</strong> <span id="disable-sort-source-order">@string.Join(", ", _left)</span></p>
+    <p class="demo-order"><strong>Target:</strong> <span id="disable-sort-target-order">@string.Join(", ", _right)</span></p>
+</div>
 
 @code {
     private IList<string> _left = new List<string> { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" };
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/Events.razor b/src/Utilities/Bortable/Demo/Client/Pages/Events.razor
index dc0a648179d..d3bd1b2b24a 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/Events.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/Events.razor
@@ -1,10 +1,10 @@
 @page "/events"
 
-<PageTitle>Events - bit Bortable</PageTitle>
+<PageTitle>Events · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Events</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Events</h1>
+    <p class="bb-subtitle">
         Every drag fires the SortableJS-style lifecycle callbacks. Drag items within and between the lists and
         watch the log - the newest event is on top.
     </p>
@@ -12,45 +12,47 @@
 
 <DemoCode />
 
-<div class="demo-columns">
-    <div class="demo-col">
-        <div class="demo-col-title">events-left</div>
-        <Bortable @bind-Items="_left" TItem="string" Group="ev" Id="events-left"
-                  Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost"
-                  OnStart='e => Log("start", e)'
-                  OnEnd='e => Log("end", e)'
-                  OnAdd='e => Log("add", e)'
-                  OnRemove='e => Log("remove", e)'
-                  OnUpdate='e => Log("update", e)'>
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
+<div class="bb-demo">
+    <div class="demo-columns">
+        <div class="demo-col">
+            <div class="demo-col-title">events-left</div>
+            <Bortable @bind-Items="_left" TItem="string" Group="ev" Id="events-left"
+                      Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost"
+                      OnStart='e => Log("start", e)'
+                      OnEnd='e => Log("end", e)'
+                      OnAdd='e => Log("add", e)'
+                      OnRemove='e => Log("remove", e)'
+                      OnUpdate='e => Log("update", e)'>
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
+        <div class="demo-col">
+            <div class="demo-col-title">events-right</div>
+            <Bortable @bind-Items="_right" TItem="string" Group="ev" Id="events-right"
+                      Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost"
+                      OnStart='e => Log("start", e)'
+                      OnEnd='e => Log("end", e)'
+                      OnAdd='e => Log("add", e)'
+                      OnRemove='e => Log("remove", e)'
+                      OnUpdate='e => Log("update", e)'>
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
     </div>
-    <div class="demo-col">
-        <div class="demo-col-title">events-right</div>
-        <Bortable @bind-Items="_right" TItem="string" Group="ev" Id="events-right"
-                  Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost"
-                  OnStart='e => Log("start", e)'
-                  OnEnd='e => Log("end", e)'
-                  OnAdd='e => Log("add", e)'
-                  OnRemove='e => Log("remove", e)'
-                  OnUpdate='e => Log("update", e)'>
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
-    </div>
-</div>
 
-<p class="demo-order"><strong>Left:</strong> <span id="events-left-order">@string.Join(", ", _left)</span></p>
-<p class="demo-order"><strong>Right:</strong> <span id="events-right-order">@string.Join(", ", _right)</span></p>
+    <p class="demo-order"><strong>Left:</strong> <span id="events-left-order">@string.Join(", ", _left)</span></p>
+    <p class="demo-order"><strong>Right:</strong> <span id="events-right-order">@string.Join(", ", _right)</span></p>
 
-<div class="event-log" id="events-log">
-    @if (_log.Count == 0)
-    {
-        <div class="event-log__empty">No events yet…</div>
-    }
-    @foreach (var line in _log)
-    {
-        <div class="event-log__line">@line</div>
-    }
+    <div class="bb-log event-log" id="events-log">
+        @if (_log.Count == 0)
+        {
+            <div class="bb-log-empty event-log__empty">No events yet…</div>
+        }
+        @foreach (var line in _log)
+        {
+            <div class="bb-log-line event-log__line">@line</div>
+        }
+    </div>
 </div>
 
 @code {
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/FilterDemo.razor b/src/Utilities/Bortable/Demo/Client/Pages/FilterDemo.razor
index 34d965cc0aa..36b4b62dcc4 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/FilterDemo.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/FilterDemo.razor
@@ -1,10 +1,10 @@
 @page "/filter"
 
-<PageTitle>Filter - bit Bortable</PageTitle>
+<PageTitle>Filter · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Filter</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Filter</h1>
+    <p class="bb-subtitle">
         The <code>Filter</code> predicate marks certain items as non-draggable. Try dragging the red item - it
         can't be picked up. The other items can still be dragged past it, which shifts it along by one.
     </p>
@@ -12,13 +12,15 @@
 
 <DemoCode />
 
-<Bortable @bind-Items="_items" TItem="string" Id="filter-list"
-          Filter="IsLocked" ItemClassSelector='i => IsLocked(i) ? "filtered" : null'
-          Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-    <ItemTemplate Context="item">@item</ItemTemplate>
-</Bortable>
+<div class="bb-demo">
+    <Bortable @bind-Items="_items" TItem="string" Id="filter-list"
+              Filter="IsLocked" ItemClassSelector='i => IsLocked(i) ? "filtered" : null'
+              Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+        <ItemTemplate Context="item">@item</ItemTemplate>
+    </Bortable>
 
-<p class="demo-order"><strong>Order:</strong> <span id="filter-order">@string.Join(", ", _items)</span></p>
+    <p class="demo-order"><strong>Order:</strong> <span id="filter-order">@string.Join(", ", _items)</span></p>
+</div>
 
 @code {
     private IList<string> _items = new List<string>
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bortable/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..a5d8ed7e2e8
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,91 @@
+@page "/getting-started"
+
+<PageTitle>Getting started · Bortable</PageTitle>
+
+<div class="bb-intro">
+    <h1>Getting started</h1>
+    <p class="bb-subtitle">
+        One package, one service registration and one stylesheet - then any <code>IList&lt;TItem&gt;</code>
+        on an interactively rendered page becomes a list people can put in order by hand.
+    </p>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        In a Blazor Web App with an interactive client, the package belongs in the <code>.Client</code>
+        project, and the services are registered in both projects - the server prerenders the same
+        components the client runs.
+    </p>
+    <pre class="bb-code">dotnet add package Bit.Bortable</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
+    <p class="bb-card-desc">
+        It registers one scoped service: the coordinator that holds the drag in progress, so lists
+        sharing a group can hand an item to each other. Scoped means one per circuit on Blazor Server
+        and one per application on WebAssembly, so two users never share a drag.
+    </p>
+    <pre class="bb-code"><span class="c">// Program.cs - in every project that renders a list</span>
+builder.Services.AddBitBortableServices();</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Reference the stylesheet</h3>
+    <p class="bb-card-desc">
+        It styles the drag states only - the ghost, the chosen item, the hidden original, the swap
+        target, the multi-drag selection - and leaves the look of the list to you. The script module
+        needs no tag: the lists import it on demand, once for all of them.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">link</span> rel=<span class="s">"stylesheet"</span> href=<span class="s">"_content/Bit.Bortable/bit-bortable.css"</span> /&gt;</pre>
+    <p class="bb-card-desc">And the namespace, in <code>_Imports.razor</code>:</p>
+    <pre class="bb-code"><span class="k">@@using</span> Bit.Bortable</pre>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> A first list</h3>
+    <p class="bb-card-desc">
+        Each item is wrapped in a <code>&lt;div&gt;</code> that carries the drag handlers;
+        <code>ItemTemplate</code> renders what goes inside it. <code>Class</code> and <code>Style</code> go
+        to the list container, <code>ItemClass</code> to every item wrapper. <code>@@bind-Items</code> keeps
+        your field in step: the list is changed in place, so the order a user makes is the order your
+        code reads back.
+    </p>
+    <pre class="bb-code">&lt;<span class="k">Bortable</span> @@bind-Items=<span class="s">"_items"</span> TItem=<span class="s">"string"</span> Class=<span class="s">"todo"</span> ItemClass=<span class="s">"todo-item"</span>&gt;
+    &lt;<span class="k">ItemTemplate</span> Context=<span class="s">"item"</span>&gt;@@item&lt;/<span class="k">ItemTemplate</span>&gt;
+&lt;/<span class="k">Bortable</span>&gt;
+
+<span class="k">@@code</span> {
+    <span class="k">private</span> IList&lt;<span class="k">string</span>&gt; _items = <span class="k">new</span> List&lt;<span class="k">string</span>&gt; { <span class="s">"Write the spec"</span>, <span class="s">"Review the PR"</span>, <span class="s">"Ship it"</span> };
+}</pre>
+
+    <div class="bb-demo">
+        <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+        <Bortable @bind-Items="_items" TItem="string" Id="getting-started-list"
+                  Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+            <ItemTemplate Context="item">@item</ItemTemplate>
+        </Bortable>
+        <p class="demo-order"><strong>Order:</strong> <span id="getting-started-order">@string.Join(", ", _items)</span></p>
+    </div>
+
+    <div class="bb-note">
+        The list must be mutable - a <code>List&lt;T&gt;</code> or anything else whose
+        <code>IsReadOnly</code> is <code>false</code>. Items are rendered with <code>@@key</code>, so they
+        must be unique within a list.
+    </div>
+</div>
+
+<div class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Where to go next</h3>
+    <div class="bb-try">
+        <a href="shared" class="btn btn-outline">Drag between lists →</a>
+        <a href="cloning" class="btn btn-outline">Copy instead of move →</a>
+        <a href="handle" class="btn btn-outline">Drag by a handle →</a>
+        <a href="events" class="btn btn-outline">React to a drop →</a>
+    </div>
+</div>
+
+@code {
+    private IList<string> _items = new List<string> { "Write the spec", "Review the PR", "Ship it" };
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/Grid.razor b/src/Utilities/Bortable/Demo/Client/Pages/Grid.razor
index dda8f0a4307..2787df7da9a 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/Grid.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/Grid.razor
@@ -1,10 +1,10 @@
 @page "/grid"
 
-<PageTitle>Grid - bit Bortable</PageTitle>
+<PageTitle>Grid · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Grid</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Grid</h1>
+    <p class="bb-subtitle">
         The component doesn't care about layout - point it at a CSS grid container and you get a sortable grid.
         Drag the squares to rearrange them.
     </p>
@@ -12,14 +12,16 @@
 
 <DemoCode />
 
-<Bortable @bind-Items="_items" TItem="int" Id="grid-list"
-          Class="demo-grid" GhostClass="demo-ghost">
-    <ItemTemplate Context="n">
-        <div class="grid-square">@n</div>
-    </ItemTemplate>
-</Bortable>
+<div class="bb-demo">
+    <Bortable @bind-Items="_items" TItem="int" Id="grid-list"
+              Class="demo-grid" GhostClass="demo-ghost">
+        <ItemTemplate Context="n">
+            <div class="grid-square">@n</div>
+        </ItemTemplate>
+    </Bortable>
 
-<p class="demo-order"><strong>Order:</strong> <span id="grid-order">@string.Join(", ", _items)</span></p>
+    <p class="demo-order"><strong>Order:</strong> <span id="grid-order">@string.Join(", ", _items)</span></p>
+</div>
 
 @code {
     private IList<int> _items = Enumerable.Range(1, 16).ToList();
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/HandleDemo.razor b/src/Utilities/Bortable/Demo/Client/Pages/HandleDemo.razor
index 03d7c0e5089..087f13cf0a4 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/HandleDemo.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/HandleDemo.razor
@@ -1,10 +1,10 @@
 @page "/handle"
 
-<PageTitle>Handle - bit Bortable</PageTitle>
+<PageTitle>Handle · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Handle</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Handle</h1>
+    <p class="bb-subtitle">
         With <code>Handle=".handle"</code> a row can only be dragged by grabbing the handle icon. The rest of the
         row stays selectable and clickable.
     </p>
@@ -12,14 +12,16 @@
 
 <DemoCode />
 
-<Bortable @bind-Items="_items" TItem="string" Handle=".handle" Id="handle-list"
-          Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-    <ItemTemplate Context="item">
-        <span class="handle">☰</span>@item
-    </ItemTemplate>
-</Bortable>
+<div class="bb-demo">
+    <Bortable @bind-Items="_items" TItem="string" Handle=".handle" Id="handle-list"
+              Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+        <ItemTemplate Context="item">
+            <span class="handle">☰</span>@item
+        </ItemTemplate>
+    </Bortable>
 
-<p class="demo-order"><strong>Order:</strong> <span id="handle-order">@string.Join(", ", _items)</span></p>
+    <p class="demo-order"><strong>Order:</strong> <span id="handle-order">@string.Join(", ", _items)</span></p>
+</div>
 
 @code {
     private IList<string> _items = new List<string>
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/Home.razor b/src/Utilities/Bortable/Demo/Client/Pages/Home.razor
index d76081eaa0d..888d9b500c4 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/Home.razor
@@ -1,27 +1,285 @@
 @page "/"
+@layout MainLayout
 
-<PageTitle>Simple list - bit Bortable</PageTitle>
+<PageTitle>Bortable - drag-and-drop sortable lists for Blazor</PageTitle>
 
-<div class="demo-header">
-    <h3>Simple list</h3>
-    <p class="text-muted">
-        Drag the items to reorder them. Reordering happens live as you drag, and the bound list updates with
-        <code>@@bind-Items</code>.
-    </p>
-</div>
+@* The landing page: hero → proof strip → feature grid → code walkthrough → comparison with a
+   JavaScript wrapper → persona tiles → FAQ → final call to action. Everything else on the site is
+   a documentation page under DocsLayout. The hero's sample is a live list rather than a picture of
+   one - a drag-and-drop library is best introduced by being dragged. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>Sortable lists for Blazor,<br /><span class="bb-hero-accent">dragged in C#.</span></h1>
+            <p class="bb-hero-sub">
+                Reorder items, drag them between lists, clone, swap and multi-drag - with the sorting
+                engine written in C# on the browser's own drag-and-drop events. Not a wrapper around
+                SortableJS: your <code>IList&lt;TItem&gt;</code> is changed in place, so the order a user
+                makes is the order your code reads back.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bortable</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="simple-list" class="btn btn-secondary bb-btn-lg">Live demos</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            </div>
+        </div>
+
+        @* The sample, framed as a window: the markup on top, and the list it renders underneath -
+           live, so the first thing a visitor can do here is drag something. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Backlog.razor</span>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">Bortable</span> @@bind-Items=<span class="s">"_backlog"</span> TItem=<span class="s">"string"</span> Group=<span class="s">"board"</span>&gt;
+    &lt;<span class="k">ItemTemplate</span> Context=<span class="s">"task"</span>&gt;@@task&lt;/<span class="k">ItemTemplate</span>&gt;
+&lt;/<span class="k">Bortable</span>&gt;</pre>
+                <div class="home-hero-live">
+                    <Bortable @bind-Items="_hero" TItem="string" Id="hero-list"
+                              Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+                        <ItemTemplate Context="task">@task</ItemTemplate>
+                    </Bortable>
+                    <p class="demo-order"><strong>_backlog:</strong> <span id="hero-order">@string.Join(", ", _hero)</span></p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Proof strip ============================== *@
+
+    <section class="bb-proof">
+        <div><strong>Engine in C#</strong><span>where it lands, what moves, what is raised</span></div>
+        <div><strong>Your own list</strong><span><code>@@bind-Items</code> changes it in place</span></div>
+        <div><strong>SortableJS feature set</strong><span>groups, clone, swap, multi-drag, thresholds</span></div>
+        <div><strong>Every hosting model</strong><span>WebAssembly, Server, Web App and Hybrid</span></div>
+    </section>
+
+    @* ============================== Feature grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>Everything SortableJS does - in Blazor</h2>
+        <p class="bb-section-sub">
+            The SortableJS feature set and its options, ported to a Blazor component: the same names,
+            the same thresholds, the same plugins - with a strongly typed <code>Bortable&lt;TItem&gt;</code>
+            in front of them.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Live reordering</h3>
+                <p class="bb-card-desc">
+                    Items slide out of the way while you drag, with FLIP animations - and the bound list
+                    is reordered in place when you drop.
+                </p>
+                <a href="simple-list" class="btn btn-outline">Simple list →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Shared lists</h3>
+                <p class="bb-card-desc">
+                    Lists with the same <code>Group</code> exchange items, with a ghost preview of where
+                    the item will land - and pull and put rules per list.
+                </p>
+                <a href="shared" class="btn btn-outline">Shared lists →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Clone, swap and multi-drag</h3>
+                <p class="bb-card-desc">
+                    Copy an item out of a palette, drop one item onto another to trade places, or select
+                    several and drag them as one block - the SortableJS plugins, built in.
+                </p>
+                <a href="multi-drag" class="btn btn-outline">Multi-drag →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Handles and filters</h3>
+                <p class="bb-card-desc">
+                    Limit dragging to a grip so the rest of the row stays clickable, and lock items with a
+                    predicate so they cannot be picked up.
+                </p>
+                <a href="handle" class="btn btn-outline">Handle →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Swap thresholds</h3>
+                <p class="bb-card-desc">
+                    <code>SwapThreshold</code>, <code>InvertSwap</code> and <code>Direction</code> ported from
+                    SortableJS, including its guard against items of different sizes swapping back and forth.
+                </p>
+                <a href="thresholds" class="btn btn-outline">Thresholds →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Any layout</h3>
+                <p class="bb-card-desc">
+                    Vertical lists, horizontal strips, CSS grids and nested trees whose items move between
+                    branches and depths.
+                </p>
+                <a href="nested" class="btn btn-outline">Nested sortables →</a>
+            </section>
+        </div>
+    </section>
 
-<DemoCode />
+    @* ============================== Code walkthrough ============================== *@
 
-<Bortable @bind-Items="_items" TItem="string" Id="simple-list"
-          Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-    <ItemTemplate Context="item">@item</ItemTemplate>
-</Bortable>
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>A kanban board is two lists and a group</h3>
+                    <p>
+                        Give two lists the same <code>Group</code> and their items move between them. Each
+                        list stays your own <code>IList</code>, so the board's state is just two fields.
+                    </p>
+                    <a href="shared">Shared lists →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">Bortable</span> @@bind-Items=<span class="s">"_todo"</span> TItem=<span class="s">"Card"</span> Group=<span class="s">"board"</span>&gt;…&lt;/<span class="k">Bortable</span>&gt;
+&lt;<span class="k">Bortable</span> @@bind-Items=<span class="s">"_done"</span> TItem=<span class="s">"Card"</span> Group=<span class="s">"board"</span>&gt;…&lt;/<span class="k">Bortable</span>&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>A palette clones, a target accepts</h3>
+                    <p>
+                        <code>Pull="BortablePull.Clone"</code> copies items out and keeps the originals;
+                        <code>Sort="false"</code> and <code>Put="false"</code> make the palette read-only.
+                    </p>
+                    <a href="cloning">Cloning →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">Bortable</span> Items=<span class="s">"_widgets"</span> TItem=<span class="s">"Widget"</span> Group=<span class="s">"form"</span>
+          Pull=<span class="s">"BortablePull.Clone"</span> Sort=<span class="s">"false"</span> Put=<span class="s">"false"</span>&gt;…&lt;/<span class="k">Bortable</span>&gt;</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>React to the drop</h3>
+                    <p>
+                        The SortableJS lifecycle - <code>OnStart</code>, <code>OnAdd</code>,
+                        <code>OnRemove</code>, <code>OnUpdate</code>, <code>OnEnd</code> - is raised in C#,
+                        with the item, the lists and both indexes in its arguments.
+                    </p>
+                    <a href="events">Events →</a>
+                </div>
+                <pre class="bb-code">&lt;<span class="k">Bortable</span> @@bind-Items=<span class="s">"_done"</span> TItem=<span class="s">"Card"</span> OnAdd=<span class="s">"Completed"</span>&gt;…&lt;/<span class="k">Bortable</span>&gt;
 
-<p class="demo-order"><strong>Order:</strong> <span id="simple-order">@string.Join(", ", _items)</span></p>
+<span class="k">private</span> Task Completed(BortableEventArgs&lt;Card&gt; e)
+    =&gt; api.MarkDoneAsync(e.Item.Id);   <span class="c">// e.FromId, e.OldIndex, e.NewIndex …</span></pre>
+            </div>
+        </div>
+    </section>
+
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not wrap SortableJS?</h2>
+        <p class="bb-section-sub">
+            A JavaScript wrapper moves DOM nodes behind Blazor's back and then has to reconcile the
+            render tree with what it did. Bortable keeps the decision in C#, so there is nothing to
+            reconcile.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="A SortableJS wrapper compared with Bortable">
+            <table class="bb-table bb-compare">
+                <thead>
+                    <tr><th>Concern</th><th>SortableJS wrapper</th><th>Bortable</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Who moves the items</td><td>JavaScript, in the DOM</td><td>C#, in your list - Blazor renders the result</td></tr>
+                    <tr><td>Bound data</td><td>Patched after the fact from DOM indexes</td><td><code>@@bind-Items</code>, changed in place</td></tr>
+                    <tr><td>Typed items</td><td>Indexes and element ids</td><td><code>Bortable&lt;TItem&gt;</code> and typed event arguments</td></tr>
+                    <tr><td>Script to ship</td><td>The library plus interop glue</td><td>A small module, imported on demand</td></tr>
+                    <tr><td>Hosting models</td><td>Usually WebAssembly-first</td><td>WebAssembly, Server, Web App and Hybrid</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bortable?</h3>
+                <p class="bb-card-desc">Install, register, link the stylesheet - a sortable list in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to see it live?</h3>
+                <p class="bb-card-desc">Every feature has a page you can drag around, with its own source one click away.</p>
+                <a href="simple-list" class="btn btn-outline">Open the demos →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
+
+    @* ============================== FAQ ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this SortableJS running through JavaScript interop?</summary>
+                <p>
+                    No. The sorting engine - where the item goes, which list may take it, what is moved,
+                    cloned or swapped, and which events are raised - is C#. A small module does only what
+                    needs the DOM: drag handles, measuring the pointer for the swap thresholds, and the
+                    FLIP animations.
+                </p>
+            </details>
+            <details>
+                <summary>Which render modes does it work in?</summary>
+                <p>
+                    Any interactive one: WebAssembly, Server, Auto and Hybrid, on .NET 8, 9 and 10. Pages are
+                    prerendered as usual; the lists become draggable once the page is interactive.
+                </p>
+            </details>
+            <details>
+                <summary>Can the items be anything, not just strings?</summary>
+                <p>
+                    Yes - <code>Bortable&lt;TItem&gt;</code> is generic, and <code>ItemTemplate</code> renders
+                    whatever you like inside each item. Items are rendered with <code>@@key</code>, so they must
+                    be unique within a list.
+                </p>
+            </details>
+            <details>
+                <summary>Does it work on touch screens?</summary>
+                <p>
+                    It runs on the browser's HTML5 drag-and-drop events, so it drags wherever the browser
+                    raises them - every desktop browser, and the mobile browsers that support native drag.
+                </p>
+            </details>
+        </div>
+    </section>
+
+    @* ============================== Final CTA ============================== *@
+
+    <section class="bb-final-cta">
+        <h2>Put your lists in order</h2>
+        <p class="bb-section-sub">One package, one service, one stylesheet - and any list becomes sortable.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bortable</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="simple-list" class="btn btn-secondary bb-btn-lg">Browse the demos</a>
+        </div>
+    </section>
+</div>
 
 @code {
-    private IList<string> _items = new List<string>
-    {
-        "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"
-    };
+    private IList<string> _hero = new List<string> { "Write the spec", "Review the PR", "Ship it", "Celebrate" };
 }
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/McpServer.razor b/src/Utilities/Bortable/Demo/Client/Pages/McpServer.razor
index 89b2a89158d..b8d09835c47 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/McpServer.razor
@@ -3,11 +3,11 @@
 @* Describes the MCP server this demo's host maps at /mcp. Its route differs from the endpoint's on
    purpose: two literal endpoints on /mcp would make a GET of it ambiguous. *@
 
-<PageTitle>MCP server - bit Bortable</PageTitle>
+<PageTitle>MCP server · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>MCP server</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>MCP server</h1>
+    <p class="bb-subtitle">
         This site hosts a Model Context Protocol server at <code>/mcp</code>, so an AI agent writing sortable-list,
         kanban and drag-and-drop code with Bit.Bortable reads the library itself - its compiled API documentation,
         its guide, its stylesheet and these demo pages - instead of guessing at an API it half remembers, or
@@ -15,8 +15,8 @@
     </p>
 </div>
 
-<section class="mcp-panel">
-    <h4>Connect a client</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Connect a client</h3>
 
     <p>
         The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else. The same tools
@@ -24,26 +24,28 @@
         <code>https://bitplatform.dev/mcp</code>, next to the other bit libraries.
     </p>
 
-    <pre class="mcp-output"><code>@ClientConfig</code></pre>
+    <pre class="bb-code">@ClientConfig</pre>
 </section>
 
-<section class="mcp-panel">
-    <h4>Tools</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Tools</h3>
 
-    <table class="mcp-table">
-        <thead>
-            <tr><th>Tool</th><th>What it answers</th></tr>
-        </thead>
-        <tbody>
-            @foreach (var tool in Tools)
-            {
-                <tr>
-                    <td><code>@tool.Name</code></td>
-                    <td>@((MarkupString)tool.Description)</td>
-                </tr>
-            }
-        </tbody>
-    </table>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead>
+                <tr><th>Tool</th><th>What it answers</th></tr>
+            </thead>
+            <tbody>
+                @foreach (var tool in Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        <td>@((MarkupString)tool.Description)</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
 
     <p>
         The guide, the API, the theme, a sample drag and the sources are also exposed as <code>bortable://</code>
@@ -52,15 +54,15 @@
     </p>
 </section>
 
-<section class="mcp-panel">
-    <h4>The same tools over plain HTTP</h4>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
 
     <p>
         Every tool is also a <code>GET</code> under <code>/api/mcp/...</code>: open one in a browser tab to read
         exactly what an agent is handed.
     </p>
 
-    <ul>
+    <ul class="bb-detail-list">
         @foreach (var (href, text) in HttpExamples)
         {
             <li><a href="@href" target="_blank" rel="noopener">@text</a></li>
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/McpServer.razor.css b/src/Utilities/Bortable/Demo/Client/Pages/McpServer.razor.css
deleted file mode 100644
index b32523f0b9d..00000000000
--- a/src/Utilities/Bortable/Demo/Client/Pages/McpServer.razor.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/* The demo's stylesheet has no panel or table styles of its own - every other page is a list - so the
-   few this page needs live with it, built on the site's own --demo-* palette. */
-
-.mcp-panel {
-    max-width: 960px;
-    margin-bottom: 1.1rem;
-    padding: 1rem 1.2rem;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
-    box-shadow: var(--demo-shadow);
-    line-height: 1.55;
-}
-
-.mcp-panel h4 {
-    margin: 0 0 0.6rem;
-    font-size: 1.05rem;
-}
-
-.mcp-panel p {
-    margin: 0.4rem 0;
-}
-
-.mcp-panel ul {
-    margin: 0.4rem 0;
-    padding-left: 1.2rem;
-    overflow-wrap: anywhere;
-}
-
-.mcp-output {
-    margin: 0.6rem 0 0;
-    padding: 0.8rem 1rem;
-    overflow-x: auto;
-    border-radius: 8px;
-    background: #f1f2f4;
-    font-size: 0.85rem;
-}
-
-.mcp-output code {
-    color: var(--demo-text);
-}
-
-.mcp-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.9rem;
-}
-
-.mcp-table th,
-.mcp-table td {
-    padding: 0.45rem 0.6rem;
-    border-bottom: 1px solid var(--demo-border);
-    text-align: left;
-    vertical-align: top;
-}
-
-.mcp-table td:first-child {
-    white-space: nowrap;
-}
-
-@media (max-width: 640.98px) {
-    .mcp-table td:first-child {
-        white-space: normal;
-        overflow-wrap: anywhere;
-    }
-}
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/MultiDragDemo.razor b/src/Utilities/Bortable/Demo/Client/Pages/MultiDragDemo.razor
index c4c70883af1..f0bf67064b2 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/MultiDragDemo.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/MultiDragDemo.razor
@@ -1,10 +1,10 @@
 @page "/multi-drag"
 
-<PageTitle>Multi-drag - bit Bortable</PageTitle>
+<PageTitle>Multi-drag · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Multi-drag</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Multi-drag</h1>
+    <p class="bb-subtitle">
         With <code>MultiDrag="true"</code> you can click items to select several of them, then drag any one of the
         selected items to move the whole group together. The selection keeps its order and lands as a contiguous
         block where you drop it. Click an item to toggle its selection; click again to deselect. This mirrors the
@@ -14,32 +14,34 @@
 
 <DemoCode />
 
-<div class="demo-col-title">Single list</div>
-<Bortable @bind-Items="_list" TItem="string" MultiDrag="true" Id="multi-list"
-          Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-    <ItemTemplate Context="item">@item</ItemTemplate>
-</Bortable>
-
-<p class="demo-order"><strong>Order:</strong> <span id="multi-order">@string.Join(", ", _list)</span></p>
-
-<div class="demo-col-title demo-col-title--spaced">Across two lists</div>
-<div class="demo-columns">
-    <div class="demo-col">
-        <Bortable @bind-Items="_left" TItem="string" Group="multi-shared" MultiDrag="true" Id="multi-left"
-                  Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
+<div class="bb-demo">
+    <div class="demo-col-title">Single list</div>
+    <Bortable @bind-Items="_list" TItem="string" MultiDrag="true" Id="multi-list"
+              Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+        <ItemTemplate Context="item">@item</ItemTemplate>
+    </Bortable>
+
+    <p class="demo-order"><strong>Order:</strong> <span id="multi-order">@string.Join(", ", _list)</span></p>
+
+    <div class="demo-col-title demo-col-title--spaced">Across two lists</div>
+    <div class="demo-columns">
+        <div class="demo-col">
+            <Bortable @bind-Items="_left" TItem="string" Group="multi-shared" MultiDrag="true" Id="multi-left"
+                      Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
+        <div class="demo-col">
+            <Bortable @bind-Items="_right" TItem="string" Group="multi-shared" MultiDrag="true" Id="multi-right"
+                      Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
     </div>
-    <div class="demo-col">
-        <Bortable @bind-Items="_right" TItem="string" Group="multi-shared" MultiDrag="true" Id="multi-right"
-                  Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
-    </div>
-</div>
 
-<p class="demo-order"><strong>Left:</strong> <span id="multi-left-order">@string.Join(", ", _left)</span></p>
-<p class="demo-order"><strong>Right:</strong> <span id="multi-right-order">@string.Join(", ", _right)</span></p>
+    <p class="demo-order"><strong>Left:</strong> <span id="multi-left-order">@string.Join(", ", _left)</span></p>
+    <p class="demo-order"><strong>Right:</strong> <span id="multi-right-order">@string.Join(", ", _right)</span></p>
+</div>
 
 @code {
     private IList<string> _list = new List<string>
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/Nested.razor b/src/Utilities/Bortable/Demo/Client/Pages/Nested.razor
index 07bfaa94445..f70fd7f8147 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/Nested.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/Nested.razor
@@ -1,10 +1,10 @@
 @page "/nested"
 
-<PageTitle>Nested - bit Bortable</PageTitle>
+<PageTitle>Nested · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Nested sortables</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Nested sortables</h1>
+    <p class="bb-subtitle">
         Each item can hold its own sortable list. All levels share the same group, so items can be dragged between
         branches and depths - into the empty list under any item, too. An item is never dropped inside itself.
     </p>
@@ -12,9 +12,11 @@
 
 <DemoCode Files="NestedList.razor, NestedItem.cs" />
 
-<NestedList Items="_tree" OnTreeChanged="StateHasChanged" />
+<div class="bb-demo">
+    <NestedList Items="_tree" OnTreeChanged="StateHasChanged" />
 
-<p class="demo-order"><strong>Tree:</strong> <span id="nested-order">@Describe(_tree)</span></p>
+    <p class="demo-order"><strong>Tree:</strong> <span id="nested-order">@Describe(_tree)</span></p>
+</div>
 
 @code {
     private List<NestedItem> _tree = new()
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/NotFound.razor b/src/Utilities/Bortable/Demo/Client/Pages/NotFound.razor
index 091b6b8bc5e..ff9a4b5214e 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/NotFound.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/NotFound.razor
@@ -1,5 +1,14 @@
 @page "/not-found"
 @layout MainLayout
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
+<PageTitle>Not found · Bortable</PageTitle>
+
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>There is no page at this address. It may have moved, or the link that led here may be mistyped.</p>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/Shared.razor b/src/Utilities/Bortable/Demo/Client/Pages/Shared.razor
index 452b4235406..5d9ab55b2fc 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/Shared.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/Shared.razor
@@ -1,10 +1,10 @@
 @page "/shared"
 
-<PageTitle>Shared lists - bit Bortable</PageTitle>
+<PageTitle>Shared lists · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Shared lists</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Shared lists</h1>
+    <p class="bb-subtitle">
         Both lists use the same <code>Group</code> name, so you can drag items from one into the other. Drop onto
         an item or into the empty space of a list. The "B" items keep their tint wherever they go: the class comes
         from <code>ItemClassSelector</code>, which styles the item rather than the list.
@@ -13,25 +13,27 @@
 
 <DemoCode />
 
-<div class="demo-columns">
-    <div class="demo-col">
-        <div class="demo-col-title">List A</div>
-        <Bortable @bind-Items="_left" TItem="string" Group="shared" Id="shared-a"
-                  Class="demo-list" ItemClass="demo-item" ItemClassSelector="Tint" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
+<div class="bb-demo">
+    <div class="demo-columns">
+        <div class="demo-col">
+            <div class="demo-col-title">List A</div>
+            <Bortable @bind-Items="_left" TItem="string" Group="shared" Id="shared-a"
+                      Class="demo-list" ItemClass="demo-item" ItemClassSelector="Tint" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
+        <div class="demo-col">
+            <div class="demo-col-title">List B</div>
+            <Bortable @bind-Items="_right" TItem="string" Group="shared" Id="shared-b"
+                      Class="demo-list" ItemClass="demo-item" ItemClassSelector="Tint" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
     </div>
-    <div class="demo-col">
-        <div class="demo-col-title">List B</div>
-        <Bortable @bind-Items="_right" TItem="string" Group="shared" Id="shared-b"
-                  Class="demo-list" ItemClass="demo-item" ItemClassSelector="Tint" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
-    </div>
-</div>
 
-<p class="demo-order"><strong>A:</strong> <span id="shared-a-order">@string.Join(", ", _left)</span></p>
-<p class="demo-order"><strong>B:</strong> <span id="shared-b-order">@string.Join(", ", _right)</span></p>
+    <p class="demo-order"><strong>A:</strong> <span id="shared-a-order">@string.Join(", ", _left)</span></p>
+    <p class="demo-order"><strong>B:</strong> <span id="shared-b-order">@string.Join(", ", _right)</span></p>
+</div>
 
 @code {
     private IList<string> _left = new List<string> { "A1", "A2", "A3", "A4", "A5" };
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/SimpleList.razor b/src/Utilities/Bortable/Demo/Client/Pages/SimpleList.razor
new file mode 100644
index 00000000000..6b5ea21e2c2
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Client/Pages/SimpleList.razor
@@ -0,0 +1,29 @@
+@page "/simple-list"
+
+<PageTitle>Simple list · Bortable</PageTitle>
+
+<div class="bb-intro">
+    <h1>Simple list</h1>
+    <p class="bb-subtitle">
+        Drag the items to reorder them. Reordering happens live as you drag, and the bound list updates with
+        <code>@@bind-Items</code>.
+    </p>
+</div>
+
+<DemoCode />
+
+<div class="bb-demo">
+    <Bortable @bind-Items="_items" TItem="string" Id="simple-list"
+              Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+        <ItemTemplate Context="item">@item</ItemTemplate>
+    </Bortable>
+
+    <p class="demo-order"><strong>Order:</strong> <span id="simple-order">@string.Join(", ", _items)</span></p>
+</div>
+
+@code {
+    private IList<string> _items = new List<string>
+    {
+        "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"
+    };
+}
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/SwapDemo.razor b/src/Utilities/Bortable/Demo/Client/Pages/SwapDemo.razor
index 72b139cb9f7..999bca53dec 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/SwapDemo.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/SwapDemo.razor
@@ -1,10 +1,10 @@
 @page "/swap"
 
-<PageTitle>Swap - bit Bortable</PageTitle>
+<PageTitle>Swap · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Swap</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Swap</h1>
+    <p class="bb-subtitle">
         With <code>Swap="true"</code> the list no longer sorts. Instead, the item you drag over is highlighted, and
         on drop the dragged item trades places with it. Swapping works inside a single list and between lists that
         share a group. This mirrors the SortableJS
@@ -14,32 +14,34 @@
 
 <DemoCode />
 
-<div class="demo-col-title">Single list</div>
-<Bortable @bind-Items="_list" TItem="string" Swap="true" Id="swap-list"
-          Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-    <ItemTemplate Context="item">@item</ItemTemplate>
-</Bortable>
-
-<p class="demo-order"><strong>Order:</strong> <span id="swap-order">@string.Join(", ", _list)</span></p>
-
-<div class="demo-col-title demo-col-title--spaced">Across two lists</div>
-<div class="demo-columns">
-    <div class="demo-col">
-        <Bortable @bind-Items="_left" TItem="string" Group="swap-shared" Swap="true" Id="swap-left"
-                  Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
+<div class="bb-demo">
+    <div class="demo-col-title">Single list</div>
+    <Bortable @bind-Items="_list" TItem="string" Swap="true" Id="swap-list"
+              Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+        <ItemTemplate Context="item">@item</ItemTemplate>
+    </Bortable>
+
+    <p class="demo-order"><strong>Order:</strong> <span id="swap-order">@string.Join(", ", _list)</span></p>
+
+    <div class="demo-col-title demo-col-title--spaced">Across two lists</div>
+    <div class="demo-columns">
+        <div class="demo-col">
+            <Bortable @bind-Items="_left" TItem="string" Group="swap-shared" Swap="true" Id="swap-left"
+                      Class="demo-list" ItemClass="demo-item" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
+        <div class="demo-col">
+            <Bortable @bind-Items="_right" TItem="string" Group="swap-shared" Swap="true" Id="swap-right"
+                      Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
     </div>
-    <div class="demo-col">
-        <Bortable @bind-Items="_right" TItem="string" Group="swap-shared" Swap="true" Id="swap-right"
-                  Class="demo-list" ItemClass="demo-item tinted" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
-    </div>
-</div>
 
-<p class="demo-order"><strong>Left:</strong> <span id="swap-left-order">@string.Join(", ", _left)</span></p>
-<p class="demo-order"><strong>Right:</strong> <span id="swap-right-order">@string.Join(", ", _right)</span></p>
+    <p class="demo-order"><strong>Left:</strong> <span id="swap-left-order">@string.Join(", ", _left)</span></p>
+    <p class="demo-order"><strong>Right:</strong> <span id="swap-right-order">@string.Join(", ", _right)</span></p>
+</div>
 
 @code {
     private IList<string> _list = new List<string>
diff --git a/src/Utilities/Bortable/Demo/Client/Pages/Thresholds.razor b/src/Utilities/Bortable/Demo/Client/Pages/Thresholds.razor
index b88c0eb91ba..11755f0e294 100644
--- a/src/Utilities/Bortable/Demo/Client/Pages/Thresholds.razor
+++ b/src/Utilities/Bortable/Demo/Client/Pages/Thresholds.razor
@@ -1,11 +1,11 @@
 @page "/thresholds"
 @using System.Globalization
 
-<PageTitle>Thresholds - bit Bortable</PageTitle>
+<PageTitle>Thresholds · Bortable</PageTitle>
 
-<div class="demo-header">
-    <h3>Swap thresholds</h3>
-    <p class="text-muted">
+<div class="bb-intro">
+    <h1>Swap thresholds</h1>
+    <p class="bb-subtitle">
         The swap zone is the part of an item that, when dragged over, makes the dragged item swap places with it.
         <code>SwapThreshold</code> sets how much of the item (from the centre out) is an active swap zone - the
         rest is a "dead zone" that does not trigger a swap. <code>InvertSwap</code> moves the active zones to the
@@ -17,61 +17,63 @@
 
 <DemoCode />
 
-<div class="threshold-controls">
-    <label>
-        SwapThreshold: <strong id="swap-threshold-value">@Format(_swapThreshold)</strong>
-        <input id="swap-threshold" type="range" min="0.1" max="1" step="0.05"
-               value="@Format(_swapThreshold)" @oninput="OnSwapThresholdChanged" />
-    </label>
-
-    <label class="threshold-check">
-        <input id="invert-swap" type="checkbox" checked="@_invertSwap" @onchange="OnInvertSwapChanged" />
-        InvertSwap
-    </label>
-
-    <label>
-        InvertedSwapThreshold: <strong id="inverted-swap-threshold-value">@Format(_invertedSwapThreshold)</strong>
-        <input id="inverted-swap-threshold" type="range" min="0.1" max="1" step="0.05"
-               value="@Format(_invertedSwapThreshold)" @oninput="OnInvertedSwapThresholdChanged" />
-    </label>
-
-    <label class="threshold-check">
-        <input id="show-zones" type="checkbox" checked="@_showZones" @onchange="OnShowZonesChanged" />
-        Show the swap zones
-    </label>
-</div>
-
-<div class="demo-columns">
-    <div class="demo-col">
-        <div class="demo-col-title">Vertical list</div>
-        <Bortable @bind-Items="_list" TItem="string" Id="thresholds-list"
-                  SwapThreshold="_swapThreshold"
-                  InvertSwap="_invertSwap"
-                  InvertedSwapThreshold="_invertedSwapThreshold"
-                  Direction="BortableDirection.Vertical"
-                  Class="@($"demo-list threshold-list {ZoneClass}")" Style="@ZoneStyle"
-                  ItemClass="demo-item" GhostClass="demo-ghost">
-            <ItemTemplate Context="item">@item</ItemTemplate>
-        </Bortable>
+<div class="bb-demo">
+    <div class="threshold-controls">
+        <label>
+            SwapThreshold: <strong id="swap-threshold-value">@Format(_swapThreshold)</strong>
+            <input id="swap-threshold" type="range" min="0.1" max="1" step="0.05"
+                   value="@Format(_swapThreshold)" @oninput="OnSwapThresholdChanged" />
+        </label>
+
+        <label class="threshold-check">
+            <input id="invert-swap" type="checkbox" checked="@_invertSwap" @onchange="OnInvertSwapChanged" />
+            InvertSwap
+        </label>
+
+        <label>
+            InvertedSwapThreshold: <strong id="inverted-swap-threshold-value">@Format(_invertedSwapThreshold)</strong>
+            <input id="inverted-swap-threshold" type="range" min="0.1" max="1" step="0.05"
+                   value="@Format(_invertedSwapThreshold)" @oninput="OnInvertedSwapThresholdChanged" />
+        </label>
+
+        <label class="threshold-check">
+            <input id="show-zones" type="checkbox" checked="@_showZones" @onchange="OnShowZonesChanged" />
+            Show the swap zones
+        </label>
     </div>
-    <div class="demo-col">
-        <div class="demo-col-title">Grid</div>
-        <Bortable @bind-Items="_grid" TItem="int" Id="thresholds-grid"
-                  SwapThreshold="_swapThreshold"
-                  InvertSwap="_invertSwap"
-                  InvertedSwapThreshold="_invertedSwapThreshold"
-                  Direction="BortableDirection.Horizontal"
-                  Class="@($"demo-grid threshold-grid {ZoneClass}")" Style="@ZoneStyle"
-                  GhostClass="demo-ghost">
-            <ItemTemplate Context="n">
-                <div class="grid-square">@n</div>
-            </ItemTemplate>
-        </Bortable>
+
+    <div class="demo-columns">
+        <div class="demo-col">
+            <div class="demo-col-title">Vertical list</div>
+            <Bortable @bind-Items="_list" TItem="string" Id="thresholds-list"
+                      SwapThreshold="_swapThreshold"
+                      InvertSwap="_invertSwap"
+                      InvertedSwapThreshold="_invertedSwapThreshold"
+                      Direction="BortableDirection.Vertical"
+                      Class="@($"demo-list threshold-list {ZoneClass}")" Style="@ZoneStyle"
+                      ItemClass="demo-item" GhostClass="demo-ghost">
+                <ItemTemplate Context="item">@item</ItemTemplate>
+            </Bortable>
+        </div>
+        <div class="demo-col">
+            <div class="demo-col-title">Grid</div>
+            <Bortable @bind-Items="_grid" TItem="int" Id="thresholds-grid"
+                      SwapThreshold="_swapThreshold"
+                      InvertSwap="_invertSwap"
+                      InvertedSwapThreshold="_invertedSwapThreshold"
+                      Direction="BortableDirection.Horizontal"
+                      Class="@($"demo-grid threshold-grid {ZoneClass}")" Style="@ZoneStyle"
+                      GhostClass="demo-ghost">
+                <ItemTemplate Context="n">
+                    <div class="grid-square">@n</div>
+                </ItemTemplate>
+            </Bortable>
+        </div>
     </div>
-</div>
 
-<p class="demo-order"><strong>List:</strong> <span id="thresholds-list-order">@string.Join(", ", _list)</span></p>
-<p class="demo-order"><strong>Grid:</strong> <span id="thresholds-grid-order">@string.Join(", ", _grid)</span></p>
+    <p class="demo-order"><strong>List:</strong> <span id="thresholds-list-order">@string.Join(", ", _list)</span></p>
+    <p class="demo-order"><strong>Grid:</strong> <span id="thresholds-grid-order">@string.Join(", ", _grid)</span></p>
+</div>
 
 @code {
     private double _swapThreshold = 0.65;
diff --git a/src/Utilities/Bortable/Demo/Client/Routes.razor b/src/Utilities/Bortable/Demo/Client/Routes.razor
index 4b567cd117d..989f92736d1 100644
--- a/src/Utilities/Bortable/Demo/Client/Routes.razor
+++ b/src/Utilities/Bortable/Demo/Client/Routes.razor
@@ -1,6 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the not-found page opt out with @layout MainLayout. After a navigation the
+   page's own H1 takes focus, so a screen reader starts reading at the new page. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h3" />
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/src/Utilities/Bortable/Demo/Server/Components/App.razor b/src/Utilities/Bortable/Demo/Server/Components/App.razor
index 4a015b3b686..a02edff93f6 100644
--- a/src/Utilities/Bortable/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bortable/Demo/Server/Components/App.razor
@@ -4,18 +4,33 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="bit Bortable (Bit.Bortable) - a Blazor-native drag-and-drop sortable list inspired by SortableJS: reorder items, drag them between lists, clone, swap and multi-drag, with the sorting engine written in C#." />
+    <meta name="theme-color" content="#FFFFFF" />
     <base href="/" />
+    @* No static <title> here: every page supplies its own through <PageTitle>, and with
+       prerendering the HeadOutlet emits a real <title> element into this head. *@
+    <meta name="description" content="bit Bortable (Bit.Bortable) - a Blazor-native drag-and-drop sortable list inspired by SortableJS: reorder items, drag them between lists, clone, swap and multi-drag, with the sorting engine written in C#." />
+
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Bortable" />
+    <meta property="og:title" content="Bortable - drag-and-drop sortable lists for Blazor" />
+    <meta property="og:description" content="Reorder items, drag them between lists, clone, swap and multi-drag - with the sorting engine written in C#, not a JavaScript wrapper." />
+    <meta name="twitter:card" content="summary" />
+
     <ResourcePreloader />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. *@
     <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
     @* The library's stylesheet. Unlike its script, it is not loaded on demand: without it the drag states -
        the ghost, the hidden original of an item previewed in another list, the swap target, the multi-drag
-       selection - are not drawn. It comes after app.css so its state rules win over the demo's item styles. *@
+       selection - are not drawn. It comes after demo.css so its state rules win over the demo's item styles. *@
     <link rel="stylesheet" href="@Assets["_content/Bit.Bortable/bit-bortable.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
     <link rel="stylesheet" href="@Assets["Bit.Bortable.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -32,6 +47,7 @@
         <span class="dismiss">&#128473;</span>
     </div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bortable/Demo/Server/Services/BortableSourceCatalog.cs b/src/Utilities/Bortable/Demo/Server/Services/BortableSourceCatalog.cs
index 2a49dc1c25a..ea87a1f287b 100644
--- a/src/Utilities/Bortable/Demo/Server/Services/BortableSourceCatalog.cs
+++ b/src/Utilities/Bortable/Demo/Server/Services/BortableSourceCatalog.cs
@@ -469,7 +469,7 @@ private static string NormalizeHeading(string heading)
     [GeneratedRegex(@"///\s*<summary>(?<text>.*?)</summary>", RegexOptions.Singleline)]
     private static partial Regex XmlSummaryRegex();
 
-    [GeneratedRegex(@"<div class=""demo-header"">\s*<h3>.*?</h3>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
+    [GeneratedRegex(@"<div class=""bb-intro"">\s*<h1>.*?</h1>\s*<p[^>]*>(?<text>.*?)</p>", RegexOptions.Singleline)]
     private static partial Regex DemoHeaderRegex();
 
     [GeneratedRegex(@"<PageTitle>(?<text>.*?)</PageTitle>", RegexOptions.Singleline | RegexOptions.IgnoreCase)]
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/app.css b/src/Utilities/Bortable/Demo/Server/wwwroot/app.css
index fa291ac9f4f..7b51a42ea90 100644
--- a/src/Utilities/Bortable/Demo/Server/wwwroot/app.css
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/app.css
@@ -1,558 +1,2820 @@
-/* The demo site's own palette. Prefixed --demo-, not --bit-bortable-: the library defines its theme tokens
-   under that prefix, and a page-level token of the same name with a different meaning breaks whatever
-   reads it. */
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
 :root {
-    --demo-bg: #f5f8f8;
-    --demo-surface: #ffffff;
-    --demo-border: #e0e7e6;
-    --demo-text: #1f2430;
-    --demo-muted: #6b7280;
-    --demo-primary: #0d9488;
-    --demo-primary-hover: #0f766e;
-    --demo-primary-rgb: 13, 148, 136;
-    --demo-list-bg: #eef4f3;
-    --demo-tint: #ecfdf8;
-    --demo-tint-border: #b9e9df;
-    --demo-radius: 10px;
-    --demo-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
-}
-
-/* The library's drag states, tinted with the demo's accent. html:root rather than :root: bit-bortable.css
-   declares the same property on :root and is linked after this file, so a plain :root here would lose. It
-   has to be set on the root itself, too: the library derives its state colours from it there, and those
-   derived values are what every list inherits. */
-html:root {
-    --bit-bortable-accent-rgb: 13, 148, 136;
-}
-
-* {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
     box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
 }
 
-html, body {
+html,
+body {
     margin: 0;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    color: var(--demo-text);
-    background: var(--demo-bg);
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
 }
 
-h1, h2, h3, h4 {
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    line-height: 1.25;
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
 }
 
-/* Page headings take focus on navigation (FocusOnNavigate in Routes.razor) so a screen reader
-   starts reading at the new page; that focus is not something to draw a ring around. */
-h3:focus {
-    outline: none;
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
 }
 
 a {
-    color: var(--demo-primary);
+    color: var(--bb-primary);
     text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
 a:hover {
+    color: var(--bb-primary-hover);
     text-decoration: underline;
+    text-underline-offset: .18em;
 }
 
-code {
-    color: #b4236b;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+img,
+svg {
+    max-width: 100%;
 }
 
-.text-muted {
-    color: var(--demo-muted);
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
 }
 
-/* Blazor framework UI */
-#blazor-error-ui {
-    color-scheme: light only;
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
     position: fixed;
-    width: 100%;
-    z-index: 1000;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
 
-.blazor-error-boundary {
-    background: #b32121;
-    padding: 1rem;
-    color: white;
-    border-radius: var(--demo-radius);
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
 }
 
-    .blazor-error-boundary::after {
-        content: "An error has occurred.";
-    }
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
 
-/* Demo page helpers */
-.demo-header {
-    margin-bottom: 1.1rem;
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
 }
 
-    .demo-header h3 {
-        margin: 0 0 0.4rem;
-        font-size: 1.4rem;
-    }
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
 
-    .demo-header p {
-        margin: 0;
-        max-width: 70ch;
-        line-height: 1.55;
-    }
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
 
-/* Side-by-side lists. They wrap under each other once the page is too narrow for two. */
-.demo-columns {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    max-width: 760px;
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
 }
 
-    .demo-columns > .demo-col {
-        flex: 1 1 220px;
-        display: flex;
-        flex-direction: column;
-        min-width: 0;
-    }
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
 
-.demo-col-title {
-    margin-bottom: 0.5rem;
-    font-size: 0.9rem;
-    font-weight: 600;
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
 }
 
-.demo-col-title--spaced {
-    margin-top: 1.75rem;
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
 }
 
-/* The live readout of a bound list. The span holds just the items, joined with ", ". */
-.demo-order {
-    margin: 0.9rem 0 0;
-    font-size: 0.9rem;
-    color: var(--demo-muted);
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
     overflow-wrap: anywhere;
 }
 
-    .demo-order + .demo-order {
-        margin-top: 0.3rem;
-    }
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
 
-    .demo-order strong {
-        margin-right: 0.2rem;
-        color: var(--demo-text);
-        font-weight: 600;
-    }
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
 
-    .demo-order span {
-        color: var(--demo-text);
-        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-        font-size: 0.85rem;
-    }
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
 
-/* A list: a tray of cards. Padding and a minimum height leave an area to drop into even when it is empty. */
-.demo-list {
+.page {
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    max-width: 520px;
-    min-height: 3.5rem;
-    padding: 0.5rem;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-list-bg);
-}
-
-    /* In a column the tray fills it, so the shorter of two lists is as easy to drop into as the longer. */
-    .demo-col > .demo-list {
-        flex: 1;
-        max-width: none;
-    }
+}
 
-.demo-item {
-    display: flex;
-    align-items: center;
-    min-height: 2.75rem;
-    padding: 0.65rem 0.9rem;
-    border: 1px solid var(--demo-border);
-    border-radius: 8px;
-    background: var(--demo-surface);
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-    font-size: 0.95rem;
-    font-weight: 500;
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
 }
 
-    .demo-item:hover {
-        border-color: rgba(var(--demo-primary-rgb), 0.45);
-        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
-    }
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
 
-    .demo-item.tinted {
-        border-color: var(--demo-tint-border);
-        background: var(--demo-tint);
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
     }
+}
 
-    /* Locked by the Filter page's predicate. */
-    .demo-item.filtered {
-        border-color: #f5c2c7;
-        background: #fdecee;
-        color: #842029;
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
     }
-
-/* The ghost: the dragged item in its list, and the placeholder that previews where it lands in another. */
-.demo-ghost {
-    opacity: 1 !important;
-    border-style: dashed !important;
-    border-color: var(--demo-primary) !important;
-    background: #ccfbf1 !important;
-    box-shadow: none !important;
 }
 
-/* The library's swap and selection states, restated for the cards: .demo-item paints its own background,
-   border and shadow, and these have to win over it, over .tinted and over :hover. */
-.demo-item.bit-bortable-swap-highlight,
-.nested-item.bit-bortable-swap-highlight {
-    background: linear-gradient(var(--bit-bortable-swap-bg), var(--bit-bortable-swap-bg)), var(--demo-surface);
-    outline: var(--bit-bortable-swap-outline);
-    outline-offset: -2px;
+article {
+    width: 100%;
+    min-width: 0;
 }
 
-.demo-item.bit-bortable-selected {
-    border-color: transparent;
-    background: linear-gradient(var(--bit-bortable-selected-bg), var(--bit-bortable-selected-bg)), var(--demo-surface);
-    box-shadow: var(--bit-bortable-selected-ring);
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
 }
 
-/* The drag handle of the Handle page: the only part of a row that starts a drag. */
-.handle {
-    margin-right: 0.6rem;
-    padding: 0 0.15rem;
-    color: var(--demo-muted);
-    font-size: 1.05rem;
-    line-height: 1;
-    cursor: grab;
-    user-select: none;
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
 }
 
-    .handle:hover {
-        color: var(--demo-primary);
-    }
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
 
-    .handle:active {
-        cursor: grabbing;
-    }
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
 
-/* Grid example: the list is a CSS grid; each item wraps a square. */
-.demo-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
-    gap: 0.6rem;
-    max-width: 520px;
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
 }
 
-.grid-square {
-    display: flex;
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 90px;
-    border-radius: var(--demo-radius);
-    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(13, 148, 136, 0.18);
-    color: #fff;
-    font-size: 1.15rem;
-    font-weight: 600;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-    .demo-grid > .bit-bortable-item:hover .grid-square {
-        filter: brightness(1.07);
-    }
+.btn:hover {
+    text-decoration: none;
+}
 
-    /* The square covers its wrapper, so the ghost state is drawn on the square, and the wrapper - square
-       where the square is rounded - stays clear. */
-    .demo-grid > .demo-ghost {
-        background: transparent !important;
-    }
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
 
-    .demo-ghost .grid-square {
-        outline: 2px dashed var(--demo-primary);
-        outline-offset: -2px;
-        background: #ccfbf1;
-        box-shadow: none;
-        color: var(--demo-primary-hover);
-    }
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
 
-/* Nested example. Every item holds a list of its own; the padding and minimum height keep an empty branch
-   big enough to drop into. */
-.nested-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    min-height: 2.5rem;
-    padding: 0.45rem;
-    border: 1px dashed rgba(var(--demo-primary-rgb), 0.35);
-    border-radius: 8px;
-    background: rgba(var(--demo-primary-rgb), 0.04);
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
 }
 
-#nested-root {
-    max-width: 640px;
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
 }
 
-.nested-item {
-    padding: 0.5rem 0.55rem 0.55rem;
-    border: 1px solid var(--demo-border);
-    border-radius: 8px;
-    background: var(--demo-surface);
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
 }
 
-    /* Only the innermost item under the pointer lights up, not every item around it. */
-    .nested-item:hover:not(:has(.nested-item:hover)) {
-        border-color: rgba(var(--demo-primary-rgb), 0.45);
-    }
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
 
-.nested-item__name {
-    margin: 0 0 0.4rem 0.2rem;
-    font-size: 0.92rem;
-    font-weight: 500;
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-/* Events example. */
-.event-log {
-    max-width: 760px;
-    max-height: 220px;
-    margin-top: 1rem;
-    padding: 0.75rem 0.9rem;
-    overflow-y: auto;
-    border-radius: var(--demo-radius);
-    background: #1e2430;
-    color: #d8dee9;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.8rem;
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
     line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
 }
 
-.event-log__empty {
-    color: #8b93a3;
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
 }
 
-.event-log__line {
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
     overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
-/* Thresholds example. */
-.threshold-controls {
+.bb-flex {
     display: flex;
     flex-direction: column;
-    gap: 0.6rem;
-    max-width: 760px;
+    gap: 1rem;
     margin-bottom: 1rem;
-    padding: 0.9rem 1rem;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: var(--demo-surface);
 }
 
-    .threshold-controls label {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 0.6rem;
-        font-size: 0.9rem;
-    }
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
 
-    .threshold-controls strong {
-        min-width: 2.6rem;
-        font-variant-numeric: tabular-nums;
-    }
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
 
-    .threshold-controls input[type="range"] {
-        flex: 1 1 160px;
-        max-width: 260px;
-        accent-color: var(--demo-primary);
-    }
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
 
-    .threshold-controls input[type="checkbox"] {
-        width: 1rem;
-        height: 1rem;
-        margin: 0;
-        accent-color: var(--demo-primary);
-    }
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
 
-    .threshold-controls .threshold-check {
-        gap: 0.45rem;
-    }
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
 
-.threshold-grid {
-    grid-template-columns: repeat(3, 1fr);
-    max-width: 300px;
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
 }
 
-/* The swap-zone visualizer. Each item draws its active zones, sized by the --zone and --inverted-zone the
-   page sets on the list: one band of --zone across the middle, or with InvertSwap two bands of
-   --inverted-zone / 2 at the edges - the geometry bit-bortable.js hit-tests against. The list is measured
-   top to bottom, the grid left to right (Direction="Horizontal"). */
-.show-zones > .bit-bortable-item {
-    position: relative;
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
 }
 
-    .show-zones > .bit-bortable-item::before,
-    .show-zones > .bit-bortable-item::after {
-        content: "";
-        position: absolute;
-        border: 1px dashed rgba(var(--demo-primary-rgb), 0.6);
-        border-radius: 5px;
-        background: rgba(var(--demo-primary-rgb), 0.14);
-        pointer-events: none;
-    }
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
 
-    .show-zones > .bit-bortable-item::after {
-        display: none;
-    }
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
 
-.threshold-list.show-zones > .bit-bortable-item::before {
-    left: 3px;
-    right: 3px;
-    top: calc((1 - var(--zone)) * 50%);
-    bottom: calc((1 - var(--zone)) * 50%);
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
 }
 
-.threshold-list.show-zones.zones-inverted > .bit-bortable-item::before,
-.threshold-list.show-zones.zones-inverted > .bit-bortable-item::after {
-    display: block;
-    left: 3px;
-    right: 3px;
-    height: calc(var(--inverted-zone) * 50%);
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
 }
 
-.threshold-list.show-zones.zones-inverted > .bit-bortable-item::before {
-    top: 0;
-    bottom: auto;
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-.threshold-list.show-zones.zones-inverted > .bit-bortable-item::after {
-    bottom: 0;
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
 }
 
-.threshold-grid.show-zones > .bit-bortable-item::before,
-.threshold-grid.show-zones > .bit-bortable-item::after {
-    border-color: rgba(255, 255, 255, 0.85);
-    background: rgba(255, 255, 255, 0.26);
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
 }
 
-.threshold-grid.show-zones > .bit-bortable-item::before {
-    top: 3px;
-    bottom: 3px;
-    left: calc((1 - var(--zone)) * 50%);
-    right: calc((1 - var(--zone)) * 50%);
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
 }
 
-.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::before,
-.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::after {
-    display: block;
-    top: 3px;
-    bottom: 3px;
-    width: calc(var(--inverted-zone) * 50%);
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
-.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::before {
-    left: 0;
-    right: auto;
+.bb-link-list li {
+    display: flex;
+    align-items: center;
 }
 
-.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::after {
-    right: 0;
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
 }
 
-/* "View code" toggle + source panel */
-.demo-code {
-    margin-bottom: 1rem;
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
 }
 
-.demo-code__toggle {
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
-    font: inherit;
-    font-weight: 500;
-    font-size: 0.88rem;
-    padding: 6px 12px;
-    border: 1px solid var(--demo-border);
-    border-radius: 8px;
-    background: var(--demo-surface);
-    color: var(--demo-text);
-    cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
 }
 
-.demo-code__toggle:hover {
-    background: #f1f4f4;
-    border-color: var(--demo-primary);
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
 }
 
-.demo-code__toggle:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(var(--demo-primary-rgb), 0.35);
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
 }
 
-.demo-code__caret {
-    font-size: 0.8em;
-    color: var(--demo-muted);
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
 }
 
-.demo-code__glyph {
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    color: var(--demo-primary);
-    font-weight: 600;
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
 }
 
-.demo-code__file {
-    margin: 0.9rem 0 -0.3rem;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--demo-muted);
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
 }
 
-.demo-code__pre {
-    margin: 0.7rem 0 0;
-    padding: 1rem 1.1rem;
-    max-height: 520px;
-    overflow: auto;
-    border: 1px solid var(--demo-border);
-    border-radius: var(--demo-radius);
-    background: #1e2430;
-    box-shadow: var(--demo-shadow);
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
 }
 
-.demo-code__code {
-    display: block;
-    color: #e6e9ef;
-    background: none;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.82rem;
-    line-height: 1.55;
-    white-space: pre;
-    tab-size: 4;
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
 }
 
-.demo-code__empty {
-    margin-top: 0.7rem;
-    font-size: 0.88rem;
-    color: var(--demo-muted);
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
 }
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/demo.css b/src/Utilities/Bortable/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..e765b133559
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,398 @@
+/* ============================================================================================
+   Bortable demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Bortable's own - the lists, their items and the drag
+   states - and it is written against the kit's --bb-* names, so it follows the light/dark theme
+   with no rules of its own for either.
+   ============================================================================================ */
+
+/* The library's drag states, tinted with the site's brand color. html:root rather than :root:
+   bit-bortable.css declares the same property on :root and is linked after this file, so a plain
+   :root here would lose. It has to be set on the root itself, too: the library derives its state
+   colors from it there, and those derived values are what every list inherits. */
+html:root {
+    --bit-bortable-accent-rgb: 18, 118, 198;
+}
+
+html:root[bit-theme="dark"] {
+    --bit-bortable-accent-rgb: 79, 163, 244;
+}
+
+/* Side-by-side lists. They wrap under each other once the column is too narrow for two. */
+.demo-columns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.demo-columns > .demo-col {
+    flex: 1 1 220px;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each list. */
+.demo-col-title {
+    margin-bottom: .5rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+.demo-col-title--spaced {
+    margin-top: 1.75rem;
+}
+
+/* The live readout of a bound list. The span holds just the items, joined with ", ". */
+.demo-order {
+    margin: .875rem 0 0;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+    overflow-wrap: anywhere;
+}
+
+.demo-order + .demo-order {
+    margin-top: .25rem;
+}
+
+.demo-order strong {
+    margin-inline-end: .25rem;
+    color: var(--bb-text);
+}
+
+.demo-order span {
+    color: var(--bb-text);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+}
+
+/* A list: a recessed tray of cards. Padding and a minimum height leave an area to drop into even
+   when it is empty. */
+.demo-list {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    max-width: 520px;
+    min-height: 3.5rem;
+    padding: .5rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* In a column the tray fills it, so the shorter of two lists is as easy to drop into as the longer. */
+.demo-col > .demo-list {
+    flex: 1;
+    max-width: none;
+}
+
+/* An item: a Fluent card at rest, raised a step on hover. */
+.demo-item {
+    display: flex;
+    align-items: center;
+    min-height: 2.75rem;
+    padding: .625rem .875rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: grab;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.demo-item:hover {
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+    box-shadow: var(--fl-shadow-4);
+}
+
+.demo-item.tinted {
+    border-color: color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* Locked by the Filter page's predicate. */
+.demo-item.filtered {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    cursor: not-allowed;
+}
+
+/* The ghost: the dragged item in its list, and the placeholder that previews where it lands in another. */
+.demo-ghost {
+    opacity: 1 !important;
+    border-style: dashed !important;
+    border-color: var(--bb-primary) !important;
+    background: var(--bb-primary-soft) !important;
+    box-shadow: none !important;
+}
+
+/* The library's swap and selection states, restated for the cards: .demo-item paints its own
+   background, border and shadow, and these have to win over it, over .tinted and over :hover. */
+.demo-item.bit-bortable-swap-highlight,
+.nested-item.bit-bortable-swap-highlight {
+    background: linear-gradient(var(--bit-bortable-swap-bg), var(--bit-bortable-swap-bg)), var(--bb-surface);
+    outline: var(--bit-bortable-swap-outline);
+    outline-offset: -2px;
+}
+
+.demo-item.bit-bortable-selected {
+    border-color: transparent;
+    background: linear-gradient(var(--bit-bortable-selected-bg), var(--bit-bortable-selected-bg)), var(--bb-surface);
+    box-shadow: var(--bit-bortable-selected-ring);
+}
+
+/* The drag handle of the Handle page: the only part of a row that starts a drag. */
+.handle {
+    margin-inline-end: .625rem;
+    padding: 0 .125rem;
+    color: var(--bb-text-soft);
+    font-size: 1.0625rem;
+    line-height: 1;
+    cursor: grab;
+    user-select: none;
+}
+
+.handle:hover {
+    color: var(--bb-primary);
+}
+
+.handle:active {
+    cursor: grabbing;
+}
+
+#handle-list .demo-item {
+    cursor: default;
+}
+
+/* Grid example: the list is a CSS grid; each item wraps a square. */
+.demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    gap: .625rem;
+    max-width: 520px;
+}
+
+.grid-square {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    border-radius: var(--bb-radius-lg);
+    background: linear-gradient(135deg, var(--bb-primary) 0%, var(--bb-primary-active) 100%);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-400);
+    font-weight: var(--fl-weight-semibold);
+    cursor: grab;
+}
+
+.demo-grid > .bit-bortable-item:hover .grid-square {
+    box-shadow: var(--bb-shadow-raised);
+}
+
+/* The square covers its wrapper, so the ghost state is drawn on the square, and the wrapper -
+   square where the square is rounded - stays clear. */
+.demo-grid > .demo-ghost {
+    background: transparent !important;
+}
+
+.demo-ghost .grid-square {
+    outline: 2px dashed var(--bb-primary);
+    outline-offset: -2px;
+    background: var(--bb-primary-soft);
+    box-shadow: none;
+    color: var(--bb-primary);
+}
+
+/* Nested example. Every item holds a list of its own; the padding and minimum height keep an empty
+   branch big enough to drop into. */
+.nested-list {
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    min-height: 2.5rem;
+    padding: .4375rem;
+    background: color-mix(in srgb, var(--bb-primary) 4%, transparent);
+    border: 1px dashed color-mix(in srgb, var(--bb-primary) 35%, transparent);
+    border-radius: var(--bb-radius);
+}
+
+#nested-root {
+    max-width: 640px;
+}
+
+.nested-item {
+    padding: .5rem .5rem .5625rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    box-shadow: var(--bb-shadow-card);
+    cursor: grab;
+}
+
+/* Only the innermost item under the pointer lights up, not every item around it. */
+.nested-item:hover:not(:has(.nested-item:hover)) {
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.nested-item__name {
+    margin: 0 0 .375rem .1875rem;
+    color: var(--bb-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+}
+
+/* Events example: the log itself is the kit's .bb-log. */
+.event-log {
+    margin: 1rem 0 0;
+    max-height: 220px;
+}
+
+/* Thresholds example. */
+.threshold-controls {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    margin-bottom: 1.25rem;
+    padding: .875rem 1rem;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.threshold-controls label {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .625rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.threshold-controls strong {
+    min-width: 2.6rem;
+    font-family: var(--bb-mono);
+    font-variant-numeric: tabular-nums;
+}
+
+.threshold-controls input[type="range"] {
+    flex: 1 1 160px;
+    max-width: 260px;
+}
+
+.threshold-controls .threshold-check {
+    gap: .5rem;
+}
+
+.threshold-grid {
+    grid-template-columns: repeat(3, 1fr);
+    max-width: 300px;
+}
+
+/* The swap-zone visualizer. Each item draws its active zones, sized by the --zone and
+   --inverted-zone the page sets on the list: one band of --zone across the middle, or with
+   InvertSwap two bands of --inverted-zone / 2 at the edges - the geometry bit-bortable.js
+   hit-tests against. The list is measured top to bottom, the grid left to right
+   (Direction="Horizontal"). */
+.show-zones > .bit-bortable-item {
+    position: relative;
+}
+
+.show-zones > .bit-bortable-item::before,
+.show-zones > .bit-bortable-item::after {
+    content: "";
+    position: absolute;
+    border: 1px dashed color-mix(in srgb, var(--bb-primary) 60%, transparent);
+    border-radius: var(--bb-radius-sm);
+    background: color-mix(in srgb, var(--bb-primary) 14%, transparent);
+    pointer-events: none;
+}
+
+.show-zones > .bit-bortable-item::after {
+    display: none;
+}
+
+.threshold-list.show-zones > .bit-bortable-item::before {
+    left: 3px;
+    right: 3px;
+    top: calc((1 - var(--zone)) * 50%);
+    bottom: calc((1 - var(--zone)) * 50%);
+}
+
+.threshold-list.show-zones.zones-inverted > .bit-bortable-item::before,
+.threshold-list.show-zones.zones-inverted > .bit-bortable-item::after {
+    display: block;
+    left: 3px;
+    right: 3px;
+    height: calc(var(--inverted-zone) * 50%);
+}
+
+.threshold-list.show-zones.zones-inverted > .bit-bortable-item::before {
+    top: 0;
+    bottom: auto;
+}
+
+.threshold-list.show-zones.zones-inverted > .bit-bortable-item::after {
+    bottom: 0;
+}
+
+.threshold-grid.show-zones > .bit-bortable-item::before,
+.threshold-grid.show-zones > .bit-bortable-item::after {
+    border-color: rgba(255, 255, 255, .85);
+    background: rgba(255, 255, 255, .26);
+}
+
+.threshold-grid.show-zones > .bit-bortable-item::before {
+    top: 3px;
+    bottom: 3px;
+    left: calc((1 - var(--zone)) * 50%);
+    right: calc((1 - var(--zone)) * 50%);
+}
+
+.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::before,
+.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::after {
+    display: block;
+    top: 3px;
+    bottom: 3px;
+    width: calc(var(--inverted-zone) * 50%);
+}
+
+.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::before {
+    left: 0;
+    right: auto;
+}
+
+.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::after {
+    right: 0;
+}
+
+/* The "View code" toggle: the kit's secondary button, with the caret and the code glyph in it. */
+.demo-code__caret {
+    font-size: .8em;
+    color: var(--bb-text-soft);
+}
+
+.demo-code__glyph {
+    font-family: var(--bb-mono);
+    color: var(--bb-primary);
+}
+
+/* The landing page's hero: the live list under the sample's markup, inside the window frame. */
+.home-hero-live {
+    padding: 1rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.home-hero-live .demo-list {
+    max-width: none;
+}
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Bortable/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/site.js b/src/Utilities/Bortable/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bortable/Demo/Server/wwwroot/theme.js b/src/Utilities/Bortable/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bortable/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/BrowserLayerTests.cs b/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/BrowserLayerTests.cs
index cd72bec53ae..d81a247b6c9 100644
--- a/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/BrowserLayerTests.cs
+++ b/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/BrowserLayerTests.cs
@@ -43,7 +43,7 @@ private static Task<int> DropIndexOverSingleItemAsync(IPage page, string listSty
     [TestMethod]
     public async Task A_single_item_in_a_flex_row_sorts_along_the_row()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
 
         // The right half of the item, its upper half: after it along a row, before it down a column.
         Assert.AreEqual(1, await DropIndexOverSingleItemAsync(page, "display: flex", "", 0.75, 0.25));
@@ -55,7 +55,7 @@ public async Task A_single_item_in_a_flex_row_sorts_along_the_row()
     [TestMethod]
     public async Task A_single_item_in_a_flex_column_sorts_down_the_column()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
 
         Assert.AreEqual(0, await DropIndexOverSingleItemAsync(page, "display: flex; flex-direction: column", "", 0.75, 0.25));
         Assert.AreEqual(1, await DropIndexOverSingleItemAsync(page, "display: flex; flex-direction: column", "", 0.25, 0.75));
@@ -64,7 +64,7 @@ public async Task A_single_item_in_a_flex_column_sorts_down_the_column()
     [TestMethod]
     public async Task A_single_item_reads_its_own_layout_in_a_block_list()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
 
         Assert.AreEqual(1, await DropIndexOverSingleItemAsync(page, "display: block", "display: inline-block", 0.75, 0.25));
         Assert.AreEqual(1, await DropIndexOverSingleItemAsync(page, "display: block", "float: left", 0.75, 0.25));
@@ -74,7 +74,7 @@ public async Task A_single_item_reads_its_own_layout_in_a_block_list()
     [TestMethod]
     public async Task Only_a_drag_of_the_lists_own_is_allowed_to_drop_on_a_list()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
 
         // A dragover of a list's own drag is cancelled, which is what lets the browser drop it there; a file or
         // a piece of text dragged over the same list keeps its default.
diff --git a/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/DemoPagesTests.cs b/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/DemoPagesTests.cs
index cff08ae869b..48dcbe69eda 100644
--- a/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/DemoPagesTests.cs
+++ b/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/DemoPagesTests.cs
@@ -26,7 +26,7 @@ public async Task Every_demo_page_loads_interactively_and_shows_its_code_without
         var response = await GotoAsync(page, path);
         Assert.AreEqual(200, response?.Status, $"{path} answered {response?.Status}");
         await WaitForListsAsync(page);
-        await Expect(page.Locator("h3").First).ToBeVisibleAsync();
+        await Expect(page.Locator("h1").First).ToBeVisibleAsync();
 
         // A page with lists on it has loaded the library's browser layer (WaitForListsAsync waits for it) and its
         // stylesheet, without which no drag state is drawn; and every list shows its items.
@@ -89,27 +89,27 @@ public async Task An_unknown_address_answers_404_with_the_not_found_page()
 
         Assert.AreEqual(404, response?.Status);
         await WaitForListsAsync(page);
-        await Expect(page.Locator("h3")).ToHaveTextAsync("Not Found");
-        await Expect(page.Locator(".sidebar")).ToBeVisibleAsync();
+        await Expect(page.Locator("h1")).ToHaveTextAsync("404");
+        await Expect(page.Locator(".bb-header")).ToBeVisibleAsync();
         await Expect(page.Locator(ListSelector)).ToHaveCountAsync(0);
     }
 
     [TestMethod]
     public async Task Navigating_between_the_demos_in_the_app_leaves_working_lists_behind()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
         var problems = TrackProblems(page, BaseUrl);
 
         // Client-side navigation through every demo: each page's lists are torn down (their drag handles and module
         // references released) and the next page's set up, all in the same WebAssembly instance.
-        var links = page.Locator(".sidebar a.nav-link");
+        var links = page.Locator(".bb-docs-sidebar .bb-docs-section a");
         int count = await links.CountAsync();
         Assert.IsTrue(count > 10, $"the sidebar offers only {count} demos");
         for (int i = 1; i < count; i++)
         {
             var href = await links.Nth(i).GetAttributeAsync("href");
             await links.Nth(i).ClickAsync();
-            await page.WaitForURLAsync(BaseUrl + "/" + href);
+            await page.WaitForURLAsync(BaseUrl + "/" + href!.TrimStart('/'));
             await WaitForQuietAsync(page);
         }
 
@@ -124,8 +124,8 @@ await DragAsync(page,
         await AssertOrderAsync(page, "handle-list", "handle-order", "Item 6", "Item 1", "Item 2", "Item 3", "Item 4", "Item 5");
 
         // And back on the first demo, the list still sorts.
-        await links.Nth(0).ClickAsync();
-        await page.WaitForURLAsync(BaseUrl + "/");
+        await links.Filter(new LocatorFilterOptions { HasText = "Simple list" }).ClickAsync();
+        await page.WaitForURLAsync(BaseUrl + "/simple-list");
         await Expect(page.Locator("#simple-list")).ToBeVisibleAsync();
         await WaitForQuietAsync(page);
         await DragAsync(page,
diff --git a/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/SortingTests.cs b/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/SortingTests.cs
index cd7a99c247f..15b50bbb87b 100644
--- a/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/SortingTests.cs
+++ b/src/Utilities/Bortable/Tests/Bit.Bortable.Tests.E2E/SortingTests.cs
@@ -20,7 +20,7 @@ public sealed class SortingTests : BortableTest
     [TestMethod]
     public async Task Dragging_an_item_down_reorders_the_list_live_and_binds_the_order_on_drop()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
         await AssertOrderAsync(page, "simple-list", "simple-order", Simple);
 
         var from = (await BoxAsync(Item(page, "simple-list", "Item 1"))).Centre;
@@ -45,7 +45,7 @@ public async Task Dragging_an_item_down_reorders_the_list_live_and_binds_the_ord
     [TestMethod]
     public async Task Dragging_an_item_up_moves_it_above_the_item_it_is_dropped_on()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
 
         await DragAsync(page,
             (await BoxAsync(Item(page, "simple-list", "Item 5"))).Centre,
@@ -57,7 +57,7 @@ await DragAsync(page,
     [TestMethod]
     public async Task Successive_drags_keep_sorting_the_already_sorted_list()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
 
         await DragAsync(page,
             (await BoxAsync(Item(page, "simple-list", "Item 6"))).Centre,
@@ -95,7 +95,7 @@ await DragAsync(page,
     [TestMethod]
     public async Task The_FLIP_animation_slides_items_without_disturbing_the_final_order()
     {
-        var page = await OpenAsync("/");
+        var page = await OpenAsync("/simple-list");
 
         // Counts the slides the browser runs: a FLIP inverts a moved item with a transform and transitions it back
         // to none, all within one task, so the transition itself is the trace it leaves.
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/AppNav.razor b/src/Utilities/Bsqlite/Demo/Client/Components/AppNav.razor
deleted file mode 100644
index 569f697b1e2..00000000000
--- a/src/Utilities/Bsqlite/Demo/Client/Components/AppNav.razor
+++ /dev/null
@@ -1,86 +0,0 @@
-@inject NavigationManager Nav
-@implements IDisposable
-
-@* The documentation sidebar. Blazor's own NavLink only toggles a CSS class; a screen reader needs
-   aria-current="page" to announce which entry is the one you are on, so the active state is
-   computed here and drives both. *@
-
-<nav id="site-nav" class="sidebar" data-open="@(Open ? "true" : "false")" aria-label="Documentation">
-    @foreach (var group in SiteMap.Sections)
-    {
-        <div class="nav-group">
-            <h2 class="nav-group-title">@group.Title</h2>
-            <ul class="nav-list">
-                @foreach (var entry in group.Pages)
-                {
-                    <li>
-                        <a class="nav-link" href="@entry.Href"
-                           aria-current="@(IsCurrent(entry.Href) ? "page" : null)"
-                           @onclick="OnNavigate">
-                            <Icon Name="@entry.Icon" />
-                            <span>@entry.Title</span>
-                        </a>
-                    </li>
-                }
-            </ul>
-        </div>
-    }
-
-    <div class="nav-group">
-        <h2 class="nav-group-title">Project</h2>
-        <ul class="nav-list">
-            <li>
-                <a class="nav-link" href="@SiteLinks.Readme" target="_blank" rel="noopener">
-                    <Icon Name="book" />
-                    <span>Readme</span>
-                    <span class="nav-external"><Icon Name="external" /></span>
-                </a>
-            </li>
-            <li>
-                <a class="nav-link" href="@SiteLinks.Repository" target="_blank" rel="noopener">
-                    <Icon Name="github" />
-                    <span>Source</span>
-                    <span class="nav-external"><Icon Name="external" /></span>
-                </a>
-            </li>
-            <li>
-                <a class="nav-link" href="@SiteLinks.NuGet" target="_blank" rel="noopener">
-                    <Icon Name="package" />
-                    <span>NuGet</span>
-                    <span class="nav-external"><Icon Name="external" /></span>
-                </a>
-            </li>
-        </ul>
-    </div>
-</nav>
-
-@code {
-    /// <summary>Drives the off-canvas drawer under 1024px. Ignored by the desktop layout.</summary>
-    [Parameter]
-    public bool Open { get; set; }
-
-    /// <summary>Raised on every in-site link so the layout can close that drawer.</summary>
-    [Parameter]
-    public EventCallback OnNavigate { get; set; }
-
-    protected override void OnInitialized()
-        => Nav.LocationChanged += OnLocationChanged;
-
-    private void OnLocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
-        => StateHasChanged();
-
-    private bool IsCurrent(string href)
-    {
-        var path = Nav.ToBaseRelativePath(Nav.Uri);
-        var cut = path.IndexOfAny(['?', '#']);
-        if (cut >= 0)
-        {
-            path = path[..cut];
-        }
-
-        return string.Equals(path.Trim('/'), href.Trim('/'), StringComparison.OrdinalIgnoreCase);
-    }
-
-    public void Dispose()
-        => Nav.LocationChanged -= OnLocationChanged;
-}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/CodeBlock.razor b/src/Utilities/Bsqlite/Demo/Client/Components/CodeBlock.razor
index e71548a3d95..93ca81e9442 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Components/CodeBlock.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Components/CodeBlock.razor
@@ -1,34 +1,30 @@
-@inject IJSRuntime Js
-
-@* Shows the code that powers the demo next to the demo itself. *@
-<div class="codeblock" data-open="@(_open ? "true" : "false")">
-    <div class="codeblock-head">
-        <span class="codeblock-lang">@Language</span>
-        <span class="codeblock-title">@Title</span>
-        <span class="grow"></span>
+@* Shows the code that powers the demo next to the demo itself: the site kit's pre.bb-code - which
+   site.js gives a copy button - coloured by CodeHighlighter.cs (its token classes are mapped onto the
+   kit's code colours in demo.css), under the file it comes from and, for a long listing, behind a
+   Show / Hide toggle. *@
+<div class="bb-source bq-code">
+    <div class="bq-code-head">
+        <span class="bq-code-lang">@Language</span>
+        <span class="bb-source-file bq-code-title">@Title</span>
         @if (Collapsible)
         {
-            <button type="button" class="codeblock-btn" aria-expanded="@(_open ? "true" : "false")"
+            <button type="button" class="btn btn-secondary bq-code-toggle" aria-expanded="@(_open ? "true" : "false")"
                     @onclick="() => _open = !_open">
-                @(_open ? "Hide" : "Show")
+                <span class="bq-code-caret" aria-hidden="true">@(_open ? "▾" : "▸")</span>
+                @(_open ? "Hide code" : "Show code")
             </button>
         }
-        <button type="button" class="codeblock-btn @(_copied ? "copied" : null)" @onclick="CopyAsync">
-            <Icon Name="@(_copied ? "check" : "copy")" />
-            @(_copied ? "Copied" : "Copy")
-        </button>
     </div>
     @if (_open)
     {
-        <pre><code>@CodeHighlighter.Highlight(Code, Language)</code></pre>
+        <pre class="bb-code"><code>@CodeHighlighter.Highlight(Code, Language)</code></pre>
     }
 </div>
 
 @code {
     private bool _open;
-    private bool _copied;
 
-    /// <summary>File name or label shown in the header, e.g. <c>Pages/Catalog.razor</c>.</summary>
+    /// <summary>File name or label shown over the code, e.g. <c>Pages/Catalog.razor</c>.</summary>
     [Parameter, EditorRequired]
     public string Title { get; set; } = string.Empty;
 
@@ -47,24 +43,4 @@
     public bool Open { get; set; } = true;
 
     protected override void OnInitialized() => _open = Open;
-
-    private async Task CopyAsync()
-    {
-        try
-        {
-            _copied = await Js.InvokeAsync<bool>("bsqliteDemo.copy", Code);
-        }
-        catch (Exception ex)
-        {
-            SampleLog.Exception(ex);
-            _copied = false;
-        }
-
-        if (_copied)
-        {
-            // Blazor re-renders around the await, so the label flips back on its own.
-            await Task.Delay(1400);
-            _copied = false;
-        }
-    }
 }
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/DemoCard.razor b/src/Utilities/Bsqlite/Demo/Client/Components/DemoCard.razor
index aac2609a89c..dd8ad9f522e 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Components/DemoCard.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Components/DemoCard.razor
@@ -1,21 +1,28 @@
-@* A demo section: what it shows, what to try, the live thing, then the code behind it. *@
-<section class="card">
-    <div class="card-head">
-        @if (!string.IsNullOrEmpty(Step))
-        {
-            <span class="card-step">@Step</span>
-        }
-        <h2>@Title</h2>
-    </div>
+@* A demo section: what it shows, what to try, the live thing, then the code behind it. It is the
+   site kit's .bb-card, so in the docs column it reads as a passage of the page and its
+   h3.bb-card-title feeds the "On this page" rail; the live part keeps a frame of its own (.bb-demo),
+   because it is a thing on the page rather than prose. *@
+<section class="bb-card">
+    @if (!string.IsNullOrEmpty(Step))
+    {
+        <span class="bb-overline bq-step">@Step</span>
+    }
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> @Title</h3>
     @if (Description is not null)
     {
-        <p>@Description</p>
+        <p class="bb-card-desc">@Description</p>
     }
     @if (Try is not null)
     {
-        <p class="try"><b>Try</b> <span>@Try</span></p>
+        <div class="bb-note bq-try"><strong>Try</strong> @Try</div>
+    }
+    @if (ChildContent is not null)
+    {
+        <div class="bb-demo">
+            <div class="bb-demo-bar"><span class="bb-demo-label">Live</span></div>
+            @ChildContent
+        </div>
     }
-    @ChildContent
     @if (!string.IsNullOrWhiteSpace(Code))
     {
         <CodeBlock Title="@CodeTitle" Language="@Language" Code="@Code" Open="@CodeOpen" />
@@ -27,7 +34,7 @@
     [Parameter, EditorRequired]
     public string Title { get; set; } = string.Empty;
 
-    /// <summary>Small uppercase kicker, e.g. a step number in a walkthrough.</summary>
+    /// <summary>Small uppercase kicker over the title, e.g. the step of a walkthrough.</summary>
     [Parameter]
     public string? Step { get; set; }
 
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/Icon.razor b/src/Utilities/Bsqlite/Demo/Client/Components/Icon.razor
deleted file mode 100644
index 7e649e94c97..00000000000
--- a/src/Utilities/Bsqlite/Demo/Client/Components/Icon.razor
+++ /dev/null
@@ -1,55 +0,0 @@
-@* Every icon on the site, inlined. A demo that demonstrates an offline-first database has no
-   business downloading an icon font, and emoji are not icons: they render differently on every
-   platform and read as text to a screen reader.
-
-   Icons are decorative here - the label beside them carries the meaning - so the <svg> is marked
-   aria-hidden unless the caller passes a Title, which turns it into a labelled image instead. *@
-
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"
-     stroke-linecap="round" stroke-linejoin="round"
-     aria-hidden="@(Title is null ? "true" : null)"
-     role="@(Title is null ? null : "img")"
-     focusable="false">@Body</svg>
-
-@code {
-    [Parameter, EditorRequired]
-    public string Name { get; set; } = string.Empty;
-
-    /// <summary>Set only when the icon is the sole content of a control and so carries its name.</summary>
-    [Parameter]
-    public string? Title { get; set; }
-
-    private MarkupString Body => new(
-        (Title is null ? string.Empty : $"<title>{Title}</title>")
-        + (Paths.TryGetValue(Name, out var path) ? path : Paths["dot"]));
-
-    private static readonly Dictionary<string, string> Paths = new(StringComparer.Ordinal)
-    {
-        ["database"] = """<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3"/>""",
-        ["home"] = """<path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M9.5 21v-6h5v6"/>""",
-        ["boxes"] = """<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>""",
-        ["users"] = """<path d="M16 20v-1.5a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4V20"/><circle cx="9" cy="7.5" r="3.5"/><path d="M22 20v-1.5a4 4 0 0 0-3-3.87"/><path d="M16.5 4.13a4 4 0 0 1 0 7.75"/>""",
-        ["receipt"] = """<path d="M5 3h14v18l-2.33-1.5L14.33 21 12 19.5 9.67 21 7.33 19.5 5 21z"/><path d="M9 8h6"/><path d="M9 12h6"/>""",
-        ["terminal"] = """<rect x="2" y="3" width="20" height="18" rx="2.5"/><path d="m6.5 9 3 3-3 3"/><path d="M13 15h4.5"/>""",
-        ["drive"] = """<rect x="2.5" y="5" width="19" height="6" rx="2"/><rect x="2.5" y="13" width="19" height="6" rx="2"/><path d="M6.5 8h.01"/><path d="M6.5 16h.01"/>""",
-        ["files"] = """<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4L11 7.5h8.5A1.5 1.5 0 0 1 21 9v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18z"/>""",
-        ["shield"] = """<path d="M12 2.5 4.5 5.5v6c0 4.5 3.1 8.6 7.5 10 4.4-1.4 7.5-5.5 7.5-10v-6z"/><path d="m9 12 2 2 4-4"/>""",
-        ["warning"] = """<path d="M10.3 3.9 1.9 18a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4.5"/><path d="M12 17.5h.01"/>""",
-        ["bolt"] = """<path d="M13.5 2 4 13.5h7L10.5 22 20 10.5h-7z"/>""",
-        ["layers"] = """<path d="m12 2.5 9 4.75-9 4.75-9-4.75z"/><path d="m3 12.5 9 4.75 9-4.75"/><path d="m3 17.5 9 4.75 9-4.75"/>""",
-        ["sync"] = """<path d="M20.5 12a8.5 8.5 0 0 1-14.5 6L3.5 15.5"/><path d="M3.5 12A8.5 8.5 0 0 1 18 6l2.5 2.5"/><path d="M20.5 4.5v4h-4"/><path d="M3.5 19.5v-4h4"/>""",
-        ["package"] = """<path d="m12 2.5 8.5 4.5v10L12 21.5 3.5 17V7z"/><path d="M3.5 7 12 11.5 20.5 7"/><path d="M12 11.5v10"/>""",
-        ["copy"] = """<rect x="9" y="9" width="12" height="12" rx="2"/><path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/>""",
-        ["check"] = """<path d="m5 12.5 4.5 4.5L19 7"/>""",
-        ["github"] = """<path d="M9.2 19.6c-4.2 1.3-4.2-2.2-5.9-2.6m11.8 4.5v-3.4c0-1 .1-1.7-.6-2.3 2.8-.3 5.7-1.4 5.7-6.2a4.8 4.8 0 0 0-1.3-3.3 4.5 4.5 0 0 0-.1-3.3s-1.1-.3-3.5 1.3a12 12 0 0 0-6.2 0C6.7 3.7 5.6 4 5.6 4a4.5 4.5 0 0 0-.1 3.3 4.8 4.8 0 0 0-1.3 3.4c0 4.7 2.9 5.8 5.7 6.1-.4.4-.7 1-.6 1.6v3.7"/>""",
-        ["external"] = """<path d="M13 4h7v7"/><path d="M20 4 10.5 13.5"/><path d="M18 14.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4.5"/>""",
-        ["arrow-right"] = """<path d="M4 12h15"/><path d="m13 6 6 6-6 6"/>""",
-        ["sun"] = """<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M2 12h2M20 12h2M4.9 19.1l1.5-1.5M17.6 6.4l1.5-1.5"/>""",
-        ["moon"] = """<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>""",
-        ["monitor"] = """<rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8.5 21h7"/><path d="M12 17v4"/>""",
-        ["menu"] = """<path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/>""",
-        ["close"] = """<path d="m6 6 12 12"/><path d="m18 6-12 12"/>""",
-        ["book"] = """<path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H20v16H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H20v4H6.5A2.5 2.5 0 0 1 4 20.5z"/>""",
-        ["dot"] = """<circle cx="12" cy="12" r="9"/>""",
-    };
-}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/PageHeader.razor b/src/Utilities/Bsqlite/Demo/Client/Components/PageHeader.razor
index d2cf865a4e0..47ef0afd185 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Components/PageHeader.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Components/PageHeader.razor
@@ -1,13 +1,14 @@
-@* Every demo page opens the same way: what part of the library it exercises, its title, and one
-   paragraph of what to look for. It also owns the document title, so a bookmarked demo page is
-   named after the demo rather than after the site. *@
+@* Every demo page opens the same way - the site kit's .bb-intro: what part of the library it
+   exercises as the overline, its title as the page's one H1 (which FocusOnNavigate moves focus to),
+   and one paragraph of what to look for. It also owns the document title, so a bookmarked demo page
+   is named after the demo rather than after the site. *@
 <PageTitle>@Title · Bsqlite</PageTitle>
 
-<header class="page-head">
-    <p class="eyebrow">@Kicker</p>
+<div class="bb-intro">
+    <p class="bb-overline">@Kicker</p>
     <h1>@Title</h1>
-    <p class="lead">@ChildContent</p>
-</header>
+    <p class="bb-subtitle">@ChildContent</p>
+</div>
 
 @code {
     [Parameter, EditorRequired]
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/StorageSwitcher.razor b/src/Utilities/Bsqlite/Demo/Client/Components/StorageSwitcher.razor
index e267d76c463..ac015e94859 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Components/StorageSwitcher.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Components/StorageSwitcher.razor
@@ -2,44 +2,46 @@
 @implements IAsyncDisposable
 
 @* The session bar: which storage backend this tab's database actually landed on, and the two
-   operations that move it somewhere else. It sits above every demo page because every demo runs
-   against whatever it says. *@
+   operations that move it somewhere else. Every page that runs against the database opens with it,
+   under its title, because every demo on that page runs against whatever it says. It is drawn as
+   the site kit's sample frame - the backend and the controls in the title bar, what the backend is
+   like underneath.
 
-<section class="session-bar" aria-label="Client database session" data-session="@(Database.Resolution?.Provider.Name ?? "closed")">
-    <div class="session-id">
-        <span class="storage-dot" data-name="@CurrentName"></span>
-        <div>
-            <p class="session-label">Client database</p>
-            <p class="session-name">@SampleStorage.Title(CurrentName)</p>
-        </div>
-    </div>
+   data-session names the backend once a session is open ("closed" until then, and in the
+   prerendered page), which is what the E2E suite waits for before it touches a page. *@
 
-    <p class="session-blurb">@SampleStorage.Blurb(CurrentName)</p>
+<section class="bb-demo bq-session" aria-label="Client database session" data-session="@(Database.Resolution?.Provider.Name ?? "closed")">
+    <div class="bb-demo-bar">
+        <span class="bq-storage-dot" data-name="@CurrentName" aria-hidden="true"></span>
+        <span class="bq-session-label">Client database</span>
+        <strong class="bq-session-name">@SampleStorage.Title(CurrentName)</strong>
 
-    <div class="session-controls">
-        <label>
-            <span>Backend</span>
-            <select @bind="_target" disabled="@_busy">
-                @foreach (var provider in Database.Providers)
-                {
-                    <option value="@provider.Name">@SampleStorage.Title(provider.Name)</option>
-                }
-            </select>
-        </label>
-        <button type="button" class="secondary" disabled="@(_busy || SameTarget)"
-                @onclick="() => SwitchAsync(StorageSwitchMode.Migrate)">
-            <Icon Name="sync" />
-            Move data
-        </button>
-        <button type="button" class="secondary" disabled="@(_busy || SameTarget)"
-                @onclick="() => SwitchAsync(StorageSwitchMode.Fresh)">
-            Start empty
-        </button>
+        <div class="bq-session-controls">
+            <label class="bq-session-target">
+                <span class="bb-soft">Backend</span>
+                <select @bind="_target" disabled="@_busy" aria-label="Storage backend to move to">
+                    @foreach (var provider in Database.Providers)
+                    {
+                        <option value="@provider.Name">@SampleStorage.Title(provider.Name)</option>
+                    }
+                </select>
+            </label>
+            <button type="button" class="btn btn-secondary" disabled="@(_busy || SameTarget)"
+                    @onclick="() => SwitchAsync(StorageSwitchMode.Migrate)">
+                Move data
+            </button>
+            <button type="button" class="btn btn-secondary" disabled="@(_busy || SameTarget)"
+                    @onclick="() => SwitchAsync(StorageSwitchMode.Fresh)">
+                Start empty
+            </button>
+        </div>
     </div>
 
+    <p class="bq-session-blurb">@SampleStorage.Blurb(CurrentName)</p>
+
     @if (_message is not null)
     {
-        <p class="session-status @(_failed ? "failed" : "ok")" role="status">@_message</p>
+        <p class="bq-session-status @(_failed ? "bq-err" : "bq-ok")" role="status">@_message</p>
     }
 </section>
 
@@ -115,9 +117,9 @@
         }
     }
 
-    public async ValueTask DisposeAsync()
+    public ValueTask DisposeAsync()
     {
         Database.AfterSessionReset -= OnResetAsync;
-        await Task.CompletedTask;
+        return ValueTask.CompletedTask;
     }
 }
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/ThemeToggle.razor b/src/Utilities/Bsqlite/Demo/Client/Components/ThemeToggle.razor
deleted file mode 100644
index 00cddc42f12..00000000000
--- a/src/Utilities/Bsqlite/Demo/Client/Components/ThemeToggle.razor
+++ /dev/null
@@ -1,54 +0,0 @@
-@inject IJSRuntime Js
-
-@* System / light / dark. The chosen mode is stored in localStorage and re-applied before first
-   paint by the boot script in index.html, so reloads never flash the wrong theme. *@
-<div class="segmented" role="group" aria-label="Colour theme">
-    <button type="button" aria-pressed="@Pressed("system")" @onclick='() => SetAsync("system")'>
-        <Icon Name="monitor" Title="Follow the operating system" />
-    </button>
-    <button type="button" aria-pressed="@Pressed("light")" @onclick='() => SetAsync("light")'>
-        <Icon Name="sun" Title="Light theme" />
-    </button>
-    <button type="button" aria-pressed="@Pressed("dark")" @onclick='() => SetAsync("dark")'>
-        <Icon Name="moon" Title="Dark theme" />
-    </button>
-</div>
-
-@code {
-    private string _mode = "system";
-
-    // ARIA wants the literal strings. A bool would make Blazor drop the attribute when false and
-    // emit a valueless one when true, neither of which a screen reader reports as a toggle state.
-    private string Pressed(string mode) => _mode == mode ? "true" : "false";
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (!firstRender)
-        {
-            return;
-        }
-
-        try
-        {
-            _mode = await Js.InvokeAsync<string>("bsqliteDemo.theme.get");
-            StateHasChanged();
-        }
-        catch (Exception ex)
-        {
-            SampleLog.Exception(ex);
-        }
-    }
-
-    private async Task SetAsync(string mode)
-    {
-        _mode = mode;
-        try
-        {
-            await Js.InvokeAsync<string>("bsqliteDemo.theme.set", mode);
-        }
-        catch (Exception ex)
-        {
-            SampleLog.Exception(ex);
-        }
-    }
-}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/TopBar.razor b/src/Utilities/Bsqlite/Demo/Client/Components/TopBar.razor
deleted file mode 100644
index 0b524a45970..00000000000
--- a/src/Utilities/Bsqlite/Demo/Client/Components/TopBar.razor
+++ /dev/null
@@ -1,52 +0,0 @@
-@inject NavigationManager Nav
-@implements IDisposable
-
-<header class="topbar">
-    <div class="topbar-inner">
-        <button type="button" class="icon-btn nav-toggle"
-                aria-expanded="@(NavOpen ? "true" : "false")"
-                aria-controls="site-nav"
-                @onclick="OnToggleNav">
-            <Icon Name="@(NavOpen ? "close" : "menu")" Title="@(NavOpen ? "Close navigation" : "Open navigation")" />
-        </button>
-
-        <a class="brand" href="">
-            <span class="brand-mark"><Icon Name="database" /></span>
-            <span class="brand-name">Bsqlite</span>
-        </a>
-        <span class="brand-version">v@(SiteLinks.Version)</span>
-
-        <div class="topbar-links">
-            <a class="topbar-link" href="" aria-current="@(IsHome ? "page" : null)">Overview</a>
-            @* "true" rather than "page": this marks the section you are inside, not the exact page. *@
-            <a class="topbar-link" href="catalog" aria-current="@(IsHome ? null : "true")">Live demo</a>
-            <a class="topbar-link" href="@SiteLinks.Readme" target="_blank" rel="noopener">Docs</a>
-        </div>
-
-        <div class="topbar-actions">
-            <a class="icon-btn" href="@SiteLinks.Repository" target="_blank" rel="noopener">
-                <Icon Name="github" Title="Bsqlite on GitHub" />
-            </a>
-            <ThemeToggle />
-        </div>
-    </div>
-</header>
-
-@code {
-    [Parameter]
-    public bool NavOpen { get; set; }
-
-    [Parameter]
-    public EventCallback OnToggleNav { get; set; }
-
-    private bool IsHome => Nav.ToBaseRelativePath(Nav.Uri).Trim('/').Length == 0;
-
-    protected override void OnInitialized()
-        => Nav.LocationChanged += OnLocationChanged;
-
-    private void OnLocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
-        => StateHasChanged();
-
-    public void Dispose()
-        => Nav.LocationChanged -= OnLocationChanged;
-}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Components/UnhandledExceptionView.razor b/src/Utilities/Bsqlite/Demo/Client/Components/UnhandledExceptionView.razor
new file mode 100644
index 00000000000..f22a77d4f47
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Components/UnhandledExceptionView.razor
@@ -0,0 +1,29 @@
+@* What the error boundary in Routes.razor shows in place of a page that threw while rendering: the
+   exception's type and message - the site kit's error page - with the whole exception graph written
+   to the browser console. *@
+
+@if (Exception is not null)
+{
+    <div class="bb-error bq-crash" role="alert">
+        <h1>This page failed</h1>
+        <p><code>@Exception.GetType().FullName</code>: @Exception.Message</p>
+        <p>The full exception, including inner exceptions and stack traces, is in the browser console.</p>
+        <div class="bb-try bb-error-actions">
+            <a href="" class="btn btn-primary">Go to the home page</a>
+            <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter]
+    public Exception? Exception { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        if (Exception is not null)
+        {
+            SampleLog.Exception(Exception);
+        }
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/DocsCatalog.cs b/src/Utilities/Bsqlite/Demo/Client/DocsCatalog.cs
new file mode 100644
index 00000000000..bdf01bae3cb
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/DocsCatalog.cs
@@ -0,0 +1,176 @@
+using Bit.Bsqlite.Demo.Client.Pages;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Bsqlite.Demo.Client;
+
+/// <summary>
+/// One documentation page: <paramref name="Url"/> is its address, <paramref name="Keywords"/> feeds
+/// the header's search palette, and <paramref name="PageType"/> is the component the address renders -
+/// which is what the "Edit this page on GitHub" link under every page is built from.
+/// </summary>
+public record DocsPageInfo(string Url, string Title, string Description, string Keywords, Type PageType);
+
+public record DocsSection(string Title, DocsPageInfo[] Pages);
+
+/// <summary>
+/// A link in the header. <paramref name="MatchesDocs"/> marks the entry that stands for the docs as a
+/// whole: it is the current section on every page no other entry claims.
+/// </summary>
+public record SiteNavItem(string Href, string Label, bool MatchesDocs = false);
+
+/// <summary>
+/// What the shared site chrome in Layout/ - the header, the docs shell, the palette and the footer -
+/// says about this particular demo. Those components are the same file in every Utilities demo; this
+/// class and <see cref="DocsCatalog"/> are what each demo fills in for itself.
+/// </summary>
+public static class SiteInfo
+{
+    /// <summary>The library's name, as the header's wordmark and the breadcrumb's root show it.</summary>
+    public const string Name = "Bsqlite";
+
+    public const string PackageId = "Bit.Bsqlite";
+
+    /// <summary>The library's folder in the repository, which the GitHub links point into.</summary>
+    public const string ProjectPath = "src/Utilities/Bsqlite";
+
+    /// <summary>What the library is, in the two or three sentences the footer has room for.</summary>
+    public const string Tagline =
+        "Bsqlite is SQLite in the browser for Blazor, with EF Core on top: the same entities and migrations as " +
+        "on the server, in a database that lives in the user's tab - on OPFS, IndexedDB, Cache Storage or memory. " +
+        "This site is itself a Blazor WebAssembly app built on it.";
+
+    public static readonly string[] Badges = ["MIT", "net8.0", "net9.0", "net10.0"];
+
+    /// <summary>Words the search palette suggests when a query finds nothing.</summary>
+    public static readonly string[] SearchHints = ["live query", "opfs", "migrate", "decimal", "export"];
+
+    /// <summary>
+    /// Whether Ctrl+K / Cmd+K opens the site's search palette. "/" always does. A demo whose own
+    /// library answers to Ctrl+K turns this off so the two do not fight over the key.
+    /// </summary>
+    public static readonly bool PaletteCtrlK = true;
+
+    public static readonly SiteNavItem[] Primary =
+    [
+        new("/", "Home"),
+        new("/getting-started", "Docs", MatchesDocs: true),
+        new("/mcp-server", "MCP server"),
+    ];
+
+    public const string RepositoryUrl = "https://github.com/bitfoundation/bitplatform";
+
+    public static string ProjectUrl => $"{RepositoryUrl}/tree/develop/{ProjectPath}";
+
+    public static string NuGetUrl => $"https://www.nuget.org/packages/{PackageId}";
+
+    /// <summary>
+    /// The page's source file on GitHub. Razor gives a component the namespace of its folder, so the
+    /// path below Demo/Client is the type's namespace past this assembly's root, one folder a segment.
+    /// </summary>
+    public static string SourceUrlOf(Type page)
+    {
+        var root = typeof(SiteInfo).Namespace!;
+        var relative = page.FullName!.StartsWith(root + ".", StringComparison.Ordinal)
+            ? page.FullName[(root.Length + 1)..]
+            : page.Name;
+
+        return $"{RepositoryUrl}/blob/develop/{ProjectPath}/Demo/Client/{relative.Replace('.', '/')}.razor";
+    }
+}
+
+/// <summary>
+/// The single source of truth for the site's information architecture. The docs nav panel, the
+/// header's search palette, the previous/next pager, the breadcrumb and the footer's link columns are
+/// all driven from here, so adding a page means adding exactly one entry.
+/// </summary>
+public static class DocsCatalog
+{
+    public static readonly DocsSection[] Sections =
+    [
+        new("Introduction",
+        [
+            new("/getting-started", "Getting started",
+                "Install the package, register a storage preference and a database, and open an EF Core context in the browser.",
+                "install setup nuget package AddBitBsqliteServices AddBitBsqliteDbContext UseBitBsqlite program.cs prerendering render mode quick start",
+                typeof(GettingStarted)),
+        ]),
+        new("Model and data",
+        [
+            new("/catalog", "Catalog",
+                "CRUD over a related graph: a unique SKU, a decimal price, a TimeSpan lead time and a nullable DateOnly.",
+                "crud products categories insert update delete SaveChangesAsync foreign key cascade decimal timespan dateonly",
+                typeof(Catalog)),
+            new("/customers", "Customers",
+                "Guid keys, a unique index the engine enforces, a VIP flag and decimal credit limits.",
+                "guid unique index constraint DbUpdateException bool dateonly decimal precision types",
+                typeof(Customers)),
+            new("/orders", "Orders",
+                "Master-detail with Include and ThenInclude, a string-backed enum, DateTimeOffset and restrict foreign keys.",
+                "include theninclude master detail graph enum DateTimeOffset restrict relationships order lines",
+                typeof(Orders)),
+        ]),
+        new("Engine and platform",
+        [
+            new("/queries", "SQL and live queries",
+                "The generated SQL, ef_compare on decimals, REGEXP, live queries and plain ADO.NET on the same connection.",
+                "live query AsLiveQuery ToQueryString ef_compare EF_DECIMAL regexp ado.net command reader transaction sqlite_version",
+                typeof(Queries)),
+            // Qualified: in this namespace a bare "Storage" is the library's Bit.Bsqlite.Storage namespace.
+            new("/storage", "Storage backends",
+                "How a backend is chosen and remembered, what each one can do, quota probes and the persistent-storage permission.",
+                "opfs indexeddb cache storage in-memory selection prefer fallback resolution capabilities probe quota persist binding",
+                typeof(Pages.Storage)),
+            new("/admin", "Database files",
+                "Databases as files: list what each backend holds, export a real .db, import one back, delete.",
+                "admin export import download delete list file IBsqliteStorageAdmin seed .db",
+                typeof(Admin)),
+            new("/limits", "Limits",
+                "What the web cannot do - synchronous APIs, WAL, ATTACH, page size - and exactly how each one fails.",
+                "limits synchronous SaveChanges BsqliteSynchronousApiNotSupportedException wal journal_mode attach page_size guards",
+                typeof(Limits)),
+        ]),
+        new("Tooling",
+        [
+            new("/mcp-server", "MCP server",
+                "The Model Context Protocol server this site hosts, with its storage planner, SQL check and search tried live.",
+                "mcp model context protocol ai agent tools resources prompts claude copilot server planner sql check",
+                typeof(McpServer)),
+        ]),
+    ];
+
+    public static readonly DocsPageInfo[] AllPages = [.. Sections.SelectMany(s => s.Pages)];
+
+    /// <summary>The current address relative to the base, without its query string or fragment.</summary>
+    public static string PathOf(NavigationManager nav)
+    {
+        var path = nav.ToBaseRelativePath(nav.Uri);
+        var cut = path.IndexOfAny(['?', '#']);
+        return (cut >= 0 ? path[..cut] : path).Trim('/');
+    }
+
+    /// <summary>Whether a link's address and a base-relative path name the same page, ignoring case as the router does.</summary>
+    public static bool IsSamePath(string href, string path)
+        => string.Equals(href.Trim('/'), path.Trim('/'), StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Finds the catalog entry for a base-relative path, or null when the page is not in the catalog. A
+    /// page whose route takes a parameter is listed by its bare address, so a deeper path falls back to
+    /// the entry it starts with.
+    /// </summary>
+    public static DocsPageInfo? FindByPath(string path)
+        => AllPages.FirstOrDefault(p => IsSamePath(p.Url, path))
+           ?? AllPages.FirstOrDefault(p => path.Trim('/').StartsWith(p.Url.Trim('/') + "/", StringComparison.OrdinalIgnoreCase));
+
+    /// <summary>Previous/next pages in reading order for the bottom-of-page pager.</summary>
+    public static (DocsPageInfo? Previous, DocsPageInfo? Next) NeighborsOf(DocsPageInfo page)
+    {
+        var index = Array.IndexOf(AllPages, page);
+        if (index < 0) return (null, null);
+        return (index > 0 ? AllPages[index - 1] : null,
+                index < AllPages.Length - 1 ? AllPages[index + 1] : null);
+    }
+
+    /// <summary>Section a page belongs to (the breadcrumb's middle step and the palette's group label).</summary>
+    public static string SectionOf(DocsPageInfo page)
+        => Sections.First(s => s.Pages.Contains(page)).Title;
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/CommandPalette.razor b/src/Utilities/Bsqlite/Demo/Client/Layout/CommandPalette.razor
new file mode 100644
index 00000000000..2e5aa18e8ee
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/CommandPalette.razor
@@ -0,0 +1,306 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+@* The site's search - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   command palette rather than a dropdown under a text field.
+
+   Everything it can reach is a page of this site, so the corpus is the catalog itself -
+   DocsCatalog's titles, descriptions and keywords. No index is built and no service is called.
+
+   The trigger and the dialog are one component so the keyboard shortcut, the button and the open
+   state cannot get out of step. Ctrl+K / Cmd+K and "/" open it from anywhere - site.js owns the
+   document-level listener and calls back in here. A demo whose library claims Ctrl+K for itself
+   turns that half off with SiteInfo.PaletteCtrlK. *@
+
+<button type="button" class="bb-search-trigger" @ref="_trigger" @onclick="Open"
+        aria-label="Search documentation" title="@(SiteInfo.PaletteCtrlK ? "Search documentation (Ctrl+K)" : "Search documentation (/)")">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <span class="bb-search-trigger-label">Search docs</span>
+    <span class="bb-search-trigger-keys" aria-hidden="true">
+        @if (SiteInfo.PaletteCtrlK)
+        {
+            <kbd>@(_isApple ? "⌘" : "Ctrl")</kbd><kbd>K</kbd>
+        }
+        else
+        {
+            <kbd>/</kbd>
+        }
+    </span>
+</button>
+
+@if (_open)
+{
+    @* The scrim takes the click that closes the dialog. The dialog itself stops the click from
+       reaching it, so a click inside never closes what the reader is using. *@
+    <div class="bb-palette-scrim" @onclick="() => Close()">
+        <div class="bb-palette" role="dialog" aria-modal="true" aria-label="Search documentation"
+             @onclick:stopPropagation="true" @onkeydown="OnKeyDown">
+            @* Focus trap. The dialog claims to be modal, so Tab must not walk out of it into the
+               page behind - which is still there and still focusable. These two zero-size stops
+               sit either side of the content: reaching one means the reader tabbed past an end,
+               and focus is handed to the opposite end instead. Two elements and no interop. *@
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _escape.FocusAsync()"></span>
+
+            <div class="bb-palette-input">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+                <input @ref="_input"
+                       type="text"
+                       placeholder="Search the documentation and demos…"
+                       aria-label="Search documentation"
+                       role="combobox"
+                       aria-autocomplete="list"
+                       aria-expanded="true"
+                       aria-controls="bb-palette-listbox"
+                       aria-activedescendant="@(_results.Length > 0 ? $"bb-palette-option-{_activeIndex}" : null)"
+                       autocomplete="off"
+                       spellcheck="false"
+                       value="@_query"
+                       @oninput="OnInput" />
+                <button type="button" class="bb-palette-esc" @ref="_escape" @onclick="() => Close()" aria-label="Close search">Esc</button>
+            </div>
+
+            <div class="bb-palette-results" id="bb-palette-listbox" role="listbox" aria-label="Search results">
+                @if (_results.Length == 0)
+                {
+                    <p class="bb-palette-empty">
+                        No match for <strong>@_query</strong>.
+                        @if (SiteInfo.SearchHints.Length > 0)
+                        {
+                            <text>Try </text>
+                            @for (var i = 0; i < SiteInfo.SearchHints.Length; i++)
+                            {
+                                var hint = SiteInfo.SearchHints[i];
+                                @(i == 0 ? "" : i == SiteInfo.SearchHints.Length - 1 ? " or " : ", ")<em>@hint</em>
+                            }
+                            <text>.</text>
+                        }
+                    </p>
+                }
+                else
+                {
+                    @* Grouped by the section each hit came from, in catalog order, so the list
+                       reads as the site's own table of contents rather than as a flat ranking.
+                       The keyboard cursor still walks the FLAT order, which is why each row's
+                       position is looked up in _results rather than counted per group. *@
+                    @foreach (var group in _results.GroupBy(hit => hit.Group))
+                    {
+                        <p class="bb-overline bb-palette-group" role="presentation" @key="group.Key">@group.Key</p>
+                        @foreach (var hit in group)
+                        {
+                            var position = Array.IndexOf(_results, hit);
+                            <div role="option"
+                                 id="@($"bb-palette-option-{position}")"
+                                 aria-selected="@(position == _activeIndex ? "true" : "false")"
+                                 class="@(position == _activeIndex ? "bb-palette-hit bb-active" : "bb-palette-hit")"
+                                 @key="hit.Url"
+                                 @onmouseenter="() => _activeIndex = position"
+                                 @onmousedown="() => Go(hit)" @onmousedown:preventDefault>
+                                <span class="bb-palette-hit-title">@hit.Title</span>
+                                <span class="bb-palette-hit-desc">@hit.Description</span>
+                                <span class="bb-palette-hit-url">@hit.Url</span>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+
+            <div class="bb-palette-foot">
+                <span><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+                <span><kbd>Enter</kbd> to open</span>
+                <span><kbd>Esc</kbd> to dismiss</span>
+            </div>
+
+            <span class="bb-focus-sentinel" tabindex="0" @onfocus="() => _input.FocusAsync()"></span>
+        </div>
+    </div>
+}
+
+@code {
+    /// <summary>One row of the palette: a place on this site, and why it matched.</summary>
+    private sealed record Hit(string Group, string Title, string Description, string Url, string Corpus);
+
+    private bool _open;
+    private bool _isApple;
+    private bool _focusPending;
+    private bool _restorePending;
+    private bool _revealPending;
+    private string _query = "";
+    private Hit[] _results = [];
+    private int _activeIndex;
+
+    private ElementReference _trigger;
+    private ElementReference _input;
+    private ElementReference _escape;
+    private DotNetObjectReference<CommandPalette>? _self;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Neither call runs during prerendering - OnAfterRender does not fire there - so the
+            // palette is simply inert until the client takes over, which is the correct behavior
+            // for a control whose whole job is interactive.
+            _self = DotNetObjectReference.Create(this);
+            _isApple = await JSRuntime.InvokeAsync<bool>("bitDemoSite.registerPalette", _self, SiteInfo.PaletteCtrlK);
+            StateHasChanged();
+        }
+
+        if (_focusPending)
+        {
+            _focusPending = false;
+            await _input.FocusAsync();
+        }
+
+        if (_restorePending)
+        {
+            _restorePending = false;
+            await _trigger.FocusAsync();
+        }
+
+        if (_revealPending)
+        {
+            _revealPending = false;
+            // After the render that moved the cursor, not before: the row has to carry its new
+            // class before its position is worth measuring.
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.revealPaletteOption", _activeIndex);
+        }
+    }
+
+    /// <summary>Opened by the document-level Ctrl+K / Cmd+K / "/" handler in site.js.</summary>
+    [JSInvokable]
+    public Task OpenFromShortcut()
+    {
+        if (_open is false) Open();
+        return InvokeAsync(StateHasChanged);
+    }
+
+    private void Open()
+    {
+        _open = true;
+        _query = "";
+        _activeIndex = 0;
+        // An empty query is not "no results": with nothing typed the palette is a table of
+        // contents, which is a more useful blank state than an empty box.
+        _results = Suggest();
+        _focusPending = true;
+        LockScroll(true);
+    }
+
+    /// <summary>
+    /// Dismisses the dialog. The whole dialog is unmounted on close, so unless focus is handed
+    /// somewhere deliberately it falls to &lt;body&gt; and the next Tab restarts at the top of the
+    /// page - hence the trip back to the button that opened it. A close that ends in a navigation
+    /// passes false: the new page decides where focus belongs, and moving it here would fight that.
+    /// </summary>
+    private void Close(bool restoreFocus = true)
+    {
+        _open = false;
+        _query = "";
+        _results = [];
+        _activeIndex = 0;
+        _revealPending = false;
+        _restorePending = restoreFocus;
+        LockScroll(false);
+    }
+
+    /// <summary>
+    /// Holds the page still while the dialog is up, so a flick of the wheel scrolls the results
+    /// rather than the document behind them. Not awaited: the open/close state is already correct
+    /// in C#, and making the callers async would put a render between the click and the dialog.
+    /// </summary>
+    private void LockScroll(bool locked) => _ = JSRuntime.InvokeVoidAsync("bitDemoSite.lockScroll", locked);
+
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? "";
+        _results = _query.Trim().Length == 0 ? Suggest() : Find(_query.Trim());
+        _activeIndex = 0;
+    }
+
+    private void OnKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape":
+                Close();
+                break;
+
+            case "ArrowDown" when _results.Length > 0:
+                // Wrapping, because a palette is a short list: falling off the end and landing back
+                // at the top is what every other palette does, and it saves a reversal.
+                _activeIndex = (_activeIndex + 1) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "ArrowUp" when _results.Length > 0:
+                _activeIndex = (_activeIndex - 1 + _results.Length) % _results.Length;
+                _revealPending = true;
+                break;
+
+            case "Enter" when _results.Length > 0:
+                Go(_results[Math.Clamp(_activeIndex, 0, _results.Length - 1)]);
+                break;
+        }
+    }
+
+    private void Go(Hit hit)
+    {
+        Close(restoreFocus: false);
+        Nav.NavigateTo(hit.Url);
+    }
+
+    /// <summary>The blank state: the reading order of the docs.</summary>
+    private static Hit[] Suggest() => Regroup(Pages().Take(12));
+
+    /// <summary>
+    /// The rows in the order they are RENDERED - grouped by section, groups in first-appearance
+    /// order. The arrow keys walk the flat array, so it has to agree with what is on screen or
+    /// pressing Down would move the cursor somewhere the eye is not.
+    /// </summary>
+    private static Hit[] Regroup(IEnumerable<Hit> hits)
+        => [.. hits.GroupBy(hit => hit.Group).SelectMany(group => group)];
+
+    /// <summary>
+    /// Every term has to match somewhere, and the hits are ordered by WHERE they matched: a title
+    /// that starts with the query first, then a title that contains it, then everything that only
+    /// matched on its description or keywords. Ranking by position rather than by count keeps a
+    /// page from being outranked by another that merely says the word four times.
+    /// </summary>
+    private static Hit[] Find(string query)
+    {
+        var terms = query.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+
+        return Regroup(Pages()
+            .Where(hit => terms.All(term => hit.Corpus.Contains(term, StringComparison.OrdinalIgnoreCase)))
+            .OrderBy(hit => hit.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0
+                          : hit.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ? 1 : 2)
+            .Take(12));
+    }
+
+    private static IEnumerable<Hit> Pages()
+        => DocsCatalog.Sections.SelectMany(section => section.Pages.Select(page =>
+               new Hit(section.Title, page.Title, page.Description, page.Url,
+                       $"{page.Title} {page.Description} {page.Keywords} {page.Url}")));
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_self is null) return;
+
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("bitDemoSite.unregisterPalette");
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is already gone; there is nothing on the other side to unregister from.
+        }
+
+        _self.Dispose();
+        _self = null;
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/CommandPalette.razor.css b/src/Utilities/Bsqlite/Demo/Client/Layout/CommandPalette.razor.css
new file mode 100644
index 00000000000..17f30f9fb59
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/CommandPalette.razor.css
@@ -0,0 +1,312 @@
+/* ---------- The trigger in the header ----------
+
+   A button shaped like the search field it replaces, so it still reads as "type here" - the
+   difference is that what it opens is a dialog with room for grouped results, and that it can be
+   reached without the pointer ever touching it. */
+.bb-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    height: 32px;
+    min-width: 220px;
+    padding: 0 .375rem 0 .625rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-family: inherit;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-search-trigger:hover {
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+}
+
+.bb-search-trigger > svg {
+    width: 15px;
+    height: 15px;
+    flex: none;
+}
+
+.bb-search-trigger-label {
+    flex: 1;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-search-trigger-keys {
+    display: flex;
+    gap: 2px;
+    flex: none;
+}
+
+/* ---------- The dialog ---------- */
+
+/* Anchored near the top rather than centred: the list grows downward as the reader types, and a
+   centred dialog would move under their eyes every time it did. */
+.bb-palette-scrim {
+    position: fixed;
+    inset: 0;
+    /* The header's backdrop-filter makes it the containing block of its fixed descendants, so
+       `inset: 0` alone would span only the 56px bar. The header is pinned to the top of the
+       viewport, so a viewport-tall box from its top edge is the whole screen. */
+    bottom: auto;
+    height: 100vh;
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(6vh, 3rem) 1rem 2rem;
+    background: var(--bb-scrim);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: bb-palette-scrim-in var(--bb-motion-duration-short) var(--bb-motion-easing) both;
+}
+
+.bb-palette {
+    display: flex;
+    flex-direction: column;
+    width: min(100%, 640px);
+    max-height: min(70vh, 560px);
+    overflow: hidden;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-dialog);
+    animation: bb-palette-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+@keyframes bb-palette-scrim-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-palette-in {
+    from { opacity: 0; transform: translateY(-.75rem) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---------- Input row ---------- */
+
+/* Zero-size, but present in the tab order: the focus trap's two ends. Never `display: none` and
+   never `visibility: hidden` - either of those takes the element out of the tab order, which is
+   the one thing it is here for. */
+.bb-focus-sentinel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.bb-palette-input {
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    flex: none;
+}
+
+.bb-palette-input > svg {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--bb-text-soft);
+}
+
+.bb-palette-input input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0;
+}
+
+.bb-palette-input input::placeholder {
+    color: var(--bb-text-soft);
+}
+
+/* The pointer's way out. Keyboard readers have Escape, which the label names. */
+.bb-palette-esc {
+    flex: none;
+    padding: .1875rem .4375rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-soft);
+    font-family: var(--bb-mono);
+    font-size: .6875rem;
+    cursor: pointer;
+}
+
+.bb-palette-esc:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+/* ---------- Results ---------- */
+
+.bb-palette-results {
+    overflow-y: auto;
+    padding: .5rem;
+    flex: 1;
+}
+
+.bb-palette-group {
+    padding: .625rem .75rem .25rem;
+    margin: 0;
+}
+
+/* A three-line row: what it is, what it covers, and where it goes. The URL is on the row on
+   purpose - it is the address the reader can come back to, and part of the answer. */
+.bb-palette-hit {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "title url"
+        "desc  url";
+    align-items: center;
+    column-gap: 1rem;
+    padding: .5rem .75rem;
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+}
+
+.bb-palette-hit.bb-active {
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-palette-hit-title {
+    grid-area: title;
+    font-size: .9375rem;
+    font-weight: 600;
+    color: var(--bb-text);
+    line-height: 1.4;
+}
+
+.bb-palette-hit.bb-active .bb-palette-hit-title {
+    color: var(--bb-primary-hover);
+}
+
+.bb-palette-hit-desc {
+    grid-area: desc;
+    font-size: .8125rem;
+    line-height: 1.4;
+    color: var(--bb-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bb-palette-hit-url {
+    grid-area: url;
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+}
+
+.bb-palette-empty {
+    margin: 0;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: .9375rem;
+}
+
+.bb-palette-empty em {
+    font-style: normal;
+    font-family: var(--bb-mono);
+    color: var(--bb-text);
+}
+
+/* ---------- Footer legend ---------- */
+
+.bb-palette-foot {
+    display: flex;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-top: 1px solid var(--bb-border);
+    background: var(--bb-surface-sunken);
+    color: var(--bb-text-soft);
+    font-size: .75rem;
+    flex: none;
+}
+
+.bb-palette-foot span {
+    display: inline-flex;
+    align-items: center;
+    gap: .3125rem;
+}
+
+/* ---------- Narrow ---------- */
+
+@media (max-width: 900px) {
+    /* The label and the shortcut both stop paying for themselves once the bar is tight: the
+       shortcut needs a hardware keyboard, and the magnifier says the rest. */
+    .bb-search-trigger {
+        min-width: 0;
+        width: 32px;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .bb-search-trigger-label,
+    .bb-search-trigger-keys {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .bb-palette-scrim {
+        padding: 0;
+        align-items: stretch;
+    }
+
+    /* Full screen on a phone: 640px of dialog inside a 380px viewport is a dialog with margins,
+       and the margins are the part the reader cannot use. */
+    .bb-palette {
+        width: 100%;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+    }
+
+    /* The URL is the first thing to go: it is the longest run of unbreakable text in the row and
+       the least useful half of the answer on a screen this narrow. */
+    .bb-palette-hit {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "title"
+            "desc";
+    }
+
+    .bb-palette-hit-url {
+        display: none;
+    }
+
+    .bb-palette-hit-desc {
+        white-space: normal;
+    }
+
+    .bb-palette-foot {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/DocsLayout.razor b/src/Utilities/Bsqlite/Demo/Client/Layout/DocsLayout.razor
new file mode 100644
index 00000000000..9dc838a4894
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/DocsLayout.razor
@@ -0,0 +1,161 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* The documentation shell - part of the site kit every Utilities demo shares (see wwwroot/app.css),
+   and the default layout of every page but the landing page (Routes.razor). The sidebar stays
+   mounted while the body swaps pages, so its scroll position survives navigation; the
+   breadcrumb, the pager and the "edit" link are all recomputed from DocsCatalog on each
+   navigation.
+
+   Three columns, in the arrangement Fluent's own documentation uses: the nav panel, the page, and
+   the "on this page" rail. The rail's contents are built by site.js from whatever headings the
+   page rendered - see the note on the <nav> below. *@
+
+<div class="bb-docs">
+    <aside class="bb-docs-sidebar @(_menuOpen ? "bb-open" : null)" id="bb-docs-nav" aria-label="Documentation navigation" @onkeydown="OnKeyDown">
+        <p class="bb-overline bb-docs-nav-title">Documentation</p>
+
+        @foreach (var section in DocsCatalog.Sections)
+        {
+            @* The group label is a <p> rather than a heading on purpose: the panel precedes the
+               page in the DOM, and a heading here would open the document's outline two levels
+               below the page's own H1. The list's aria-label carries the same grouping to a
+               screen reader without touching the outline. *@
+            <div class="bb-docs-section" @key="section.Title">
+                <p class="bb-docs-group">@section.Title</p>
+                <ul aria-label="@section.Title">
+                    @foreach (var entry in section.Pages)
+                    {
+                        <li @key="entry.Url">
+                            @* A plain link rather than a NavLink: this shell re-renders on every navigation,
+                               and a NavLink's child content is a fragment the renderer can never prove
+                               unchanged, so every one of them would re-render with it. The active row is the
+                               catalog entry the breadcrumb names - which also covers a page whose route takes a
+                               parameter (/live/{Room}), listed by its bare address. *@
+                            <a href="@entry.Url" class="@(entry == _current ? "active" : null)"
+                               aria-current="@(entry == _current ? "page" : null)" title="@entry.Description">@entry.Title</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+        }
+
+        <div class="bb-docs-nav-foot">
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </div>
+    </aside>
+
+    <div class="bb-docs-main">
+        @* The narrow-width entry into the panel above. It sits with the breadcrumb because at
+           those widths the two together are the whole "where am I / where else can I go" row. *@
+        <div class="bb-docs-topbar" @onkeydown="OnKeyDown">
+            <button @ref="_toggle" type="button" class="bb-docs-menu-toggle" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-docs-nav" @onclick="() => _menuOpen = !_menuOpen">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+                @(_menuOpen ? "Hide" : "Browse") docs
+            </button>
+
+            <nav class="bb-crumbs" aria-label="Breadcrumb">
+                <ol>
+                    <li><a href="">@SiteInfo.Name</a></li>
+                    @if (_current is not null)
+                    {
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li>@DocsCatalog.SectionOf(_current)</li>
+                        <li aria-hidden="true" class="bb-crumb-sep">/</li>
+                        <li aria-current="page">@_current.Title</li>
+                    }
+                </ol>
+            </nav>
+        </div>
+
+        <div class="bb-docs-content">
+            @Body
+        </div>
+
+        @* Below the page: where to go from here. The "edit" link is built from the page's own
+           component type, so a page added to the catalog gets one without anyone wiring it up. *@
+        @if (_current is not null)
+        {
+            <div class="bb-docs-foot">
+                <a class="bb-docs-edit" target="_blank" rel="noopener noreferrer" href="@SiteInfo.SourceUrlOf(_current.PageType)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    Edit this page on GitHub
+                </a>
+            </div>
+
+            <DocsPager Current="_current" />
+        }
+    </div>
+
+    @* Deliberately empty in the render tree: site.js fills it from the headings of whichever page
+       the body just rendered, so no page had to be edited to gain a rail. Blazor never diffs into
+       it because this component's output for the element never changes - the same reason the copy
+       buttons can be appended into a <pre>. The column is rendered even while empty so the content
+       column does not stretch and snap back a frame later. *@
+    <nav class="bb-rail" aria-label="On this page"></nav>
+</div>
+
+@if (_menuOpen)
+{
+    <div class="bb-docs-scrim" @onclick="() => _menuOpen = false"></div>
+}
+
+@code {
+    private bool _menuOpen;
+    private bool _restorePending;
+    private ElementReference _toggle;
+    private DocsPageInfo? _current;
+
+    protected override void OnInitialized()
+    {
+        Recompute();
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    // Collapse the narrow-width panel after a link in it commits: a drawer that survives the
+    // navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        Recompute();
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_restorePending is false) return;
+
+        _restorePending = false;
+        await _toggle.FocusAsync();
+    }
+
+    /// <summary>
+    /// Escape closes the narrow-width drawer, the way every other overlay on the site closes. The
+    /// handler sits on the panel and on the topbar - the button that opens the drawer is outside the
+    /// panel it controls - and deliberately not on the whole shell: there it would hear every key
+    /// typed into a page, and each one would be an event (on Blazor Server a round trip) and a
+    /// render of this layout.
+    /// </summary>
+    private void OnKeyDown(KeyboardEventArgs args)
+    {
+        if (_menuOpen is false || args.Key != "Escape") return;
+
+        _menuOpen = false;
+        // Once hidden, a panel that was holding focus hands it to <body> and the next Tab restarts
+        // at the top of the page - hence the trip back to the button that opened it.
+        _restorePending = true;
+    }
+
+    private void Recompute() => _current = DocsCatalog.FindByPath(DocsCatalog.PathOf(Nav));
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/DocsLayout.razor.css b/src/Utilities/Bsqlite/Demo/Client/Layout/DocsLayout.razor.css
new file mode 100644
index 00000000000..d771036a057
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/DocsLayout.razor.css
@@ -0,0 +1,327 @@
+/* Nav panel | page | rail. The two side columns are fixed-width and the page takes what is left,
+   so the reading measure grows with the window instead of the margins doing it. */
+.bb-docs {
+    display: grid;
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr) var(--bb-rail-width);
+    gap: 2.5rem;
+    align-items: start;
+}
+
+.bb-docs-main {
+    min-width: 0;
+}
+
+/* Deliberately uncapped. The reading measure is enforced on the PROSE - paragraphs, notes and
+   lists carry `max-width: var(--bb-measure)` from app.css - so the things that are not prose keep
+   the whole column: a code sample gets its lines without wrapping and an API table gets its
+   columns without breaking words. Capping the container instead would starve both to protect a
+   line length the paragraphs are already holding on their own. */
+.bb-docs-content {
+    min-width: 0;
+}
+
+/* ---------- Nav panel ----------
+
+   A quiet list that scrolls under the sticky header, with no frame of its own: the page's own
+   background is the panel, and the rows are the only chrome in it. A hairline down its trailing
+   edge separates it from the page without drawing a box around it. */
+.bb-docs-sidebar {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow-y: auto;
+    padding: 0 1rem 2rem 0;
+    border-inline-end: 1px solid var(--bb-border);
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-docs-sidebar;
+}
+
+.bb-docs-nav-title {
+    padding-inline-start: .625rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text);
+}
+
+.bb-docs-section {
+    margin-bottom: 1.5rem;
+}
+
+/* The group labels use Fluent's Overline: small, spaced and uppercase, so they read as labels
+   over the rows rather than as the first row of each group. */
+.bb-docs-group {
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--bb-text-soft);
+    margin: 0 0 .375rem;
+    padding-inline-start: .625rem;
+}
+
+.bb-docs-section ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    /* The indent guide: one hairline behind the whole group, which is what makes a set of rows
+       read as belonging to the label above them. */
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+/* The sidebar rows are this component's own plain anchors (DocsLayout.razor says why they are not
+   NavLinks). They are still reached through ::deep, which matches an anchor whatever component
+   rendered it - so the rules keep holding if a row is ever rendered by a child component. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a {
+    position: relative;
+    display: block;
+    padding: .375rem .625rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid transparent;
+    border-start-end-radius: var(--bb-radius);
+    border-end-end-radius: var(--bb-radius);
+    font-size: .875rem;
+    line-height: 1.45;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    border-inline-start-color: var(--bb-border-strong);
+    text-decoration: none;
+}
+
+/* The selected row: it takes over its own stretch of the group's indent guide and tints the row
+   behind it. The border is on every row, transparent until selected, so selecting one never
+   shifts the text by a pixel. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-section ::deep a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    border-inline-start-color: var(--bb-primary);
+}
+
+.bb-docs-nav-foot {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-nav-foot a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a {
+    padding: .25rem .625rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-nav-foot a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-docs-nav-foot ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ---------- Topbar: breadcrumb, and the panel's toggle at narrow widths ---------- */
+
+.bb-docs-topbar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-bottom: 1.25rem;
+    min-width: 0;
+}
+
+.bb-crumbs {
+    min-width: 0;
+}
+
+.bb-crumbs ol {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: .8125rem;
+    color: var(--bb-text-soft);
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-crumbs ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-crumbs li[aria-current="page"] {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+.bb-crumb-sep {
+    color: var(--bb-border-strong);
+}
+
+.bb-docs-menu-toggle {
+    display: none;
+    align-items: center;
+    gap: .4375rem;
+    flex: none;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    font-family: inherit;
+    font-size: .8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.bb-docs-menu-toggle:hover {
+    background: var(--bb-surface-hover);
+}
+
+.bb-docs-menu-toggle svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The drawer's backdrop only exists at the widths where there is a drawer. It is rendered
+   whenever the panel is open, so it needs this floor for the case where the reader opens the
+   panel on a phone and then widens the window past the breakpoint. */
+.bb-docs-scrim {
+    display: none;
+}
+
+/* ---------- Under the page ---------- */
+
+.bb-docs-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--bb-border);
+}
+
+.bb-docs-edit {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    font-size: .8125rem;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+}
+
+.bb-docs-edit:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-docs-edit svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* ---------- Responsive ----------
+
+   Below the content cap the rail is the first column to go: it is navigation within a page the
+   reader can already see, so it is the least costly thing to drop. */
+@media (max-width: 1200px) {
+    .bb-docs {
+        grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+        gap: 2rem;
+    }
+
+    .bb-rail {
+        display: none;
+    }
+}
+
+/* Tablet and below: the nav panel becomes a drawer over the page rather than a block that pushes
+   it down - the reader opened it to leave this page, not to scroll past it. */
+@media (max-width: 960px) {
+    .bb-docs {
+        display: block;
+    }
+
+    .bb-docs-menu-toggle {
+        display: inline-flex;
+    }
+
+    .bb-docs-sidebar {
+        position: fixed;
+        top: var(--bb-header-height);
+        bottom: 0;
+        inset-inline-start: 0;
+        z-index: 1050;
+        width: min(86vw, 320px);
+        max-height: none;
+        padding: 1.25rem 1rem 2rem;
+        background: var(--bb-surface);
+        border-inline-end: 1px solid var(--bb-border);
+        box-shadow: var(--bb-shadow-flyout);
+        /* Rendered but out of view, and out of the tab order with it - a panel that is merely
+           translated off-screen still takes Tab stops from the page behind it. */
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform var(--bb-motion-duration) var(--bb-motion-enter),
+                    visibility var(--bb-motion-duration);
+    }
+
+    .bb-docs-sidebar.bb-open {
+        visibility: visible;
+        transform: translateX(0);
+    }
+
+    .bb-docs-scrim {
+        display: block;
+        position: fixed;
+        inset: var(--bb-header-height) 0 0;
+        z-index: 1040;
+        background: var(--bb-scrim);
+    }
+}
+
+/* The drawer opens from the inline start, so in a right-to-left document it opens from the right
+   and has to slide the other way. */
+@media (max-width: 960px) {
+    [dir="rtl"] .bb-docs-sidebar {
+        transform: translateX(100%);
+    }
+
+    [dir="rtl"] .bb-docs-sidebar.bb-open {
+        transform: translateX(0);
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-docs-topbar {
+        flex-wrap: wrap;
+        gap: .625rem;
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/DocsPager.razor b/src/Utilities/Bsqlite/Demo/Client/Layout/DocsPager.razor
new file mode 100644
index 00000000000..9ebe16407dd
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/DocsPager.razor
@@ -0,0 +1,45 @@
+@* Previous/next navigation in the catalog's reading order - part of the site kit every Utilities
+   demo shares (see wwwroot/app.css). It is what turns the docs into a course you can page through
+   rather than a set of pages you have to know the name of. DocsLayout renders it under the page
+   and hands it the page it is on. *@
+
+@if (_previous is not null || _next is not null)
+{
+    <nav class="bb-pager" aria-label="Documentation pager">
+        @if (_previous is not null)
+        {
+            <a href="@_previous.Url" class="bb-pager-link bb-pager-prev">
+                <span class="bb-pager-label">← Previous</span>
+                <span class="bb-pager-title">@_previous.Title</span>
+            </a>
+        }
+        @if (_next is not null)
+        {
+            <a href="@_next.Url" class="bb-pager-link bb-pager-next">
+                <span class="bb-pager-label">Next →</span>
+                <span class="bb-pager-title">@_next.Title</span>
+            </a>
+        }
+    </nav>
+}
+
+@code {
+    private DocsPageInfo? _previous;
+    private DocsPageInfo? _next;
+
+    /// <summary>The page the reader is on.</summary>
+    [Parameter, EditorRequired] public DocsPageInfo Current { get; set; } = default!;
+
+    protected override void OnParametersSet() => (_previous, _next) = DocsCatalog.NeighborsOf(Current);
+
+    private DocsPageInfo? _rendered;
+
+    /// <summary>
+    /// The shell re-renders on every navigation and hands the pager its page again, and a record is
+    /// never provably unchanged to the renderer - so the pager itself skips the renders that would
+    /// draw the same two links.
+    /// </summary>
+    protected override bool ShouldRender() => Equals(_rendered, Current) is false;
+
+    protected override void OnAfterRender(bool firstRender) => _rendered = Current;
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/Footer.razor b/src/Utilities/Bsqlite/Demo/Client/Layout/Footer.razor
new file mode 100644
index 00000000000..e727617aa96
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/Footer.razor
@@ -0,0 +1,76 @@
+@inject IJSRuntime JSRuntime
+
+@* The site footer - part of the site kit every Utilities demo shares (see wwwroot/app.css), in two
+   bands: a wide one carrying the bit mark, what the library is, and the link columns; then a rule,
+   under which sit the organization's contact details, the social row and the license line.
+
+   The link columns are the first sections of DocsCatalog, so a page added to the catalog shows up
+   here without anyone wiring it up. *@
+
+<footer class="bb-footer">
+    <div class="bb-footer-main">
+        <div class="bb-footer-brand">
+            <div class="bb-footer-logo"></div>
+            <p class="bb-footer-tagline">@SiteInfo.Tagline</p>
+            <div class="bb-footer-badges">
+                @foreach (var badge in SiteInfo.Badges)
+                {
+                    <span class="bb-badge" @key="badge">@badge</span>
+                }
+            </div>
+        </div>
+
+        <div class="bb-footer-links">
+            @foreach (var section in DocsCatalog.Sections.Take(3))
+            {
+                <nav class="bb-footer-col" aria-label="@($"{section.Title} links")" @key="section.Title">
+                    <p class="bb-footer-col-title">@section.Title</p>
+                    @foreach (var entry in section.Pages.Take(5))
+                    {
+                        <NavLink href="@entry.Url" Match="NavLinkMatch.All" @key="entry.Url">@entry.Title</NavLink>
+                    }
+                </nav>
+            }
+
+            <nav class="bb-footer-col" aria-label="Community links">
+                <p class="bb-footer-col-title">Community</p>
+                <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://github.com/bitfoundation/bitplatform/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+                <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet package</a>
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="bb-footer-bottom">
+        <div class="bb-footer-address">
+            <a class="bb-address" target="_blank" rel="noopener noreferrer" href="https://maps.app.goo.gl/W8vtWHQ13YhYpksy6">Sixmastraat 15, 8932 PA Leeuwarden,</a>
+            <div class="bb-country">Netherlands</div>
+            <a class="bb-tel" href="tel:+31684207362">+31 6 84207362</a>
+        </div>
+
+        <div class="bb-footer-social-block">
+            <div class="bb-social-links">
+                <a class="bb-social-link bb-twitter-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on X (Twitter)" href="https://twitter.com/bitplatformhq"></a>
+                <a class="bb-social-link bb-github-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on GitHub" href="https://github.com/bitfoundation/bitplatform"></a>
+                <a class="bb-social-link bb-youtube-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on YouTube" href="https://www.youtube.com/channel/UCtk33NQ91f3GOJG0HAdkdog"></a>
+                <a class="bb-social-link bb-linkedin-link" target="_blank" rel="noopener noreferrer" aria-label="bit platform on LinkedIn" href="https://www.linkedin.com/company/bitplatformhq"></a>
+            </div>
+            <div class="bb-copyright">
+                MIT licensed · part of the
+                <a href="https://bitplatform.dev" target="_blank" rel="noopener noreferrer">bit platform</a> project
+            </div>
+        </div>
+
+        <button type="button" class="bb-go-to-top" @onclick="GoToTop">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" />
+            </svg>
+            Back to top
+        </button>
+    </div>
+</footer>
+
+@code {
+    private async Task GoToTop() => await JSRuntime.InvokeVoidAsync("bitDemoSite.goToTop");
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/Footer.razor.css b/src/Utilities/Bsqlite/Demo/Client/Layout/Footer.razor.css
new file mode 100644
index 00000000000..b58e69ca5e9
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/Footer.razor.css
@@ -0,0 +1,287 @@
+/* The footer is the one band on the page painted with the PRIMARY background: that change of
+   ground is what marks the end of the secondary-background content column above it. */
+.bb-footer {
+    width: 100%;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-size: .875rem;
+}
+
+/* ---------- Upper band: what this is, and where to go ---------- */
+
+.bb-footer-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    gap: 3rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 3rem 2rem 2.5rem;
+}
+
+.bb-footer-brand {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    min-width: 0;
+}
+
+/* The mark is drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask. */
+.bb-footer-logo {
+    width: 108px;
+    height: 34px;
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
+    flex: none;
+}
+
+:root[bit-theme$='dark'] .bb-footer-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-footer-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+.bb-footer-tagline {
+    margin: 0;
+    max-width: 40ch;
+    line-height: 1.65;
+    color: var(--bb-text-muted);
+}
+
+.bb-footer-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+}
+
+/* ---------- Link columns ---------- */
+
+.bb-footer-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 2rem 1.5rem;
+    min-width: 0;
+}
+
+.bb-footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+}
+
+/* Fluent's Overline over each column - a label, not a heading: the footer sits after the page's
+   own content, and four more headings there would say the document has four more sections. */
+.bb-footer-col-title {
+    margin: 0 0 .25rem;
+    font-size: .6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text);
+}
+
+.bb-footer-col a,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a {
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    line-height: 1.6;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-footer-col a:hover,
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+/* The footer's links are never "the page you are on" - a link to the current page is still a
+   destination here, not a state - so the active class NavLink adds is neutralized. */
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.bb-footer-col ::deep a.active {
+    color: var(--bb-text-muted);
+    font-weight: inherit;
+}
+
+/* ---------- Lower band: the organization ---------- */
+
+.bb-footer-bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 1.25rem 2rem 2rem;
+    border-top: 1px solid var(--bb-border);
+    font-size: .8125rem;
+}
+
+.bb-footer-address {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+}
+
+.bb-footer-address a,
+.bb-country {
+    color: var(--bb-text-soft);
+    text-decoration: none;
+    line-height: 1.6;
+}
+
+.bb-footer-address a:hover {
+    color: var(--bb-primary);
+    text-decoration: underline;
+}
+
+.bb-address,
+.bb-tel {
+    padding-inline-start: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: left .2rem;
+    background-size: 14px;
+}
+
+.bb-address {
+    background-image: url('images/footer/location-icon.svg');
+}
+
+.bb-tel {
+    background-image: url('images/footer/tel-icon.svg');
+}
+
+.bb-country {
+    padding-inline-start: 1.25rem;
+}
+
+.bb-footer-social-block {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    align-items: flex-start;
+}
+
+.bb-social-links {
+    display: flex;
+    gap: .5rem;
+}
+
+/* The marks are single-color artwork, so each one is a mask painted with the brand's own color on
+   hover and a neutral one at rest - which keeps four different logos from turning the row into a
+   sticker sheet. */
+.bb-social-link {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-soft);
+    -webkit-mask-size: 17px;
+    mask-size: 17px;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-twitter-link {
+    -webkit-mask-image: url('images/footer/twitter-icon.svg');
+    mask-image: url('images/footer/twitter-icon.svg');
+}
+
+.bb-github-link {
+    -webkit-mask-image: url('images/footer/github-icon.svg');
+    mask-image: url('images/footer/github-icon.svg');
+}
+
+.bb-youtube-link {
+    -webkit-mask-image: url('images/footer/youtube-icon.svg');
+    mask-image: url('images/footer/youtube-icon.svg');
+}
+
+.bb-linkedin-link {
+    -webkit-mask-image: url('images/footer/linkedin-icon.svg');
+    mask-image: url('images/footer/linkedin-icon.svg');
+}
+
+.bb-social-link:hover {
+    background-color: var(--bb-primary);
+}
+
+.bb-copyright {
+    color: var(--bb-text-soft);
+    line-height: 1.6;
+}
+
+.bb-copyright a {
+    color: var(--bb-text-muted);
+}
+
+.bb-go-to-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .4375rem;
+    height: 32px;
+    padding: 0 .75rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface);
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: .8125rem;
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-go-to-top:hover {
+    background: var(--bb-surface-hover);
+    border-color: var(--bb-border-strong);
+    color: var(--bb-text);
+}
+
+.bb-go-to-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+    .bb-footer-main {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding: 2.5rem 1.5rem 2rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1.5rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-footer-main {
+        padding: 2rem 1rem 1.5rem;
+    }
+
+    .bb-footer-bottom {
+        padding: 1.25rem 1rem 2rem;
+        gap: 1.25rem;
+    }
+
+    .bb-footer-links {
+        gap: 1.5rem 1rem;
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/Header.razor b/src/Utilities/Bsqlite/Demo/Client/Layout/Header.razor
new file mode 100644
index 00000000000..3d12394d9e8
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/Header.razor
@@ -0,0 +1,121 @@
+@inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+@* The site header - part of the site kit every Utilities demo shares (see wwwroot/app.css): a
+   56px translucent bar - Fluent's own nav-bar height - carrying the bit mark, the library's name
+   and the top-level links at the start, and the search trigger, the GitHub mark and the theme
+   toggle at the end. What it links to comes from SiteInfo (DocsCatalog.cs).
+
+   Below the tablet breakpoint the links move into a drawer opened from the end of the bar, so the
+   bar itself stays one row tall at every width and --bb-header-height (which every sticky offset
+   and heading scroll-margin on the site is measured from) never has to change. *@
+
+<header class="bb-header">
+    <div class="bb-header-inner">
+        <div class="bb-header-brand">
+            <a href="" class="bb-logo" aria-label="Homepage"></a>
+            <a href="" class="bb-wordmark">@SiteInfo.Name</a>
+        </div>
+
+        <nav class="bb-nav" aria-label="Primary">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)"
+                   aria-current="@(IsActive(item) ? "page" : null)">@item.Label</a>
+            }
+        </nav>
+
+        <div class="bb-header-end">
+            <CommandPalette />
+
+            @* A mask rather than a picture, so the mark is painted with the theme's own foreground
+               color and re-tints with the theme - a colored asset could not. *@
+            <a class="bb-github-btn" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer"
+               title="GitHub repository" aria-label="GitHub repository"></a>
+
+            <button type="button" class="bb-theme-toggle" title="Toggle light/dark theme" aria-label="Toggle light/dark theme" @onclick="ToggleTheme">
+                <svg class="bb-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="bb-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+
+            <button type="button" class="bb-menu-btn" aria-label="Site menu" aria-expanded="@(_menuOpen ? "true" : "false")"
+                    aria-controls="bb-header-drawer" @onclick="() => _menuOpen = !_menuOpen">
+                @if (_menuOpen)
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                }
+                else
+                {
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+                    </svg>
+                }
+            </button>
+        </div>
+    </div>
+
+    @* The narrow-width menu. Rendered only while open, so its links are out of the tab order the
+       rest of the time - a drawer that is merely translated off-screen still holds focus. *@
+    @if (_menuOpen)
+    {
+        <div class="bb-header-scrim" @onclick="() => _menuOpen = false"></div>
+        <nav id="bb-header-drawer" class="bb-header-drawer" aria-label="Site">
+            @foreach (var item in SiteInfo.Primary)
+            {
+                <a @key="item.Href" href="@item.Href" class="@(IsActive(item) ? "active" : null)">@item.Label</a>
+            }
+            <a href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+            <a href="@SiteInfo.NuGetUrl" target="_blank" rel="noopener noreferrer">NuGet ↗</a>
+        </nav>
+    }
+</header>
+
+@code {
+    private bool _menuOpen;
+    private string _path = "";
+
+    protected override void OnInitialized()
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        Nav.LocationChanged += OnLocationChanged;
+    }
+
+    /// <summary>
+    /// The current section. A plain link is active on its own address; the "Docs" entry is active on
+    /// every page of the site that no other entry claims, because the docs ARE the rest of the site.
+    /// </summary>
+    private bool IsActive(SiteNavItem item)
+    {
+        if (item.MatchesDocs)
+            return _path.Length > 0 && SiteInfo.Primary.Any(other => other.MatchesDocs is false && DocsCatalog.IsSamePath(other.Href, _path)) is false;
+
+        return DocsCatalog.IsSamePath(item.Href, _path);
+    }
+
+    // A drawer that survives the navigation it started covers the page the reader just asked for.
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        _path = DocsCatalog.PathOf(Nav);
+        _menuOpen = false;
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+
+    private async Task ToggleTheme()
+    {
+        // theme.js flips the bit-theme attribute on <html>; the sun/moon icon swap is pure CSS.
+        await JSRuntime.InvokeVoidAsync("bitDemoTheme.toggle");
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/Header.razor.css b/src/Utilities/Bsqlite/Demo/Client/Layout/Header.razor.css
new file mode 100644
index 00000000000..1c667a7009a
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/Header.razor.css
@@ -0,0 +1,282 @@
+/* The bar: translucent over whatever scrolls beneath it, separated from the page by a single
+   hairline - no shadow, because the blur is already the depth cue. */
+.bb-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+    background: color-mix(in srgb, var(--bb-surface) 80%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--bb-border);
+    /* Everything without a view-transition-name is captured into the root snapshot, so the header
+       would glide and fade along with the page whenever a page starts a view transition. Naming
+       it gives it its own transition group: old and new header snapshots are (near-)identical, so
+       it stays visually pinned while only the page content animates - the standard way to keep
+       persistent chrome out of a view transition. */
+    view-transition-name: bb-header;
+}
+
+/* Capped at the content width so the mark lines up with the page title underneath it. The bar's
+   height is the published --bb-header-height, which every sticky offset on the site is measured
+   from, so the two can never drift apart. */
+.bb-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    height: var(--bb-header-height);
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+.bb-header-brand {
+    display: flex;
+    align-items: center;
+    /* The logo artwork runs edge to edge in its own box (see the aspect-ratio note below), so all
+       of the breathing room between the mark and the wordmark has to come from here. */
+    gap: .5rem;
+    flex: none;
+}
+
+/* The bit mark, drawn per theme - the light and dark logos are different artwork rather than the
+   same glyph recolored, so this is an image swap and not a mask.
+
+   The source svg is 239x161, and `contain` fits it to whichever edge binds first. In a square box
+   that is the width, which paints the glyph right up to both vertical edges and leaves it no side
+   gutter at all; giving the box the artwork's own ratio makes its width the glyph's true width,
+   so the gap above is the whole gap and means what it says. */
+.bb-header-brand a.bb-logo {
+    flex: none;
+    height: 28px;
+    aspect-ratio: 239 / 161;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bb-header-brand a.bb-wordmark {
+    flex: none;
+    font-family: var(--bb-font-display);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    letter-spacing: -.015em;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-brand a.bb-wordmark:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+/* Takes the slack, which is what pushes the tools to the end of the bar. */
+.bb-nav {
+    display: flex;
+    align-items: center;
+    gap: .125rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.bb-nav a {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    line-height: 1.4;
+    font-size: .875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0 .625rem;
+    border-radius: var(--bb-radius);
+    color: var(--bb-text-muted);
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-nav a:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+/* The current section: Fluent's tab indicator - the label takes the brand color and a short
+   brand rule is drawn under it, inset from the label's own padding so it reads as an underline of
+   the word rather than of the button. */
+.bb-nav a.active {
+    font-weight: 600;
+    color: var(--bb-primary);
+}
+
+.bb-nav a.active::after {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    right: .625rem;
+    bottom: -.4375rem;
+    height: 2px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-header-end {
+    display: flex;
+    align-items: center;
+    gap: .375rem;
+    flex: none;
+}
+
+/* Sized to match the theme toggle next to it. The octocat circle only spans ~87% of the svg's
+   viewBox, so the mark is drawn oversized to put the VISIBLE glyph at 20px; anything past the
+   ~13% built-in padding clips at the box edge, which is under half a pixel. */
+.bb-github-btn {
+    flex: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--bb-radius);
+    background-color: var(--bb-text-muted);
+    -webkit-mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    mask: url('images/github-mark.svg') center / 23px 23px no-repeat;
+    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-github-btn:hover {
+    background-color: var(--bb-text);
+}
+
+/* The drawer's toggle. Hidden until the links move into the drawer, so on a wide screen there is
+   exactly one way to reach them. */
+.bb-menu-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-menu-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-menu-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* The drawer itself, and the scrim that takes the next click to close it. Both are inside the
+   sticky header, so they travel with it and cannot be scrolled away from. */
+.bb-header-scrim {
+    position: fixed;
+    inset: var(--bb-header-height) 0 0;
+    /* Fixed, but inside the header - whose backdrop-filter makes it the containing block - so the
+       height is spelled out rather than taken from a bottom edge that would be the bar's own. */
+    bottom: auto;
+    height: calc(100vh - var(--bb-header-height));
+    background: var(--bb-scrim);
+    animation: bb-fade-in var(--bb-motion-duration) var(--bb-motion-easing) both;
+}
+
+.bb-header-drawer {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: .5rem;
+    background: var(--bb-surface);
+    border-bottom: 1px solid var(--bb-border);
+    box-shadow: var(--bb-shadow-flyout);
+    animation: bb-drawer-in var(--bb-motion-duration) var(--bb-motion-enter) both;
+}
+
+.bb-header-drawer a {
+    display: block;
+    padding: .625rem .75rem;
+    border-radius: var(--bb-radius);
+    font-size: .9375rem;
+    font-weight: 500;
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-header-drawer a:hover {
+    background: var(--bb-surface-hover);
+    text-decoration: none;
+}
+
+.bb-header-drawer a.active {
+    color: var(--bb-primary);
+    background: var(--bb-primary-soft);
+    font-weight: 600;
+}
+
+@keyframes bb-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes bb-drawer-in {
+    from { opacity: 0; transform: translateY(-.5rem); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* The document's bit-theme attribute is the live theme state, kept current by theme.js, so the
+   logo swap keys off it - and the two selectors are exact complements, so exactly one artwork is
+   painted in every possible state (including before a preference has been resolved). */
+:root[bit-theme$='dark'] .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-dark.svg');
+}
+
+:root:not([bit-theme$='dark']) .bb-header-brand a.bb-logo {
+    background-image: url('images/bit-logo-light.svg');
+}
+
+/* Tablet and below: the links move into the drawer. The bar keeps its height, so every sticky
+   offset measured from --bb-header-height stays correct at every width. */
+@media (max-width: 900px) {
+    .bb-nav {
+        display: none;
+    }
+
+    .bb-menu-btn {
+        display: inline-flex;
+    }
+
+    .bb-header-end {
+        flex: 1;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 700px) {
+    .bb-header-inner {
+        gap: .5rem;
+        padding: 0 .75rem;
+    }
+}
+
+/* The narrowest phones: the wordmark is the one thing here that repeats what is already on
+   screen - the mark beside it links to the same place, and the page title says the same word. */
+@media (max-width: 420px) {
+    .bb-header-brand a.bb-wordmark {
+        display: none;
+    }
+
+    .bb-github-btn {
+        display: none;
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/MainLayout.razor b/src/Utilities/Bsqlite/Demo/Client/Layout/MainLayout.razor
index 31a9e61464a..44980dda101 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Layout/MainLayout.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/MainLayout.razor
@@ -1,100 +1,30 @@
 @inherits LayoutComponentBase
-@inject NavigationManager Nav
-@inject IJSRuntime Js
-@implements IDisposable
 
-@* Two shells, one layout. The overview is a landing page and runs full-bleed with no sidebar;
-   every other route is documentation and gets the docs shell: sidebar, session bar, content. *@
+@* The app shell - part of the site kit every Utilities demo shares (see wwwroot/app.css): a skip
+   link, the sticky header, the content band, and the footer. The landing page renders straight
+   into it; every other page goes through DocsLayout, which adds the nav panel, the breadcrumb and
+   the "on this page" rail.
 
-<a class="skip-link" href="#main">Skip to content</a>
+   The band is painted with the secondary background so the surfaces inside it read as raised -
+   the arrangement Fluent uses for a page built out of cards.
 
-<TopBar NavOpen="_navOpen" OnToggleNav="ToggleNavAsync" />
+   data-interactive turns true once the page runs in the browser. Prerendered markup is on screen
+   long before its event handlers are, which is what an E2E suite waits out with it. *@
 
-@* data-interactive says whether the page runs in the browser yet - prerendered markup is on screen long before
-   anything listens to it - which is what the E2E suite waits for before it touches a page. *@
+<div class="page" data-interactive="@(RendererInfo.IsInteractive ? "true" : "false")">
+    @* First in the tab order on purpose: a keyboard reader lands here before the navigation and
+       can jump straight past the chrome to the page. *@
+    <a class="bb-skip-link" href="#bb-main">Skip to content</a>
 
-@if (IsLanding)
-{
-    <main id="main" data-interactive="@Interactive">
-        <ErrorBoundary @ref="_boundary">
-            <ChildContent>@Body</ChildContent>
-            <ErrorContent Context="exception">
-                <div class="container"><UnhandledExceptionView Exception="exception" /></div>
-            </ErrorContent>
-        </ErrorBoundary>
-    </main>
-}
-else
-{
-    <div class="layout">
-        <button type="button" class="nav-scrim" data-open="@(_navOpen ? "true" : "false")"
-                tabindex="@(_navOpen ? 0 : -1)" aria-label="Close navigation" @onclick="CloseNavAsync"></button>
+    <Header />
 
-        <AppNav Open="_navOpen" OnNavigate="CloseNavAsync" />
-
-        <main id="main" class="content" data-interactive="@Interactive">
-            <StorageSwitcher />
-            <ErrorBoundary @ref="_boundary">
-                <ChildContent>@Body</ChildContent>
-                <ErrorContent Context="exception">
-                    <UnhandledExceptionView Exception="exception" />
-                </ErrorContent>
-            </ErrorBoundary>
+    <div class="bb-site-content">
+        <main id="bb-main" tabindex="-1">
+            <article>
+                @Body
+            </article>
         </main>
     </div>
-}
-
-<footer class="site-footer">
-    <div class="footer-inner">
-        <p>
-            bit Bsqlite @SiteLinks.Version &middot; MIT &middot; EF Core on .NET 8, 9 and 10.
-            Everything on this site runs in your browser.
-        </p>
-        <nav class="footer-links" aria-label="Project links">
-            <a href="@SiteLinks.Repository" target="_blank" rel="noopener">GitHub</a>
-            <a href="@SiteLinks.NuGet" target="_blank" rel="noopener">NuGet</a>
-            <a href="@SiteLinks.Issues" target="_blank" rel="noopener">Issues</a>
-            <a href="@SiteLinks.License" target="_blank" rel="noopener">License</a>
-        </nav>
-    </div>
-</footer>
-
-@code {
-    private ErrorBoundary? _boundary;
-    private bool _navOpen;
-
-    private string Interactive => RendererInfo.IsInteractive ? "true" : "false";
-
-    private bool IsLanding => Nav.ToBaseRelativePath(Nav.Uri).Trim('/').Length == 0;
-
-    protected override void OnInitialized()
-        => Nav.LocationChanged += OnLocationChanged;
-
-    protected override void OnParametersSet()
-        => _boundary?.Recover();
-
-    private void OnLocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
-        => StateHasChanged();
-
-    private Task ToggleNavAsync() => SetNavAsync(!_navOpen);
-
-    private Task CloseNavAsync() => _navOpen ? SetNavAsync(false) : Task.CompletedTask;
-
-    private async Task SetNavAsync(bool open)
-    {
-        _navOpen = open;
-        try
-        {
-            // The drawer covers the viewport under 1024px; letting the page behind it scroll is
-            // the classic mobile-drawer bug.
-            await Js.InvokeVoidAsync("bsqliteDemo.lockScroll", open);
-        }
-        catch (Exception ex)
-        {
-            SampleLog.Exception(ex);
-        }
-    }
 
-    public void Dispose()
-        => Nav.LocationChanged -= OnLocationChanged;
-}
+    <Footer />
+</div>
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/MainLayout.razor.css b/src/Utilities/Bsqlite/Demo/Client/Layout/MainLayout.razor.css
new file mode 100644
index 00000000000..22745885fe0
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Layout/MainLayout.razor.css
@@ -0,0 +1,25 @@
+/* The shell's geometry lives in app.css (.page / .bb-site-content / main), because the docs
+   shell, the rail and the mobile drawer all size themselves against the same values. The sticky
+   footer is already handled there - .page is a 100vh column and .bb-site-content is its flex:1
+   child - so this file must not add a min-height of its own, or the band would double-count the
+   header and push the footer below the fold on every page. What is left is the one thing only
+   this component can say: the band is itself a column, so <main> stretches to fill it when a page
+   is shorter than the viewport. */
+
+.bb-site-content {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* The router moves focus to <main> after a navigation for screen-reader users. That is a
+   programmatic move rather than one the reader made, so it must not paint the focus ring - but
+   the element still has to be focusable, which is what the tabindex is for. */
+main:focus,
+main:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Layout/UnhandledExceptionView.razor b/src/Utilities/Bsqlite/Demo/Client/Layout/UnhandledExceptionView.razor
deleted file mode 100644
index 401b804faaa..00000000000
--- a/src/Utilities/Bsqlite/Demo/Client/Layout/UnhandledExceptionView.razor
+++ /dev/null
@@ -1,18 +0,0 @@
-@if (Exception is not null)
-{
-    <p class="error">@Exception.GetType().FullName: @Exception.Message</p>
-    <p>The full exception, including inner exceptions and stack traces, is in the browser console.</p>
-}
-
-@code {
-    [Parameter]
-    public Exception? Exception { get; set; }
-
-    protected override void OnParametersSet()
-    {
-        if (Exception is not null)
-        {
-            SampleLog.Exception(Exception);
-        }
-    }
-}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Admin.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Admin.razor
index bf874fdf961..01a70c45bf9 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Admin.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Admin.razor
@@ -11,118 +11,117 @@
     surface, and none of it goes through EF.
 </PageHeader>
 
+<StorageSwitcher />
+
 @if (_error is not null)
 {
-    <p class="error">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 @if (_info is not null)
 {
-    <p class="note">@_info</p>
+    <div class="bb-note" role="status">@_info</div>
 }
 
-<div class="stack-lg">
-    <DemoCard Step="List"
-              Title="What each backend holds"
-              CodeTitle="Listing databases"
-              Code="@Snippets.Admin.List">
-        <Description>
-            <span>
-                Names come from the provider, so a backend that has never been used reports empty
-                rather than failing. Related <code>-journal</code> files are not databases and do
-                not appear.
-            </span>
-        </Description>
-        <ChildContent>
-            <button type="button" class="secondary" @onclick="ListAllAsync" disabled="@_busy">Refresh lists</button>
+<DemoCard Step="List"
+          Title="What each backend holds"
+          CodeTitle="Listing databases"
+          Code="@Snippets.Admin.List">
+    <Description>
+        Names come from the provider, so a backend that has never been used reports empty
+        rather than failing. Related <code>-journal</code> files are not databases and do
+        not appear.
+    </Description>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="ListAllAsync" disabled="@_busy">Refresh lists</button>
+        </div>
+        <dl class="bb-params">
             @foreach (var group in _lists)
             {
-                <h3><code>@group.Name</code></h3>
-                @if (group.Names.Count == 0)
-                {
-                    <p class="empty">Empty.</p>
-                }
-                else
-                {
-                    <ul class="plain">
-                        @foreach (var name in group.Names)
-                        {
-                            <li>@name</li>
-                        }
-                    </ul>
-                }
+                <dt>@group.Name</dt>
+                <dd>
+                    @if (group.Names.Count == 0)
+                    {
+                        <span class="bb-soft">empty</span>
+                    }
+                    else
+                    {
+                        @string.Join(", ", group.Names)
+                    }
+                </dd>
             }
-        </ChildContent>
-    </DemoCard>
+        </dl>
+    </ChildContent>
+</DemoCard>
 
-    <DemoCard Step="Export"
-              Title="Download a real .db"
-              CodeTitle="Exporting"
-              Code="@Snippets.Admin.Export">
-        <Description>
-            <span>
-                Exports <code>@BrowserDatabase.DatabaseName</code> from whichever backend currently
-                owns it. On OPFS that is a file read; on IndexedDB and Cache Storage the image is
-                assembled from pages. Either way the result is an ordinary SQLite file.
-            </span>
-        </Description>
-        <Try>
-            <span>Download it and open it in any desktop SQLite tool - the rows you edited are there.</span>
-        </Try>
-        <ChildContent>
-            <button type="button" @onclick="ExportAsync" disabled="@_busy">Download app.db</button>
-        </ChildContent>
-    </DemoCard>
+<DemoCard Step="Export"
+          Title="Download a real .db"
+          CodeTitle="Exporting"
+          Code="@Snippets.Admin.Export">
+    <Description>
+        Exports <code>@BrowserDatabase.DatabaseName</code> from whichever backend currently
+        owns it. On OPFS that is a file read; on IndexedDB and Cache Storage the image is
+        assembled from pages. Either way the result is an ordinary SQLite file.
+    </Description>
+    <Try>Download it and open it in any desktop SQLite tool - the rows you edited are there.</Try>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="ExportAsync" disabled="@_busy">Download app.db</button>
+        </div>
+    </ChildContent>
+</DemoCard>
 
-    <DemoCard Step="Import"
-              Title="Seed a tab from a file"
-              CodeTitle="Importing"
-              Code="@Snippets.Admin.Import">
-        <Description>
-            <span>
-                Replaces the named database on the selected backend and records the sticky binding,
-                so the next open finds the imported data instead of creating an empty file
-                elsewhere. The worker is closed first: an open connection would keep writing the
-                image being replaced.
-            </span>
-        </Description>
-        <Try>
-            <span>
-                Export above, delete below, then import the file back. This is also how you ship a
-                pre-built database with an app.
-            </span>
-        </Try>
-        <ChildContent>
-            <div class="row">
+<DemoCard Step="Import"
+          Title="Seed a tab from a file"
+          CodeTitle="Importing"
+          Code="@Snippets.Admin.Import">
+    <Description>
+        Replaces the named database on the selected backend and records the sticky binding,
+        so the next open finds the imported data instead of creating an empty file
+        elsewhere. The worker is closed first: an open connection would keep writing the
+        image being replaced.
+    </Description>
+    <Try>
+        Export above, delete below, then import the file back. This is also how you ship a
+        pre-built database with an app.
+    </Try>
+    <ChildContent>
+        <div class="bb-fields">
+            <label class="bb-field">
+                Backend
                 <select @bind="_importProvider">
                     @foreach (var provider in Database.Providers)
                     {
                         <option value="@provider.Name">@SampleStorage.Title(provider.Name)</option>
                     }
                 </select>
+            </label>
+            <label class="bb-field">
+                SQLite file
                 <InputFile OnChange="OnFile" accept=".db,.sqlite,application/octet-stream" />
-                <button type="button" @onclick="ImportAsync" disabled="@(_busy || _importBytes is null)">Import and reopen</button>
-            </div>
-        </ChildContent>
-    </DemoCard>
+            </label>
+            <button type="button" class="btn btn-primary" @onclick="ImportAsync" disabled="@(_busy || _importBytes is null)">Import and reopen</button>
+        </div>
+    </ChildContent>
+</DemoCard>
 
-    <DemoCard Step="Delete"
-              Title="Start over"
-              CodeTitle="Deleting"
-              Code="@Snippets.Admin.Delete">
-        <Description>
-            <span>
-                Removes <code>@BrowserDatabase.DatabaseName</code> from the current backend and
-                forgets the binding, so the next open is free to pick the preferred provider again,
-                run the migrations, and reseed.
-            </span>
-        </Description>
-        <ChildContent>
-            <button type="button" class="danger" @onclick="DeleteAsync" disabled="@_busy">
+<DemoCard Step="Delete"
+          Title="Start over"
+          CodeTitle="Deleting"
+          Code="@Snippets.Admin.Delete">
+    <Description>
+        Removes <code>@BrowserDatabase.DatabaseName</code> from the current backend and
+        forgets the binding, so the next open is free to pick the preferred provider again,
+        run the migrations, and reseed.
+    </Description>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn bq-btn-danger" @onclick="DeleteAsync" disabled="@_busy">
                 Delete app.db and reopen empty
             </button>
-        </ChildContent>
-    </DemoCard>
-</div>
+        </div>
+    </ChildContent>
+</DemoCard>
 
 @code {
     private readonly List<(string Name, IReadOnlyList<string> Names)> _lists = [];
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Catalog.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Catalog.razor
index 6928fdd7fb6..81b4982abf1 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Catalog.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Catalog.razor
@@ -10,167 +10,195 @@
     is a normal EF Core call; the snippet under each panel is the code it runs.
 </PageHeader>
 
+<StorageSwitcher />
+
 @if (_error is not null)
 {
-    <p class="error">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 
-<div class="split">
-    <section class="card">
-        <div class="card-head">
-            <h2>Products</h2>
-        </div>
-        <p class="try">
-            <b>Try</b>
-            <span>
-                Edit a row and save, then reload the tab - the row is still there, because the
-                write went to the storage backend named in the bar above.
-            </span>
-        </p>
-        <div class="toolbar">
-            <input type="search" placeholder="Filter name, SKU, tags" @bind="_filter" @bind:event="oninput" />
-            <span class="grow"></span>
-            <button type="button" @onclick="NewProduct" disabled="@(_busy || _context is null)">New product</button>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Products</h3>
+    <p class="bb-card-desc">
+        The whole catalog, read with one query that includes each product's category. Click a row to edit it;
+        the editor and the categories sit under the table.
+    </p>
+    <div class="bb-note bq-try">
+        <strong>Try</strong>
+        Edit a row and save, then reload the tab - the row is still there, because the write went to the
+        storage backend named in the bar above.
+    </div>
+
+    @* Wide: a six- or seven-column grid with its editor under it does not fit beside the "On this page"
+       rail, so this page gives the rail up. *@
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <input type="search" placeholder="Filter name, SKU, tags" aria-label="Filter products" @bind="_filter" @bind:event="oninput" />
+            <button type="button" class="btn btn-primary" @onclick="NewProduct" disabled="@(_busy || _context is null)">New product</button>
         </div>
-        <div class="scroll-x">
-            <table>
+
+        <div class="bb-scroll">
+            <table class="bb-table bq-grid" data-rows="products">
                 <thead>
                 <tr>
-                    <th>SKU</th><th>Name</th><th>Category</th><th>Price</th><th>Lead</th><th>Status</th><th></th>
+                    <th>SKU</th><th>Name</th><th>Category</th><th>Price</th><th>Lead</th><th>Status</th><th><span class="bq-sr">Actions</span></th>
                 </tr>
                 </thead>
                 <tbody>
                 @foreach (var product in VisibleProducts)
                 {
-                    <tr class="clickable @(product.Id == _editProduct?.Id ? "selected" : null)" @onclick="() => EditProduct(product)">
-                        <td class="mono">@product.Sku</td>
-                        <td>@product.Name</td>
-                        <td>
-                            <span class="swatch" style="background:@product.Category?.Color"></span>
+                    <tr class="bq-clickable @(product.Id == _editProduct?.Id ? "bq-selected" : null)" @onclick="() => EditProduct(product)">
+                        <td class="bq-nowrap">@product.Sku</td>
+                        <td class="bq-name">@product.Name</td>
+                        <td class="bq-nowrap">
+                            <span class="bq-swatch" style="background:@product.Category?.Color"></span>
                             @product.Category?.Name
                         </td>
-                        <td>@SampleFormat.Money(product.Price)</td>
-                        <td>@SampleFormat.Lead(product.LeadTime)</td>
+                        <td class="bq-num">@SampleFormat.Money(product.Price)</td>
+                        <td class="bq-nowrap">@SampleFormat.Lead(product.LeadTime)</td>
                         <td>
                             @if (!product.IsActive)
                             {
-                                <span class="pill muted">discontinued @SampleFormat.Day(product.DiscontinuedOn)</span>
+                                <span class="bb-badge bq-badge-neutral">discontinued @SampleFormat.Day(product.DiscontinuedOn)</span>
                             }
                             else
                             {
-                                <span class="pill ok">active</span>
+                                <span class="bb-badge bb-badge-success">active</span>
                             }
                         </td>
-                        <td class="actions">
-                            <button type="button" class="danger" @onclick="() => DeleteProductAsync(product)" @onclick:stopPropagation="true">Delete</button>
+                        <td class="bb-table-action">
+                            <button type="button" class="btn bq-btn-danger bq-btn-sm" @onclick="() => DeleteProductAsync(product)" @onclick:stopPropagation="true">Delete</button>
                         </td>
                     </tr>
                 }
                 </tbody>
             </table>
         </div>
-        <CodeBlock Title="Loading this table" Language="csharp" Code="@Snippets.Catalog.Read" />
-    </section>
-    <div class="stack">
-        <section class="card">
-            <h2>@(_editProduct?.Id == 0 ? "New product" : "Edit product")</h2>
-            @if (_editProduct is null)
-            {
-                <p class="empty">Select a row, or create one.</p>
-            }
-            else
-            {
-                <form class="stack-form" @onsubmit="SaveProductAsync" @onsubmit:preventDefault="true">
-                    <label>SKU <input @bind="_editProduct.Sku" required /></label>
-                    <label>Name <input @bind="_editProduct.Name" required /></label>
-                    <label>Category
-                        <select @bind="_editProduct.CategoryId">
-                            @foreach (var category in _categories)
-                            {
-                                <option value="@category.Id">@category.Name</option>
-                            }
-                        </select>
-                    </label>
-                    <label>Price <input type="number" step="0.01" @bind="_editProduct.Price" /></label>
-                    <label>Weight (kg) <input type="number" step="0.01" @bind="_editProduct.WeightKg" /></label>
-                    <label>Lead time (days) <input type="number" step="1" @bind="_leadDays" /></label>
-                    <label>Tags <input @bind="_editProduct.Tags" placeholder="comma separated" /></label>
-                    <label><input type="checkbox" @bind="_editProduct.IsActive" /> Active</label>
-                    <label>Discontinued on <input type="date" @bind="_editProduct.DiscontinuedOn" /></label>
-                    <p class="mono">PublicId @_editProduct.PublicId</p>
-                    <div class="row">
-                        <button type="submit" disabled="@_busy">Save</button>
-                        <button type="button" class="secondary" @onclick="() => _editProduct = null">Cancel</button>
-                    </div>
-                </form>
-            }
-        </section>
-        <section class="card">
-            <h2>Categories</h2>
-            <p>A category cascades to its products; a product on an order does not delete at all.</p>
-            <form class="stack-form" @onsubmit="SaveCategoryAsync" @onsubmit:preventDefault="true">
-                <label>Name <input @bind="_categoryName" required /></label>
-                <label>Color <input type="color" @bind="_categoryColor" /></label>
-                <button type="submit" disabled="@_busy">Add category</button>
-            </form>
-            <table>
-                <thead><tr><th>Name</th><th>Items</th></tr></thead>
-                <tbody>
-                @foreach (var category in _categories)
+
+        <div class="bb-split">
+            <div class="bb-stage">
+                <p class="bq-panel-title">@(_editProduct?.Id == 0 ? "New product" : "Edit product")</p>
+                @if (_editProduct is null)
                 {
-                    <tr>
-                        <td><span class="swatch" style="background:@category.Color"></span>@category.Name</td>
-                        <td>@_products.Count(p => p.CategoryId == category.Id)</td>
-                    </tr>
+                    <p class="bb-muted">Select a row, or create one.</p>
                 }
-                </tbody>
-            </table>
-        </section>
+                else
+                {
+                    <form class="bq-form" @onsubmit="SaveProductAsync" @onsubmit:preventDefault="true">
+                        <label class="bb-field">SKU <input @bind="_editProduct.Sku" required /></label>
+                        <label class="bb-field">Name <input @bind="_editProduct.Name" required /></label>
+                        <label class="bb-field">Category
+                            <select @bind="_editProduct.CategoryId">
+                                @foreach (var category in _categories)
+                                {
+                                    <option value="@category.Id">@category.Name</option>
+                                }
+                            </select>
+                        </label>
+                        <label class="bb-field">Price <input type="number" step="0.01" @bind="_editProduct.Price" /></label>
+                        <label class="bb-field">Weight (kg) <input type="number" step="0.01" @bind="_editProduct.WeightKg" /></label>
+                        <label class="bb-field">Lead time (days) <input type="number" step="1" @bind="_leadDays" /></label>
+                        <label class="bb-field">Tags <input @bind="_editProduct.Tags" placeholder="comma separated" /></label>
+                        <label class="bb-check"><input type="checkbox" @bind="_editProduct.IsActive" /> Active</label>
+                        <label class="bb-field">Discontinued on <input type="date" @bind="_editProduct.DiscontinuedOn" /></label>
+                        <p class="bb-mono bb-soft bq-small">PublicId @_editProduct.PublicId</p>
+                        <div class="bb-toolbar">
+                            <button type="submit" class="btn btn-primary" disabled="@_busy">Save</button>
+                            <button type="button" class="btn btn-secondary" @onclick="() => _editProduct = null">Cancel</button>
+                        </div>
+                    </form>
+                }
+            </div>
+
+            <div class="bb-stage">
+                <p class="bq-panel-title">Categories</p>
+                <p class="bb-muted bq-small">A category cascades to its products; a product on an order does not delete at all.</p>
+                <form class="bq-form" @onsubmit="SaveCategoryAsync" @onsubmit:preventDefault="true">
+                    <label class="bb-field">Name <input @bind="_categoryName" required /></label>
+                    <label class="bb-field">Color <input type="color" @bind="_categoryColor" /></label>
+                    <div class="bb-toolbar">
+                        <button type="submit" class="btn btn-primary" disabled="@_busy">Add category</button>
+                    </div>
+                </form>
+                <table class="bb-table bq-grid bq-grid-prose">
+                    <thead><tr><th>Name</th><th>Items</th></tr></thead>
+                    <tbody>
+                    @foreach (var category in _categories)
+                    {
+                        <tr>
+                            <td><span class="bq-swatch" style="background:@category.Color"></span>@category.Name</td>
+                            <td class="bq-num">@_products.Count(p => p.CategoryId == category.Id)</td>
+                        </tr>
+                    }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <CodeBlock Title="Loading this table" Language="csharp" Code="@Snippets.Catalog.Read" />
+</section>
+
+<DemoCard Title="Inserting and updating"
+          CodeTitle="Saving the form"
+          Code="@Snippets.Catalog.Write">
+    <Description>
+        One code path for both: EF decides insert or update from the key. The write goes
+        through the worker and lands in the storage backend named in the bar above, so it
+        is still there after a reload.
+    </Description>
+</DemoCard>
+
+<DemoCard Title="Foreign keys are enforced, not simulated"
+          CodeTitle="Deleting a product"
+          Code="@Snippets.Catalog.Delete">
+    <Description>
+        The engine in the worker is real SQLite with foreign keys on. Nothing in the browser
+        re-implements referential integrity, so a constraint failure comes back as the
+        <code>DbUpdateException</code> you would get on a server.
+    </Description>
+    <Try>
+        Delete a product that appears on an <a href="orders">order</a>. The message above
+        the table is SQLite's, surfaced through EF.
+    </Try>
+</DemoCard>
+
+<DemoCard Title="The model that shapes these tables"
+          CodeTitle="ProductConfiguration.cs"
+          Code="@Snippets.Catalog.Configuration"
+          CodeOpen="false">
+    <Description>
+        Ordinary <code>IEntityTypeConfiguration</code>. The same class compiles against the
+        server's <code>UseSqlite</code>, and the same migration creates both databases -
+        nothing here is browser-specific.
+    </Description>
+</DemoCard>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> CLR types stored in SQLite</h3>
+    <p class="bb-card-desc">
+        SQLite has four storage classes. The ADO.NET binder decides which one each CLR value takes, so the worker
+        never guesses and values round-trip as the type you wrote.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table bq-grid">
+            <thead><tr><th>CLR</th><th>SQLite</th><th>Where in this demo</th></tr></thead>
+            <tbody>
+            <tr><td>decimal</td><td>TEXT + <code>ef_*</code></td><td>Price, credit limit</td></tr>
+            <tr><td>DateTime</td><td>TEXT ISO</td><td>CreatedUtc</td></tr>
+            <tr><td>DateTimeOffset</td><td>TEXT + offset</td><td>OrderedAt</td></tr>
+            <tr><td>DateOnly</td><td>TEXT date</td><td>Date of birth, ship-by</td></tr>
+            <tr><td>TimeSpan</td><td>TEXT <code>c</code></td><td>Lead time</td></tr>
+            <tr><td>Guid</td><td>TEXT</td><td>PublicId</td></tr>
+            <tr><td>bool</td><td>INTEGER 0/1</td><td>IsActive, IsVip</td></tr>
+            <tr><td>enum</td><td>TEXT</td><td>Order status</td></tr>
+            <tr><td>double</td><td>REAL</td><td>Weight</td></tr>
+            </tbody>
+        </table>
     </div>
-</div>
-
-<div class="stack-lg">
-    <DemoCard Title="Inserting and updating"
-              CodeTitle="Saving the form"
-              Code="@Snippets.Catalog.Write">
-        <Description>
-            <span>
-                One code path for both: EF decides insert or update from the key. The write goes
-                through the worker and lands in the storage backend named in the bar above, so it
-                is still there after a reload.
-            </span>
-        </Description>
-    </DemoCard>
-
-    <DemoCard Title="Foreign keys are enforced, not simulated"
-              CodeTitle="Deleting a product"
-              Code="@Snippets.Catalog.Delete">
-        <Description>
-            The engine in the worker is real SQLite with foreign keys on. Nothing in the browser
-            re-implements referential integrity, so a constraint failure comes back as the
-            <code>DbUpdateException</code> you would get on a server.
-        </Description>
-        <Try>
-            <span>
-                Delete a product that appears on an <a href="orders">order</a>. The message above
-                the table is SQLite's, surfaced through EF.
-            </span>
-        </Try>
-    </DemoCard>
-
-    <DemoCard Title="The model that shapes these tables"
-              CodeTitle="ProductConfiguration.cs"
-              Code="@Snippets.Catalog.Configuration"
-              CodeOpen="false">
-        <Description>
-            <span>
-                Ordinary <code>IEntityTypeConfiguration</code>. The same class compiles against the
-                server's <code>UseSqlite</code>, and the same migration creates both databases -
-                nothing here is browser-specific.
-            </span>
-        </Description>
-    </DemoCard>
-</div>
+    <CodeBlock Title="Product.cs" Language="csharp" Code="@Snippets.Catalog.Entity" Open="false" />
+</section>
 
 @code {
     private AppDbContext? _context;
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Customers.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Customers.razor
index 2f696f1ab89..1901a353fc1 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Customers.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Customers.razor
@@ -10,119 +10,124 @@
     its scale because it is compared through <code>ef_compare</code>, not floating point.
 </PageHeader>
 
+<StorageSwitcher />
+
 @if (_error is not null)
 {
-    <p class="error">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 
-<div class="split">
-    <section class="card">
-        <h2>Directory</h2>
-        <p class="try">
-            <b>Try</b>
-            <span>
-                Save a customer with an email that already exists. The unique index is SQLite's,
-                so the failure arrives as a <code>DbUpdateException</code> - see the snippet below.
-            </span>
-        </p>
-        <div class="toolbar">
-            <input type="search" placeholder="Filter name or email" @bind="_filter" @bind:event="oninput" />
-            <span class="grow"></span>
-            <button type="button" @onclick="NewCustomer" disabled="@(_busy || _context is null)">New customer</button>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Directory</h3>
+    <p class="bb-card-desc">
+        Every customer, sorted by name. Click a row to edit it in the panel under the table, next to what each
+        value becomes in the SQLite file.
+    </p>
+    <div class="bb-note bq-try">
+        <strong>Try</strong>
+        Save a customer with an email that already exists. The unique index is SQLite's, so the failure arrives
+        as a <code>DbUpdateException</code> - see the snippet below.
+    </div>
+
+    @* Wide: a six- or seven-column grid with its editor under it does not fit beside the "On this page"
+       rail, so this page gives the rail up. *@
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <input type="search" placeholder="Filter name or email" aria-label="Filter customers" @bind="_filter" @bind:event="oninput" />
+            <button type="button" class="btn btn-primary" @onclick="NewCustomer" disabled="@(_busy || _context is null)">New customer</button>
         </div>
-        <div class="scroll-x">
-            <table>
+
+        <div class="bb-scroll">
+            <table class="bb-table bq-grid bq-grid-prose" data-rows="customers">
                 <thead>
-                <tr><th>Name</th><th>Email</th><th>Born</th><th>Credit</th><th>VIP</th><th></th></tr>
+                <tr><th>Name</th><th>Email</th><th>Born</th><th>Credit</th><th>VIP</th><th><span class="bq-sr">Actions</span></th></tr>
                 </thead>
                 <tbody>
                 @foreach (var customer in Visible)
                 {
-                    <tr class="clickable @(customer.Id == _edit?.Id ? "selected" : null)" @onclick="() => Edit(customer)">
-                        <td>@customer.DisplayName</td>
-                        <td>@customer.Email</td>
-                        <td>@SampleFormat.Day(customer.DateOfBirth)</td>
-                        <td>@SampleFormat.Money(customer.CreditLimit)</td>
+                    <tr class="bq-clickable @(customer.Id == _edit?.Id ? "bq-selected" : null)" @onclick="() => Edit(customer)">
+                        <td class="bq-name">@customer.DisplayName</td>
+                        <td class="bq-name">@customer.Email</td>
+                        <td class="bq-nowrap">@SampleFormat.Day(customer.DateOfBirth)</td>
+                        <td class="bq-num">@SampleFormat.Money(customer.CreditLimit)</td>
                         <td>@(customer.IsVip ? "yes" : "no")</td>
-                        <td class="actions">
-                            <button type="button" class="danger" @onclick="() => DeleteAsync(customer)" @onclick:stopPropagation="true">Delete</button>
+                        <td class="bb-table-action">
+                            <button type="button" class="btn bq-btn-danger bq-btn-sm" @onclick="() => DeleteAsync(customer)" @onclick:stopPropagation="true">Delete</button>
                         </td>
                     </tr>
                 }
                 </tbody>
             </table>
         </div>
-        <CodeBlock Title="Reading and inserting" Language="csharp" Code="@Snippets.Customers.Crud" />
-    </section>
-    <div class="stack">
-        <section class="card">
-            <h2>@(_edit?.Id == 0 ? "New customer" : "Edit customer")</h2>
-            @if (_edit is null)
-            {
-                <p class="empty">Select a row, or create one.</p>
-            }
-            else
-            {
-                <form class="stack-form" @onsubmit="SaveAsync" @onsubmit:preventDefault="true">
-                    <label>Name <input @bind="_edit.DisplayName" required /></label>
-                    <label>Email <input type="email" @bind="_edit.Email" required /></label>
-                    <label>Date of birth <input type="date" @bind="_edit.DateOfBirth" /></label>
-                    <label>Credit limit <input type="number" step="0.01" @bind="_edit.CreditLimit" /></label>
-                    <label><input type="checkbox" @bind="_edit.IsVip" /> VIP</label>
-                    <label>Notes <textarea @bind="_edit.Notes"></textarea></label>
-                    <p class="mono">PublicId @_edit.PublicId</p>
-                    <div class="row">
-                        <button type="submit" disabled="@_busy">Save</button>
-                        <button type="button" class="secondary" @onclick="() => _edit = null">Cancel</button>
-                    </div>
-                </form>
-            }
-        </section>
-        <section class="card">
-            <h2>What the values become</h2>
-            <div class="scroll-x">
-                <table class="type-table">
+
+        <div class="bb-split">
+            <div class="bb-stage">
+                <p class="bq-panel-title">@(_edit?.Id == 0 ? "New customer" : "Edit customer")</p>
+                @if (_edit is null)
+                {
+                    <p class="bb-muted">Select a row, or create one.</p>
+                }
+                else
+                {
+                    <form class="bq-form" @onsubmit="SaveAsync" @onsubmit:preventDefault="true">
+                        <label class="bb-field">Name <input @bind="_edit.DisplayName" required /></label>
+                        <label class="bb-field">Email <input type="email" @bind="_edit.Email" required /></label>
+                        <label class="bb-field">Date of birth <input type="date" @bind="_edit.DateOfBirth" /></label>
+                        <label class="bb-field">Credit limit <input type="number" step="0.01" @bind="_edit.CreditLimit" /></label>
+                        <label class="bb-check"><input type="checkbox" @bind="_edit.IsVip" /> VIP</label>
+                        <label class="bb-field">Notes <textarea @bind="_edit.Notes"></textarea></label>
+                        <p class="bb-mono bb-soft bq-small">PublicId @_edit.PublicId</p>
+                        <div class="bb-toolbar">
+                            <button type="submit" class="btn btn-primary" disabled="@_busy">Save</button>
+                            <button type="button" class="btn btn-secondary" @onclick="() => _edit = null">Cancel</button>
+                        </div>
+                    </form>
+                }
+            </div>
+
+            <div class="bb-stage">
+                <p class="bq-panel-title">What the values become</p>
+                <table class="bb-table bq-grid">
                     <thead><tr><th>Property</th><th>Stored as</th></tr></thead>
                     <tbody>
-                    <tr><td><code>PublicId</code></td><td>TEXT, 36-char Guid</td></tr>
-                    <tr><td><code>DateOfBirth</code></td><td>TEXT <code>yyyy-MM-dd</code></td></tr>
-                    <tr><td><code>IsVip</code></td><td>INTEGER 0/1</td></tr>
-                    <tr><td><code>CreditLimit</code></td><td>TEXT, compared via <code>ef_compare</code></td></tr>
-                    <tr><td><code>CreatedUtc</code></td><td>TEXT, ISO 8601</td></tr>
+                    <tr><td>PublicId</td><td>TEXT, 36-char Guid</td></tr>
+                    <tr><td>DateOfBirth</td><td>TEXT <code>yyyy-MM-dd</code></td></tr>
+                    <tr><td>IsVip</td><td>INTEGER 0/1</td></tr>
+                    <tr><td>CreditLimit</td><td>TEXT, compared via <code>ef_compare</code></td></tr>
+                    <tr><td>CreatedUtc</td><td>TEXT, ISO 8601</td></tr>
                     </tbody>
                 </table>
+                <p class="bb-muted bq-small">
+                    Filtering on <code>CreditLimit</code> - a real decimal comparison in SQL, not in
+                    the CLR - is on the <a href="queries">SQL</a> page.
+                </p>
             </div>
-            <p>
-                Filtering on <code>CreditLimit</code> - a real decimal comparison in SQL, not in
-                the CLR - is on the <a href="queries">SQL</a> page.
-            </p>
-        </section>
+        </div>
     </div>
-</div>
 
-<div class="stack-lg">
-    <DemoCard Title="The entity and its configuration"
-              CodeTitle="Customer.cs"
-              Code="@Snippets.Customers.Entity">
-        <Description>
-            No browser-specific attributes, no converters bolted on for WASM. Precision and the
-            unique index are declared once and apply on the server and in the tab alike.
-        </Description>
-    </DemoCard>
+    <CodeBlock Title="Reading and inserting" Language="csharp" Code="@Snippets.Customers.Crud" />
+</section>
+
+<DemoCard Title="The entity and its configuration"
+          CodeTitle="Customer.cs"
+          Code="@Snippets.Customers.Entity">
+    <Description>
+        No browser-specific attributes, no converters bolted on for WASM. Precision and the
+        unique index are declared once and apply on the server and in the tab alike.
+    </Description>
+</DemoCard>
 
-    <DemoCard Title="Handling a constraint failure"
-              CodeTitle="Pages/Customers.razor"
-              Code="@Snippets.Customers.Unique"
-              CodeOpen="false">
-        <Description>
-            <span>
-                After a failed save the change tracker still holds the rejected entity, so the
-                demo clears it before the next read - the same hygiene you would apply on a
-                server. The inner exception carries SQLite's message and result code.
-            </span>
-        </Description>
-    </DemoCard>
-</div>
+<DemoCard Title="Handling a constraint failure"
+          CodeTitle="Pages/Customers.razor"
+          Code="@Snippets.Customers.Unique"
+          CodeOpen="false">
+    <Description>
+        After a failed save the change tracker still holds the rejected entity, so the
+        demo clears it before the next read - the same hygiene you would apply on a
+        server. The inner exception carries SQLite's message and result code.
+    </Description>
+</DemoCard>
 
 @code {
     private AppDbContext? _context;
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/ErrorPage.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/ErrorPage.razor
index 485f544e5e3..f55cafea8ce 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/ErrorPage.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/ErrorPage.razor
@@ -1,4 +1,5 @@
 @page "/Error"
+@layout MainLayout
 
 @* Target of app.UseExceptionHandler("/Error") in the host's Program.cs. It lives in the client
    project on purpose: Routes.razor binds the router to this assembly only, so a page placed in
@@ -6,13 +7,14 @@
 
 <PageTitle>Error · Bsqlite</PageTitle>
 
-<header class="page-head">
-    <p class="eyebrow">500</p>
-    <h1>Something went wrong</h1>
-    <p class="lead" role="alert">
-        An error occurred while processing your request. Reloading usually clears it; if it does
-        not, the repository is the place to tell us about it.
+<div class="bb-error">
+    <h1>500</h1>
+    <p role="alert">
+        Something went wrong while processing your request. Reloading usually clears it; if it does not, the
+        repository is the place to tell us about it.
     </p>
-</header>
-<a class="btn" href="">Back to the overview <Icon Name="arrow-right" /></a>
-<a class="btn secondary" href="@SiteLinks.Issues" target="_blank" rel="noopener">Report an issue</a>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="https://github.com/bitfoundation/bitplatform/issues" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">Report an issue ↗</a>
+    </div>
+</div>
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/GettingStarted.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/GettingStarted.razor
new file mode 100644
index 00000000000..7d279666f26
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/GettingStarted.razor
@@ -0,0 +1,98 @@
+@page "/getting-started"
+
+<PageHeader Kicker="Introduction" Title="Getting started">
+    One package, one registration and a context factory - then EF Core runs against a SQLite database in the
+    user's browser tab, on the storage backend your preference order picks. Every page after this one runs
+    against that database, in this tab.
+</PageHeader>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Install</h3>
+    <p class="bb-card-desc">
+        <code>Bit.Bsqlite</code> is the whole install: the ADO.NET surface, the EF Core integration, the worker
+        transport and every storage backend - OPFS, IndexedDB, Cache Storage and in-memory. It targets .NET 8, 9 and
+        10, each with the EF Core of the same major version. Browser-free unit tests add
+        <code>Bit.Bsqlite.Testing</code> to the test project.
+    </p>
+    <CodeBlock Title="Terminal" Language="shell" Code="@Snippets.Start.Install" Collapsible="false" />
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Register the services</h3>
+    <p class="bb-card-desc">
+        Register the backends you ship, the order you prefer them in, and the database. The first available backend
+        wins, but existing data outranks preference: a database created on IndexedDB stays there once OPFS becomes
+        available. <code>AllowNonPersistentFallback()</code> is what makes in-memory acceptable at all.
+    </p>
+    <CodeBlock Title="Program.cs" Language="csharp" Code="@Snippets.Start.Registration" Collapsible="false" />
+    <div class="bb-note">
+        In a Blazor Web App whose pages are prerendered, register the same services in the server project too: the
+        prerender pass instantiates the pages there, so what they inject has to resolve. Nothing touches the browser
+        until a page opens the database. This site keeps both registrations in one <code>AddDemoServices</code>
+        extension method that both Program.cs files call.
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Open a context and query</h3>
+    <p class="bb-card-desc">
+        Inject the context factory wherever you would have opened a <code>DbContext</code>. The first context opens
+        the database and runs the migrations once per session; later ones reuse the session's connection. From there
+        it is ordinary EF Core - with the async API throughout, because the engine runs in a worker the UI thread
+        cannot wait on.
+    </p>
+    <CodeBlock Title="Pages/Products.razor" Language="razor" Code="@Snippets.Start.Page" Collapsible="false" />
+    <div class="bb-note bb-note-warn">
+        Synchronous members - <code>SaveChanges()</code>, <code>ToList()</code>, <code>DbConnection.Open()</code> -
+        throw <code>BsqliteSynchronousApiNotSupportedException</code> naming the async overload. The
+        <a href="limits">Limits</a> page runs that on purpose.
+    </div>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Prerendering and render modes</h3>
+    <p class="bb-card-desc">
+        A prerendered page runs once on the server, where there is no browser to open a database in. Open it only once
+        the page is interactive - <code>RendererInfo.IsInteractive</code> on Interactive WebAssembly, and
+        <code>OperatingSystem.IsBrowser()</code> on Interactive Auto, where a page on the server circuit is
+        interactive too. This site renders <code>&lt;Routes&gt;</code> with InteractiveWebAssembly and lets its
+        <code>SessionLifecycle</code> component do the check for every page.
+    </p>
+    <CodeBlock Title="A page that is prerendered" Language="csharp" Code="@Snippets.Start.Prerendered" Collapsible="false" />
+    <p class="bb-card-desc">
+        Interactive Server is not supported: the engine runs in the user's tab, and EF Core on the server would need a
+        native SQLite of its own.
+    </p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Nothing in the host page</h3>
+    <p class="bb-card-desc">
+        The engine (<code>.wasm</code>), the worker and the backends' VFSes are static web assets under
+        <code>_content/Bit.Bsqlite/</code>, each imported on demand: registering a backend costs nothing until it is
+        selected, and a session downloads one engine build and the VFS of the backend it selected. There is no script
+        tag or stylesheet to add.
+    </p>
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Where to go next</h3>
+    <div class="bb-grid">
+        <a class="bb-card" href="catalog">
+            <span class="bq-panel-title">Catalog →</span>
+            <span class="bb-card-desc">CRUD over a related graph, with the types a browser database is usually worst at.</span>
+        </a>
+        <a class="bb-card" href="queries">
+            <span class="bq-panel-title">SQL and live queries →</span>
+            <span class="bb-card-desc">The SQL EF generates, decimals compared in SQL, REGEXP and queries that re-run themselves.</span>
+        </a>
+        <a class="bb-card" href="storage">
+            <span class="bq-panel-title">Storage backends →</span>
+            <span class="bb-card-desc">Why this tab's database landed where it did, and what each backend can honour.</span>
+        </a>
+        <a class="bb-card" href="mcp-server">
+            <span class="bq-panel-title">MCP server →</span>
+            <span class="bb-card-desc">Point a coding agent at this site so it reads the library instead of guessing.</span>
+        </a>
+    </div>
+</section>
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Home.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Home.razor
index 46f2a2f322d..6017e6b5fa0 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Home.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Home.razor
@@ -1,469 +1,395 @@
 @page "/"
+@layout MainLayout
+@using System.Reflection
 @inject BrowserDatabase Database
 
 <PageTitle>Bsqlite · EF Core on SQLite, inside the browser tab</PageTitle>
 
 <SessionLifecycle OnReady="LoadAsync" OnTearDown="UnloadAsync" />
 
-<div class="landing">
-
-    @* ---------------------------------------------------------------- hero *@
-    <section class="hero">
-        <div class="hero-inner">
-            <div class="hero-copy">
-                <div class="hero-badges">
-                    <span class="badge"><Icon Name="package" /> .NET 8, 9 and 10 · EF Core</span>
-                    <span class="badge">MIT</span>
-                    <a class="badge" href="@SiteLinks.Repository" target="_blank" rel="noopener">
-                        <Icon Name="github" /> bitfoundation/bitplatform <Icon Name="external" />
-                    </a>
-                </div>
-
-                <h1>EF Core on <em>real SQLite</em>, inside the browser tab.</h1>
-
-                <p class="hero-lead">
-                    The same entities, the same <code>DbContext</code>, and the same migrations you
-                    run on the server - executing against a SQLite engine in a Web Worker, over OPFS,
-                    IndexedDB, Cache Storage, or memory. This page is a Blazor WebAssembly app: after
-                    the download, nothing here talks to a server.
-                </p>
-
-                <div class="hero-actions">
-                    <a class="btn btn-lg" href="catalog">Open the live demo <Icon Name="arrow-right" /></a>
-                    <a class="btn btn-secondary btn-lg" href="@SiteLinks.Repository" target="_blank" rel="noopener">
-                        <Icon Name="github" /> Source
-                    </a>
-                </div>
-
-                <div class="command">
-                    <span class="command-prompt" aria-hidden="true">$</span>
-                    <span class="command-text">dotnet add package Bit.Bsqlite</span>
-                    <button type="button" class="codeblock-btn @(_copied ? "copied" : null)" @onclick="CopyInstallAsync">
-                        <Icon Name="@(_copied ? "check" : "copy")" />
-                        @(_copied ? "Copied" : "Copy")
-                    </button>
-                </div>
-
-                <p class="hero-note">
-                    One package with every storage backend, plus a test kit. Register only the
-                    backends you ship; the browser downloads only the one it uses.
-                </p>
+@* The landing page: hero → proof strip → capability grid → code walkthrough → the four backends →
+   comparison with IndexedDB → persona tiles → FAQ → final call to action. Everything else on the site
+   is a documentation page under DocsLayout. The hero's window is this tab's real database rather than
+   a picture of one: the rows under its code come from a live query, and change when a product is
+   edited on the Catalog page - in this tab or another one. *@
+
+<div class="bb-landing">
+
+    @* ============================== Hero ============================== *@
+
+    <section class="bb-hero">
+        <div class="bb-hero-copy">
+            <span class="bb-hero-eyebrow">
+                <span class="bb-dot bb-dot-success"></span>
+                Open source · MIT · v@(Version) · net8.0 / net9.0 / net10.0
+            </span>
+            <h1>EF Core on real SQLite,<br /><span class="bb-hero-accent">inside the browser tab.</span></h1>
+            <p class="bb-hero-sub">
+                The same entities, the same <code>DbContext</code> and the same migrations you run on the server -
+                executing against SQLite in a Web Worker, over OPFS, IndexedDB, Cache Storage or memory. This site
+                is a Blazor WebAssembly app: once it has loaded, every query on it runs in your tab.
+            </p>
+            <pre class="bb-code bb-hero-install">dotnet add package Bit.Bsqlite</pre>
+            <div class="bb-hero-actions">
+                <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+                <a href="catalog" class="btn btn-secondary bb-btn-lg">Open the live demo</a>
+                <a class="btn btn-secondary bb-btn-lg" href="@SiteInfo.ProjectUrl" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
             </div>
+        </div>
 
-            <div class="hero-panel">
-                <div class="hero-panel-head">
-                    <span class="hero-panel-dots" aria-hidden="true"><i></i><i></i><i></i></span>
-                    <span class="hero-panel-file">Program.cs</span>
+        @* The sample, framed as a window: the live query on top, and what it returns underneath - from
+           the database this tab opened, on the backend named in the window's title. *@
+        <div class="bb-hero-code">
+            <div class="bb-browser">
+                <div class="bb-browser-bar">
+                    <span class="bb-browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                    <span class="bb-browser-url">Home.razor · <strong>@(_backend is null ? "opening…" : SampleStorage.Title(_backend))</strong></span>
+                </div>
+                <pre class="bb-code">@CodeHighlighter.Highlight(Snippets.Home.Hero, "csharp")</pre>
+                <div class="bq-hero-live" data-live="@(_backend is null ? "opening" : "open")">
+                    @if (_error is not null)
+                    {
+                        <p class="bq-err">@_error</p>
+                    }
+                    else if (_backend is null)
+                    {
+                        <p class="bb-muted"><span class="bb-spinner"></span> Opening this tab's database…</p>
+                    }
+                    else
+                    {
+                        <dl class="bq-hero-stats">
+                            <div><dt>Products</dt><dd>@_products</dd></div>
+                            <div><dt>Customers</dt><dd>@_customers</dd></div>
+                            <div><dt>Open orders</dt><dd>@_openOrders</dd></div>
+                        </dl>
+                        <ol class="bq-hero-rows" aria-label="The live query's rows">
+                            @foreach (var product in _liveRows)
+                            {
+                                <li @key="product.Id">
+                                    <span class="bb-mono">@product.Sku</span>
+                                    <span>@product.Name</span>
+                                    <span class="bb-mono">@SampleFormat.Money(product.Price)</span>
+                                </li>
+                            }
+                        </ol>
+                        <p class="bq-hero-note">
+                            <span class="bq-live-dot" aria-hidden="true"></span>
+                            Live · @_persist. Edit a product on <a href="catalog">Catalog</a> and these rows re-run.
+                        </p>
+                    }
                 </div>
-                <pre><code>@CodeHighlighter.Highlight(Snippets.Setup.Hero, "csharp")</code></pre>
             </div>
         </div>
     </section>
 
-    <div class="container">
+    @* ============================== Proof strip ============================== *@
 
-        @if (_error is not null)
-        {
-            <p class="error" style="margin-top: var(--space-5)">
-                <Icon Name="warning" />
-                <span>@_error</span>
-            </p>
-        }
+    <section class="bb-proof">
+        <div><strong>Real SQLite 3.53</strong><span>wa-sqlite in a dedicated worker, off the UI thread</span></div>
+        <div><strong>Stock EF Core provider</strong><span><code>UseSqlite</code>'s SQL generation, unchanged</span></div>
+        <div><strong>Four storage backends</strong><span>OPFS, IndexedDB, Cache Storage and in-memory</span></div>
+        <div><strong>Live queries</strong><span>re-run on commit, across tabs too</span></div>
+    </section>
 
-        @* -------------------------------------------------- live proof strip *@
-        <div class="stat-strip">
-            <div class="stat">
-                <span class="stat-value">@_products</span>
-                <span class="stat-label"><span class="live-dot"></span> Products in this tab</span>
-            </div>
-            <div class="stat">
-                <span class="stat-value">@_customers</span>
-                <span class="stat-label">Customers</span>
-            </div>
-            <div class="stat">
-                <span class="stat-value">@_openOrders</span>
-                <span class="stat-label">Open orders</span>
-            </div>
-            <div class="stat">
-                <span class="stat-value small">@SampleStorage.Title(_backend ?? "opening…")</span>
-                <span class="stat-label">@_persist</span>
-            </div>
+    @* ============================== Capability grid ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Capabilities</p>
+        <h2>A browser database that behaves like the one on your server</h2>
+        <p class="bb-section-sub">
+            Not a re-implementation of SQL over IndexedDB. The engine is wa-sqlite - SQLite compiled to WebAssembly -
+            and the provider is the stock EF Core SQLite provider with two services swapped, so nothing blocks the UI
+            thread.
+        </p>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> One model, both sides</h3>
+                <p class="bb-card-desc">
+                    <code>UseSqlite</code> on the server, <code>UseBitBsqlite</code> in the tab. Same entities, same
+                    configuration classes, same migration set - migrations scaffolded against stock SQLite apply here
+                    unchanged.
+                </p>
+                <a href="catalog" class="btn btn-outline">Catalog →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Live queries</h3>
+                <p class="bb-card-desc">
+                    <code>AsLiveQuery()</code> re-runs a query when a table it reads is written - by this tab, by
+                    another tab, or by raw SQL. It learns what changed from SQLite's own update hook, after the
+                    transaction commits.
+                </p>
+                <a href="queries" class="btn btn-outline">SQL and live queries →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Storage is a contract</h3>
+                <p class="bb-card-desc">
+                    OPFS, IndexedDB, Cache Storage and in-memory are interchangeable providers behind one interface.
+                    Selection follows the order you configure, but existing data always outranks preference.
+                </p>
+                <a href="storage" class="btn btn-outline">Storage backends →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Real SQLite semantics</h3>
+                <p class="bb-card-desc">
+                    Foreign keys, unique indexes and transactions are the engine's, not the UI's. A constraint
+                    failure arrives as the <code>DbUpdateException</code> you would get on a server, with SQLite's
+                    own message and result code.
+                </p>
+                <a href="customers" class="btn btn-outline">Customers →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Move the file, keep the data</h3>
+                <p class="bb-card-desc">
+                    Migrating between backends exports the image, imports it on the target, checks the SQLite header,
+                    flips the binding, then deletes the source. Export a real <code>.db</code>, or seed a tab from one.
+                </p>
+                <a href="admin" class="btn btn-outline">Database files →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Honest limits</h3>
+                <p class="bb-card-desc">
+                    Synchronous APIs, WAL, <code>ATTACH</code> and page-size changes fail up front with a typed
+                    exception that names the alternative, rather than half-working on a backend that cannot honour them.
+                </p>
+                <a href="limits" class="btn btn-outline">Limits →</a>
+            </section>
         </div>
+    </section>
 
-        @* ------------------------------------------------------- capability *@
-        <section class="section">
-            <header class="section-head">
-                <p class="eyebrow">Why it exists</p>
-                <h2>A browser database that behaves like the one on your server</h2>
-                <p>
-                    Not a re-implementation of SQL over IndexedDB. The engine is wa-sqlite - SQLite
-                    compiled to WebAssembly - and the provider is the stock EF Core SQLite provider
-                    with two services swapped so nothing blocks the UI thread.
-                </p>
-            </header>
+    @* ============================== Code walkthrough ============================== *@
 
-            <div class="feature-grid">
-                <article class="feature">
-                    <span class="feature-icon"><Icon Name="layers" /></span>
-                    <h3>One model, both sides</h3>
-                    <p>
-                        <code>UseSqlite</code> on the server, <code>UseBitBsqlite</code> in the tab.
-                        Same entities, same configuration classes, same migration set - and the test
-                        suite proves migrations scaffolded against stock SQLite apply here unchanged.
-                    </p>
-                </article>
-                <article class="feature">
-                    <span class="feature-icon"><Icon Name="bolt" /></span>
-                    <h3>Live queries</h3>
+    <section class="bb-section">
+        <p class="bb-overline">In practice</p>
+        <h2>See it in code</h2>
+        <div class="bb-walkthrough">
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">01</span>
+                    <h3>Register a preference order and a database</h3>
                     <p>
-                        <code>AsLiveQuery()</code> re-runs a query when a table it reads is written -
-                        by this tab, by another tab, or by raw SQL that never touched EF. It learns
-                        what changed from SQLite's own update hook, after the transaction commits.
+                        Order is preference, not a requirement: the first available backend wins, and the choice is
+                        remembered per database. Each backend's JavaScript is loaded only once it is selected.
                     </p>
-                </article>
-                <article class="feature">
-                    <span class="feature-icon"><Icon Name="drive" /></span>
-                    <h3>Storage is a contract</h3>
-                    <p>
-                        OPFS, IndexedDB, Cache Storage, and in-memory are interchangeable providers
-                        behind one interface. Selection prefers the order you configure, but existing
-                        data always outranks preference.
-                    </p>
-                </article>
-                <article class="feature">
-                    <span class="feature-icon"><Icon Name="database" /></span>
-                    <h3>Real SQLite semantics</h3>
-                    <p>
-                        Foreign keys, unique indexes, and transactions are the engine's, not the UI's.
-                        A constraint failure arrives as the <code>DbUpdateException</code> you would
-                        get on a server, carrying SQLite's own message and result code.
-                    </p>
-                </article>
-                <article class="feature">
-                    <span class="feature-icon"><Icon Name="sync" /></span>
-                    <h3>Move the file, keep the data</h3>
+                    <a href="getting-started">Getting started →</a>
+                </div>
+                <pre class="bb-code">@CodeHighlighter.Highlight(Snippets.Home.Register, "csharp")</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">02</span>
+                    <h3>Query it with the EF Core you know</h3>
                     <p>
-                        Migrating between backends exports the image, imports it on the target, checks
-                        the SQLite header, flips the binding, then deletes the source. The bar above
-                        every demo page is that API.
+                        The context factory opens the database and runs the migrations once per session. From there it
+                        is LINQ, <code>Include</code> and <code>SaveChangesAsync</code> - the async API throughout.
                     </p>
-                </article>
-                <article class="feature">
-                    <span class="feature-icon"><Icon Name="shield" /></span>
-                    <h3>Testable without a browser</h3>
+                    <a href="orders">Orders →</a>
+                </div>
+                <pre class="bb-code">@CodeHighlighter.Highlight(Snippets.Home.Query, "csharp")</pre>
+            </div>
+            <div class="bb-walkthrough-row">
+                <div class="bb-walkthrough-copy">
+                    <span class="bb-step">03</span>
+                    <h3>Treat the database as a file</h3>
                     <p>
-                        <code>Bit.Bsqlite.Testing</code> ships an in-process transport for unit tests
-                        plus the conformance kit every storage provider has to pass. CI runs the browser
-                        suite across Chrome, Edge, Firefox, and WebKit.
+                        Every backend can list, export, import and delete its databases outside any connection - which is
+                        how migration between backends, a downloadable backup and a pre-built seed database all work.
                     </p>
-                </article>
+                    <a href="admin">Database files →</a>
+                </div>
+                <pre class="bb-code">@CodeHighlighter.Highlight(Snippets.Home.Export, "csharp")</pre>
             </div>
-        </section>
-
-        @* ------------------------------------------------------ live demo *@
-        <section class="section">
-            <header class="section-head">
-                <p class="eyebrow">Proof</p>
-                <h2>A query that re-runs itself</h2>
-                <p>
-                    The table below is a live query over <code>Products</code> in this tab's database.
-                    Nothing polls it.
-                </p>
-            </header>
-
-            <DemoCard Title="Live catalog"
-                      CodeTitle="Pages/Home.razor"
-                      Code="@Snippets.Home.LiveQuery"
-                      CodeOpen="false">
-                <Try>
-                    <span>
-                        Add or edit a product on <a href="catalog">Catalog</a>, or open this page in a
-                        second tab and edit there. The rows below re-run on their own.
-                    </span>
-                </Try>
-                <ChildContent>
-                    @if (_liveRows.Count == 0)
-                    {
-                        <p class="empty">No products yet.</p>
-                    }
-                    else
-                    {
-                        <div class="scroll-x">
-                            <table>
-                                <thead>
-                                <tr><th>SKU</th><th>Name</th><th>Price</th><th>Active</th></tr>
-                                </thead>
-                                <tbody>
-                                @foreach (var product in _liveRows)
-                                {
-                                    <tr>
-                                        <td class="mono">@product.Sku</td>
-                                        <td>@product.Name</td>
-                                        <td>@SampleFormat.Money(product.Price)</td>
-                                        <td>@(product.IsActive ? "yes" : "no")</td>
-                                    </tr>
-                                }
-                                </tbody>
-                            </table>
-                        </div>
-                    }
-                </ChildContent>
-            </DemoCard>
-        </section>
-
-        @* ------------------------------------------------------ quick start *@
-        <section class="section">
-            <header class="section-head">
-                <p class="eyebrow">Quick start</p>
-                <h2>Four steps from an empty Blazor WASM app</h2>
-                <p>
-                    Every snippet below is the code this demo actually runs, not a simplified
-                    version of it.
-                </p>
-            </header>
+        </div>
+    </section>
 
-            <div class="steps">
-                <div class="step">
-                    <span class="step-num" aria-hidden="true"></span>
-                    <div class="step-body">
-                        <h3>Install the package</h3>
-                        <p>
-                            One package carries the engine, the worker, the storage contract and every
-                            backend. Each backend's JavaScript is loaded only once it is selected, so a
-                            session pays only for the storage it actually uses.
-                        </p>
-                        <CodeBlock Title="Package" Language="shell" Code="@Snippets.Setup.Install" />
-                    </div>
-                </div>
+    @* ============================== The backends ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Storage</p>
+        <h2>Four backends, one interface</h2>
+        <p class="bb-section-sub">
+            Each in a namespace of its own, each registered with <code>AddStorageProvider&lt;T&gt;()</code>. Move this
+            tab's database between them with the bar at the top of any demo page.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="The four storage backends">
+            <table class="bb-table bq-grid">
+                <thead>
+                <tr><th>Backend</th><th>Namespace</th><th>Persists</th><th>Concurrent readers</th><th>Use it when</th></tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="bq-nowrap"><span class="bq-storage-dot" data-name="opfs" aria-hidden="true"></span> opfs</td>
+                    <td>Storage.Opfs</td>
+                    <td><span class="bb-badge bb-badge-success">yes</span></td>
+                    <td>yes</td>
+                    <td>The default. Real files, the synchronous engine build, no COOP/COEP headers needed.</td>
+                </tr>
+                <tr>
+                    <td class="bq-nowrap"><span class="bq-storage-dot" data-name="indexeddb" aria-hidden="true"></span> indexeddb</td>
+                    <td>Storage.IndexedDb</td>
+                    <td><span class="bb-badge bb-badge-success">yes</span></td>
+                    <td>no</td>
+                    <td>Widest reach. Survives browsers without OPFS; readers serialise.</td>
+                </tr>
+                <tr>
+                    <td class="bq-nowrap"><span class="bq-storage-dot" data-name="cache-storage" aria-hidden="true"></span> cache-storage</td>
+                    <td>Storage.CacheStorage</td>
+                    <td><span class="bb-badge bb-badge-success">yes</span></td>
+                    <td>no</td>
+                    <td>The migration path off Bit.Besql. Persistence cost scales with database size.</td>
+                </tr>
+                <tr>
+                    <td class="bq-nowrap"><span class="bq-storage-dot" data-name="in-memory" aria-hidden="true"></span> in-memory</td>
+                    <td>Storage.InMemory</td>
+                    <td><span class="bb-badge bq-badge-neutral">no</span></td>
+                    <td>yes</td>
+                    <td>Trying the engine, or tests. Gone when the tab closes - and only with an explicit opt-in.</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
 
-                <div class="step">
-                    <span class="step-num" aria-hidden="true"></span>
-                    <div class="step-body">
-                        <h3>Register the session factory</h3>
-                        <p>
-                            Order is preference, not a requirement: the first available backend wins,
-                            and <code>AllowNonPersistentFallback()</code> is what makes in-memory
-                            acceptable at all.
-                        </p>
-                        <CodeBlock Title="Program.cs" Language="csharp" Code="@Snippets.Setup.Registration" Open="false" />
-                    </div>
-                </div>
+    @* ============================== Comparison ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Comparison</p>
+        <h2>Why not IndexedDB directly?</h2>
+        <p class="bb-section-sub">
+            IndexedDB is a key-value store with indexes. Bsqlite puts a relational engine - and EF Core - on top of the
+            browser's storage, IndexedDB included, so the browser half of an app is written the way its server half is.
+        </p>
+        <div class="bb-scroll" tabindex="0" role="region" aria-label="IndexedDB compared with Bsqlite">
+            <table class="bb-table bb-compare">
+                <thead>
+                <tr><th>Concern</th><th>IndexedDB by hand</th><th>Bsqlite</th></tr>
+                </thead>
+                <tbody>
+                <tr><td>Queries</td><td>Cursors over object stores and their indexes</td><td>SQL, through EF Core's LINQ or plain ADO.NET</td></tr>
+                <tr><td>Schema changes</td><td>Hand-written <code>onupgradeneeded</code> version steps</td><td>The same EF Core migrations the server runs</td></tr>
+                <tr><td>Relations</td><td>Your code keeps them consistent</td><td>Foreign keys and unique indexes, enforced by SQLite</td></tr>
+                <tr><td>Reacting to writes</td><td>Events you raise yourself</td><td><code>AsLiveQuery()</code>, re-run on commit, across tabs</td></tr>
+                <tr><td>Where the data lives</td><td>IndexedDB</td><td>OPFS, IndexedDB, Cache Storage or memory, chosen and remembered per database</td></tr>
+                <tr><td>Reaching it from .NET</td><td>JavaScript interop, call by call</td><td>One binary buffer per batch, transferred rather than copied</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
 
-                <div class="step">
-                    <span class="step-num" aria-hidden="true"></span>
-                    <div class="step-body">
-                        <h3>Open a session and hand EF the connection</h3>
-                        <p>
-                            A session owns the worker, the transport, and one ADO.NET connection.
-                            <code>UseBitBsqlite(connection)</code> is <code>UseSqlite</code> plus the
-                            two service replacements that would otherwise call
-                            <code>DbConnection.Open()</code> synchronously. SQL generation is the stock
-                            provider's, unchanged.
-                        </p>
-                        <CodeBlock Title="BrowserDatabase.cs" Language="csharp" Code="@Snippets.Setup.OpenContext" />
-                    </div>
-                </div>
+    @* ============================== Persona CTAs ============================== *@
+
+    <section class="bb-section">
+        <p class="bb-overline">Where to start</p>
+        <h2>Choose your path</h2>
+        <div class="bb-grid">
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> New to Bsqlite?</h3>
+                <p class="bb-card-desc">Install, register a preference order, open a context - EF Core in the tab in five minutes.</p>
+                <a href="getting-started" class="btn btn-primary">Getting started →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Want to see it live?</h3>
+                <p class="bb-card-desc">Every page runs real EF Core calls against this tab's database, with the snippet behind each one.</p>
+                <a href="catalog" class="btn btn-outline">Open the demos →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Moving off Bit.Besql?</h3>
+                <p class="bb-card-desc">The <code>cache-storage</code> backend imports the database Bit.Besql left behind, losslessly, the first time it opens.</p>
+                <a href="storage" class="btn btn-outline">Storage backends →</a>
+            </section>
+            <section class="bb-card">
+                <h3 class="bb-card-title"><span class="bb-dot bb-dot-danger"></span> Building with an AI agent?</h3>
+                <p class="bb-card-desc">This site is an MCP server: point your agent at <code>/mcp</code> and it reads the shipped library instead of guessing.</p>
+                <a href="mcp-server" class="btn btn-outline">Try the MCP server →</a>
+            </section>
+        </div>
+    </section>
 
-                <div class="step">
-                    <span class="step-num" aria-hidden="true"></span>
-                    <div class="step-body">
-                        <h3>Query it - and stay in sync</h3>
-                        <p>
-                            From here it is EF Core. Add <code>AsLiveQuery()</code> where the UI should
-                            follow the data instead of re-fetching it.
-                        </p>
-                        <CodeBlock Title="Live query" Language="csharp" Code="@Snippets.Home.LiveQuery" Open="false" />
-                    </div>
-                </div>
-            </div>
-        </section>
+    @* ============================== FAQ ============================== *@
 
-        @* --------------------------------------------------------- backends *@
-        <section class="section">
-            <header class="section-head">
-                <p class="eyebrow">Storage</p>
-                <h2>Four backends, one interface</h2>
+    <section class="bb-section">
+        <p class="bb-overline">Questions</p>
+        <h2>Frequently asked</h2>
+        <div class="bb-faq">
+            <details>
+                <summary>Is this a SQL engine written in JavaScript?</summary>
                 <p>
-                    Switch this tab between them with the bar at the top of any demo page, then read
-                    the full contract on <a href="storage">Storage backends</a>.
+                    No. It is SQLite 3.53 compiled to WebAssembly (wa-sqlite 1.1.2), running in a dedicated worker, and
+                    the SQL comes from the stock EF Core SQLite provider. SQL batches and result sets cross the worker
+                    boundary as one binary buffer each, with 64-bit integers intact.
                 </p>
-            </header>
-
-            <div class="matrix scroll-x">
-                <table>
-                    <thead>
-                    <tr>
-                        <th>Backend</th>
-                        <th>Namespace</th>
-                        <th>Persists</th>
-                        <th>Concurrent readers</th>
-                        <th>Use it when</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td><span class="storage-dot" data-name="opfs"></span> OPFS</td>
-                        <td class="mono">Storage.Opfs</td>
-                        <td><span class="pill ok">yes</span></td>
-                        <td>yes</td>
-                        <td>The default. Real files, sync engine, no COOP/COEP headers needed.</td>
-                    </tr>
-                    <tr>
-                        <td><span class="storage-dot" data-name="indexeddb"></span> IndexedDB</td>
-                        <td class="mono">Storage.IndexedDb</td>
-                        <td><span class="pill ok">yes</span></td>
-                        <td>no</td>
-                        <td>Widest reach. Survives browsers without OPFS; readers serialise.</td>
-                    </tr>
-                    <tr>
-                        <td><span class="storage-dot" data-name="cache-storage"></span> Cache Storage</td>
-                        <td class="mono">Storage.CacheStorage</td>
-                        <td><span class="pill ok">yes</span></td>
-                        <td>no</td>
-                        <td>The besql migration path. Persistence cost scales with database size.</td>
-                    </tr>
-                    <tr>
-                        <td><span class="storage-dot" data-name="in-memory"></span> In-memory</td>
-                        <td class="mono">Storage.InMemory</td>
-                        <td><span class="pill muted">no</span></td>
-                        <td>yes</td>
-                        <td>Trying the engine, or tests. Gone when the tab closes.</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </section>
-
-        @* ------------------------------------------------------------ types *@
-        <section class="section">
-            <header class="section-head">
-                <p class="eyebrow">Type mapping</p>
-                <h2>CLR types stored in SQLite</h2>
+            </details>
+            <details>
+                <summary>Which hosting models does it run on?</summary>
                 <p>
-                    SQLite has four storage classes. The ADO.NET binder decides which one each CLR
-                    value takes, so the worker never guesses and values round-trip as the type you
-                    wrote.
+                    Blazor WebAssembly, and a Blazor Web App on Interactive WebAssembly - or Interactive Auto once the page
+                    runs on WebAssembly - on .NET 8, 9 and 10. Prerendered pages render on the server and open their
+                    database once interactive. Interactive Server is not supported: the engine runs in the user's tab.
                 </p>
-            </header>
-
-            <div class="matrix scroll-x">
-                <table class="type-table">
-                    <thead><tr><th>CLR</th><th>SQLite</th><th>Where in this demo</th></tr></thead>
-                    <tbody>
-                    <tr><td><code>decimal</code></td><td>TEXT + <code>ef_*</code></td><td>Price, credit limit</td></tr>
-                    <tr><td><code>DateTime</code></td><td>TEXT ISO</td><td>CreatedUtc</td></tr>
-                    <tr><td><code>DateTimeOffset</code></td><td>TEXT + offset</td><td>OrderedAt</td></tr>
-                    <tr><td><code>DateOnly</code></td><td>TEXT date</td><td>Date of birth, ship-by</td></tr>
-                    <tr><td><code>TimeSpan</code></td><td>TEXT <code>c</code></td><td>Lead time</td></tr>
-                    <tr><td><code>Guid</code></td><td>TEXT</td><td>PublicId</td></tr>
-                    <tr><td><code>bool</code></td><td>INTEGER 0/1</td><td>IsActive, IsVip</td></tr>
-                    <tr><td><code>enum</code></td><td>TEXT</td><td>Order status</td></tr>
-                    <tr><td><code>double</code></td><td>REAL</td><td>Weight</td></tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <CodeBlock Title="Product.cs" Language="csharp" Code="@Snippets.Home.Entity" Open="false" />
-        </section>
-
-        @* ------------------------------------------------------------ demos *@
-        <section class="section">
-            <header class="section-head">
-                <p class="eyebrow">Explore</p>
-                <h2>Every page pairs a working demo with the code that drives it</h2>
-                <p>All of it runs against the database in this tab, on the backend named in the bar.</p>
-            </header>
-
-            <div class="link-grid">
-                @foreach (var entry in SiteMap.Demos)
-                {
-                    <a class="link-card" href="@entry.Href">
-                        <span class="link-card-icon"><Icon Name="@entry.Icon" /></span>
-                        <span>
-                            <strong>@entry.Title</strong>
-                            <span>@entry.Summary</span>
-                        </span>
-                        <span class="link-card-go"><Icon Name="arrow-right" /></span>
-                    </a>
-                }
-            </div>
-        </section>
-
-        @* ----------------------------------------------------------- limits *@
-        <section class="section">
-            <header class="section-head">
-                <p class="eyebrow">Honest limits</p>
-                <h2>What this release does not claim</h2>
+            </details>
+            <details>
+                <summary>Can I call SaveChanges() or ToList()?</summary>
+                <p>
+                    No - use the async API. The engine runs in a worker the UI thread cannot block on, so synchronous
+                    members throw <code>BsqliteSynchronousApiNotSupportedException</code>, naming the async overload to
+                    call instead.
+                </p>
+            </details>
+            <details>
+                <summary>Do I need COOP/COEP headers or a special host page?</summary>
+                <p>
+                    No. Nothing goes into the host page either: the engine, the worker and the VFSes are static web assets
+                    under <code>_content/Bit.Bsqlite/</code>, imported on demand, and a session downloads only the engine
+                    build and the VFS of the backend it selected.
+                </p>
+            </details>
+            <details>
+                <summary>What happens on a browser without OPFS?</summary>
+                <p>
+                    Selection falls back in the order you configured. It never substitutes a backend silently: existing data
+                    outranks preference, a non-persistent fallback needs <code>AllowNonPersistentFallback()</code>, and a
+                    failed open names every candidate and why it was rejected.
+                </p>
+            </details>
+            <details>
+                <summary>Can I test it without a browser?</summary>
+                <p>
+                    Yes. <code>Bit.Bsqlite.Testing</code> ships an in-process transport for browser-free unit tests, plus
+                    the MSTest conformance kit every storage provider has to pass.
+                </p>
+            </details>
+            <details>
+                <summary>Does the browser database sync with the server?</summary>
                 <p>
-                    The <a href="limits">Limits</a> page demonstrates each of these failing, on
-                    purpose, with the exception it throws.
+                    No. This release shares a model and a migration set between the two sides, not data - the demo's server
+                    holds its own copy of the catalog, seeded through the same <code>AppDbContext</code>.
                 </p>
-            </header>
+            </details>
+        </div>
+    </section>
 
-            <div class="limits-list">
-                <div class="limit-item">
-                    <Icon Name="warning" />
-                    <div>
-                        <strong>Synchronous APIs throw</strong>
-                        <p>
-                            Browsers forbid blocking the main thread, so <code>SaveChanges()</code> and
-                            friends have async-only counterparts. There is no spin-wait hiding behind
-                            them.
-                        </p>
-                    </div>
-                </div>
-                <div class="limit-item">
-                    <Icon Name="warning" />
-                    <div>
-                        <strong>WAL, ATTACH, and page-size changes are guarded</strong>
-                        <p>
-                            A VFS over browser storage cannot honour them safely, so they are refused
-                            up front rather than corrupting a file later.
-                        </p>
-                    </div>
-                </div>
-                <div class="limit-item">
-                    <Icon Name="warning" />
-                    <div>
-                        <strong>IndexedDB serialises readers</strong>
-                        <p>
-                            Its VFS holds the same lock for a read as for a write.
-                            <code>SupportsConcurrentReads</code> reports that honestly instead of
-                            pretending otherwise.
-                        </p>
-                    </div>
-                </div>
-                <div class="limit-item">
-                    <Icon Name="warning" />
-                    <div>
-                        <strong>Client and server do not sync</strong>
-                        <p>
-                            Both sides share a model and a migration set, not a replication protocol.
-                            That is post-1.0.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </section>
+    @* ============================== Final CTA ============================== *@
 
-        @* ---------------------------------------------------------- closing *@
-        <section class="closing">
-            <h2>Open a database in your own tab</h2>
-            <p>
-                The demo pages are the documentation: each one runs a real EF Core call and shows the
-                exact snippet behind it.
-            </p>
-            <div class="hero-actions">
-                <a class="btn btn-lg" href="catalog">Start with Catalog <Icon Name="arrow-right" /></a>
-                <a class="btn btn-secondary btn-lg" href="@SiteLinks.Readme" target="_blank" rel="noopener">
-                    <Icon Name="book" /> Read the docs
-                </a>
-            </div>
-        </section>
-    </div>
+    <section class="bb-final-cta">
+        <h2>Open a database in your own tab</h2>
+        <p class="bb-section-sub">One package, one registration - and EF Core runs where your users are.</p>
+        <pre class="bb-code bb-hero-install">dotnet add package Bit.Bsqlite</pre>
+        <div class="bb-hero-actions">
+            <a href="getting-started" class="btn btn-primary bb-btn-lg">Get started →</a>
+            <a href="catalog" class="btn btn-secondary bb-btn-lg">Open the live demo</a>
+        </div>
+    </section>
 </div>
 
 @code {
+    /// <summary>
+    /// The Bit.Bsqlite build this site runs. The informational version's build metadata - everything after
+    /// '+', usually the commit hash - is dropped: it identifies nothing a reader could act on.
+    /// </summary>
+    private static readonly string Version = (
+        typeof(BsqliteConnection).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion
+        ?? typeof(BsqliteConnection).Assembly.GetName().Version?.ToString()
+        ?? "unknown").Split('+')[0];
+
     private AppDbContext? _context;
     private IBsqliteLiveQuery<IReadOnlyList<Product>>? _live;
     private IReadOnlyList<Product> _liveRows = [];
@@ -473,10 +399,6 @@
     private string? _backend;
     private string _persist = "opening…";
     private string? _error;
-    private bool _copied;
-
-    [Inject]
-    private IJSRuntime Js { get; set; } = default!;
 
     private async Task LoadAsync()
     {
@@ -484,17 +406,17 @@
         try
         {
             _context = await Database.OpenContextAsync();
-            _backend = Database.Resolution?.Provider.Name;
             var persistent = Database.Resolution?.Provider.Capabilities.IsPersistent == true;
-            _persist = persistent ? "Persists across reload" : "Gone when this tab closes";
+            _persist = persistent ? "persists across reload" : "gone when this tab closes";
             _products = await _context.Products.CountAsync();
             _customers = await _context.Customers.CountAsync();
             _openOrders = await _context.Orders.CountAsync(o =>
                 o.Status != OrderStatus.Shipped && o.Status != OrderStatus.Cancelled);
 
-            _live = _context.Products.AsNoTracking().OrderBy(p => p.Sku).Take(8).AsLiveQuery();
+            _live = _context.Products.AsNoTracking().OrderBy(p => p.Sku).Take(4).AsLiveQuery();
             _live.Changed += OnChanged;
             _liveRows = await _live.RefreshAsync();
+            _backend = Database.Resolution?.Provider.Name;
         }
         catch (Exception ex)
         {
@@ -505,6 +427,8 @@
 
     private async Task UnloadAsync()
     {
+        _backend = null;
+
         if (_live is not null)
         {
             _live.Changed -= OnChanged;
@@ -524,23 +448,4 @@
         _liveRows = rows;
         _ = InvokeAsync(StateHasChanged);
     }
-
-    private async Task CopyInstallAsync()
-    {
-        try
-        {
-            _copied = await Js.InvokeAsync<bool>("bsqliteDemo.copy", "dotnet add package Bit.Bsqlite");
-        }
-        catch (Exception ex)
-        {
-            SampleLog.Exception(ex);
-            _copied = false;
-        }
-
-        if (_copied)
-        {
-            await Task.Delay(1400);
-            _copied = false;
-        }
-    }
 }
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Limits.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Limits.razor
index 15192f961da..59b4f9cc2e2 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Limits.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Limits.razor
@@ -10,102 +10,104 @@
     them and read the real message.
 </PageHeader>
 
+<StorageSwitcher />
+
 @if (_error is not null)
 {
-    <p class="error">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 
-<div class="stack-lg">
-    <DemoCard Title="Synchronous EF and ADO.NET"
-              CodeTitle="Calling SaveChanges()"
-              Code="@Snippets.Limits.Sync">
-        <Description>
-            <span>
-                <code>SaveChanges()</code>, <code>ToList()</code>, and
-                <code>DbConnection.Open()</code> throw
-                <code>BsqliteSynchronousApiNotSupportedException</code>, and the message names
-                the async overload to use. The opt-in tier that would lift this (COOP/COEP plus a
-                native <code>ISQLite3Provider</code>) slipped past 1.0. EF wraps a failed save, so
-                the panel below unwraps to the exception that actually explains the refusal.
-            </span>
-        </Description>
-        <Try>
-            <span>Run it: this is the exception your users would see, not a paraphrase of it.</span>
-        </Try>
-        <ChildContent>
-            <button type="button" @onclick="TrySyncSaveAsync" disabled="@_busy">Call SaveChanges()</button>
-            @if (_syncResult is not null)
-            {
-                <pre class="output">@_syncResult</pre>
-            }
-        </ChildContent>
-    </DemoCard>
-
-    <DemoCard Title="WAL journal mode"
-              CodeTitle="PRAGMA journal_mode=WAL"
-              Code="@Snippets.Limits.Wal">
-        <Description>
-            No web VFS implements WAL: WASM lacks the shared-memory primitives it needs, and the
-            official SQLite WASM build cannot even <em>read</em> a WAL-mode file. Journal mode here
-            is DELETE or TRUNCATE. Concurrent reads, where a backend offers them, come from the VFS
-            instead.
-        </Description>
-        <ChildContent>
-            <button type="button" class="secondary" @onclick='() => RunSqlAsync("PRAGMA journal_mode=WAL")' disabled="@_busy">
+<DemoCard Title="Synchronous EF and ADO.NET"
+          CodeTitle="Calling SaveChanges()"
+          Code="@Snippets.Limits.Sync">
+    <Description>
+        <code>SaveChanges()</code>, <code>ToList()</code>, and
+        <code>DbConnection.Open()</code> throw
+        <code>BsqliteSynchronousApiNotSupportedException</code>, and the message names
+        the async overload to use. The opt-in tier that would lift this (COOP/COEP plus a
+        native <code>ISQLite3Provider</code>) slipped past 1.0. EF wraps a failed save, so
+        the panel below unwraps to the exception that actually explains the refusal.
+    </Description>
+    <Try>Run it: this is the exception your users would see, not a paraphrase of it.</Try>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-primary" @onclick="TrySyncSaveAsync" disabled="@_busy">Call SaveChanges()</button>
+        </div>
+        @if (_syncResult is not null)
+        {
+            <pre class="bb-log bq-output">@_syncResult</pre>
+        }
+    </ChildContent>
+</DemoCard>
+
+<DemoCard Title="WAL journal mode"
+          CodeTitle="PRAGMA journal_mode=WAL"
+          Code="@Snippets.Limits.Wal">
+    <Description>
+        No web VFS implements WAL: WASM lacks the shared-memory primitives it needs, and the
+        official SQLite WASM build cannot even <em>read</em> a WAL-mode file. Journal mode here
+        is DELETE or TRUNCATE. Concurrent reads, where a backend offers them, come from the VFS
+        instead.
+    </Description>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary bb-mono" @onclick='() => RunSqlAsync("PRAGMA journal_mode=WAL")' disabled="@_busy">
                 Run PRAGMA journal_mode=WAL
             </button>
-        </ChildContent>
-    </DemoCard>
-
-    <DemoCard Title="ATTACH across two databases"
-              CodeTitle="Guarding on capability"
-              Code="@Snippets.Limits.Attach">
-        <Description>
-            <span>
-                Gated by <code>SupportsMultiDatabaseTransactions</code>: OPFS CoopSync cannot run a
-                transaction spanning two files, IndexedDB can. The guard reads the selected
-                backend's capabilities - it does not test the provider name, so a new backend
-                inherits the rule for free.
-            </span>
-        </Description>
-        <ChildContent>
-            <p>
-                This session supports multi-database transactions:
-                <strong>@SampleFormat.YesNo(_supportsAttach)</strong>
-            </p>
-            <button type="button" class="secondary" @onclick="TryAttachAsync" disabled="@_busy">
+        </div>
+    </ChildContent>
+</DemoCard>
+
+<DemoCard Title="ATTACH across two databases"
+          CodeTitle="Guarding on capability"
+          Code="@Snippets.Limits.Attach">
+    <Description>
+        Gated by <code>SupportsMultiDatabaseTransactions</code>: OPFS CoopSync cannot run a
+        transaction spanning two files, IndexedDB can. The guard reads the selected
+        backend's capabilities - it does not test the provider name, so a new backend
+        inherits the rule for free.
+    </Description>
+    <ChildContent>
+        <p>
+            This session supports multi-database transactions:
+            <strong>@SampleFormat.YesNo(_supportsAttach)</strong>
+        </p>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary bb-mono" @onclick="TryAttachAsync" disabled="@_busy">
                 Run ATTACH DATABASE 'other.db' AS other
             </button>
-        </ChildContent>
-    </DemoCard>
-
-    <DemoCard Title="Changing the page size"
-              CodeTitle="PRAGMA page_size"
-              Code="@Snippets.Limits.PageSize">
-        <Description>
-            Block-oriented backends pin the page size to their block size - IndexedDB batch-atomic
-            is the usual case. Letting the PRAGMA through would report success and then corrupt the
-            image on the next write, so it is refused up front.
-        </Description>
-        <ChildContent>
-            <p>
-                This session can change page size:
-                <strong>@SampleFormat.YesNo(_canChangePageSize)</strong>
-            </p>
-            <button type="button" class="secondary" @onclick='() => RunSqlAsync("PRAGMA page_size=512")' disabled="@_busy">
+        </div>
+    </ChildContent>
+</DemoCard>
+
+<DemoCard Title="Changing the page size"
+          CodeTitle="PRAGMA page_size"
+          Code="@Snippets.Limits.PageSize">
+    <Description>
+        Block-oriented backends pin the page size to their block size - IndexedDB batch-atomic
+        is the usual case. Letting the PRAGMA through would report success and then corrupt the
+        image on the next write, so it is refused up front.
+    </Description>
+    <ChildContent>
+        <p>
+            This session can change page size:
+            <strong>@SampleFormat.YesNo(_canChangePageSize)</strong>
+        </p>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary bb-mono" @onclick='() => RunSqlAsync("PRAGMA page_size=512")' disabled="@_busy">
                 Run PRAGMA page_size=512
             </button>
-        </ChildContent>
-    </DemoCard>
+        </div>
+    </ChildContent>
+</DemoCard>
 
-    @if (_sqlResult is not null)
-    {
-        <section class="card">
-            <h2>Last statement</h2>
-            <pre class="output">@_sqlResult</pre>
-        </section>
-    }
-</div>
+@if (_sqlResult is not null)
+{
+    <section class="bb-card">
+        <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> Last statement</h3>
+        <pre class="bb-log bq-output">@_sqlResult</pre>
+    </section>
+}
 
 @code {
     private bool _supportsAttach = true;
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/McpServer.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/McpServer.razor
index ecd92038e3d..aec95b709b8 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/McpServer.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/McpServer.razor
@@ -18,49 +18,41 @@
     an API it half remembers. Every tool is read-only, and none of them executes SQL.
 </PageHeader>
 
-<div class="stack-lg">
-    <DemoCard Step="Connect"
-              Title="Point your agent at it"
-              CodeTitle=".mcp.json - Claude Code, VS Code, and anything else reading this shape"
-              Language="json"
-              Code="@ClientConfig">
-        <Description>
-            <span>
-                The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else:
-                this site's own <code>@Endpoint</code>, the deployed <code>https://bsqlite.bitplatform.dev/mcp</code>,
-                or <code>https://bitplatform.dev/mcp</code>, which serves the tools of every bit library from one
-                address. The same tools are plain <code>GET</code> endpoints under <code>/api/mcp/...</code>, which is
-                what the panels below call.
-            </span>
-        </Description>
-        <ChildContent>
-            <div class="command">
-                <span class="command-prompt">$</span>
-                <span class="command-text">claude mcp add --transport http bsqlite @Endpoint</span>
-            </div>
-        </ChildContent>
-    </DemoCard>
-
-    <DemoCard Step="Lab"
-              Title="Where will the database open?">
-        <Description>
-            <span>
-                <code>PlanBsqliteStorageSelection</code> runs the library's own resolver, migrator and session
-                factory - composed exactly as <code>AddBitBsqliteServices</code> composes them - against stand-in
-                providers that answer their probe the way you describe the browser. The first-party backends keep
-                the capabilities their provider types declare. Nothing is opened.
-            </span>
-        </Description>
-        <Try>
-            <span>
-                Bind the database to <strong>indexeddb</strong>, then switch the migration mode to
-                <strong>AutomaticOnOpen</strong>; or make <strong>opfs</strong> and <strong>indexeddb</strong>
-                unavailable with in-memory last, and toggle the fallback opt-in.
-            </span>
-        </Try>
-        <ChildContent>
-            <form class="stack-form" @onsubmit="PlanAsync" @onsubmit:preventDefault="true">
-                <label>
+<DemoCard Step="Connect"
+          Title="Point your agent at it"
+          CodeTitle=".mcp.json - Claude Code, VS Code, and anything else reading this shape"
+          Language="json"
+          Code="@ClientConfig">
+    <Description>
+        The endpoint is plain Streamable HTTP, so any MCP client connects with a URL and nothing else:
+        this site's own <code>@Endpoint</code>, the deployed <code>https://bsqlite.bitplatform.dev/mcp</code>,
+        or <code>https://bitplatform.dev/mcp</code>, which serves the tools of every bit library from one
+        address. The same tools are plain <code>GET</code> endpoints under <code>/api/mcp/...</code>, which is
+        what the panels below call.
+    </Description>
+    <Extra>
+        <div class="bb-source-file">Claude Code, from a terminal</div>
+        <pre class="bb-code">claude mcp add --transport http bsqlite @Endpoint</pre>
+    </Extra>
+</DemoCard>
+
+<DemoCard Step="Lab"
+          Title="Where will the database open?">
+    <Description>
+        <code>PlanBsqliteStorageSelection</code> runs the library's own resolver, migrator and session
+        factory - composed exactly as <code>AddBitBsqliteServices</code> composes them - against stand-in
+        providers that answer their probe the way you describe the browser. The first-party backends keep
+        the capabilities their provider types declare. Nothing is opened.
+    </Description>
+    <Try>
+        Bind the database to <strong>indexeddb</strong>, then switch the migration mode to
+        <strong>AutomaticOnOpen</strong>; or make <strong>opfs</strong> and <strong>indexeddb</strong>
+        unavailable with in-memory last, and toggle the fallback opt-in.
+    </Try>
+    <ChildContent>
+        <form class="bq-form" @onsubmit="PlanAsync" @onsubmit:preventDefault="true">
+            <div class="bb-fields">
+                <label class="bb-field">
                     Preference order
                     <select @bind="_order" disabled="@IsHydrating">
                         @foreach (var order in PreferenceOrders)
@@ -69,18 +61,7 @@
                         }
                     </select>
                 </label>
-                <div class="row">
-                    <span>Unavailable in this browser:</span>
-                    @foreach (var backend in Backends)
-                    {
-                        <label>
-                            <input type="checkbox" checked="@(_unavailable.Contains(backend))" disabled="@IsHydrating"
-                                   @onchange="e => Toggle(_unavailable, backend, e)" />
-                            <span class="mono">@backend</span>
-                        </label>
-                    }
-                </div>
-                <label>
+                <label class="bb-field">
                     Existing binding (where the database already lives)
                     <select @bind="_binding" disabled="@IsHydrating">
                         <option value="">none - a first open</option>
@@ -90,7 +71,7 @@
                         }
                     </select>
                 </label>
-                <label>
+                <label class="bb-field">
                     Migration mode
                     <select @bind="_mode" disabled="@IsHydrating">
                         @foreach (var mode in MigrationModes)
@@ -99,322 +80,325 @@
                         }
                     </select>
                 </label>
-                <label><input type="checkbox" @bind="_allowNonPersistent" disabled="@IsHydrating" /> AllowNonPersistentFallback()</label>
-                <div class="row">
-                    <button type="submit" disabled="@(_planning || IsHydrating)">@(_planning ? "Planning..." : "Plan the open")</button>
-                </div>
-            </form>
+            </div>
+            <div class="bb-fields" role="group" aria-label="Unavailable in this browser">
+                <span class="bq-fields-label">Unavailable in this browser:</span>
+                @foreach (var backend in Backends)
+                {
+                    <label class="bb-check">
+                        <input type="checkbox" checked="@(_unavailable.Contains(backend))" disabled="@IsHydrating"
+                               @onchange="e => Toggle(_unavailable, backend, e)" />
+                        <span class="bb-mono">@backend</span>
+                    </label>
+                }
+            </div>
+            <label class="bb-check"><input type="checkbox" @bind="_allowNonPersistent" disabled="@IsHydrating" /> <span class="bb-mono">AllowNonPersistentFallback()</span></label>
+            <div class="bb-toolbar">
+                <button type="submit" class="btn btn-primary" disabled="@(_planning || IsHydrating)">@(_planning ? "Planning..." : "Plan the open")</button>
+            </div>
+        </form>
 
-            @if (_planError is not null)
-            {
-                <p class="error">@_planError</p>
-            }
-            else if (_plan is not null)
-            {
-                <p>
-                    @if (_plan.Opens)
+        @if (_planError is not null)
+        {
+            <div class="bb-note bb-note-danger">@_planError</div>
+        }
+        else if (_plan is not null)
+        {
+            <p class="bq-verdict">
+                @if (_plan.Opens)
+                {
+                    <span>Opens on <span class="bb-badge bb-badge-success">@_plan.Provider</span></span>
+                    <span> - engine build <span class="bb-badge bq-badge-neutral">@_plan.EngineBuild</span></span>
+                    @if (_plan.WasDecidedByExistingData is true)
                     {
-                        <span>Opens on <span class="pill ok">@_plan.Provider</span></span>
-                        <span> - engine build <span class="pill muted">@_plan.EngineBuild</span></span>
-                        @if (_plan.WasDecidedByExistingData is true)
-                        {
-                            <span> - decided by the existing binding.</span>
-                        }
-                        else if (_plan.IsFirstChoice is false)
-                        {
-                            <span> - a fallback.</span>
-                        }
+                        <span> - decided by the existing binding.</span>
                     }
-                    else
+                    else if (_plan.IsFirstChoice is false)
                     {
-                        <span class="pill danger">Does not open</span>
+                        <span> - a fallback.</span>
                     }
-                </p>
-
-                @if (_plan.Migration is { } migration)
-                {
-                    <p class="@(migration.Outcome == "Migrated" ? "note" : "warn")">
-                        Migration <code>@migration.From</code> &rarr; <code>@migration.To</code>: @migration.Outcome
-                        @if (migration.Copied is false)
-                        {
-                            <span> - nothing was copied.</span>
-                        }
-                        @if (migration.Error is not null)
-                        {
-                            <span> - @migration.Error</span>
-                        }
-                    </p>
                 }
-
-                @if (_plan.Error is not null)
+                else
                 {
-                    <pre class="output">@_plan.Error</pre>
-                }
-
-                <div class="scroll-x">
-                    <table>
-                        <thead>
-                        <tr><th>Backend</th><th>Rank</th><th>Persistent</th><th>Available</th><th>Status</th><th>Why</th></tr>
-                        </thead>
-                        <tbody>
-                        @foreach (var candidate in _plan.Candidates ?? [])
-                        {
-                            <tr>
-                                <td><span class="storage-dot" data-name="@candidate.Name"></span> <code>@candidate.Name</code></td>
-                                <td>@(candidate.Rank?.ToString() ?? "-")</td>
-                                <td>@YesNo(candidate.Persistent)</td>
-                                <td>@YesNo(candidate.Available)</td>
-                                <td>@(candidate.Status ?? "-")</td>
-                                <td>@(candidate.Explanation ?? "-")</td>
-                            </tr>
-                        }
-                        </tbody>
-                    </table>
-                </div>
-
-                @* The notes name C# - WithMigrationMode(BsqliteStorageMigrationMode.AutomaticOnOpen) is one word to a
-                   line breaker - so they sit in a scroller rather than widening a phone's page. *@
-                @if (_plan.Notes is { Length: > 0 } notes)
-                {
-                    <div class="scroll-x">
-                        <table>
-                            <thead><tr><th>What it means</th></tr></thead>
-                            <tbody>
-                            @foreach (var note in notes)
-                            {
-                                <tr><td>@note</td></tr>
-                            }
-                            </tbody>
-                        </table>
-                    </div>
+                    <span class="bb-badge bb-badge-danger">Does not open</span>
                 }
+            </p>
 
-                @if (_plan.Log is { Length: > 0 } log)
-                {
-                    <pre class="output">@string.Join("\n", log)</pre>
-                }
-            }
-        </ChildContent>
-        <Extra>
-            @if (_plan?.Configuration is { } configuration)
+            @if (_plan.Migration is { } migration)
             {
-                <CodeBlock Title="The registration this plan describes" Language="csharp" Code="@configuration" />
+                <div class="@(migration.Outcome == "Migrated" ? "bb-note" : "bb-note bb-note-warn")">
+                    Migration <code>@migration.From</code> &rarr; <code>@migration.To</code>: @migration.Outcome
+                    @if (migration.Copied is false)
+                    {
+                        <span> - nothing was copied.</span>
+                    }
+                    @if (migration.Error is not null)
+                    {
+                        <span> - @migration.Error</span>
+                    }
+                </div>
             }
-        </Extra>
-    </DemoCard>
-
-    <DemoCard Step="Lab"
-              Title="Will this statement run on every backend?">
-        <Description>
-            <span>
-                <code>CheckBsqliteSql</code> puts SQL to the library's own static rules: the guards each backend's
-                declared capabilities switch on, and the table scan a live query is keyed by. It is pattern
-                matching over the text - nothing is executed, on the server or anywhere else.
-            </span>
-        </Description>
-        <ChildContent>
-            <form @onsubmit="CheckAsync" @onsubmit:preventDefault="true">
-                <input class="grow" @bind="_sql" disabled="@IsHydrating" aria-label="SQL to check" />
-                <button type="submit" disabled="@(_checking || IsHydrating)">@(_checking ? "Checking..." : "Check")</button>
-            </form>
-            <div class="row">
-                @foreach (var sample in SqlSamples)
-                {
-                    <button type="button" class="ghost" disabled="@(_checking || IsHydrating)" @onclick="() => CheckAsync(sample)">@sample</button>
-                }
-            </div>
 
-            @if (_checkError is not null)
+            @if (_plan.Error is not null)
             {
-                <p class="error">@_checkError</p>
+                <pre class="bb-log bq-output">@_plan.Error</pre>
             }
-            else if (_check?.Statements is { Length: > 0 } statements)
-            {
-                var statement = statements[0];
 
-                <div class="scroll-x">
-                    <table>
-                        <thead><tr><th>Backend</th><th>Verdict</th><th>The guard's message</th></tr></thead>
-                        <tbody>
-                        @foreach (var verdict in statement.Backends ?? [])
-                        {
-                            <tr>
-                                <td><span class="storage-dot" data-name="@verdict.Name"></span> <code>@verdict.Name</code></td>
-                                <td><span class="pill @(verdict.Accepted ? "ok" : "danger")">@(verdict.Accepted ? "accepted" : "refused")</span></td>
-                                <td>@(verdict.Error ?? "-")</td>
-                            </tr>
-                        }
-                        </tbody>
-                    </table>
-                </div>
-                <p>
-                    A live query over it watches:
-                    @if (statement.Tables is { Length: > 0 } tables)
+            <div class="bb-scroll">
+                <table class="bb-table bq-grid">
+                    <thead>
+                    <tr><th>Backend</th><th>Rank</th><th>Persistent</th><th>Available</th><th>Status</th><th>Why</th></tr>
+                    </thead>
+                    <tbody>
+                    @foreach (var candidate in _plan.Candidates ?? [])
                     {
-                        @foreach (var table in tables)
-                        {
-                            <span class="pill muted">@table</span>
-                            <span> </span>
-                        }
+                        <tr>
+                            <td class="bq-nowrap"><span class="bq-storage-dot" data-name="@candidate.Name" aria-hidden="true"></span> @candidate.Name</td>
+                            <td>@(candidate.Rank?.ToString() ?? "-")</td>
+                            <td>@YesNo(candidate.Persistent)</td>
+                            <td>@YesNo(candidate.Available)</td>
+                            <td class="bq-nowrap">@(candidate.Status ?? "-")</td>
+                            <td>@(candidate.Explanation ?? "-")</td>
+                        </tr>
                     }
-                    else
+                    </tbody>
+                </table>
+            </div>
+
+            @* The notes name C# - WithMigrationMode(BsqliteStorageMigrationMode.AutomaticOnOpen) is one word to a
+               line breaker - so they are a list whose items may break anywhere rather than widen a phone's page. *@
+            @if (_plan.Notes is { Length: > 0 } notes)
+            {
+                <p class="bq-panel-title">What it means</p>
+                <ul class="bb-detail-list bq-break">
+                    @foreach (var note in notes)
                     {
-                        <span class="empty">no table names - every write would refresh it</span>
+                        <li>@note</li>
                     }
-                </p>
-            }
-            else if (_check?.Error is { } error)
-            {
-                <p class="warn">@error</p>
+                </ul>
             }
-        </ChildContent>
-    </DemoCard>
-
-    <DemoCard Step="Search"
-              Title="Everything at once, with the next call to make">
-        <Description>
-            <span>
-                An agent rarely knows which corpus holds the answer. <code>SearchBsqlite</code> covers every
-                document, every public member of both packages, the storage backends, the setup guides, the labs
-                and the demo's sources at once - and every hit carries the exact follow-up call that returns it in full.
-            </span>
-        </Description>
-        <ChildContent>
-            <form @onsubmit="SearchAsync" @onsubmit:preventDefault="true">
-                <input type="search" class="grow" @bind="_query" disabled="@IsHydrating" placeholder="keep the data when opfs appears" aria-label="Search Bsqlite" />
-                <button type="submit" disabled="@(_searching || IsHydrating)">@(_searching ? "Searching..." : "Search")</button>
-            </form>
-
-            @if (_searchError is not null)
-            {
-                <p class="error">@_searchError</p>
-            }
-            else if (_search?.Hits is { Length: > 0 } hits)
+
+            @if (_plan.Log is { Length: > 0 } log)
             {
-                <div class="scroll-x">
-                    <table>
-                        <thead><tr><th>Kind</th><th>Title</th><th>Follow-up call</th></tr></thead>
-                        <tbody>
-                        @foreach (var hit in hits)
-                        {
-                            <tr>
-                                <td><span class="pill muted">@hit.Kind</span></td>
-                                <td>@hit.Title</td>
-                                <td class="mono">@hit.Tool</td>
-                            </tr>
-                        }
-                        </tbody>
-                    </table>
-                </div>
+                <pre class="bb-log bq-output">@string.Join("\n", log)</pre>
             }
-            else if (_search is not null)
+        }
+    </ChildContent>
+    <Extra>
+        @if (_plan?.Configuration is { } configuration)
+        {
+            <CodeBlock Title="The registration this plan describes" Language="csharp" Code="@configuration" />
+        }
+    </Extra>
+</DemoCard>
+
+<DemoCard Step="Lab"
+          Title="Will this statement run on every backend?">
+    <Description>
+        <code>CheckBsqliteSql</code> puts SQL to the library's own static rules: the guards each backend's
+        declared capabilities switch on, and the table scan a live query is keyed by. It is pattern
+        matching over the text - nothing is executed, on the server or anywhere else.
+    </Description>
+    <ChildContent>
+        <form class="bb-toolbar" @onsubmit="CheckAsync" @onsubmit:preventDefault="true">
+            <input class="bq-grow bb-mono" @bind="_sql" disabled="@IsHydrating" aria-label="SQL to check" />
+            <button type="submit" class="btn btn-primary" disabled="@(_checking || IsHydrating)">@(_checking ? "Checking..." : "Check")</button>
+        </form>
+        <div class="bb-toolbar">
+            @foreach (var sample in SqlSamples)
             {
-                <p class="empty">@(_search.Message ?? "Nothing matched that.")</p>
+                <button type="button" class="btn btn-secondary bq-btn-sm bb-mono" disabled="@(_checking || IsHydrating)" @onclick="() => CheckAsync(sample)">@sample</button>
             }
-        </ChildContent>
-    </DemoCard>
+        </div>
 
-    <section class="card">
-        <h2>Tools</h2>
-        @if (_catalog is null)
+        @if (_checkError is not null)
         {
-            <p class="empty">@(IsHydrating ? "The list loads once the page is interactive." : "Loading the catalog...")</p>
+            <div class="bb-note bb-note-danger">@_checkError</div>
         }
-        else
+        else if (_check?.Statements is { Length: > 0 } statements)
         {
-            <p>
-                @_catalog.Tools.Length of them, listed straight from the attributes that declare them - so this table
-                cannot fall out of step with the server.
-            </p>
-            <div class="scroll-x">
-                <table>
-                    <thead><tr><th>Tool</th><th>Arguments</th><th>What it answers</th></tr></thead>
+            var statement = statements[0];
+
+            <div class="bb-scroll">
+                <table class="bb-table bq-grid">
+                    <thead><tr><th>Backend</th><th>Verdict</th><th>The guard's message</th></tr></thead>
                     <tbody>
-                    @foreach (var tool in _catalog.Tools)
+                    @foreach (var verdict in statement.Backends ?? [])
                     {
                         <tr>
-                            <td><code>@tool.Name</code></td>
-                            @* One argument to a line: the planner takes nine, and on one unbreakable line they would push
-                               the description out of view. *@
-                            <td>
-                                @if (tool.Parameters is { Length: > 0 } parameters)
-                                {
-                                    @foreach (var parameter in parameters)
-                                    {
-                                        <code>@parameter</code><br />
-                                    }
-                                }
-                                else
-                                {
-                                    <span class="empty">none</span>
-                                }
-                            </td>
-                            <td><strong>@tool.Title</strong> - @FirstSentence(tool.Description)</td>
+                            <td class="bq-nowrap"><span class="bq-storage-dot" data-name="@verdict.Name" aria-hidden="true"></span> @verdict.Name</td>
+                            <td><span class="bb-badge @(verdict.Accepted ? "bb-badge-success" : "bb-badge-danger")">@(verdict.Accepted ? "accepted" : "refused")</span></td>
+                            <td>@(verdict.Error ?? "-")</td>
                         </tr>
                     }
                     </tbody>
                 </table>
             </div>
-        }
-    </section>
-
-    <section class="card">
-        <h2>Prompts and resources</h2>
-        <p>
-            Prompts are the workflows - the order to call the tools in for a whole job - because the failure mode of an
-            agent holding a shelf of tools is calling them in an order that skips the check which would have caught
-            the bug. Resources are the same knowledge as <code>bsqlite://</code> URIs, for clients that attach
-            documentation up front; they read the same catalogs the tools do.
-        </p>
-        @if (_catalog is not null)
-        {
-            <div class="grid">
-                @foreach (var prompt in _catalog.Prompts)
+            <p class="bq-verdict">
+                A live query over it watches:
+                @if (statement.Tables is { Length: > 0 } tables)
                 {
-                    <div>
-                        <p><code>@prompt.Name</code></p>
-                        <p>@prompt.Description</p>
-                    </div>
+                    @foreach (var table in tables)
+                    {
+                        <span class="bb-badge bq-badge-neutral">@table</span>
+                        <span> </span>
+                    }
                 }
-            </div>
-            @* A table rather than a list: a resource's example URI is one unbreakable word, and only a scroller
-               keeps it from widening a phone's page. *@
-            <div class="scroll-x">
-                <table>
-                    <thead><tr><th>Resource</th><th>What it holds</th></tr></thead>
+                else
+                {
+                    <span class="bb-soft">no table names - every write would refresh it</span>
+                }
+            </p>
+        }
+        else if (_check?.Error is { } error)
+        {
+            <div class="bb-note bb-note-warn">@error</div>
+        }
+    </ChildContent>
+</DemoCard>
+
+<DemoCard Step="Search"
+          Title="Everything at once, with the next call to make">
+    <Description>
+        An agent rarely knows which corpus holds the answer. <code>SearchBsqlite</code> covers every
+        document, every public member of both packages, the storage backends, the setup guides, the labs
+        and the demo's sources at once - and every hit carries the exact follow-up call that returns it in full.
+    </Description>
+    <ChildContent>
+        <form class="bb-toolbar" @onsubmit="SearchAsync" @onsubmit:preventDefault="true">
+            <input type="search" class="bq-grow" @bind="_query" disabled="@IsHydrating" placeholder="keep the data when opfs appears" aria-label="Search Bsqlite" />
+            <button type="submit" class="btn btn-primary" disabled="@(_searching || IsHydrating)">@(_searching ? "Searching..." : "Search")</button>
+        </form>
+
+        @if (_searchError is not null)
+        {
+            <div class="bb-note bb-note-danger">@_searchError</div>
+        }
+        else if (_search?.Hits is { Length: > 0 } hits)
+        {
+            <div class="bb-scroll">
+                <table class="bb-table bq-grid bq-grid-prose">
+                    <thead><tr><th>Kind</th><th>Title</th><th>Follow-up call</th></tr></thead>
                     <tbody>
-                    @foreach (var resource in _catalog.Resources)
+                    @foreach (var hit in hits)
                     {
                         <tr>
-                            <td><code>@resource.Name</code></td>
-                            <td>@resource.Description</td>
+                            <td><span class="bb-badge bq-badge-neutral">@hit.Kind</span></td>
+                            <td>@hit.Title</td>
+                            <td class="bb-mono bq-small">@hit.Tool</td>
                         </tr>
                     }
                     </tbody>
                 </table>
             </div>
         }
-    </section>
-
-    <section class="card">
-        <h2>The same tools over plain HTTP</h2>
-        <p>Open one in a browser tab to read exactly what an agent is handed.</p>
-        <div class="scroll-x">
-            <table>
-                <thead><tr><th>Tool</th><th>Example</th></tr></thead>
+        else if (_search is not null)
+        {
+            <p class="bb-muted">@(_search.Message ?? "Nothing matched that.")</p>
+        }
+    </ChildContent>
+</DemoCard>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Tools</h3>
+    @if (_catalog is null)
+    {
+        <p class="bb-muted">@(IsHydrating ? "The list loads once the page is interactive." : "Loading the catalog...")</p>
+    }
+    else
+    {
+        <p>
+            @_catalog.Tools.Length of them, listed straight from the attributes that declare them - so this table
+            cannot fall out of step with the server.
+        </p>
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>Tool</th><th>Arguments</th><th>What it answers</th></tr></thead>
+                <tbody>
+                @foreach (var tool in _catalog.Tools)
+                {
+                    <tr>
+                        <td class="bb-table-key"><code>@tool.Name</code></td>
+                        @* One argument to a line: the planner takes nine, and on one unbreakable line they would push
+                           the description out of view. *@
+                        <td class="bb-table-key">
+                            @if (tool.Parameters is { Length: > 0 } parameters)
+                            {
+                                @foreach (var parameter in parameters)
+                                {
+                                    <code>@parameter</code><br />
+                                }
+                            }
+                            else
+                            {
+                                <span class="bb-soft">none</span>
+                            }
+                        </td>
+                        <td><strong>@tool.Title</strong> - @FirstSentence(tool.Description)</td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    }
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Prompts and resources</h3>
+    <p>
+        Prompts are the workflows - the order to call the tools in for a whole job - because the failure mode of an
+        agent holding a shelf of tools is calling them in an order that skips the check which would have caught
+        the bug. Resources are the same knowledge as <code>bsqlite://</code> URIs, for clients that attach
+        documentation up front; they read the same catalogs the tools do.
+    </p>
+    @if (_catalog is not null)
+    {
+        <div class="bb-grid">
+            @foreach (var prompt in _catalog.Prompts)
+            {
+                <div class="bb-card">
+                    <p class="bq-panel-title"><code>@prompt.Name</code></p>
+                    <p class="bb-card-desc">@prompt.Description</p>
+                </div>
+            }
+        </div>
+        @* A table rather than a list: a resource's example URI is one unbreakable word, and only a scroller
+           keeps it from widening a phone's page. *@
+        <div class="bb-scroll">
+            <table class="bb-table">
+                <thead><tr><th>Resource</th><th>What it holds</th></tr></thead>
                 <tbody>
-                @foreach (var link in HttpLinks)
+                @foreach (var resource in _catalog.Resources)
                 {
                     <tr>
-                        <td><code>@ToolOf(link)</code></td>
-                        <td class="mono"><a href="@link" target="_blank" rel="noopener">@Uri.UnescapeDataString(link)</a></td>
+                        <td class="bb-table-key"><code>@resource.Name</code></td>
+                        <td>@resource.Description</td>
                     </tr>
                 }
                 </tbody>
             </table>
         </div>
-    </section>
-</div>
+    }
+</section>
+
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-warning"></span> The same tools over plain HTTP</h3>
+    <p>Open one in a browser tab to read exactly what an agent is handed.</p>
+    <div class="bb-scroll">
+        <table class="bb-table">
+            <thead><tr><th>Tool</th><th>Example</th></tr></thead>
+            <tbody>
+            @foreach (var link in HttpLinks)
+            {
+                <tr>
+                    <td class="bb-table-key"><code>@ToolOf(link)</code></td>
+                    <td class="bb-mono bq-small"><a href="@link" target="_blank" rel="noopener">@Uri.UnescapeDataString(link)</a></td>
+                </tr>
+            }
+            </tbody>
+        </table>
+    </div>
+</section>
 
 @code {
     // The response shapes of the endpoints this page calls. They mirror the server's DTOs rather than sharing
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/NotFoundPage.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/NotFoundPage.razor
index f5ffde1b49f..0f69f198aa4 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/NotFoundPage.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/NotFoundPage.razor
@@ -1,16 +1,20 @@
 @page "/not-found"
+@layout MainLayout
 
 @* The router shows this for an unknown route in the browser, and the host re-executes a deep link to one
    through the same route (UseStatusCodePagesWithReExecute), keeping the status code at 404. *@
 
 <PageTitle>Not found · Bsqlite</PageTitle>
 
-<header class="page-head">
-    <p class="eyebrow">404</p>
-    <h1>That page is not in this demo</h1>
-    <p class="lead">
-        The sidebar lists every demo. If you followed a link from the documentation, the
-        page may have been renamed - the overview links to all of them.
+<div class="bb-error bb-error-404">
+    <h1>404</h1>
+    <p>
+        That page is not in this demo. If you followed a link from the documentation, the page may have been
+        renamed - the docs list every demo.
     </p>
-</header>
-<a class="btn" href="">Back to the overview <Icon Name="arrow-right" /></a>
+    <div class="bb-try bb-error-actions">
+        <a href="" class="btn btn-primary">Go to the home page</a>
+        <a href="getting-started" class="btn btn-secondary">Browse the docs</a>
+    </div>
+    <p class="bb-error-hint">Looking for something specific? Press <kbd>/</kbd> to search.</p>
+</div>
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Orders.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Orders.razor
index 6c6c4d2bfad..f0cbb6c0eae 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Orders.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Orders.razor
@@ -10,157 +10,166 @@
     deleted.
 </PageHeader>
 
+<StorageSwitcher />
+
 @if (_error is not null)
 {
-    <p class="error">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 
-<div class="split">
-    <section class="card">
-        <h2>Orders</h2>
-        <p class="try">
-            <b>Try</b>
-            <span>
-                Move an order to <em>Shipped</em>. The <a href="queries">SQL</a> page holds a live
-                query over this table - open it in a second tab and watch it re-run.
-            </span>
-        </p>
-        <div class="toolbar">
-            <input type="search" placeholder="Filter number or customer" @bind="_filter" @bind:event="oninput" />
-            <span class="grow"></span>
-            <button type="button" @onclick="NewOrder" disabled="@(_busy || _context is null)">New order</button>
-        </div>
-        <div class="scroll-x">
-        <table>
-            <thead>
-            <tr><th>Number</th><th>Customer</th><th>Status</th><th>Ordered</th><th>Ship by</th><th>Total</th></tr>
-            </thead>
-            <tbody>
-            @foreach (var order in Visible)
-            {
-                <tr class="clickable @(order.Id == _selected?.Id ? "selected" : null)" @onclick="() => Select(order)">
-                    <td class="mono">@order.Number</td>
-                    <td>@order.Customer?.DisplayName</td>
-                    <td><span class="pill @StatusClass(order.Status)">@order.Status</span></td>
-                    <td>@SampleFormat.When(order.OrderedAt)</td>
-                    <td>@SampleFormat.Day(order.ShipBy)</td>
-                    <td>@SampleFormat.Money(order.Lines.Sum(l => l.UnitPrice * l.Quantity))</td>
-                </tr>
-            }
-            </tbody>
-        </table>
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Orders</h3>
+    <p class="bb-card-desc">
+        Every order with its customer and its lines, newest first. Click a row to open its header and its lines
+        in the panel under the table.
+    </p>
+    <div class="bb-note bq-try">
+        <strong>Try</strong>
+        Move an order to <em>Shipped</em>. The <a href="queries">SQL</a> page holds a live
+        query over this table - open it in a second tab and watch it re-run.
+    </div>
+
+    @* Wide: a six- or seven-column grid with its editor under it does not fit beside the "On this page"
+       rail, so this page gives the rail up. *@
+    <div class="bb-demo bb-page-wide">
+        <div class="bb-demo-bar">
+            <span class="bb-demo-label">Live</span>
+            <input type="search" placeholder="Filter number or customer" aria-label="Filter orders" @bind="_filter" @bind:event="oninput" />
+            <button type="button" class="btn btn-primary" @onclick="NewOrder" disabled="@(_busy || _context is null)">New order</button>
         </div>
-        <CodeBlock Title="Loading the graph" Language="csharp" Code="@Snippets.Orders.Read" />
-    </section>
-    <section class="card">
-        @if (_selected is null)
-        {
-            <h2>Detail</h2>
-            <p>Select an order, or create one.</p>
-        }
-        else
-        {
-            <h2>@_selected.Number</h2>
-            <form class="stack-form" @onsubmit="SaveHeaderAsync" @onsubmit:preventDefault="true">
-                <label>Customer
-                    <select @bind="_selected.CustomerId">
-                        @foreach (var customer in _customers)
-                        {
-                            <option value="@customer.Id">@customer.DisplayName</option>
-                        }
-                    </select>
-                </label>
-                <label>Status
-                    <select @bind="_status">
-                        @foreach (var status in Enum.GetValues<OrderStatus>())
-                        {
-                            <option value="@status">@status</option>
-                        }
-                    </select>
-                </label>
-                <label>Ship by <input type="date" @bind="_selected.ShipBy" /></label>
-                <label>Notes <textarea @bind="_selected.Notes"></textarea></label>
-                <div class="row">
-                    <button type="submit" disabled="@_busy">Save header</button>
-                    <button type="button" class="danger" @onclick="DeleteOrderAsync" disabled="@_busy">Delete order</button>
-                </div>
-            </form>
-            <h3>Lines</h3>
-            <table>
-                <thead><tr><th>Product</th><th>Qty</th><th>Unit</th><th></th></tr></thead>
+
+        <div class="bb-scroll">
+            <table class="bb-table bq-grid" data-rows="orders">
+                <thead>
+                <tr><th>Number</th><th>Customer</th><th>Status</th><th>Ordered</th><th>Ship by</th><th>Total</th></tr>
+                </thead>
                 <tbody>
-                @foreach (var line in _selected.Lines)
+                @foreach (var order in Visible)
                 {
-                    <tr>
-                        <td>@(line.Product?.Name ?? $"#{line.ProductId}")</td>
-                        <td>@line.Quantity</td>
-                        <td>@SampleFormat.Money(line.UnitPrice)</td>
-                        <td class="actions">
-                            <button type="button" class="danger" @onclick="() => RemoveLineAsync(line)">Remove</button>
-                        </td>
+                    <tr class="bq-clickable @(order.Id == _selected?.Id ? "bq-selected" : null)" @onclick="() => Select(order)">
+                        <td class="bq-nowrap">@order.Number</td>
+                        <td class="bq-name">@order.Customer?.DisplayName</td>
+                        <td><span class="@StatusClass(order.Status)">@order.Status</span></td>
+                        <td>@SampleFormat.When(order.OrderedAt)</td>
+                        <td class="bq-nowrap">@SampleFormat.Day(order.ShipBy)</td>
+                        <td class="bq-num">@SampleFormat.Money(order.Lines.Sum(l => l.UnitPrice * l.Quantity))</td>
                     </tr>
                 }
                 </tbody>
             </table>
-            <form class="stack-form" @onsubmit="AddLineAsync" @onsubmit:preventDefault="true">
-                <label>Add product
-                    <select @bind="_newProductId">
-                        @foreach (var product in _products)
+        </div>
+
+        <div class="bb-stage">
+            @if (_selected is null)
+            {
+                <p class="bq-panel-title">Detail</p>
+                <p class="bb-muted">Select an order, or create one.</p>
+            }
+            else
+            {
+                <p class="bq-panel-title">@_selected.Number</p>
+                <div class="bb-split">
+                    <form class="bq-form" @onsubmit="SaveHeaderAsync" @onsubmit:preventDefault="true">
+                        <label class="bb-field">Customer
+                            <select @bind="_selected.CustomerId">
+                                @foreach (var customer in _customers)
+                                {
+                                    <option value="@customer.Id">@customer.DisplayName</option>
+                                }
+                            </select>
+                        </label>
+                        <label class="bb-field">Status
+                            <select @bind="_status">
+                                @foreach (var status in Enum.GetValues<OrderStatus>())
+                                {
+                                    <option value="@status">@status</option>
+                                }
+                            </select>
+                        </label>
+                        <label class="bb-field">Ship by <input type="date" @bind="_selected.ShipBy" /></label>
+                        <label class="bb-field">Notes <textarea @bind="_selected.Notes"></textarea></label>
+                        <div class="bb-toolbar">
+                            <button type="submit" class="btn btn-primary" disabled="@_busy">Save header</button>
+                            <button type="button" class="btn bq-btn-danger" @onclick="DeleteOrderAsync" disabled="@_busy">Delete order</button>
+                        </div>
+                    </form>
+
+                    <div>
+                        <p class="bq-panel-title">Lines</p>
+                        <table class="bb-table bq-grid bq-grid-prose">
+                            <thead><tr><th>Product</th><th>Qty</th><th>Unit</th><th><span class="bq-sr">Actions</span></th></tr></thead>
+                            <tbody>
+                            @foreach (var line in _selected.Lines)
+                            {
+                                <tr>
+                                    <td>@(line.Product?.Name ?? $"#{line.ProductId}")</td>
+                                    <td class="bq-num">@line.Quantity</td>
+                                    <td class="bq-num">@SampleFormat.Money(line.UnitPrice)</td>
+                                    <td class="bb-table-action">
+                                        <button type="button" class="btn bq-btn-danger bq-btn-sm" @onclick="() => RemoveLineAsync(line)">Remove</button>
+                                    </td>
+                                </tr>
+                            }
+                            </tbody>
+                        </table>
+                        <form class="bq-form" @onsubmit="AddLineAsync" @onsubmit:preventDefault="true">
+                            <label class="bb-field">Add product
+                                <select @bind="_newProductId">
+                                    @foreach (var product in _products)
+                                    {
+                                        <option value="@product.Id">@product.Sku - @product.Name</option>
+                                    }
+                                </select>
+                            </label>
+                            <label class="bb-field">Quantity <input type="number" min="1" @bind="_newQty" /></label>
+                            <div class="bb-toolbar">
+                                <button type="submit" class="btn btn-primary" disabled="@(_busy || _selected.Id == 0)">Add line</button>
+                            </div>
+                        </form>
+                        @if (_selected.Id == 0)
                         {
-                            <option value="@product.Id">@product.Sku - @product.Name</option>
+                            <p class="bb-muted bq-small">Save the header before adding lines.</p>
                         }
-                    </select>
-                </label>
-                <label>Quantity <input type="number" min="1" @bind="_newQty" /></label>
-                <button type="submit" disabled="@(_busy || _selected.Id == 0)">Add line</button>
-            </form>
-            @if (_selected.Id == 0)
-            {
-                <p class="empty">Save the header before adding lines.</p>
+                    </div>
+                </div>
             }
-        }
-    </section>
-</div>
-
-<div class="stack-lg">
-    <DemoCard Title="Saving a header, then its lines"
-              CodeTitle="Adding a line"
-              Code="@Snippets.Orders.Graph">
-        <Description>
-            <span>
-                The header is saved first because the lines need its generated key, and the unit
-                price is copied onto the line so later price changes do not rewrite history. Both
-                saves go through the same connection in the same worker.
-            </span>
-        </Description>
-    </DemoCard>
-
-    <DemoCard Title="Why the grid sorts by Id"
-              CodeTitle="Sorting a DateTimeOffset column"
-              Code="@Snippets.Orders.Offset">
-        <Description>
-            <span>
-                A <code>DateTimeOffset</code> round-trips correctly, but SQLite has no type that
-                can order one, so the stock SQLite provider refuses <code>ORDER BY</code> on it -
-                on a server exactly as here. Bsqlite does not paper over that: same provider,
-                same rules.
-            </span>
-        </Description>
-    </DemoCard>
-
-    <DemoCard Title="The relationships behind this page"
-              CodeTitle="SalesOrderConfiguration.cs"
-              Code="@Snippets.Orders.Configuration"
-              CodeOpen="false">
-        <Description>
-            <span>
-                Status is stored as TEXT so an exported <code>.db</code> stays readable and
-                reordering the enum cannot silently change history. Deleting a customer who has
-                orders, or a product on a line, is refused by <code>Restrict</code>.
-            </span>
-        </Description>
-    </DemoCard>
-</div>
+        </div>
+    </div>
+
+    <CodeBlock Title="Loading the graph" Language="csharp" Code="@Snippets.Orders.Read" />
+</section>
+
+<DemoCard Title="Saving a header, then its lines"
+          CodeTitle="Adding a line"
+          Code="@Snippets.Orders.Graph">
+    <Description>
+        The header is saved first because the lines need its generated key, and the unit
+        price is copied onto the line so later price changes do not rewrite history. Both
+        saves go through the same connection in the same worker.
+    </Description>
+</DemoCard>
+
+<DemoCard Title="Why the grid sorts by Id"
+          CodeTitle="Sorting a DateTimeOffset column"
+          Code="@Snippets.Orders.Offset">
+    <Description>
+        A <code>DateTimeOffset</code> round-trips correctly, but SQLite has no type that
+        can order one, so the stock SQLite provider refuses <code>ORDER BY</code> on it -
+        on a server exactly as here. Bsqlite does not paper over that: same provider,
+        same rules.
+    </Description>
+</DemoCard>
+
+<DemoCard Title="The relationships behind this page"
+          CodeTitle="SalesOrderConfiguration.cs"
+          Code="@Snippets.Orders.Configuration"
+          CodeOpen="false">
+    <Description>
+        Status is stored as TEXT so an exported <code>.db</code> stays readable and
+        reordering the enum cannot silently change history. Deleting a customer who has
+        orders, or a product on a line, is refused by <code>Restrict</code>.
+    </Description>
+</DemoCard>
 
 @code {
     private AppDbContext? _context;
@@ -193,11 +202,11 @@
 
     private static string StatusClass(OrderStatus status) => status switch
     {
-        OrderStatus.Shipped => "ok",
-        OrderStatus.Cancelled => "danger",
-        OrderStatus.Draft => "muted",
-        OrderStatus.Packed => "warn",
-        _ => string.Empty,
+        OrderStatus.Shipped => "bb-badge bb-badge-success",
+        OrderStatus.Cancelled => "bb-badge bb-badge-danger",
+        OrderStatus.Draft => "bb-badge bq-badge-neutral",
+        OrderStatus.Packed => "bb-badge bb-badge-warn",
+        _ => "bb-badge",
     };
 
     private async Task LoadAsync()
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Queries.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Queries.razor
index dec3aa22c11..0079540b0a5 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Queries.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Queries.razor
@@ -11,154 +11,142 @@
     database and shows exactly what it ran.
 </PageHeader>
 
+<StorageSwitcher />
+
 @if (_error is not null)
 {
-    <p class="error">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 
-<div class="stack-lg">
-    <DemoCard Step="Live"
-              Title="A query that re-runs itself"
-              CodeTitle="Pages/Queries.razor"
-              Code="@Snippets.Sql.LiveInclude">
-        <Description>
-            <span>
-                Live queries are table-level: Bsqlite reads the tables out of the generated
-                SQL, then re-executes the query when any of them is written - by this tab or, over
-                a <code>BroadcastChannel</code>, by another one. <code>Include</code> is honoured,
-                so the customer below comes along.
-            </span>
-        </Description>
-        <Try>
-            <span>
-                Open <a href="orders">Orders</a> in a second tab and change a status. This table
-                updates without a refresh and without polling.
-            </span>
-        </Try>
-        <ChildContent>
-            @if (_liveRows.Count == 0)
-            {
-                <p class="empty">No orders yet.</p>
-            }
-            else
-            {
-                <div class="scroll-x">
-                    <table>
-                        <thead><tr><th>Number</th><th>Customer</th><th>Status</th><th>Ordered</th></tr></thead>
-                        <tbody>
-                        @foreach (var order in _liveRows)
-                        {
-                            <tr>
-                                <td class="mono">@order.Number</td>
-                                <td>@order.Customer?.DisplayName</td>
-                                <td>@order.Status</td>
-                                <td>@SampleFormat.When(order.OrderedAt)</td>
-                            </tr>
-                        }
-                        </tbody>
-                    </table>
-                </div>
-            }
-        </ChildContent>
-    </DemoCard>
-
-    <DemoCard Step="LINQ"
-              Title="Comparing decimals in SQL"
-              CodeTitle="Pages/Queries.razor"
-              Code="@Snippets.Sql.QueryString">
-        <Description>
-            <span>
-                <code>decimal</code> is not a SQLite affinity, so EF stores it as TEXT and compares
-                it with <code>ef_compare</code> under the <code>EF_DECIMAL</code> collation. Those
-                functions run on 96-bit coefficients inside the worker - not on JavaScript numbers,
-                which would quietly round.
-            </span>
-        </Description>
-        <Try>
-            <span>Raise the threshold and run it: the generated SQL appears underneath.</span>
-        </Try>
-        <ChildContent>
-            <form @onsubmit="FilterDecimalAsync" @onsubmit:preventDefault="true">
-                <label>Credit limit ≥ <input @bind="_minCredit" type="number" step="0.01" /></label>
-                <button type="submit" disabled="@(_busy || _context is null)">Run LINQ</button>
-            </form>
-            @if (_decimalRows is not null)
-            {
-                <p>@(_decimalRows.Count) customer(s) matched.</p>
-                <ul class="plain">
-                    @foreach (var customer in _decimalRows)
+<DemoCard Step="Live"
+          Title="A query that re-runs itself"
+          CodeTitle="Pages/Queries.razor"
+          Code="@Snippets.Sql.LiveInclude">
+    <Description>
+        Live queries are table-level: Bsqlite reads the tables out of the generated
+        SQL, then re-executes the query when any of them is written - by this tab or, over
+        a <code>BroadcastChannel</code>, by another one. <code>Include</code> is honoured,
+        so the customer below comes along.
+    </Description>
+    <Try>
+        Open <a href="orders">Orders</a> in a second tab and change a status. This table
+        updates without a refresh and without polling.
+    </Try>
+    <ChildContent>
+        @if (_liveRows.Count == 0)
+        {
+            <p class="bb-muted">No orders yet.</p>
+        }
+        else
+        {
+            <div class="bb-scroll">
+                <table class="bb-table bq-grid" data-rows="live-orders">
+                    <thead><tr><th>Number</th><th>Customer</th><th>Status</th><th>Ordered</th></tr></thead>
+                    <tbody>
+                    @foreach (var order in _liveRows)
                     {
-                        <li>@customer.DisplayName - @SampleFormat.Money(customer.CreditLimit)</li>
+                        <tr>
+                            <td class="bq-nowrap">@order.Number</td>
+                            <td>@order.Customer?.DisplayName</td>
+                            <td>@order.Status</td>
+                            <td>@SampleFormat.When(order.OrderedAt)</td>
+                        </tr>
                     }
-                </ul>
-            }
-        </ChildContent>
-        <Extra>
-            @if (_decimalSql is not null)
-            {
-                <CodeBlock Title="query.ToQueryString() - what EF actually sent" Language="sql" Code="@_decimalSql" />
-            }
-        </Extra>
-    </DemoCard>
+                    </tbody>
+                </table>
+            </div>
+        }
+    </ChildContent>
+</DemoCard>
 
-    <DemoCard Step="Raw SQL"
-              Title="REGEXP, registered on every open"
-              CodeTitle="Pages/Queries.razor"
-              Code="@Snippets.Sql.Regexp">
-        <Description>
-            <span>
-                SQLite ships no <code>regexp</code> implementation; a host has to supply one. The
-                worker registers it on every connection, so the pattern is a JavaScript
-                <code>RegExp</code> - lookaround and backreferences included.
-            </span>
-        </Description>
-        <Try>
-            <span>Try <code>^a</code>, or <code>northwind|alpine</code>, against the seeded emails.</span>
-        </Try>
-        <ChildContent>
-            <form @onsubmit="FilterRegexAsync" @onsubmit:preventDefault="true">
-                <input @bind="_pattern" placeholder="Email REGEXP" />
-                <button type="submit" disabled="@(_busy || _context is null)">Run SQL</button>
-            </form>
-            @if (_regexRows is not null)
-            {
-                <p>@(_regexRows.Count) row(s) matching <code>@_pattern</code>.</p>
-                <ul class="plain">
-                    @foreach (var customer in _regexRows)
-                    {
-                        <li>@customer.DisplayName - @customer.Email</li>
-                    }
-                </ul>
-            }
-        </ChildContent>
-    </DemoCard>
+<DemoCard Step="LINQ"
+          Title="Comparing decimals in SQL"
+          CodeTitle="Pages/Queries.razor"
+          Code="@Snippets.Sql.QueryString">
+    <Description>
+        <code>decimal</code> is not a SQLite affinity, so EF stores it as TEXT and compares
+        it with <code>ef_compare</code> under the <code>EF_DECIMAL</code> collation. Those
+        functions run on 96-bit coefficients inside the worker - not on JavaScript numbers,
+        which would quietly round.
+    </Description>
+    <Try>Raise the threshold and run it: the generated SQL appears underneath.</Try>
+    <ChildContent>
+        <form class="bb-fields" @onsubmit="FilterDecimalAsync" @onsubmit:preventDefault="true">
+            <label class="bb-field">Credit limit ≥ <input @bind="_minCredit" type="number" step="0.01" /></label>
+            <button type="submit" class="btn btn-primary" disabled="@(_busy || _context is null)">Run LINQ</button>
+        </form>
+        @if (_decimalRows is not null)
+        {
+            <p class="bb-muted">@(_decimalRows.Count) customer(s) matched.</p>
+            <ul class="bb-detail-list">
+                @foreach (var customer in _decimalRows)
+                {
+                    <li>@customer.DisplayName - @SampleFormat.Money(customer.CreditLimit)</li>
+                }
+            </ul>
+        }
+    </ChildContent>
+    <Extra>
+        @if (_decimalSql is not null)
+        {
+            <CodeBlock Title="query.ToQueryString() - what EF actually sent" Language="sql" Code="@_decimalSql" />
+        }
+    </Extra>
+</DemoCard>
+
+<DemoCard Step="Raw SQL"
+          Title="REGEXP, registered on every open"
+          CodeTitle="Pages/Queries.razor"
+          Code="@Snippets.Sql.Regexp">
+    <Description>
+        SQLite ships no <code>regexp</code> implementation; a host has to supply one. The
+        worker registers it on every connection, so the pattern is a JavaScript
+        <code>RegExp</code> - lookaround and backreferences included.
+    </Description>
+    <Try>Try <code>^a</code>, or <code>northwind|alpine</code>, against the seeded emails.</Try>
+    <ChildContent>
+        <form class="bb-fields" @onsubmit="FilterRegexAsync" @onsubmit:preventDefault="true">
+            <label class="bb-field">Email REGEXP <input @bind="_pattern" placeholder="Email REGEXP" /></label>
+            <button type="submit" class="btn btn-primary" disabled="@(_busy || _context is null)">Run SQL</button>
+        </form>
+        @if (_regexRows is not null)
+        {
+            <p class="bb-muted">@(_regexRows.Count) row(s) matching <code>@_pattern</code>.</p>
+            <ul class="bb-detail-list">
+                @foreach (var customer in _regexRows)
+                {
+                    <li>@customer.DisplayName - @customer.Email</li>
+                }
+            </ul>
+        }
+    </ChildContent>
+</DemoCard>
 
-    <DemoCard Step="ADO.NET"
-              Title="No EF at all"
-              CodeTitle="Commands on the session connection"
-              Code="@Snippets.Sql.Ado">
-        <Description>
-            <span>
-                The session exposes a <code>DbConnection</code> that is already open. Commands,
-                parameters, and readers behave as you expect, with one rule: the async overloads
-                only. The version below is read from wa-sqlite in the worker, not from a native
-                <code>e_sqlite3</code>.
-            </span>
-        </Description>
-        <ChildContent>
-            <button type="button" class="secondary" @onclick="ReadVersionAsync" disabled="@_busy">
+<DemoCard Step="ADO.NET"
+          Title="No EF at all"
+          CodeTitle="Commands on the session connection"
+          Code="@Snippets.Sql.Ado">
+    <Description>
+        The session exposes a <code>DbConnection</code> that is already open. Commands,
+        parameters, and readers behave as you expect, with one rule: the async overloads
+        only. The version below is read from wa-sqlite in the worker, not from a native
+        <code>e_sqlite3</code>.
+    </Description>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary bb-mono" @onclick="ReadVersionAsync" disabled="@_busy">
                 SELECT sqlite_version()
             </button>
             @if (_sqliteVersion is not null)
             {
-                <p>sqlite_version() = <code>@_sqliteVersion</code></p>
+                <span>sqlite_version() = <code>@_sqliteVersion</code></span>
             }
-        </ChildContent>
-        <Extra>
-            <CodeBlock Title="Transactions" Language="csharp" Code="@Snippets.Sql.Transaction" Open="false" />
-        </Extra>
-    </DemoCard>
-</div>
+        </div>
+    </ChildContent>
+    <Extra>
+        <CodeBlock Title="Transactions" Language="csharp" Code="@Snippets.Sql.Transaction" Open="false" />
+    </Extra>
+</DemoCard>
 
 @code {
     private AppDbContext? _context;
diff --git a/src/Utilities/Bsqlite/Demo/Client/Pages/Storage.razor b/src/Utilities/Bsqlite/Demo/Client/Pages/Storage.razor
index 9597549b163..2d3045edc5e 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Pages/Storage.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Pages/Storage.razor
@@ -11,227 +11,231 @@
     silently vanish the day OPFS becomes available.
 </PageHeader>
 
+<StorageSwitcher />
+
 @if (_error is not null)
 {
-    <p class="error">@_error</p>
+    <div class="bb-note bb-note-danger" role="alert">@_error</div>
 }
 
-<div class="stack-lg">
-    <DemoCard Step="Configure"
-              Title="Preference order, and what counts as acceptable"
-              CodeTitle="Program.cs"
-              Code="@Snippets.Storage.Selection">
-        <Description>
-            <span>
-                Every registered provider is a candidate. <code>AllowNonPersistentFallback()</code>
-                is what makes in-memory acceptable at all - without it, an origin with no persistent
-                backend fails to open rather than quietly losing data on reload.
-            </span>
-        </Description>
-        <Try>
-            <span>
-                The session bar above is this API in action:
-                <strong>Move data</strong> migrates the image, <strong>Start empty</strong>
-                binds a fresh file without copying.
-            </span>
-        </Try>
-        <Extra>
-            <CodeBlock Title="Migrating an existing database" Language="csharp"
-                       Code="@Snippets.Storage.Migrate" Open="false" />
-        </Extra>
-    </DemoCard>
+<DemoCard Step="Configure"
+          Title="Preference order, and what counts as acceptable"
+          CodeTitle="Program.cs"
+          Code="@Snippets.Storage.Selection">
+    <Description>
+        Every registered provider is a candidate. <code>AllowNonPersistentFallback()</code>
+        is what makes in-memory acceptable at all - without it, an origin with no persistent
+        backend fails to open rather than quietly losing data on reload.
+    </Description>
+    <Try>
+        The session bar above is this API in action:
+        <strong>Move data</strong> migrates the image, <strong>Start empty</strong>
+        binds a fresh file without copying.
+    </Try>
+    <Extra>
+        <CodeBlock Title="Migrating an existing database" Language="csharp"
+                   Code="@Snippets.Storage.Migrate" Open="false" />
+    </Extra>
+</DemoCard>
 
-    <DemoCard Step="Inspect"
-              Title="Why this session landed where it did"
-              CodeTitle="BsqliteStorageResolution"
-              Code="@Snippets.Storage.Resolution">
-        <Description>
-            A resolution is a record of the whole decision, not just its outcome: every candidate,
-            its probe, and the reason it was passed over. That is what makes a support question
-            answerable without reproducing the user's browser.
-        </Description>
-        <ChildContent>
-            @if (_resolution is not null)
+<DemoCard Step="Inspect"
+          Title="Why this session landed where it did"
+          CodeTitle="BsqliteStorageResolution"
+          Code="@Snippets.Storage.Resolution">
+    <Description>
+        A resolution is a record of the whole decision, not just its outcome: every candidate,
+        its probe, and the reason it was passed over. That is what makes a support question
+        answerable without reproducing the user's browser.
+    </Description>
+    <ChildContent>
+        @if (_resolution is null)
+        {
+            <p class="bb-muted"><span class="bb-spinner"></span> Opening this tab's database…</p>
+        }
+        else
+        {
+            <p>
+                Chosen backend: <span class="bb-badge">@_resolution.Provider.Name</span>
+                @if (_resolution.IsFirstChoice)
+                {
+                    <span> - first choice in the configured order.</span>
+                }
+                else
+                {
+                    <span> - a fallback; see the attempt table.</span>
+                }
+                @if (_resolution.WasDecidedByExistingData)
+                {
+                    <span> The file was already bound here, so preference did not move it.</span>
+                }
+            </p>
+            @if (_resolution.BetterProviderAvailable is { } better)
             {
-                <p>
-                    Chosen backend: <span class="pill">@_resolution.Provider.Name</span>
-                    @if (_resolution.IsFirstChoice)
-                    {
-                        <span> - first choice in the configured order.</span>
-                    }
-                    else
+                <div class="bb-note bb-note-warn">
+                    @better.Name is available and ranked higher, but the data lives here.
+                    <code>BsqliteStorageMigrationMode.AutomaticOnOpen</code> would copy, check the
+                    image, then flip the binding. This demo uses the default,
+                    <code>KeepExisting</code>.
+                </div>
+            }
+            <p>
+                Sticky binding in <code>localStorage</code>:
+                <code>@(_binding ?? "(none - first create on this origin)")</code>
+            </p>
+            <div class="bb-scroll">
+                <table class="bb-table bq-grid">
+                    <thead>
+                    <tr><th>Provider</th><th>Status</th><th>Explanation</th></tr>
+                    </thead>
+                    <tbody>
+                    @foreach (var attempt in _resolution.Attempts)
                     {
-                        <span> - a fallback; see the attempt table.</span>
+                        <tr>
+                            <td class="bq-nowrap">@attempt.ProviderName</td>
+                            <td>@attempt.Status</td>
+                            <td>@(attempt.Explanation ?? attempt.Probe?.UnavailableReason ?? "-")</td>
+                        </tr>
                     }
-                    @if (_resolution.WasDecidedByExistingData)
+                    </tbody>
+                </table>
+            </div>
+        }
+    </ChildContent>
+</DemoCard>
+
+<DemoCard Step="Capabilities"
+          Title="What this backend can honour"
+          CodeTitle="Provider capabilities"
+          Code="@Snippets.Storage.Capabilities">
+    <Description>
+        The core enforces these flags; it never special-cases OPFS against IndexedDB in
+        SQL. A backend that cannot honour <code>ATTACH</code> or
+        <code>PRAGMA page_size</code> fails in <code>BsqliteFeatureGuards</code> instead of
+        corrupting the file - see <a href="limits">Limits</a>.
+    </Description>
+    <ChildContent>
+        @if (_caps is null)
+        {
+            <p class="bb-muted"><span class="bb-spinner"></span> Opening this tab's database…</p>
+        }
+        else
+        {
+            <dl class="bb-params">
+                <dt>Engine build</dt><dd>@_caps.RequiredBuild</dd>
+                <dt>Survives reload</dt><dd>@SampleFormat.YesNo(_caps.IsPersistent)</dd>
+                <dt>Multiple connections</dt><dd>@SampleFormat.YesNo(_caps.SupportsMultipleConnections)</dd>
+                <dt>Concurrent reads</dt><dd>@SampleFormat.YesNo(_caps.SupportsConcurrentReads)</dd>
+                <dt>Relaxed durability</dt><dd>@SampleFormat.YesNo(_caps.SupportsRelaxedDurability)</dd>
+                <dt>Multi-database transactions</dt><dd>@SampleFormat.YesNo(_caps.SupportsMultiDatabaseTransactions)</dd>
+                <dt>Can change page size</dt><dd>@SampleFormat.YesNo(_caps.CanChangePageSize)</dd>
+                <dt>Contexts</dt><dd>@_caps.SupportedContexts</dd>
+            </dl>
+        }
+    </ChildContent>
+</DemoCard>
+
+<DemoCard Step="Probe"
+          Title="Ask every backend what it can do here"
+          CodeTitle="Probing providers"
+          Code="@Snippets.Storage.Probe">
+    <Description>
+        A probe reports availability, quota when the browser will say, and the raw environment
+        facts behind the verdict. Unavailable is a result, never an exception, so selection can
+        continue and still explain itself afterwards.
+    </Description>
+    <Try>Probe now, then compare the numbers after importing a larger database on <a href="admin">Database files</a>.</Try>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="ProbeAllAsync" disabled="@_busy">Probe now</button>
+        </div>
+        @if (_probes.Count > 0)
+        {
+            <div class="bb-scroll">
+                <table class="bb-table bq-grid">
+                    <thead>
+                    <tr><th>Provider</th><th>Available</th><th>Usage / quota</th><th>Why / environment</th></tr>
+                    </thead>
+                    <tbody>
+                    @foreach (var row in _probes)
                     {
-                        <span> The file was already bound here, so preference did not move it.</span>
+                        <tr>
+                            <td class="bq-nowrap">@row.Name</td>
+                            <td>@SampleFormat.YesNo(row.Probe.IsAvailable)</td>
+                            <td class="bq-nowrap">
+                                @SampleFormat.Bytes(row.Probe.UsageBytes)
+                                /
+                                @SampleFormat.Bytes(row.Probe.QuotaBytes)
+                            </td>
+                            <td>
+                                @if (!row.Probe.IsAvailable)
+                                {
+                                    @row.Probe.UnavailableReason
+                                }
+                                else if (row.Probe.Environment.Count == 0)
+                                {
+                                    <span>-</span>
+                                }
+                                else
+                                {
+                                    @string.Join(", ", row.Probe.Environment.Select(kv => $"{kv.Key}={kv.Value}"))
+                                }
+                            </td>
+                        </tr>
                     }
-                </p>
-                @if (_resolution.BetterProviderAvailable is { } better)
-                {
-                    <p class="warn">
-                        @better.Name is available and ranked higher, but the data lives here.
-                        <code>BsqliteStorageMigrationMode.AutomaticOnOpen</code> would copy, check the
-                        image, then flip the binding. This demo uses the default,
-                        <code>KeepExisting</code>.
-                    </p>
-                }
-                <p>
-                    Sticky binding in <code>localStorage</code>:
-                    <code>@(_binding ?? "(none - first create on this origin)")</code>
-                </p>
-                <div class="scroll-x">
-                    <table>
-                        <thead>
-                        <tr><th>Provider</th><th>Status</th><th>Explanation</th></tr>
-                        </thead>
-                        <tbody>
-                        @foreach (var attempt in _resolution.Attempts)
-                        {
-                            <tr>
-                                <td><code>@attempt.ProviderName</code></td>
-                                <td>@attempt.Status</td>
-                                <td>@(attempt.Explanation ?? attempt.Probe?.UnavailableReason ?? "-")</td>
-                            </tr>
-                        }
-                        </tbody>
-                    </table>
-                </div>
-            }
-        </ChildContent>
-    </DemoCard>
+                    </tbody>
+                </table>
+            </div>
+        }
+    </ChildContent>
+</DemoCard>
 
-    <DemoCard Step="Capabilities"
-              Title="What this backend can honour"
-              CodeTitle="Provider capabilities"
-              Code="@Snippets.Storage.Capabilities">
-        <Description>
+<DemoCard Step="Permission"
+          Title="Ask the browser not to evict you"
+          CodeTitle="Persistent storage"
+          Code="@Snippets.Storage.Persistence">
+    <Description>
+        Persistent storage is granted per origin, not per backend. Without it, any of the
+        persistent backends may be cleared under storage pressure - which is a product
+        decision, so the library exposes the call rather than making it for you.
+    </Description>
+    <ChildContent>
+        <div class="bb-toolbar">
+            <button type="button" class="btn btn-secondary" @onclick="RequestPersistenceAsync" disabled="@_busy">
+                Request persistent storage
+            </button>
             <span>
-                The core enforces these flags; it never special-cases OPFS against IndexedDB in
-                SQL. A backend that cannot honour <code>ATTACH</code> or
-                <code>PRAGMA page_size</code> fails in <code>BsqliteFeatureGuards</code> instead of
-                corrupting the file - see <a href="limits">Limits</a>.
+                Currently:
+                <strong>@(_persisted is null ? "not requested yet" : _persisted.Value ? "granted" : "denied")</strong>
             </span>
-        </Description>
-        <ChildContent>
-            @if (_caps is not null)
-            {
-                <div class="scroll-x">
-                    <table>
-                        <tbody>
-                        <tr><th>Engine build</th><td>@_caps.RequiredBuild</td></tr>
-                        <tr><th>Survives reload</th><td>@SampleFormat.YesNo(_caps.IsPersistent)</td></tr>
-                        <tr><th>Multiple connections</th><td>@SampleFormat.YesNo(_caps.SupportsMultipleConnections)</td></tr>
-                        <tr><th>Concurrent reads</th><td>@SampleFormat.YesNo(_caps.SupportsConcurrentReads)</td></tr>
-                        <tr><th>Relaxed durability</th><td>@SampleFormat.YesNo(_caps.SupportsRelaxedDurability)</td></tr>
-                        <tr><th>Multi-database transactions</th><td>@SampleFormat.YesNo(_caps.SupportsMultiDatabaseTransactions)</td></tr>
-                        <tr><th>Can change page size</th><td>@SampleFormat.YesNo(_caps.CanChangePageSize)</td></tr>
-                        <tr><th>Contexts</th><td>@_caps.SupportedContexts</td></tr>
-                        </tbody>
-                    </table>
-                </div>
-            }
-        </ChildContent>
-    </DemoCard>
+        </div>
+    </ChildContent>
+</DemoCard>
 
-    <DemoCard Step="Probe"
-              Title="Ask every backend what it can do here"
-              CodeTitle="Probing providers"
-              Code="@Snippets.Storage.Probe">
-        <Description>
-            A probe reports availability, quota when the browser will say, and the raw environment
-            facts behind the verdict. Unavailable is a result, never an exception, so selection can
-            continue and still explain itself afterwards.
-        </Description>
-        <Try>
-            <span>Probe now, then compare the numbers after importing a larger database on Admin.</span>
-        </Try>
-        <ChildContent>
-            <button type="button" class="secondary" @onclick="ProbeAllAsync" disabled="@_busy">Probe now</button>
-            @if (_probes.Count > 0)
+<section class="bb-card">
+    <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> The four backends</h3>
+    <p class="bb-card-desc">
+        Every provider this site registers, in its preference order. Each lives in a namespace of its own and is
+        registered with <code>AddStorageProvider&lt;T&gt;()</code>.
+    </p>
+    <div class="bb-scroll">
+        <table class="bb-table bq-grid bq-grid-prose">
+            <thead><tr><th>Provider</th><th>Character</th></tr></thead>
+            <tbody>
+            @foreach (var provider in Database.Providers)
             {
-                <div class="scroll-x">
-                    <table>
-                        <thead>
-                        <tr><th>Provider</th><th>Available</th><th>Usage / quota</th><th>Why / environment</th></tr>
-                        </thead>
-                        <tbody>
-                        @foreach (var row in _probes)
-                        {
-                            <tr>
-                                <td><code>@row.Name</code></td>
-                                <td>@SampleFormat.YesNo(row.Probe.IsAvailable)</td>
-                                <td>
-                                    @SampleFormat.Bytes(row.Probe.UsageBytes)
-                                    /
-                                    @SampleFormat.Bytes(row.Probe.QuotaBytes)
-                                </td>
-                                <td>
-                                    @if (!row.Probe.IsAvailable)
-                                    {
-                                        @row.Probe.UnavailableReason
-                                    }
-                                    else if (row.Probe.Environment.Count == 0)
-                                    {
-                                        <span>-</span>
-                                    }
-                                    else
-                                    {
-                                        @string.Join(", ", row.Probe.Environment.Select(kv => $"{kv.Key}={kv.Value}"))
-                                    }
-                                </td>
-                            </tr>
-                        }
-                        </tbody>
-                    </table>
-                </div>
+                <tr>
+                    <td class="bq-nowrap">
+                        <span class="bq-storage-dot" data-name="@provider.Name" aria-hidden="true"></span>
+                        <strong>@SampleStorage.Title(provider.Name)</strong>
+                        <span class="bb-mono bb-soft"> @provider.Name</span>
+                    </td>
+                    <td>@SampleStorage.Blurb(provider.Name)</td>
+                </tr>
             }
-        </ChildContent>
-    </DemoCard>
-
-    <DemoCard Step="Permission"
-              Title="Ask the browser not to evict you"
-              CodeTitle="Persistent storage"
-              Code="@Snippets.Storage.Persistence">
-        <Description>
-            Persistent storage is granted per origin, not per backend. Without it, any of the
-            persistent backends may be cleared under storage pressure - which is a product
-            decision, so the library exposes the call rather than making it for you.
-        </Description>
-        <ChildContent>
-            <p>
-                Currently:
-                <strong>@(_persisted is null ? "not requested yet" : _persisted.Value ? "granted" : "denied")</strong>
-            </p>
-            <button type="button" class="secondary" @onclick="RequestPersistenceAsync" disabled="@_busy">
-                Request persistent storage
-            </button>
-        </ChildContent>
-    </DemoCard>
-
-    <section class="card">
-        <h2>The four backends</h2>
-        <div class="scroll-x">
-            <table>
-                <thead><tr><th>Provider</th><th>Character</th></tr></thead>
-                <tbody>
-                @foreach (var provider in Database.Providers)
-                {
-                    <tr>
-                        <td>
-                            <span class="storage-dot" data-name="@provider.Name"></span>
-                            <strong>@SampleStorage.Title(provider.Name)</strong>
-                            <span class="mono"> @provider.Name</span>
-                        </td>
-                        <td>@SampleStorage.Blurb(provider.Name)</td>
-                    </tr>
-                }
-                </tbody>
-            </table>
-        </div>
-    </section>
-</div>
+            </tbody>
+        </table>
+    </div>
+</section>
 
 @code {
     private BsqliteStorageResolution? _resolution;
diff --git a/src/Utilities/Bsqlite/Demo/Client/Routes.razor b/src/Utilities/Bsqlite/Demo/Client/Routes.razor
index 6ed1993864b..3dec71eaa03 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Routes.razor
+++ b/src/Utilities/Bsqlite/Demo/Client/Routes.razor
@@ -1,5 +1,35 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFoundPage)">
+@inject NavigationManager Nav
+@implements IDisposable
+
+@* Every page but the landing page renders inside the docs shell (Layout/DocsLayout.razor); the
+   landing page and the error pages opt out with @layout MainLayout. After a navigation the page's own
+   H1 takes focus, so a screen reader starts reading at the new page.
+
+   A page that throws while rendering is replaced by UnhandledExceptionView, inside the site's shell so
+   the header still leads elsewhere, and the next navigation recovers the boundary. *@
+
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFoundPage)">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
+        <ErrorBoundary @ref="_boundary">
+            <ChildContent>
+                <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DocsLayout)" />
+            </ChildContent>
+            <ErrorContent Context="exception">
+                <LayoutView Layout="typeof(Layout.MainLayout)">
+                    <UnhandledExceptionView Exception="exception" />
+                </LayoutView>
+            </ErrorContent>
+        </ErrorBoundary>
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
+
+@code {
+    private ErrorBoundary? _boundary;
+
+    protected override void OnInitialized() => Nav.LocationChanged += OnLocationChanged;
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => _boundary?.Recover();
+
+    public void Dispose() => Nav.LocationChanged -= OnLocationChanged;
+}
diff --git a/src/Utilities/Bsqlite/Demo/Client/SiteLinks.cs b/src/Utilities/Bsqlite/Demo/Client/SiteLinks.cs
deleted file mode 100644
index d1a2d552ac9..00000000000
--- a/src/Utilities/Bsqlite/Demo/Client/SiteLinks.cs
+++ /dev/null
@@ -1,23 +0,0 @@
-using System.Reflection;
-using Bit.Bsqlite.Data;
-
-namespace Bit.Bsqlite.Demo.Client;
-
-/// <summary>Where the site points when it leaves itself, plus the version it is showing off.</summary>
-internal static class SiteLinks
-{
-    /// <summary>
-    /// The Bit.Bsqlite build this site runs. The informational version's build metadata - everything after
-    /// '+', usually the commit hash - is dropped: it identifies nothing a reader could act on.
-    /// </summary>
-    public static readonly string Version = (
-        typeof(BsqliteConnection).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion
-        ?? typeof(BsqliteConnection).Assembly.GetName().Version?.ToString()
-        ?? "unknown").Split('+')[0];
-
-    public const string Repository = "https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bsqlite";
-    public const string Issues = "https://github.com/bitfoundation/bitplatform/issues";
-    public const string License = "https://github.com/bitfoundation/bitplatform/blob/develop/LICENSE";
-    public const string NuGet = "https://www.nuget.org/packages/Bit.Bsqlite";
-    public const string Readme = "https://github.com/bitfoundation/bitplatform/tree/develop/src/Utilities/Bsqlite#readme";
-}
diff --git a/src/Utilities/Bsqlite/Demo/Client/SiteMap.cs b/src/Utilities/Bsqlite/Demo/Client/SiteMap.cs
deleted file mode 100644
index 7dc5cf95fa5..00000000000
--- a/src/Utilities/Bsqlite/Demo/Client/SiteMap.cs
+++ /dev/null
@@ -1,56 +0,0 @@
-namespace Bit.Bsqlite.Demo.Client;
-
-/// <summary>One page of the sample site.</summary>
-/// <param name="Href">Relative route, without a leading slash.</param>
-/// <param name="Title">Label in the sidebar and on the overview grid.</param>
-/// <param name="Icon">Name understood by <c>Components/Icon.razor</c>.</param>
-/// <param name="Summary">One line describing what the page proves.</param>
-internal sealed record SamplePage(string Href, string Title, string Icon, string Summary);
-
-/// <summary>A titled run of pages in the sidebar.</summary>
-internal sealed record SampleSection(string Title, IReadOnlyList<SamplePage> Pages);
-
-/// <summary>
-/// The navigation model, declared once. The sidebar, the overview page's demo grid, and the
-/// document title all read from here, so adding a page cannot leave one of them behind.
-/// </summary>
-internal static class SiteMap
-{
-    public static SamplePage Overview { get; } = new(
-        "", "Overview", "home",
-        "What the library is, how it is wired up, and a catalog that re-runs itself.");
-
-    public static IReadOnlyList<SampleSection> Sections { get; } =
-    [
-        new("Start here", [Overview]),
-        new("Model and data",
-        [
-            new("catalog", "Catalog", "boxes",
-                "CRUD over a related graph: unique SKU, decimal price, TimeSpan lead time, nullable DateOnly."),
-            new("customers", "Customers", "users",
-                "Guid keys, a unique index the engine enforces, VIP flag, decimal credit limits."),
-            new("orders", "Orders", "receipt",
-                "Master-detail with Include and ThenInclude, string-backed enum, DateTimeOffset, restrict FKs."),
-        ]),
-        new("Engine and platform",
-        [
-            new("queries", "SQL and live queries", "terminal",
-                "Generated SQL, ef_compare on decimals, REGEXP, and plain ADO.NET on the same connection."),
-            new("storage", "Storage backends", "drive",
-                "How a backend is chosen, what each one can do, quota probes, persistent-storage permission."),
-            new("admin", "Database files", "files",
-                "Databases as files: list, export to a .db, import one back, delete."),
-            new("limits", "Limits", "warning",
-                "What the web cannot do - sync APIs, WAL, ATTACH, page size - and exactly how it fails."),
-        ]),
-        new("For AI agents",
-        [
-            new("mcp-server", "MCP server", "bolt",
-                "The library's API, guides and storage selection, served to coding agents at /mcp - and tried live here."),
-        ]),
-    ];
-
-    /// <summary>Every page except the overview, in sidebar order.</summary>
-    public static IEnumerable<SamplePage> Demos =>
-        Sections.SelectMany(s => s.Pages).Where(p => p.Href.Length > 0);
-}
diff --git a/src/Utilities/Bsqlite/Demo/Client/Snippets.cs b/src/Utilities/Bsqlite/Demo/Client/Snippets.cs
index 5aca3e223e8..191d08049e7 100644
--- a/src/Utilities/Bsqlite/Demo/Client/Snippets.cs
+++ b/src/Utilities/Bsqlite/Demo/Client/Snippets.cs
@@ -6,7 +6,11 @@
 /// </summary>
 internal static class Snippets
 {
-    public static class Setup
+    /// <summary>
+    /// The Getting started page: the README's own registration and page, rather than this demo's - the
+    /// demo's wiring carries a seed and four backends a first app does not need.
+    /// </summary>
+    public static class Start
     {
         public const string Install =
             """
@@ -15,91 +19,119 @@ dotnet add package Bit.Bsqlite
 
         public const string Registration =
             """
-            // Program.cs - Blazor WebAssembly. One call registers selection, sticky bindings in
-            // localStorage, the worker transport, and the shared database.
+            using Bit.Bsqlite.Storage.IndexedDb;
+            using Bit.Bsqlite.Storage.InMemory;
+            using Bit.Bsqlite.Storage.Opfs;
+
             builder.Services.AddBitBsqliteServices(sqlite => sqlite
                 .AddStorageProvider<BsqliteOpfsStorageProvider>()
                 .AddStorageProvider<BsqliteIndexedDbStorageProvider>()
-                .AddStorageProvider<BsqliteCacheStorageProvider>()
                 .AddStorageProvider<BsqliteInMemoryStorageProvider>()
                 .UseStorage(s => s
                     .Prefer(BsqliteOpfsStorageProvider.ProviderName)
                     .Fallback(BsqliteIndexedDbStorageProvider.ProviderName)
-                    .Fallback(BsqliteCacheStorageProvider.ProviderName)
                     .Fallback(BsqliteInMemoryStorageProvider.ProviderName)
                     .AllowNonPersistentFallback())
                 .AddDatabase("app.db"));
 
-            // Contexts come from a factory bound to that database. Migrations run once per
-            // session, then the demo catalog is seeded if the database is empty.
-            builder.Services.AddBitBsqliteDbContext<AppDbContext>(options =>
-                options.OnFirstUse = (db, ct) => DemoData.SeedIfEmptyAsync(db, ct));
+            builder.Services.AddBitBsqliteDbContext<AppDbContext>();
             """;
 
-        /// <summary>The condensed version on the landing page: register, open, query.</summary>
-        public const string Hero =
+        public const string Page =
             """
-            // Program.cs - one preference order, one database, one context factory.
-            builder.Services.AddBitBsqliteServices(sqlite => sqlite
-                .AddStorageProvider<BsqliteOpfsStorageProvider>()
-                .AddStorageProvider<BsqliteIndexedDbStorageProvider>()
-                .UseStorage(s => s.Prefer("opfs").Fallback("indexeddb"))
-                .AddDatabase("app.db"));
-            builder.Services.AddBitBsqliteDbContext<AppDbContext>();
+            @page "/products"
+            @using Bit.Bsqlite.EntityFrameworkCore
+            @using Microsoft.EntityFrameworkCore
+            @inject IBsqliteDbContextFactory<AppDbContext> Contexts
 
-            // Anywhere you would have opened a DbContext. Migrations ran on first use.
-            await using var context = await contexts.CreateDbContextAsync();
+            @code {
+                private List<Product> _products = [];
 
-            // From here it is ordinary EF Core - running inside the browser tab.
-            var open = await context.Orders
-                .Include(o => o.Customer)
-                .Where(o => o.Status == OrderStatus.Draft)
-                .ToListAsync();
+                protected override async Task OnInitializedAsync()
+                {
+                    // The first context opens the database and applies the migrations; later ones reuse the session.
+                    await using var db = await Contexts.CreateDbContextAsync();
+                    _products = await db.Products.OrderBy(p => p.Name).ToListAsync();
+                }
+
+                private async Task AddAsync()
+                {
+                    await using var db = await Contexts.CreateDbContextAsync();
+                    db.Products.Add(new Product { Name = "Widget", Price = 19.99m });
+                    await db.SaveChangesAsync();
+                }
+            }
             """;
 
-        public const string OpenContext =
+        public const string Prerendered =
             """
-            // One session per tab, owned by the registered BsqliteDatabase: it holds the
-            // worker, the transport, and the ADO.NET connection. The factory opens it on first use
-            // and runs the same migrations that run against the server database, once per session.
-            await using var context = await contexts.CreateDbContextAsync(cancellationToken);
+            protected override async Task OnInitializedAsync()
+            {
+                // Prerendering runs this on the server first, where there is no browser to open a database in.
+                // It runs again once the page is interactive on WebAssembly.
+                if (RendererInfo.IsInteractive is false) return;
+
+                await using var db = await Contexts.CreateDbContextAsync();
+                _orders = await db.Orders.Where(o => o.Status == OrderStatus.Draft).ToListAsync();
+            }
             """;
     }
 
     public static class Home
     {
-        public const string Counts =
+        /// <summary>The landing page's window: the live query the rows under it come from.</summary>
+        public const string Hero =
             """
-            await using var context = await Database.OpenContextAsync();
-
-            _products = await context.Products.CountAsync();
-            _customers = await context.Customers.CountAsync();
-            _openOrders = await context.Orders.CountAsync(o =>
-                o.Status != OrderStatus.Shipped && o.Status != OrderStatus.Cancelled);
-            """;
+            _context = await contexts.CreateDbContextAsync();
 
-        public const string LiveQuery =
-            """
-            // Table-level: any write to Products re-runs this, including from another tab
-            // (BroadcastChannel), including from raw SQL that never touched EF.
-            _live = context.Products
-                .AsNoTracking()
-                .OrderBy(p => p.Sku)
-                .Take(8)
+            // Re-runs whenever Products is written - by this tab, by another
+            // tab, or by raw SQL that never touched EF. Nothing polls it.
+            _live = _context.Products.AsNoTracking()
+                .OrderBy(p => p.Sku).Take(4)
                 .AsLiveQuery();
 
             _live.Changed += (_, rows) =>
             {
-                _liveRows = rows;
+                _rows = rows;
                 _ = InvokeAsync(StateHasChanged);
             };
+            _rows = await _live.RefreshAsync();
+            """;
 
-            _liveRows = await _live.RefreshAsync();
+        public const string Register =
+            """
+            builder.Services.AddBitBsqliteServices(sqlite => sqlite
+                .AddStorageProvider<BsqliteOpfsStorageProvider>()
+                .AddStorageProvider<BsqliteIndexedDbStorageProvider>()
+                .UseStorage(s => s.Prefer("opfs").Fallback("indexeddb"))
+                .AddDatabase("app.db"));
+
+            builder.Services.AddBitBsqliteDbContext<AppDbContext>();
+            """;
+
+        public const string Query =
+            """
+            await using var db = await Contexts.CreateDbContextAsync();
+
+            var drafts = await db.Orders
+                .Include(o => o.Customer)
+                .Include(o => o.Lines).ThenInclude(l => l.Product)
+                .Where(o => o.Status == OrderStatus.Draft)
+                .ToListAsync();
+            """;
+
+        public const string Export =
+            """
+            // The backend this database landed on: "opfs", "indexeddb", ...
+            var provider = Database.Resolution!.Provider;
 
-            // Disposing the live query unsubscribes it from the connection's change feed.
-            await _live.DisposeAsync();
+            // The database as a file: a plain SQLite image any desktop tool opens.
+            byte[] image = await provider.Admin.ExportAsync("app.db");
             """;
+    }
 
+    public static class Catalog
+    {
         public const string Entity =
             """
             public sealed class Product
@@ -117,10 +149,7 @@ public sealed class Product
                 public Category? Category { get; set; }
             }
             """;
-    }
 
-    public static class Catalog
-    {
         public const string Read =
             """
             _categories = await context.Categories
diff --git a/src/Utilities/Bsqlite/Demo/Server/Bit.Bsqlite.Demo.Server.csproj b/src/Utilities/Bsqlite/Demo/Server/Bit.Bsqlite.Demo.Server.csproj
index 1b14b00f79e..1617e5bea7c 100644
--- a/src/Utilities/Bsqlite/Demo/Server/Bit.Bsqlite.Demo.Server.csproj
+++ b/src/Utilities/Bsqlite/Demo/Server/Bit.Bsqlite.Demo.Server.csproj
@@ -70,9 +70,11 @@
 
     <!-- Every demo page - each one runs real queries against a database in the browser - plus the components
          and helpers they share and the client half of the hosting. The MCP page describes this server rather
-         than the library, and the error and not-found pages teach nothing about databases. -->
+         than the library, and the error and not-found pages teach nothing about databases. Neither does the
+         site chrome in Layout\ with DocsCatalog.cs - the header, docs shell, search palette and footer every
+         Utilities demo shares, and the page list they are built from. -->
     <EmbeddedResource Include="..\Client\**\*.razor;..\Client\**\*.cs"
-                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFoundPage.razor;..\Client\Pages\ErrorPage.razor">
+                      Exclude="..\Client\bin\**;..\Client\obj\**;..\Client\Layout\**;..\Client\DocsCatalog.cs;..\Client\Pages\McpServer.razor;..\Client\Pages\NotFoundPage.razor;..\Client\Pages\ErrorPage.razor">
       <LogicalName>BsqliteSource/Demo/Client/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
     </EmbeddedResource>
 
diff --git a/src/Utilities/Bsqlite/Demo/Server/Components/App.razor b/src/Utilities/Bsqlite/Demo/Server/Components/App.razor
index cb69374167f..56c51a0df01 100644
--- a/src/Utilities/Bsqlite/Demo/Server/Components/App.razor
+++ b/src/Utilities/Bsqlite/Demo/Server/Components/App.razor
@@ -3,59 +3,32 @@
 
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#FFFFFF" />
+    <base href="/" />
     @* No static <title> here: every page supplies its own through <PageTitle>, and with prerendering
        the HeadOutlet emits a real <title> element into this head. *@
     <meta name="description" content="bit Bsqlite (Bit.Bsqlite) - EF Core on SQLite, inside the browser tab. The same entities and migrations on the client as on the server, over OPFS, IndexedDB, Cache Storage, or memory." />
-    <meta name="color-scheme" content="light dark" />
-    <base href="/" />
-    <ResourcePreloader />
-
-    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230f766e'/%3E%3Cellipse cx='16' cy='9' rx='9' ry='3.6' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M7 9v14c0 2 4 3.6 9 3.6s9-1.6 9-3.6V9' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M7 16c0 2 4 3.6 9 3.6s9-1.6 9-3.6' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E" />
-
-    @* Runs before first paint so the shell never flashes the wrong theme. The stored value is a
-       *preference* ("system" | "light" | "dark"); what lands on <html> is always the resolved one,
-       which is why the stylesheet needs a single [data-theme="dark"] block and no duplicated
-       prefers-color-scheme table. js/demo.js reads and writes the preference through it. *@
-    <script>
-        (function () {
-            var KEY = "bsqlite.theme";
-            var media = window.matchMedia("(prefers-color-scheme: dark)");
 
-            function preference() {
-                try {
-                    var stored = localStorage.getItem(KEY);
-                    return stored === "light" || stored === "dark" ? stored : "system";
-                } catch (e) {
-                    return "system"; // storage blocked: the system theme wins
-                }
-            }
+    @* Link previews: the card a chat client or a social site unfurls is the first impression a
+       shared link makes. *@
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Bit.Bsqlite" />
+    <meta property="og:title" content="Bsqlite - EF Core on SQLite, inside the browser tab" />
+    <meta property="og:description" content="SQLite in a Web Worker under the stock EF Core provider: the same entities and migrations as the server, live queries, and a database that lives in OPFS, IndexedDB, Cache Storage or memory." />
+    <meta name="twitter:card" content="summary" />
 
-            function apply() {
-                var wanted = preference();
-                var resolved = wanted === "system" ? (media.matches ? "dark" : "light") : wanted;
-                document.documentElement.setAttribute("data-theme", resolved);
-                return resolved;
-            }
-
-            apply();
-            media.addEventListener("change", function () {
-                if (preference() === "system") { apply(); }
-            });
-
-            window.__bsqliteTheme = { key: KEY, preference: preference, apply: apply };
-        })();
-    </script>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" />
-
-    <link rel="stylesheet" href="@Assets["css/tokens.css"]" />
-    <link rel="stylesheet" href="@Assets["css/base.css"]" />
-    <link rel="stylesheet" href="@Assets["css/components.css"]" />
-    <link rel="stylesheet" href="@Assets["css/landing.css"]" />
+    <ResourcePreloader />
+    @* The site kit (app.css, theme.js, site.js - shared by every Utilities demo), then this demo's
+       own sample styles. The library has no stylesheet: it draws nothing. *@
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["demo.css"]" />
+    @* Scoped-CSS bundle: includes the client project's *.razor.css files as well. *@
+    <link rel="stylesheet" href="@Assets["Bit.Bsqlite.Demo.Server.styles.css"]" />
+    @* Synchronous on purpose: applies the light/dark theme before first paint. *@
+    <script src="@Assets["theme.js"]"></script>
     <ImportMap />
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%231276C6'/%3E%3Cellipse cx='16' cy='9' rx='9' ry='3.6' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M7 9v14c0 2 4 3.6 9 3.6s9-1.6 9-3.6V9' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M7 16c0 2 4 3.6 9 3.6s9-1.6 9-3.6' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E" />
 
     @* Same render mode as the app itself, so <PageTitle> keeps working after hydration. *@
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
@@ -75,10 +48,11 @@
         <span class="dismiss">&#128473;</span>
     </div>
 
-    @* Loaded before the Blazor script so window.bsqliteDemo exists by the time the app boots. The library's
+    @* demo.js before the Blazor script so window.bsqliteDemo exists by the time the app boots. The library's
        own modules (the worker host, the engine, the VFSes) are imported on demand and need no tag. *@
-    <script src="@Assets["js/demo.js"]"></script>
+    <script src="@Assets["demo.js"]"></script>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="@Assets["site.js"]"></script>
 </body>
 
 </html>
diff --git a/src/Utilities/Bsqlite/Demo/Server/Services/BsqliteSourceCatalog.cs b/src/Utilities/Bsqlite/Demo/Server/Services/BsqliteSourceCatalog.cs
index 80b12b2a46d..3eb3e6ff03e 100644
--- a/src/Utilities/Bsqlite/Demo/Server/Services/BsqliteSourceCatalog.cs
+++ b/src/Utilities/Bsqlite/Demo/Server/Services/BsqliteSourceCatalog.cs
@@ -465,7 +465,6 @@ private static string KindOf(string path)
             path.StartsWith("Demo/Domain/", StringComparison.OrdinalIgnoreCase)) return "Model";
         if (path.StartsWith("Demo/Server/", StringComparison.OrdinalIgnoreCase) ||
             path.StartsWith("Demo/Client/Extensions/", StringComparison.OrdinalIgnoreCase) ||
-            path.StartsWith("Demo/Client/Layout/", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Program.cs", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/Routes.razor", StringComparison.OrdinalIgnoreCase) ||
             path.Equals("Demo/Client/_Imports.razor", StringComparison.OrdinalIgnoreCase)) return "Hosting";
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/app.css b/src/Utilities/Bsqlite/Demo/Server/wwwroot/app.css
new file mode 100644
index 00000000000..7b51a42ea90
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/app.css
@@ -0,0 +1,2820 @@
+/* ============================================================================================
+   bit platform utilities demo - global stylesheet (the site kit)
+
+   Every Utilities demo site shares this file byte for byte, together with theme.js, site.js and
+   the chrome components in Client/Layout - the same Fluent 2 shell the Brouter demo is built on.
+   What a demo has of its own (the styles of its live samples) lives in demo.css, written against
+   the --bb-* names below. Change this file in one demo and copy it to the others.
+
+   The site is built on Microsoft's Fluent 2 design language, expressed as three layers:
+
+     1. --bit-clr-*   the Bit.BlazorUI Fluent palette, inlined verbatim from
+                      BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-*.scss and selected by the
+                      same `bit-theme` attribute convention, so a value copied out of a
+                      Bit.BlazorUI stylesheet lands here unchanged.
+     2. --fl-*        the rest of the Fluent 2 token set - shape, elevation, type ramp, spacing,
+                      motion, stroke - at the values the design system publishes. These are the
+                      pieces that used to be Fluent 1 here (a 2px corner on everything,
+                      regular-weight titles, one duration for the whole site) and they are what
+                      makes the site read as Fluent 2 rather than as its predecessor.
+     3. --bb-*        this site's own vocabulary, mapped onto the two layers above. Every page is
+                      written against these names, so no page ever names a palette entry directly.
+
+   A demo carries no dependency other than the library it demonstrates - pulling a component
+   library in would blur which behavior is whose - so the Fluent surfaces below are reproduced in
+   plain CSS.
+   ============================================================================================ */
+
+/* ============================================================================================
+   1a. Palette - light
+   ============================================================================================ */
+
+:root,
+:root[bit-theme="light"] {
+    color-scheme: light;
+
+    /* primary. Interaction moves the fill toward MORE contrast with the surface under it, so the
+       states darken on these light surfaces; '-dis' is the tint the soft backgrounds use. */
+    --bit-clr-pri: #1276C6;
+    --bit-clr-pri-hover: #0B6AB4;
+    --bit-clr-pri-active: #095A9B;
+    --bit-clr-pri-text: #FFFFFF;
+    --bit-clr-pri-dis: #DDEDFF;
+    /* secondary - the bit orange */
+    --bit-clr-sec: #FD7F36;
+    --bit-clr-sec-dark: #B4520F;
+    /* success / warning / error */
+    --bit-clr-suc: #228422;
+    --bit-clr-suc-dark: #0D5D0F;
+    --bit-clr-suc-dis: #E0F1DF;
+    --bit-clr-wrn: #EDAE12;
+    --bit-clr-wrn-dark: #8A6200;
+    --bit-clr-wrn-dis: #F7EED9;
+    --bit-clr-err: #D2393B;
+    --bit-clr-err-dark: #9D2225;
+    --bit-clr-err-dis: #FFE4E1;
+    /* foregrounds */
+    --bit-clr-fg-pri: #1A1A1A;
+    --bit-clr-fg-sec: #525252;
+    --bit-clr-fg-ter: #6B6B6B;
+    /* backgrounds */
+    --bit-clr-bg-pri: #FFFFFF;
+    --bit-clr-bg-pri-hover: #F5F5F5;
+    --bit-clr-bg-sec: #F5F5F5;
+    --bit-clr-bg-sec-hover: #EDEDED;
+    --bit-clr-bg-ter: #EBEBEB;
+    /* borders */
+    --bit-clr-brd-pri: #707070;
+    --bit-clr-brd-sec: #ADADAD;
+    --bit-clr-brd-ter: #E0E0E0;
+
+    /* Fluent 2's focus indicator is a neutral DOUBLE stroke, not a brand-colored ring: a hairline
+       in the surface color with a heavier one outside it in the foreground color. Neutral is the
+       point - it stays visible on a brand-filled button, where a brand ring would sink into the
+       fill it sits on. */
+    --fl-stroke-focus-inner: #FFFFFF;
+    --fl-stroke-focus-outer: #000000;
+
+    /* Elevation - Fluent 2's shadow ramp. Two shadows per level: a key light that gives the
+       direction, and an ambient one that seats the surface on the page. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .20);
+
+    /* Code surface - GitHub's light syntax colors, which is what the samples were written
+       against. */
+    --bb-code-bg: #F6F8FA;
+    --bb-code-fg: #1F2328;
+    --bb-code-comment: #59636E;
+    --bb-code-keyword: #0550AE;
+    --bb-code-string: #953800;
+    --bb-code-param: #116329;
+
+    /* The landing hero's ground: two brand-tinted washes rather than a gradient sheet, so the
+       color is felt at the edges and the type still sits on the flat surface color. */
+    --bb-wash-primary: rgba(18, 118, 198, .10);
+    --bb-wash-accent: rgba(253, 127, 54, .07);
+    --bb-scrim: rgba(0, 0, 0, .40);
+}
+
+/* ============================================================================================
+   1b. Palette - dark
+   ============================================================================================ */
+
+:root[bit-theme="dark"] {
+    color-scheme: dark;
+
+    /* On dark surfaces more contrast means lighter, so every interaction step inverts. */
+    --bit-clr-pri: #4FA3F4;
+    --bit-clr-pri-hover: #61AEFB;
+    --bit-clr-pri-active: #7DBEFF;
+    --bit-clr-pri-text: #0F1318;
+    --bit-clr-pri-dis: #17273A;
+    --bit-clr-sec: #F49666;
+    --bit-clr-sec-dark: #FFB68C;
+    --bit-clr-suc: #78B774;
+    --bit-clr-suc-dark: #A0D49D;
+    --bit-clr-suc-dis: #1B2A1B;
+    --bit-clr-wrn: #F0BB52;
+    --bit-clr-wrn-dark: #FFDA97;
+    --bit-clr-wrn-dis: #2C2617;
+    --bit-clr-err: #E67A73;
+    --bit-clr-err-dark: #FEA199;
+    --bit-clr-err-dis: #31201E;
+    --bit-clr-fg-pri: #E6ECF2;
+    --bit-clr-fg-sec: #B9BEC4;
+    --bit-clr-fg-ter: #8E9398;
+    --bit-clr-bg-pri: #0F1318;
+    --bit-clr-bg-pri-hover: #171C22;
+    --bit-clr-bg-sec: #15191E;
+    --bit-clr-bg-sec-hover: #22272C;
+    --bit-clr-bg-ter: #272C31;
+    --bit-clr-brd-pri: #757B81;
+    --bit-clr-brd-sec: #454C53;
+    --bit-clr-brd-ter: #2B3138;
+
+    --fl-stroke-focus-inner: #0F1318;
+    --fl-stroke-focus-outer: #FFFFFF;
+
+    /* A dark surface swallows a shadow, so Fluent 2 raises the alpha rather than the geometry -
+       the elevation reads at the same distance without the blur turning into a halo. */
+    --fl-shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-4: 0 2px 4px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-8: 0 4px 8px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-16: 0 8px 16px rgba(0, 0, 0, .28), 0 0 2px rgba(0, 0, 0, .24);
+    --fl-shadow-28: 0 14px 28px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+    --fl-shadow-64: 0 32px 64px rgba(0, 0, 0, .40), 0 0 8px rgba(0, 0, 0, .36);
+
+    --bb-code-bg: #0A0E13;
+    --bb-code-fg: #E6EDF3;
+    --bb-code-comment: #8E9398;
+    --bb-code-keyword: #7DD3FC;
+    --bb-code-string: #FBBF24;
+    --bb-code-param: #86EFAC;
+
+    --bb-wash-primary: rgba(79, 163, 244, .14);
+    --bb-wash-accent: rgba(244, 150, 102, .08);
+    --bb-scrim: rgba(0, 0, 0, .62);
+}
+
+/* ============================================================================================
+   2. The rest of the Fluent 2 token set, and this site's vocabulary on top of it
+   ============================================================================================ */
+
+:root {
+    /* ---------- Shape. Fluent 2's corner ramp, and the most visible difference from Fluent 1 -
+       which rounded everything by the same 2px hairline. Controls take Medium, surfaces take
+       Large, and anything that floats over the page takes XLarge. ---------- */
+    --fl-radius-none: 0;
+    --fl-radius-small: 2px;
+    --fl-radius-medium: 4px;
+    --fl-radius-large: 6px;
+    --fl-radius-xlarge: 8px;
+    --fl-radius-circular: 10000px;
+
+    /* Bit.BlazorUI components read their own shape token, so publishing it keeps one dropped into
+       this site rounded the way the site is. */
+    --bit-shp-brd-radius: var(--fl-radius-medium);
+
+    --bb-radius-sm: var(--fl-radius-small);
+    --bb-radius: var(--fl-radius-medium);
+    --bb-radius-lg: var(--fl-radius-large);
+    --bb-radius-xl: var(--fl-radius-xlarge);
+    --bb-radius-pill: var(--fl-radius-circular);
+
+    /* ---------- Spacing. Fluent 2's scale; nothing on the site invents a value between two of
+       these. ---------- */
+    --fl-space-xxs: .125rem;
+    --fl-space-xs: .25rem;
+    --fl-space-s: .5rem;
+    --fl-space-m: .75rem;
+    --fl-space-l: 1rem;
+    --fl-space-xl: 1.25rem;
+    --fl-space-xxl: 1.5rem;
+    --fl-space-xxxl: 2rem;
+
+    /* ---------- Type ramp. Fluent 2 sizes AND weights its levels: titles are Semibold, which is
+       exactly what separates its headings from Fluent 1's regular-weight ones. ---------- */
+    --fl-font-size-100: .75rem;
+    --fl-font-size-200: .875rem;
+    --fl-font-size-300: 1rem;
+    --fl-font-size-400: 1.25rem;
+    --fl-font-size-500: 1.5rem;
+    --fl-font-size-600: 1.75rem;
+    --fl-font-size-700: 2rem;
+    --fl-font-size-800: 2.5rem;
+    --fl-font-size-900: 4rem;
+
+    --fl-weight-regular: 400;
+    --fl-weight-medium: 500;
+    --fl-weight-semibold: 600;
+
+    /* ---------- Motion. Fluent 2 publishes eight durations and a family of curves: entrances
+       decelerate, exits accelerate, and anything that only changes color uses easyEase. -------- */
+    --fl-duration-ultra-fast: 50ms;
+    --fl-duration-faster: 100ms;
+    --fl-duration-fast: 150ms;
+    --fl-duration-normal: 200ms;
+    --fl-duration-gentle: 250ms;
+    --fl-duration-slow: 300ms;
+    --fl-duration-slower: 400ms;
+
+    --fl-curve-accelerate-min: cubic-bezier(.8, 0, .78, 1);
+    --fl-curve-decelerate-max: cubic-bezier(.1, .9, .2, 1);
+    --fl-curve-decelerate-mid: cubic-bezier(0, 0, 0, 1);
+    --fl-curve-easy-ease: cubic-bezier(.33, 0, .67, 1);
+
+    /* The motion names the site's own rules and every scoped stylesheet are written against. */
+    --bb-motion-duration: var(--fl-duration-normal);
+    --bb-motion-duration-short: var(--fl-duration-fast);
+    --bb-motion-easing: var(--fl-curve-easy-ease);
+    --bb-motion-enter: var(--fl-curve-decelerate-max);
+
+    /* ---------- Roles ---------- */
+    --bb-bg: var(--bit-clr-bg-sec);
+    --bb-surface: var(--bit-clr-bg-pri);
+    --bb-surface-hover: var(--bit-clr-bg-sec-hover);
+    --bb-surface-2: var(--bit-clr-bg-ter);
+    --bb-surface-sunken: var(--bit-clr-bg-sec);
+    --bb-border: var(--bit-clr-brd-ter);
+    --bb-border-strong: var(--bit-clr-brd-sec);
+    /* An alias, not a fourth role: pages and scoped stylesheets written before the border roles
+       were split still ask for this name, and it means what they meant - the quieter of the two. */
+    --bb-border-soft: var(--bit-clr-brd-ter);
+    --bb-text: var(--bit-clr-fg-pri);
+    --bb-text-muted: var(--bit-clr-fg-sec);
+    --bb-text-soft: var(--bit-clr-fg-ter);
+    --bb-primary: var(--bit-clr-pri);
+    --bb-primary-hover: var(--bit-clr-pri-hover);
+    --bb-primary-active: var(--bit-clr-pri-active);
+    --bb-primary-soft: var(--bit-clr-pri-dis);
+    --bb-primary-text: var(--bit-clr-pri-text);
+    --bb-accent: var(--bit-clr-sec);
+    --bb-accent-text: var(--bit-clr-sec-dark);
+    --bb-success: var(--bit-clr-suc);
+    --bb-success-soft: var(--bit-clr-suc-dis);
+    --bb-success-text: var(--bit-clr-suc-dark);
+    --bb-warning: var(--bit-clr-wrn);
+    --bb-warning-soft: var(--bit-clr-wrn-dis);
+    --bb-warning-text: var(--bit-clr-wrn-dark);
+    --bb-danger: var(--bit-clr-err);
+    --bb-danger-soft: var(--bit-clr-err-dis);
+    --bb-danger-text: var(--bit-clr-err-dark);
+
+    --bb-shadow-card: var(--fl-shadow-2);
+    --bb-shadow-raised: var(--fl-shadow-8);
+    --bb-shadow-flyout: var(--fl-shadow-16);
+    --bb-shadow-dialog: var(--fl-shadow-64);
+    /* Alias for scoped stylesheets written against the old single elevation. */
+    --bb-shadow: var(--fl-shadow-16);
+
+    /* ---------- Chrome geometry. Published here because the header, the docs shell, the rail,
+       the drawer and every heading's scroll-margin all have to agree on them. ---------- */
+    --bb-header-height: 56px;
+    --bb-nav-panel-width: 262px;
+    --bb-rail-width: 232px;
+    --bb-content-width: 1320px;
+    --bb-measure: 74ch;
+
+    /* Segoe UI Variable is Fluent 2's typeface; static Segoe UI is the fallback on Windows
+       versions that do not ship it, and the platform stack takes over everywhere else. */
+    --bb-font-sans: "Segoe UI Variable Text", "Segoe UI Variable Static Text", "Segoe UI",
+                    "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
+                    "Helvetica Neue", Arial, sans-serif;
+    --bb-font-display: "Segoe UI Variable Display", "Segoe UI Variable Static Display",
+                       var(--bb-font-sans);
+    --bb-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas,
+               "Liberation Mono", monospace;
+}
+
+/* Fluent's own components collapse their motion under this preference; the site does the same at
+   the token, so nothing downstream has to opt in individually. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --fl-duration-ultra-fast: 1ms;
+        --fl-duration-faster: 1ms;
+        --fl-duration-fast: 1ms;
+        --fl-duration-normal: 1ms;
+        --fl-duration-gentle: 1ms;
+        --fl-duration-slow: 1ms;
+        --fl-duration-slower: 1ms;
+    }
+}
+
+/* ============================================================================================
+   3. Base
+   ============================================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    /* Keep the viewport width constant whether or not the page scrolls (classic scrollbars eat
+       layout width on Windows). Without this, navigating between a tall page and a short one
+       resizes every element by ~17px, so even chrome pinned out of the view transition via
+       view-transition-name picks up a visible resize animation on its own group. */
+    scrollbar-gutter: stable;
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bb-bg);
+    color: var(--bb-text);
+    font-family: var(--bb-font-sans);
+    /* Fluent 2's Body2 - 16/22. The previous 15px was below the readable floor for a page whose
+       job is long-form prose. */
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/* Theme-driven thin scrollbars on the site's own chrome. The scrollbars inside a demo belong to
+   whatever that demo renders and are deliberately left alone. */
+html,
+body,
+.bb-docs-sidebar,
+.bb-rail,
+.bb-scroll,
+pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bit-clr-brd-sec) transparent;
+}
+
+::selection {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+}
+
+a {
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a:hover {
+    color: var(--bb-primary-hover);
+    text-decoration: underline;
+    text-underline-offset: .18em;
+}
+
+img,
+svg {
+    max-width: 100%;
+}
+
+/* One focus indicator for the whole site, drawn the Fluent 2 way: a hairline in the surface
+   color hugging the control, and a heavier neutral stroke outside it. Written as an outline plus
+   a ring shadow so it follows the control's own corner radius and never displaces layout.
+
+   Not on elements with tabindex="-1": those are focused by script, never by Tab. The page heading
+   <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to after every navigation, so
+   assistive technology announces the new page, is one; the <main> the skip link lands on is
+   another; a library's own dialog or popover container is a third. A ring there would say "you are
+   on a control", which none of them is - and on a library's container the ring's shadow would
+   also replace the elevation the library draws. :where() keeps the exclusion from adding
+   specificity, so a field's own focus style (section 7b) still wins over this one. */
+:focus-visible:where(:not([tabindex="-1"])) {
+    outline: 2px solid var(--fl-stroke-focus-outer);
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px var(--fl-stroke-focus-inner);
+}
+
+[tabindex="-1"]:focus-visible:where(h1, h2, h3, h4, h5, h6, main, article, section) {
+    outline: none;
+}
+
+/* The first thing in the tab order: a keyboard reader lands on it before the nav and can jump
+   straight past the chrome. Off-screen until focused, never display:none - a hidden element is
+   not focusable at all. */
+.bb-skip-link {
+    position: fixed;
+    top: .5rem;
+    left: .5rem;
+    z-index: 1200;
+    transform: translateY(calc(-100% - 1rem));
+    padding: .5rem .875rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-enter);
+}
+
+/* The elevation is only drawn once the link is on screen: parked above the viewport, its shadow
+   would still reach a few pixels down into the corner of the header. */
+.bb-skip-link:focus-visible {
+    transform: translateY(0);
+    color: var(--bb-primary-text);
+    text-decoration: none;
+    box-shadow: var(--bb-shadow-flyout);
+}
+
+/* ============================================================================================
+   4. Typography - Fluent 2's ramp. Titles carry weight as well as size, which is the difference
+   between this ramp and Fluent 1's.
+   ============================================================================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bb-text);
+    font-family: var(--bb-font-display);
+    font-weight: var(--fl-weight-semibold);
+    margin: 0 0 .5rem;
+    letter-spacing: -.01em;
+    text-wrap: balance;
+}
+
+/* Title1 */
+h1 {
+    font-size: var(--fl-font-size-700);
+    line-height: 1.25;
+    letter-spacing: -.02em;
+}
+
+/* Title3 */
+h2 {
+    font-size: var(--fl-font-size-500);
+    line-height: 1.33;
+}
+
+/* Subtitle1 */
+h3 {
+    font-size: var(--fl-font-size-400);
+    line-height: 1.4;
+}
+
+/* Subtitle2 */
+h4 {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.5;
+}
+
+h5,
+h6 {
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+}
+
+@media (max-width: 600px) {
+    h1 { font-size: var(--fl-font-size-600); }
+    h2 { font-size: var(--fl-font-size-400); }
+    h3 { font-size: var(--fl-font-size-300); }
+}
+
+p {
+    margin: 0 0 .75rem;
+}
+
+strong,
+b {
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* No ligatures: Cascadia Code would draw `=>` and `!=` as single glyphs, and code on this site is
+   read in order to be typed - the reader should see the characters they will type. */
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--bb-mono);
+    font-variant-ligatures: none;
+}
+
+/* Inline code. Quieter than the old brand-tinted pill: in a docs paragraph half the nouns are
+   identifiers, and colouring every one of them turns the prose into a link farm. */
+code {
+    font-size: .875em;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    color: var(--bb-text);
+    padding: .0625rem .3125rem;
+    border-radius: var(--bb-radius);
+    overflow-wrap: anywhere;
+}
+
+/* Inside a link, though, it takes the link's color - otherwise the one word that IS the link
+   looks like the one word that is not. */
+a code {
+    color: inherit;
+    border-color: color-mix(in srgb, currentColor 30%, transparent);
+    background: var(--bb-primary-soft);
+}
+
+/* A key on the keyboard, drawn as one. */
+kbd {
+    display: inline-block;
+    min-width: 1.5rem;
+    padding: .125rem .375rem;
+    font-size: .75rem;
+    line-height: 1.25;
+    text-align: center;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--bb-radius);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--bb-border);
+    margin: 2rem 0;
+}
+
+/* ============================================================================================
+   5. Layout - header band, content band, footer.
+   ============================================================================================ */
+
+.page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bb-site-content {
+    flex: 1;
+    width: 100%;
+    background: var(--bb-bg);
+}
+
+main {
+    width: 100%;
+    max-width: var(--bb-content-width);
+    margin: 0 auto;
+    padding: 2.5rem 2rem 5rem;
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 2rem 1.5rem 3.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    main {
+        padding: 1.5rem 1rem 3rem;
+    }
+}
+
+article {
+    width: 100%;
+    min-width: 0;
+}
+
+/* The landing page is the one page built from full-bleed bands rather than from a column of
+   content, so it opts out of the container and lays its own gutters out instead. */
+main:has(.bb-landing) {
+    max-width: none;
+    padding: 0;
+}
+
+/* ============================================================================================
+   6. Page intro - the title block every page opens with.
+   ============================================================================================ */
+
+.bb-intro {
+    margin-bottom: 2.5rem;
+}
+
+.bb-intro .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .5rem;
+}
+
+.bb-intro h1 {
+    overflow-wrap: anywhere;
+    margin-bottom: .75rem;
+}
+
+.bb-intro .bb-subtitle {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-300);
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin: 0;
+}
+
+/* ============================================================================================
+   7. Buttons - Fluent 2's Primary / Secondary / Subtle variants.
+   ============================================================================================ */
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .375rem;
+    /* Fluent 2's medium control height, and a touch target that clears the 44px guidance once the
+       0.25rem of vertical rhythm around it is counted. */
+    min-height: 2rem;
+    padding: .3125rem .75rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.43;
+    border-radius: var(--bb-radius);
+    border: 1px solid transparent;
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.btn:hover {
+    text-decoration: none;
+}
+
+.btn svg {
+    width: 1em;
+    height: 1em;
+    flex: none;
+}
+
+.btn[disabled],
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: .45;
+}
+
+/* Primary - the filled brand button. */
+.btn-primary,
+button.btn-primary {
+    background: var(--bb-primary);
+    color: var(--bb-primary-text);
+    border-color: var(--bb-primary);
+}
+
+.btn-primary:hover,
+button.btn-primary:hover {
+    background: var(--bb-primary-hover);
+    border-color: var(--bb-primary-hover);
+    color: var(--bb-primary-text);
+}
+
+.btn-primary:active,
+button.btn-primary:active {
+    background: var(--bb-primary-active);
+    border-color: var(--bb-primary-active);
+}
+
+/* Secondary - Fluent 2's default button: a neutral surface with a neutral stroke. This is the
+   variant most of the site's "go and look at this" links want, which is why it, rather than the
+   brand outline, is what a bare `.btn` already looks like. */
+.btn-secondary,
+button.btn-secondary {
+    background: var(--bb-surface);
+    color: var(--bb-text);
+    border-color: var(--bb-border-strong);
+}
+
+.btn-secondary:hover,
+button.btn-secondary:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+/* Outline - the brand-stroked variant the pages use for their "go and try this" links. */
+.btn-outline,
+button.btn-outline {
+    background: transparent;
+    color: var(--bb-primary);
+    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
+}
+
+.btn-outline:hover,
+button.btn-outline:hover {
+    color: var(--bb-primary-hover);
+    background: var(--bb-primary-soft);
+    border-color: var(--bb-primary);
+}
+
+/* Large - the landing page's calls to action. Restated for <button>: `button.btn` above outranks a
+   lone class, and would otherwise keep a large button at the medium size. */
+.bb-btn-lg,
+button.bb-btn-lg {
+    min-height: 2.75rem;
+    padding: .625rem 1.25rem;
+    font-size: var(--fl-font-size-300);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* An icon-only button: square, quiet, and sized for a finger. */
+.bb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-icon-btn:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-icon-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* A row of "try it" links under a paragraph. */
+.bb-try {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin: .25rem 0 1.25rem;
+}
+
+/* ============================================================================================
+   7b. Form controls - Fluent 2's Input, Textarea and Select.
+
+   The signature of a Fluent 2 field is the bottom stroke: a neutral hairline all round, a heavier
+   line along the bottom edge, and on focus that bottom line thickens into the brand color while
+   the rest of the border stays put. Applied to the elements themselves rather than to a class,
+   because the demo pages render plain inputs - a design system that only reaches markup written
+   for it is not a design system.
+
+   Only the inputs a reader TYPES into are fields. A slider, a color well, a file picker or a
+   checkbox is not, and dressing one up as a text box changes its size as it gains and loses focus
+   - which moves everything below it. Section 26 gives the other input types the brand accent
+   instead.
+
+   Every selector here is wrapped in :where(), so the resting look has no specificity at all and the
+   states carry only their pseudo-class: a library that draws its own fields (a forms library, a
+   canvas text editor, a palette's search box) wins with a single class, at rest, on hover and on
+   focus, and a demo restyles a field the same way. The focus rule still outranks the site-wide
+   focus ring in section 3, by coming after it at the same weight.
+   ============================================================================================ */
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control) {
+    width: auto;
+    max-width: 100%;
+    min-height: 2rem;
+    padding: .3125rem .625rem;
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.43;
+    color: var(--bb-text);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-bottom-color: var(--bb-text-soft);
+    border-radius: var(--bb-radius);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+:where(textarea) {
+    width: 100%;
+    padding: .5rem .625rem;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+:where(input, textarea)::placeholder {
+    color: var(--bb-text-soft);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):hover:where(:not(:disabled)) {
+    border-color: var(--bb-text-soft);
+}
+
+/* Focus: the brand underline, and no ring - the moving line IS the indicator here, which is what
+   Fluent 2 does for a field. Everything else on the site keeps the neutral double ring. */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):focus-visible {
+    outline: none;
+    box-shadow: none;
+    border-color: var(--bb-border-strong);
+    border-bottom: 2px solid var(--bb-primary);
+    /* The border grew by a pixel, so the padding gives it back and the text does not jump. */
+    padding-bottom: calc(.3125rem - 1px);
+}
+
+:where(textarea):focus-visible {
+    padding-bottom: calc(.5rem - 1px);
+}
+
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], textarea, select, .form-control):disabled {
+    color: var(--bb-text-soft);
+    background: var(--bb-surface-sunken);
+    cursor: not-allowed;
+}
+
+/* A search input's native clear button is drawn by the UA in its own color; hiding it lets the
+   field look the same in every browser. */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* ============================================================================================
+   8. Cards and sections
+
+   `.bb-card` plays two roles on this site, and the difference is structural rather than a class
+   the author has to remember:
+
+     - inside a grid or a flex stack it is a TILE, and gets Fluent's card chrome: a raised
+       surface, a hairline and elevation 2;
+     - standing on its own in the docs column it is a SECTION of a document, and gets none of
+       that. Thirty bordered boxes stacked down a reference page is a filing cabinet, not a
+       document - the heading and the space around it are what separate one section from the
+       next, exactly as they do in print.
+
+   Every documentation page is written as a stack of `.bb-card`s, so this one distinction is what
+   turns them into prose without a single page being edited.
+   ============================================================================================ */
+
+.bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--bb-text-muted);
+}
+
+/* `anywhere` lets one long identifier in a heading (a type name, say) break rather than push a
+   phone-width page sideways: it lowers the title text's min-content width, which is what a flex
+   item is not allowed to shrink below. A title that fits never breaks. */
+.bb-card-title {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    overflow-wrap: anywhere;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.5;
+    color: var(--bb-text);
+    margin: 0 0 .375rem;
+}
+
+.bb-card-desc {
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    margin: 0 0 1rem;
+}
+
+.bb-card-desc:last-child {
+    margin-bottom: 0;
+}
+
+/* A tile the whole of which is a link. */
+a.bb-card {
+    display: block;
+    color: var(--bb-text-muted);
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+a.bb-card:hover {
+    text-decoration: none;
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+}
+
+.bb-grid {
+    display: grid;
+    /* min() on the track floor rather than a bare 280px: below that width a fixed minimum makes
+       the track wider than its own container and the page picks up a horizontal scrollbar. */
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Tiles in a grid are laid out as columns so their footer links line up along the bottom edge
+   regardless of how much prose each one carries above them. */
+.bb-grid > .bb-card {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+/* The trailing call to action is pushed to the bottom of its tile rather than the prose above it
+   being stretched: `margin-top: auto` lines the buttons up along one baseline across the row
+   whatever each tile has to say, and a tile that ends in a list instead keeps that list directly
+   under the sentence introducing it. */
+.bb-grid > .bb-card > .btn:last-child,
+.bb-grid > .bb-card > .bb-try:last-child {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+.bb-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.bb-flex > .bb-card {
+    margin-bottom: 0;
+}
+
+/* A band on the landing page and other full-width pages. */
+.bb-section {
+    margin-bottom: 3rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    max-width: var(--bb-measure);
+    margin-bottom: 1.5rem;
+}
+
+/* ============================================================================================
+   9. Documentation prose - the flattening described above, scoped to the docs column.
+   ============================================================================================ */
+
+/* A section of the document: no frame, no fill, no elevation. What separates one section from the
+   next is the space between them and the hairline under each heading - the same two devices a
+   printed reference uses, and the reason a page of thirty of them still reads as one document. */
+.bb-docs-content > .bb-card {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 2.5rem;
+    color: var(--bb-text-muted);
+}
+
+/* Restated for the grids and stacks INSIDE a docs page - a "find your topic" grid is still a set
+   of tiles, and the rule above would have flattened those too. */
+.bb-docs-content .bb-grid > .bb-card,
+.bb-docs-content .bb-flex > .bb-card,
+.bb-docs-content .bb-card .bb-card {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 1.25rem;
+    margin-bottom: 0;
+}
+
+/* A flattened section's title is a document heading, so it takes Fluent's Title3 rather than the
+   card title's Subtitle2 - the level below the page's own H1. */
+.bb-docs-content > .bb-card > .bb-card-title {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: -.01em;
+    margin: 0 0 .75rem;
+    padding-bottom: .625rem;
+    border-bottom: 1px solid var(--bb-border);
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* The prose of a section, and the only thing on the page held to the reading measure. The column
+   itself is uncapped (see DocsLayout.razor.css) so code samples and API tables get its full width;
+   holding the line length here rather than there is what lets both be true at once. */
+.bb-docs-content > .bb-card > .bb-card-desc,
+.bb-docs-content > .bb-card > p,
+.bb-docs-content > p {
+    font-size: var(--fl-font-size-300);
+    line-height: 1.65;
+    max-width: var(--bb-measure);
+    margin-bottom: 1rem;
+}
+
+/* The dot in front of a section heading. It is not always decoration - a live sample can use it
+   as a status light - so it stays, but at the larger heading size it is drawn as a marker in the
+   margin rather than as a bullet crowding the first word. */
+.bb-docs-content > .bb-card > .bb-card-title > .bb-dot {
+    width: 10px;
+    height: 10px;
+    margin-inline-end: .125rem;
+}
+
+/* An H2 in the docs column groups several sections under it - the API reference and the FAQ are
+   both built that way - so it has to outrank the section headings underneath it on both counts a
+   heading is ranked by: it is a step larger, and its rule is the brand's rather than a hairline.
+   The page's own H1, the H2 parts and the H3 sections then run 32 / 28 / 24, which is three
+   consecutive steps of Fluent's ramp and no invented sizes. */
+.bb-docs-content > h2 {
+    font-size: var(--fl-font-size-600);
+    margin: 3.5rem 0 1.5rem;
+    padding-bottom: .5rem;
+    border-bottom: 2px solid var(--bb-primary);
+}
+
+.bb-docs-content > h2:first-child {
+    margin-top: 0;
+}
+
+/* The anchor link site.js hangs off every section heading: invisible until the heading is hovered
+   or the link itself is focused, so it never competes with the title. */
+.bb-anchor {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: .4rem;
+    color: var(--bb-text-soft);
+    font-weight: var(--fl-weight-regular);
+    opacity: 0;
+    transition: opacity var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-anchor svg {
+    width: 15px;
+    height: 15px;
+}
+
+:is(h1, h2, h3, .bb-card-title):hover > .bb-anchor,
+.bb-anchor:focus-visible {
+    opacity: 1;
+}
+
+.bb-anchor:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* ============================================================================================
+   10. Lists
+   ============================================================================================ */
+
+.bb-link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.bb-link-list li {
+    display: flex;
+    align-items: center;
+}
+
+.bb-link-list a {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: .375rem .5rem;
+    border-radius: var(--bb-radius);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-primary);
+    text-decoration: none;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-link-list a:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-primary-hover);
+    text-decoration: none;
+}
+
+.bb-link-list a.active {
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* Prose-style list: items mix text with inline links and code. */
+.bb-detail-list {
+    margin: 0 0 1rem;
+    padding-inline-start: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+}
+
+.bb-docs-content > .bb-card .bb-detail-list {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+.bb-detail-list::marker,
+.bb-detail-list li::marker {
+    color: var(--bb-text-soft);
+}
+
+/* ============================================================================================
+   11. Badges - Fluent 2's Badge, in its tinted "filled-light" appearance.
+   ============================================================================================ */
+
+.bb-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.25;
+    padding: .1875rem .5rem;
+    border-radius: var(--bb-radius-pill);
+    letter-spacing: .01em;
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    white-space: nowrap;
+}
+
+.bb-badge.bb-badge-warn {
+    background: var(--bb-warning-soft);
+    color: var(--bb-warning-text);
+}
+
+.bb-badge.bb-badge-danger {
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+}
+
+.bb-badge.bb-badge-success {
+    background: var(--bb-success-soft);
+    color: var(--bb-success-text);
+}
+
+/* Fluent's Overline: the small, spaced, uppercase label that sits over a group. */
+.bb-overline {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0;
+}
+
+/* ============================================================================================
+   12. Status dots
+   ============================================================================================ */
+
+.bb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-text-soft);
+    flex: none;
+}
+
+.bb-dot-primary { background: var(--bb-primary); }
+.bb-dot-success { background: var(--bb-success); }
+.bb-dot-warning { background: var(--bb-warning); }
+.bb-dot-danger { background: var(--bb-danger); }
+
+/* ============================================================================================
+   13. Tables
+   ============================================================================================ */
+
+.bb-table,
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.bb-table thead th,
+.table thead th {
+    text-align: start;
+    padding: .625rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    white-space: nowrap;
+}
+
+.bb-table td,
+.table td {
+    padding: .625rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    vertical-align: top;
+    color: var(--bb-text-muted);
+}
+
+.bb-table tbody tr:first-child td,
+.table tbody tr:first-child td {
+    border-top: 0;
+}
+
+.bb-table tbody tr:hover td,
+.table tbody tr:hover td {
+    background: var(--bb-surface-hover);
+}
+
+/* The identifier column: monospaced and in the foreground color, because it is the thing the
+   reader is scanning for. */
+.bb-table td:first-child {
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+}
+
+/* A table's used width can never fall below the sum of its columns' MIN-CONTENT widths, so a
+   single unbreakable cell anywhere in it sizes the whole table - and, since these tables are
+   full-width, overflows whatever holds them. Making one column breakable is therefore not a fix:
+   it has to be every cell, headers included, which is also why the identifier column above cannot
+   be `white-space: nowrap`.
+
+   `anywhere` and not `break-word`: the two wrap identically at a given width, but only `anywhere`
+   lowers the intrinsic minimum - and the intrinsic minimum is the number the table is sized from,
+   so `break-word` here would look fixed and still overflow. Neither breaks a word that already
+   fits, so this costs nothing at widths where the table was fine. */
+.bb-table th,
+.bb-table td,
+.table th,
+.table td {
+    overflow-wrap: anywhere;
+}
+
+/* A column of buttons rather than of prose: `width: 1%` in an auto-layout table reads as "give
+   this column its minimum", so the button keeps its label on one line and every pixel the column
+   does not need goes to the text columns instead of squeezing them. This is the one place the
+   cells' `overflow-wrap: anywhere` must not reach - a broken button label is worse than a wide
+   column, and a button's minimum is small enough to afford. A key column - the names of tools,
+   members or options a reader scans for - takes the same treatment for the same reason: a name
+   broken letter by letter cannot be scanned. Inside .bb-scroll a table that no longer fits
+   scrolls on its own. */
+.bb-table .bb-table-key,
+.bb-table .bb-table-action {
+    width: 1%;
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+/* A wide table on a narrow screen scrolls inside its own box rather than widening the page. */
+.bb-scroll {
+    overflow-x: auto;
+    margin-bottom: 1.25rem;
+}
+
+.bb-scroll > .bb-table,
+.bb-scroll > .table {
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   14. Definition list - the label/value readout the live samples use.
+   ============================================================================================ */
+
+.bb-params {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--fl-font-size-200);
+    margin: 0 0 1.25rem;
+}
+
+.bb-params dt {
+    color: var(--bb-text-muted);
+    font-weight: var(--fl-weight-semibold);
+    text-transform: uppercase;
+    font-size: var(--fl-font-size-100);
+    letter-spacing: .05em;
+    padding: .5rem .875rem;
+    background: var(--bb-surface-sunken);
+    border-top: 1px solid var(--bb-border);
+    display: flex;
+    align-items: center;
+}
+
+.bb-params dd {
+    margin: 0;
+    padding: .5rem .875rem;
+    border-top: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .9em;
+    color: var(--bb-text);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+}
+
+.bb-params > dt:first-of-type,
+.bb-params > dt:first-of-type + dd {
+    border-top: 0;
+}
+
+/* ============================================================================================
+   15. Notes - Fluent 2's MessageBar: an icon-less tinted band with the role's color as its
+   leading rule.
+   ============================================================================================ */
+
+.bb-note {
+    border: 1px solid color-mix(in srgb, var(--bb-primary) 30%, transparent);
+    border-inline-start: 3px solid var(--bb-primary);
+    background: var(--bb-primary-soft);
+    color: var(--bb-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.65;
+    margin: 0 0 1.25rem;
+}
+
+.bb-note > :last-child {
+    margin-bottom: 0;
+}
+
+.bb-note code {
+    background: color-mix(in srgb, var(--bb-surface) 60%, transparent);
+}
+
+.bb-note-warn {
+    border-color: color-mix(in srgb, var(--bb-warning) 40%, transparent);
+    border-inline-start-color: var(--bb-warning);
+    background: var(--bb-warning-soft);
+}
+
+.bb-note-danger {
+    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start-color: var(--bb-danger);
+    background: var(--bb-danger-soft);
+}
+
+.bb-note-success {
+    border-color: color-mix(in srgb, var(--bb-success) 40%, transparent);
+    border-inline-start-color: var(--bb-success);
+    background: var(--bb-success-soft);
+}
+
+.bb-docs-content .bb-note {
+    font-size: var(--fl-font-size-300);
+    max-width: var(--bb-measure);
+}
+
+/* ============================================================================================
+   16. Code samples
+   ============================================================================================ */
+
+.bb-code {
+    position: relative;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    padding: .875rem 3rem .875rem 1rem;
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.bb-code::-webkit-scrollbar { width: 8px; }
+.bb-code::-webkit-scrollbar:horizontal { height: 8px; }
+.bb-code::-webkit-scrollbar-track { background-color: transparent; }
+.bb-code::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--bit-clr-brd-sec); }
+.bb-code::-webkit-scrollbar-button { display: none; }
+
+.bb-code .c { color: var(--bb-code-comment); font-style: italic; }  /* comment */
+.bb-code .k { color: var(--bb-code-keyword); }                      /* keyword / tag */
+.bb-code .s { color: var(--bb-code-string); }                       /* string / template */
+.bb-code .p { color: var(--bb-code-param); }                        /* parameter */
+
+/* A <code> inside a code block is part of the block, not an inline identifier: it drops the chip
+   that inline code is drawn as and takes the block's own color and size. */
+pre code {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    overflow-wrap: normal;
+}
+
+/* The copy button site.js appends to every code block. Always visible rather than
+   hover-revealed: on a touch screen there is no hover, and the button is the only way to take the
+   sample. It is appended INTO the <pre> rather than wrapped around it, which is what keeps Blazor
+   from ever diffing over it - the render tree's shape for the element never changes, so the node
+   added here is simply never visited. */
+.bb-copy-btn {
+    position: absolute;
+    top: .5rem;
+    inset-inline-end: .5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: color-mix(in srgb, var(--bb-code-bg) 85%, transparent);
+    color: var(--bb-text-soft);
+    cursor: pointer;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-copy-btn:hover {
+    color: var(--bb-primary);
+    border-color: var(--bb-border-strong);
+    background: var(--bb-surface);
+}
+
+.bb-copy-btn svg {
+    width: 15px;
+    height: 15px;
+}
+
+.bb-copy-btn.bb-copied {
+    color: var(--bb-success);
+    border-color: var(--bb-success);
+    background: var(--bb-surface);
+}
+
+/* ============================================================================================
+   17. Empty state
+   ============================================================================================ */
+
+.bb-empty {
+    background: var(--bb-surface);
+    border: 1px dashed var(--bb-border-strong);
+    border-radius: var(--bb-radius-lg);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    color: var(--bb-text-muted);
+    font-size: var(--fl-font-size-200);
+    margin-bottom: 1rem;
+}
+
+/* ============================================================================================
+   18. Error pages
+   ============================================================================================ */
+
+.bb-error {
+    text-align: center;
+    padding: 4rem 1.5rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+}
+
+.bb-error h1 {
+    font-size: var(--fl-font-size-900);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: -.04em;
+    margin: 0;
+    line-height: 1;
+}
+
+.bb-error.bb-error-404 h1 { color: var(--bb-text-soft); }
+.bb-error.bb-error-403 h1 { color: var(--bb-warning); }
+
+.bb-error p {
+    color: var(--bb-text-muted);
+    max-width: 46ch;
+    margin: .75rem auto 1.5rem;
+}
+
+.bb-error-actions {
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.bb-error-hint {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-soft);
+    margin-bottom: 0;
+}
+
+/* ============================================================================================
+   19. Docs pager (DocsPager, rendered by DocsLayout)
+   ============================================================================================ */
+
+.bb-pager {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.bb-pager-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    padding: .875rem 1rem;
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    background: var(--bb-surface);
+    box-shadow: var(--bb-shadow-card);
+    text-decoration: none;
+    min-width: 0;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
+                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-pager-link:hover {
+    border-color: var(--bb-primary);
+    box-shadow: var(--bb-shadow-raised);
+    text-decoration: none;
+}
+
+.bb-pager-next {
+    grid-column: 2;
+    text-align: end;
+    align-items: flex-end;
+}
+
+.bb-pager-label {
+    font-size: var(--fl-font-size-100);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-soft);
+}
+
+.bb-pager-title {
+    font-weight: var(--fl-weight-semibold);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ============================================================================================
+   20. "On this page" rail - built by site.js from whatever headings the current page rendered,
+   so no docs page had to be edited to gain one.
+   ============================================================================================ */
+
+.bb-rail {
+    position: sticky;
+    top: calc(var(--bb-header-height) + 1.75rem);
+    flex: 0 0 var(--bb-rail-width);
+    height: fit-content;
+    max-height: calc(100vh - var(--bb-header-height) - 3.5rem);
+    overflow: auto;
+    padding: 0 .5rem 2rem 0;
+    /* Persistent chrome: keep it out of the page's view transition, like the header. */
+    view-transition-name: bb-rail;
+}
+
+.bb-rail:empty {
+    padding: 0;
+}
+
+.bb-rail-title {
+    display: block;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+    margin: 0 0 .5rem;
+    padding-inline-start: .75rem;
+}
+
+.bb-rail ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-inline-start: 1px solid var(--bb-border);
+}
+
+.bb-rail li {
+    position: relative;
+    padding: .1875rem .75rem;
+    overflow-wrap: anywhere;
+}
+
+.bb-rail li.bb-rail-sub {
+    padding-inline-start: 1.5rem;
+}
+
+.bb-rail a {
+    display: block;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+    color: var(--bb-text-muted);
+    text-decoration: none;
+    transition: color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-rail a:hover {
+    color: var(--bb-primary);
+    text-decoration: none;
+}
+
+/* The current section: its entry takes the brand color and some weight, and its stretch of the
+   spine lights up in the same color - drawn as an overlay on the list's own hairline so active
+   and inactive entries keep exactly the same geometry. */
+.bb-rail li.bb-active::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    inset-inline-start: -1px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+.bb-rail li.bb-active a {
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-rail-top {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    margin: 1rem 0 0 .75rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    cursor: pointer;
+}
+
+.bb-rail-top:hover {
+    color: var(--bb-primary);
+}
+
+.bb-rail-top svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* A page whose samples need the width - a canvas, a board, a wide grid - gives up the rail: any
+   element with .bb-page-wide in the page turns the docs grid into two columns. Global rather than
+   in DocsLayout.razor.css because the marker lives in the page, outside that component's scope;
+   `div.` outranks the scoped rule, and the narrow-width rules below still take over. */
+div.bb-docs:has(.bb-docs-content .bb-page-wide) {
+    grid-template-columns: var(--bb-nav-panel-width) minmax(0, 1fr);
+}
+
+div.bb-docs:has(.bb-docs-content .bb-page-wide) > .bb-rail {
+    display: none;
+}
+
+/* Anchored headings need clearance for the sticky header when something scrolls to them. */
+:target,
+.bb-docs-content [id],
+article [id] {
+    scroll-margin-top: calc(var(--bb-header-height) + 1.5rem);
+}
+
+/* ============================================================================================
+   21. Theme toggle - lives here rather than in Header.razor.css because the sun/moon swap keys
+   off the bit-theme attribute on <html>, which a scoped-CSS selector cannot reach.
+   ============================================================================================ */
+
+.bb-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    flex: none;
+    border: 1px solid transparent;
+    border-radius: var(--bb-radius);
+    background: transparent;
+    color: var(--bb-text-muted);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-theme-toggle:hover {
+    background: var(--bb-surface-hover);
+    color: var(--bb-text);
+}
+
+.bb-theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
+
+.bb-theme-toggle .bb-icon-moon { display: none; }
+
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-sun { display: none; }
+:root[bit-theme="dark"] .bb-theme-toggle .bb-icon-moon { display: block; }
+
+/* ============================================================================================
+   22. Narrow viewports - the handful of components whose desktop shape does not survive a phone.
+   Everything here earns its place by preventing horizontal overflow, which is the one layout
+   failure a reader cannot work around: a page wider than the screen makes every line of prose on
+   it require sideways scrolling to finish.
+   ============================================================================================ */
+
+/* Tighter cells buy back some of the width the wrapping spends, so each column holds a few more
+   characters before it has to break a word - which is what keeps the breaks landing between words
+   rather than inside them. The wrapping itself is unconditional (see `overflow-wrap` on the
+   cells): these tables sit in the docs column, whose width comes from the sidebar and rail
+   flanking it rather than from the viewport, so a viewport breakpoint is the wrong axis to hang
+   it on - it leaves the table overflowing on a wide screen with a narrow content column. */
+@media (max-width: 760px) {
+    .bb-table th,
+    .bb-table td,
+    .table th,
+    .table td {
+        padding: .5rem .5rem;
+        font-size: .8125rem;
+    }
+}
+
+/* Docs prose runs to long identifiers, package names and URLs; in a phone-width column any one of
+   them is wider than the line, so they are allowed to break rather than to overflow. */
+@media (max-width: 960px) {
+    .bb-card,
+    .bb-intro,
+    .bb-detail-list {
+        overflow-wrap: break-word;
+    }
+}
+
+/* ============================================================================================
+   23. Forced colors (Windows high contrast)
+
+   In this mode the OS replaces every color the page chose, and a surface that was distinguished
+   ONLY by its fill becomes invisible. Everything on this site that relies on a tint to say
+   something - the selected nav row, the active rail entry, a tinted note - gets a border here so
+   the same distinction survives being repainted.
+   ============================================================================================ */
+
+@media (forced-colors: active) {
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-params,
+    .bb-badge,
+    .bb-pager-link,
+    .btn {
+        border: 1px solid CanvasText;
+    }
+
+    /* The dots and the rail's active marker are painted shapes with no text in them, so they
+       would come back as blocks of the canvas color and disappear. */
+    .bb-dot,
+    .bb-rail li.bb-active::before {
+        forced-color-adjust: none;
+        background: LinkText;
+    }
+
+    :focus-visible:where(:not([tabindex="-1"])) {
+        outline: 2px solid CanvasText;
+    }
+}
+
+/* ============================================================================================
+   24. Print
+
+   A reference page is printed, or saved to PDF, more often than any other kind of web page. What
+   is dropped is everything that is navigation rather than content - it cannot be followed on
+   paper - and what is added is the one thing paper cannot carry: the address behind each link.
+   ============================================================================================ */
+
+@media print {
+    :root {
+        --bb-header-height: 0px;
+    }
+
+    html,
+    body {
+        background: #fff;
+        color: #000;
+        font-size: 11pt;
+    }
+
+    .bb-header,
+    .bb-footer,
+    .bb-rail,
+    .bb-docs-sidebar,
+    .bb-docs-topbar,
+    .bb-pager,
+    .bb-docs-foot,
+    .bb-skip-link,
+    .bb-copy-btn,
+    .bb-anchor,
+    .bb-try,
+    .bb-hero-actions {
+        display: none !important;
+    }
+
+    main,
+    .bb-docs,
+    .bb-docs-content,
+    .bb-landing > section {
+        display: block;
+        max-width: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    .bb-card,
+    .bb-note,
+    .bb-code,
+    .bb-table,
+    .bb-params {
+        background: none;
+        box-shadow: none;
+        border-color: #999;
+        /* A section split across a page break loses the connection between its heading and its
+           content, which on a reference page is the whole of what it says. */
+        break-inside: avoid;
+    }
+
+    .bb-code {
+        white-space: pre-wrap;
+        overflow: visible;
+    }
+
+    h1,
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+
+    /* On paper a link is just underlined words unless the address comes with it. Only external
+       and absolute ones: printing "(#install)" after every in-page anchor is noise. */
+    a[href^="http"]::after {
+        content: " (" attr(href) ")";
+        font-size: .85em;
+        color: #555;
+        word-break: break-all;
+    }
+}
+
+@media (max-width: 600px) {
+    /* Two pager cards side by side leave neither enough room for its title, and the ellipsis then
+       hides the very thing the link is there to name. */
+    .bb-pager {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-pager-next {
+        grid-column: 1;
+        text-align: start;
+        align-items: flex-start;
+    }
+
+    /* A label column sized to its own content plus a value column cannot both fit. Stacked, the
+       value gets a full line - which is what it needs, since these are URLs, identifiers and
+       serialized state. */
+    .bb-params {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .bb-params dd {
+        border-top: 0;
+    }
+
+    .bb-params > dt:first-of-type + dd {
+        border-top: 0;
+    }
+
+    .bb-error {
+        padding: 3rem 1rem;
+    }
+
+    .bb-error h1 {
+        font-size: var(--fl-font-size-800);
+    }
+}
+
+/* ============================================================================================
+   25. Blazor framework UI - the unhandled-error bar and the error boundary's fallback, drawn as
+   Fluent's danger MessageBar rather than the template's yellow strip.
+   ============================================================================================ */
+
+#blazor-error-ui {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 1300;
+    display: none;
+    padding: .75rem 3rem .75rem 1.25rem;
+    background: var(--bb-danger-soft);
+    color: var(--bb-text);
+    border-top: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    box-shadow: var(--bb-shadow-flyout);
+    font-size: var(--fl-font-size-200);
+    line-height: 1.5;
+}
+
+#blazor-error-ui .reload {
+    margin-inline-start: .5rem;
+    font-weight: var(--fl-weight-semibold);
+}
+
+#blazor-error-ui .dismiss {
+    position: absolute;
+    top: .625rem;
+    inset-inline-end: 1rem;
+    cursor: pointer;
+}
+
+.blazor-error-boundary {
+    border: 1px solid color-mix(in srgb, var(--bb-danger) 40%, transparent);
+    border-inline-start: 3px solid var(--bb-danger);
+    background: var(--bb-danger-soft);
+    color: var(--bb-danger-text);
+    border-radius: var(--bb-radius-lg);
+    padding: .75rem 1rem;
+    margin: 0 0 1.25rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred.";
+}
+
+/* ============================================================================================
+   26. Live samples - the pieces a demo page builds its interactive examples from. A docs section
+   (.bb-card) loses its frame in the docs column; a sample keeps it, because it is a thing on the
+   page rather than a passage of it.
+   ============================================================================================ */
+
+/* The stage a live sample runs on: a raised surface with an optional title bar. */
+.bb-demo {
+    position: relative;
+    min-width: 0;
+    margin: 0 0 1.25rem;
+    padding: 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    box-shadow: var(--bb-shadow-card);
+    color: var(--bb-text);
+}
+
+.bb-demo > :last-child {
+    margin-bottom: 0;
+}
+
+/* The title bar: the sample's name at the start, its controls (reset, a mode switch) at the end. */
+.bb-demo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem .75rem;
+    min-height: 2.75rem;
+    margin: -1.25rem -1.25rem 1.25rem;
+    padding: .375rem .75rem .375rem 1rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+    border-radius: calc(var(--bb-radius-xl) - 1px) calc(var(--bb-radius-xl) - 1px) 0 0;
+}
+
+.bb-demo-label {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.33;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* A recessed area inside a sample - a canvas, a drop zone, a tray of items. */
+.bb-stage {
+    min-width: 0;
+    padding: 1rem;
+    background: var(--bb-bg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+/* Side-by-side panes that stack once the column is too narrow for two. */
+.bb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: 1rem;
+    margin: 0 0 1.25rem;
+}
+
+.bb-split > * {
+    min-width: 0;
+}
+
+/* A row of controls above or below a sample. */
+.bb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin: 0 0 1rem;
+}
+
+.bb-toolbar > .bb-spacer {
+    flex: 1;
+}
+
+/* A labelled control: the label above, Fluent's Field arrangement. */
+.bb-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bb-field > small,
+.bb-field-hint {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-regular);
+    color: var(--bb-text-soft);
+}
+
+.bb-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: .75rem 1rem;
+    margin: 0 0 1rem;
+}
+
+/* A checkbox or a radio with its label to the side. */
+.bb-check {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+    cursor: pointer;
+}
+
+:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
+    accent-color: var(--bb-primary);
+}
+
+/* Zero specificity like the fields above: a library's own switch or checkbox keeps its size. */
+:where(input[type="checkbox"], input[type="radio"]) {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    flex: none;
+}
+
+/* Fluent's segmented toggle group: one choice out of a few, shown all at once. */
+.bb-segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--bb-surface-sunken);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius);
+}
+
+.bb-segmented > button {
+    min-height: 1.75rem;
+    padding: .1875rem .75rem;
+    border: 0;
+    border-radius: calc(var(--bb-radius) - 1px);
+    background: transparent;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    cursor: pointer;
+    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
+                color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-segmented > button:hover {
+    color: var(--bb-text);
+    background: var(--bb-surface-hover);
+}
+
+.bb-segmented > button.active,
+.bb-segmented > button[aria-pressed="true"],
+.bb-segmented > button[aria-checked="true"] {
+    background: var(--bb-surface);
+    color: var(--bb-primary);
+    font-weight: var(--fl-weight-semibold);
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* Fluent's TabList: the selected tab is marked by a brand rule under its label. */
+.bb-tabs {
+    display: flex;
+    gap: .25rem;
+    margin: 0 0 1rem;
+    border-bottom: 1px solid var(--bb-border);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.bb-tabs > button,
+.bb-tabs > a {
+    position: relative;
+    flex: none;
+    padding: .5rem .75rem;
+    border: 0;
+    background: none;
+    color: var(--bb-text-muted);
+    font-family: inherit;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-medium);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.bb-tabs > button:hover,
+.bb-tabs > a:hover {
+    color: var(--bb-text);
+    text-decoration: none;
+}
+
+.bb-tabs > .active,
+.bb-tabs > [aria-selected="true"] {
+    color: var(--bb-text);
+    font-weight: var(--fl-weight-semibold);
+}
+
+.bb-tabs > .active::after,
+.bb-tabs > [aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: .75rem;
+    bottom: 0;
+    height: 3px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary);
+}
+
+/* A running log of what a sample did - events, calls, timings. The box scrolls rather than
+   pushing the page down. */
+.bb-log {
+    max-height: 16rem;
+    margin: 0 0 1.25rem;
+    padding: .75rem 1rem;
+    overflow: auto;
+    background: var(--bb-code-bg);
+    color: var(--bb-code-fg);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    font-family: var(--bb-mono);
+    font-size: .8125rem;
+    line-height: 1.6;
+    scrollbar-width: thin;
+}
+
+.bb-log-empty {
+    color: var(--bb-code-comment);
+}
+
+.bb-log-line {
+    overflow-wrap: anywhere;
+}
+
+/* Numbers a sample measured: one hairline grid, like the landing page's proof strip. The rules
+   between cells are the cells' own outlines meeting in the 1px gap, not the container's color
+   showing through it: when the cells wrap with room to spare, the empty end of the last row stays
+   the surface color instead of turning into a grey block. Outlines paint above the siblings next
+   to them, and the container's overflow clips them at its own frame. */
+.bb-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: 1px;
+    margin: 0 0 1.25rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    overflow: hidden;
+}
+
+.bb-stat {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+    min-width: 0;
+    padding: .875rem 1rem;
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+}
+
+.bb-stat-value {
+    font-size: var(--fl-font-size-500);
+    font-weight: var(--fl-weight-semibold);
+    line-height: 1.2;
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.bb-stat-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+/* Fluent's Spinner, for a sample that is waiting on something. */
+.bb-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+    border: 2px solid var(--bb-primary-soft);
+    border-top-color: var(--bb-primary);
+    border-radius: var(--bb-radius-pill);
+    animation: bb-spin .8s linear infinite;
+    vertical-align: middle;
+}
+
+@keyframes bb-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bb-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* A "view the source of this sample" disclosure: a quiet button that opens a code block. */
+.bb-source {
+    margin: 0 0 1.25rem;
+}
+
+.bb-source > .bb-code,
+.bb-source > pre {
+    margin-top: .75rem;
+    max-height: 32rem;
+}
+
+.bb-source-file {
+    margin: .875rem 0 -.25rem;
+    font-family: var(--bb-mono);
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text-muted);
+}
+
+/* Small text helpers. */
+.bb-muted { color: var(--bb-text-muted); }
+.bb-soft { color: var(--bb-text-soft); }
+.bb-mono { font-family: var(--bb-mono); }
+.bb-nowrap { white-space: nowrap; }
+
+/* ============================================================================================
+   27. Landing page - the home page of every demo is a stack of full-bleed bands: every other band
+   drops to the secondary surface and is fenced by the same hairline the rest of the site's chrome
+   uses, so the sections separate without a single drop shadow between them.
+
+   Hero (.bb-hero) -> proof strip (.bb-proof) -> capability grid -> code walkthrough
+   (.bb-walkthrough) -> comparison table (.bb-compare) -> persona tiles -> FAQ (.bb-faq) -> final
+   call to action (.bb-final-cta). Each band is a <section> directly inside .bb-landing.
+   ============================================================================================ */
+
+.bb-landing {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Full-width background, centred content, no wrapper element: the gutter grows to whatever is
+   left once the content cap is taken, and never falls below the minimum. */
+.bb-landing > section {
+    width: 100%;
+    padding-block: 5rem;
+    padding-inline: max(1.5rem, calc((100% - var(--bb-content-width)) / 2));
+    background: var(--bb-surface);
+}
+
+.bb-landing > section:nth-child(even) {
+    background: var(--bb-bg);
+    border-block: 1px solid var(--bb-border);
+}
+
+/* ---------- Hero ---------- */
+
+/* Two brand-tinted washes rather than a gradient sheet, so the color is felt at the corners and
+   the type still sits on the flat surface color underneath. */
+.bb-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 3rem;
+    align-items: center;
+    padding-block: 6rem 5rem;
+    background:
+        radial-gradient(58rem 30rem at 12% -10%, var(--bb-wash-primary), transparent 60%),
+        radial-gradient(46rem 26rem at 92% 8%, var(--bb-wash-accent), transparent 60%),
+        var(--bb-surface);
+}
+
+.bb-hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--bb-text-muted);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    padding: .3125rem .75rem;
+    border-radius: var(--bb-radius-pill);
+    box-shadow: var(--bb-shadow-card);
+    margin-bottom: 1.5rem;
+}
+
+/* The one place on the site that outsizes the type ramp: a landing hero is the single screen
+   where the title is the whole message. */
+.bb-hero-copy h1 {
+    font-family: var(--bb-font-display);
+    font-size: clamp(2.5rem, 5.2vw, 4rem);
+    font-weight: 600;
+    line-height: 1.08;
+    letter-spacing: -.035em;
+    margin-bottom: 1rem;
+}
+
+.bb-hero-accent {
+    background: linear-gradient(96deg, var(--bb-primary), var(--bb-accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* The gradient IS the text here: forced colors drops the background image, and transparent text
+   over nothing is a hole in the headline. The system's own text color takes over instead. */
+@media (forced-colors: active) {
+    .bb-hero-accent {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+.bb-hero-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    margin-bottom: 1.75rem;
+    max-width: 36rem;
+}
+
+.bb-hero-install {
+    max-width: 34rem;
+    background: var(--bb-code-bg);
+}
+
+.bb-hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .625rem;
+    margin-top: 1.5rem;
+}
+
+.bb-hero-code {
+    min-width: 0;
+}
+
+/* ---------- The window frame around the hero sample ----------
+
+   The hero's code sample sits in a window - a title bar with the file name or the address it
+   belongs to. It is decoration with a job: it says what the sample is FOR before a single line of
+   it has been read. */
+.bb-browser {
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-xl);
+    background: var(--bb-code-bg);
+    box-shadow: var(--bb-shadow-flyout);
+    overflow: hidden;
+}
+
+.bb-browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .5rem .75rem;
+    background: var(--bb-surface-sunken);
+    border-bottom: 1px solid var(--bb-border);
+}
+
+.bb-browser-dots {
+    display: flex;
+    gap: .375rem;
+    flex: none;
+}
+
+.bb-browser-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-border-strong);
+}
+
+.bb-browser-url {
+    display: flex;
+    align-items: center;
+    gap: .4375rem;
+    flex: 1;
+    min-width: 0;
+    padding: .1875rem .625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    color: var(--bb-text-soft);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bb-browser-url svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+    color: var(--bb-success);
+}
+
+.bb-browser-url strong {
+    color: var(--bb-text);
+    font-weight: 600;
+}
+
+/* The sample fills the frame, so it drops the frame it would otherwise draw for itself. */
+.bb-browser .bb-code {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    max-height: 26rem;
+}
+
+/* ---------- Proof strip ----------
+
+   A single hairline grid: the rules between cells are drawn in the 1px gap, so the four claims
+   read as one row of facts rather than as four more cards. It is also the one child of the stack that is a
+   control rather than a band, so it opts out of the full-bleed treatment and keeps the
+   container's gutters. */
+.bb-landing > section.bb-proof {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: 1px;
+    width: min(100% - 3rem, var(--bb-content-width));
+    margin: 3.5rem auto;
+    padding: 0;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    overflow: hidden;
+}
+
+/* The rules between the facts are the cells' outlines - see .bb-stats for why. */
+.bb-proof > div {
+    background: var(--bb-surface);
+    outline: 1px solid var(--bb-border);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+.bb-proof strong {
+    color: var(--bb-text);
+    font-size: .9375rem;
+    font-weight: 600;
+}
+
+.bb-proof span {
+    color: var(--bb-text-muted);
+    font-size: .8125rem;
+    line-height: 1.6;
+}
+
+/* ---------- Sections ---------- */
+
+.bb-section {
+    margin-bottom: 0;
+}
+
+.bb-section > .bb-overline {
+    color: var(--bb-primary);
+    margin-bottom: .625rem;
+}
+
+.bb-section h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-section-sub {
+    color: var(--bb-text-muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--bb-measure);
+    margin-bottom: 2rem;
+}
+
+/* ---------- Walkthrough ---------- */
+
+.bb-walkthrough {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.bb-walkthrough-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    gap: 2.5rem;
+    align-items: center;
+}
+
+/* Alternating sides, so three consecutive rows do not read as a list of three identical blocks. */
+.bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+    order: 2;
+}
+
+.bb-step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: .875rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-family: var(--bb-mono);
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.bb-walkthrough-copy h3 {
+    font-size: 1.25rem;
+    margin-bottom: .5rem;
+}
+
+.bb-walkthrough-copy p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin-bottom: .75rem;
+}
+
+.bb-walkthrough-copy a {
+    font-weight: 600;
+    font-size: .9375rem;
+}
+
+.bb-walkthrough-row .bb-code {
+    margin: 0;
+    box-shadow: var(--bb-shadow-card);
+}
+
+/* ---------- Comparison ---------- */
+
+/* The capability column is prose rather than an identifier, so it opts out of the monospace the
+   table gives its first column by default. */
+.bb-compare td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    color: var(--bb-text);
+}
+
+.bb-compare td:last-child {
+    color: var(--bb-text);
+}
+
+/* ---------- FAQ ---------- */
+
+.bb-faq {
+    display: flex;
+    flex-direction: column;
+    gap: .625rem;
+    max-width: 54rem;
+}
+
+.bb-faq details {
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+    box-shadow: var(--bb-shadow-card);
+    padding: .875rem 1.125rem;
+    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
+}
+
+.bb-faq details[open] {
+    border-color: var(--bb-border-strong);
+}
+
+.bb-faq summary {
+    display: flex;
+    align-items: baseline;
+    gap: .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--bb-text);
+    list-style: none;
+}
+
+.bb-faq summary::-webkit-details-marker {
+    display: none;
+}
+
+/* A chevron drawn from two borders, so it rotates rather than swapping glyphs - one element,
+   no icon font, and the open state is a 200ms turn instead of a jump. */
+.bb-faq summary::before {
+    content: "";
+    flex: 0 0 auto;
+    width: .4rem;
+    height: .4rem;
+    border-right: .125rem solid var(--bb-primary);
+    border-bottom: .125rem solid var(--bb-primary);
+    transform: translateY(-.15rem) rotate(-45deg);
+    transition: transform var(--bb-motion-duration) var(--bb-motion-easing);
+}
+
+.bb-faq summary:hover {
+    color: var(--bb-primary);
+}
+
+.bb-faq details[open] summary::before {
+    transform: translateY(-.25rem) rotate(45deg);
+}
+
+.bb-faq details[open] summary {
+    margin-bottom: .625rem;
+}
+
+.bb-faq details[open] p {
+    padding-inline-start: 1.15rem;
+}
+
+.bb-faq p {
+    color: var(--bb-text-muted);
+    line-height: 1.7;
+    margin: 0;
+}
+
+.bb-faq-more {
+    color: var(--bb-text-muted);
+    margin-top: 1.25rem;
+}
+
+/* ---------- Final CTA ---------- */
+
+.bb-final-cta {
+    text-align: center;
+}
+
+.bb-final-cta h2 {
+    font-size: clamp(1.5rem, 2.6vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -.02em;
+    margin-bottom: .75rem;
+}
+
+.bb-final-cta .bb-section-sub {
+    margin-inline: auto;
+    margin-bottom: 1.75rem;
+}
+
+/* Centre the install line and the buttons. Shrink-to-fit is what centres the block, and the cap
+   is what stops it shrink-to-fitting past the edge of a narrow screen. */
+.bb-final-cta .bb-hero-install {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.bb-final-cta .bb-hero-actions {
+    justify-content: center;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+    .bb-hero {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 2.5rem;
+        padding-block: 4rem 3.5rem;
+    }
+
+    /* minmax(0, 1fr), never a bare 1fr: `1fr` is shorthand for minmax(AUTO, 1fr), and that auto
+       minimum stops the track shrinking below its widest item's min-content. The copy column
+       holds a `pre` of install commands whose min-content is its longest line - about 370px - so
+       a bare 1fr pins the hero to that width, pushes the page past the viewport and gives the
+       whole document a horizontal scrollbar. */
+    .bb-walkthrough-row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.5rem;
+    }
+
+    .bb-walkthrough-row:nth-child(even) .bb-walkthrough-copy {
+        order: 0;
+    }
+}
+
+@media (max-width: 960px) {
+    .bb-landing > section {
+        padding-block: 3.5rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        margin-block: 2.5rem;
+        width: min(100% - 2.5rem, var(--bb-content-width));
+    }
+}
+
+@media (max-width: 600px) {
+    .bb-landing > section {
+        padding-block: 3rem;
+        padding-inline: 1rem;
+    }
+
+    .bb-landing > section.bb-proof {
+        width: calc(100% - 2rem);
+    }
+
+    .bb-hero {
+        padding-block: 3rem;
+    }
+
+    .bb-hero-sub {
+        font-size: 1rem;
+    }
+
+    .bb-section-sub {
+        font-size: 1rem;
+    }
+
+    /* The frame is chrome around the sample, and on a phone the sample needs the pixels more. */
+    .bb-browser-bar {
+        display: none;
+    }
+
+    .bb-hero-actions .btn {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/base.css b/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/base.css
deleted file mode 100644
index 9917d59a077..00000000000
--- a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/base.css
+++ /dev/null
@@ -1,420 +0,0 @@
-/* =============================================================================
-   Bsqlite - reset, typography, and the application shell
-   ========================================================================== */
-
-*, *::before, *::after { box-sizing: border-box; }
-
-html {
-    scrollbar-gutter: stable;
-    scroll-behavior: smooth;
-    -webkit-text-size-adjust: 100%;
-}
-
-body {
-    margin: 0;
-    min-height: 100dvh;
-    font-family: var(--font-sans);
-    font-size: var(--text-base);
-    line-height: var(--lh-normal);
-    color: var(--text);
-    background: var(--canvas);
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-}
-
-::selection { background: var(--accent-soft); color: var(--accent-ink); }
-
-/* --- headings -------------------------------------------------------------- */
-h1, h2, h3, h4 {
-    margin: 0;
-    font-weight: 600;
-    line-height: var(--lh-tight);
-    letter-spacing: var(--track-tight);
-    color: var(--text);
-    text-wrap: balance;
-}
-h1 { font-size: var(--text-2xl); letter-spacing: var(--track-tighter); }
-h2 { font-size: var(--text-lg); }
-h3 { font-size: var(--text-md); }
-h4 { font-size: var(--text-base); }
-
-p { margin: 0 0 var(--space-3); color: var(--text-muted); text-wrap: pretty; }
-p:last-child { margin-bottom: 0; }
-
-.lead {
-    font-size: var(--text-md);
-    line-height: var(--lh-normal);
-    color: var(--text-muted);
-    max-width: var(--measure);
-}
-
-.eyebrow {
-    margin: 0;
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    font-weight: 600;
-    letter-spacing: var(--track-wide);
-    text-transform: uppercase;
-    color: var(--accent);
-}
-
-a {
-    color: var(--accent);
-    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
-    text-underline-offset: 0.18em;
-    transition: color var(--dur) var(--ease);
-}
-a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
-
-hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
-
-strong, b { font-weight: 600; color: var(--text); }
-
-/* --- focus ---------------------------------------------------------------- */
-:focus-visible {
-    outline: 2px solid var(--focus-ring);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-}
-:focus:not(:focus-visible) { outline: none; }
-
-.skip-link {
-    position: fixed;
-    top: var(--space-2);
-    left: var(--space-2);
-    z-index: 100;
-    padding: var(--space-2) var(--space-4);
-    background: var(--accent);
-    color: var(--text-on-accent);
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    text-decoration: none;
-    transform: translateY(-200%);
-    transition: transform var(--dur) var(--ease);
-}
-.skip-link:focus-visible { transform: translateY(0); color: var(--text-on-accent); }
-
-/* --- inline code ----------------------------------------------------------- */
-code, pre, .mono {
-    /* Ligatures off: a documentation site has to show the characters you type,
-       not JetBrains Mono's arrow glyph for "=>". */
-    font-variant-ligatures: none;
-    font-feature-settings: "calt" 0, "liga" 0;
-}
-
-code {
-    font-family: var(--font-mono);
-    font-size: 0.86em;
-    background: var(--surface-2);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-sm);
-    padding: 0.05em 0.35em;
-    color: var(--text);
-    white-space: nowrap;
-}
-
-/* An identifier such as BsqliteSynchronousApiNotSupportedException is wider than a phone held upright; there it
-   may break anywhere rather than widen the page. */
-@media (max-width: 40rem) {
-    code {
-        white-space: normal;
-        overflow-wrap: anywhere;
-    }
-}
-.mono { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
-
-/* =============================================================================
-   Shell: topbar / sidebar / content
-   ========================================================================== */
-
-.topbar {
-    position: sticky;
-    top: 0;
-    z-index: 40;
-    height: var(--topbar-h);
-    display: flex;
-    align-items: center;
-    background: color-mix(in srgb, var(--canvas) 82%, transparent);
-    backdrop-filter: saturate(180%) blur(12px);
-    border-bottom: 1px solid var(--border);
-}
-.topbar-inner {
-    width: 100%;
-    max-width: var(--page-max);
-    margin: 0 auto;
-    padding: 0 var(--space-4);
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-}
-
-.brand {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-    text-decoration: none;
-    color: var(--text);
-    border-radius: var(--radius-md);
-    padding: var(--space-1);
-    margin-left: calc(var(--space-1) * -1);
-}
-.brand:hover { color: var(--text); }
-.brand-mark {
-    flex: none;
-    width: 1.75rem;
-    height: 1.75rem;
-    display: grid;
-    place-items: center;
-    border-radius: var(--radius-md);
-    background: var(--accent);
-    color: var(--text-on-accent);
-}
-.brand-mark svg { width: 1.05rem; height: 1.05rem; }
-.brand-name {
-    font-weight: 600;
-    font-size: var(--text-md);
-    letter-spacing: var(--track-tight);
-    line-height: 1.1;
-}
-.brand-version {
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    color: var(--text-muted);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-full);
-    padding: 0.1rem 0.45rem;
-    line-height: 1.4;
-    white-space: nowrap;
-}
-
-.topbar-links { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-4); }
-.topbar-link {
-    padding: var(--space-2) var(--space-3);
-    border-radius: var(--radius-md);
-    color: var(--text-muted);
-    text-decoration: none;
-    font-size: var(--text-base);
-    font-weight: 500;
-    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
-}
-.topbar-link:hover { color: var(--text); background: var(--surface-2); }
-.topbar-link[aria-current] { color: var(--text); background: var(--surface-2); }
-
-.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
-
-/* --- icon button / theme switch ------------------------------------------- */
-.icon-btn {
-    display: inline-grid;
-    place-items: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    padding: 0;
-    border: 1px solid transparent;
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
-}
-/* The :not(:disabled) is not decoration: components.css styles bare <button> as the primary
-   action, and `button:hover:not(:disabled)` out-specifies a plain `.icon-btn:hover`, which would
-   paint every chrome button accent-green on hover. Chrome controls match that specificity. */
-.icon-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-2); border-color: var(--border); }
-.icon-btn svg { width: 1.15rem; height: 1.15rem; }
-
-.segmented {
-    display: inline-flex;
-    gap: 2px;
-    padding: 2px;
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-}
-.segmented button {
-    display: inline-grid;
-    place-items: center;
-    width: 1.85rem;
-    height: 1.6rem;
-    padding: 0;
-    border: 0;
-    border-radius: calc(var(--radius-md) - 2px);
-    background: transparent;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
-}
-.segmented button:hover:not(:disabled) { color: var(--text); background: transparent; }
-.segmented button[aria-pressed="true"],
-.segmented button[aria-pressed="true"]:hover:not(:disabled) {
-    background: var(--surface);
-    color: var(--text);
-    box-shadow: var(--shadow-xs);
-}
-.segmented svg { width: 0.95rem; height: 0.95rem; }
-
-/* --- layout grid ----------------------------------------------------------- */
-.layout {
-    max-width: var(--page-max);
-    margin: 0 auto;
-    padding: 0 var(--space-4);
-    display: grid;
-    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
-    gap: var(--space-6);
-    align-items: start;
-}
-
-.sidebar {
-    position: sticky;
-    top: var(--topbar-h);
-    max-height: calc(100dvh - var(--topbar-h));
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    min-height: calc(100dvh - var(--topbar-h));
-    padding: var(--space-5) var(--space-2) var(--space-7) 0;
-    border-right: 1px solid var(--border-subtle);
-    scrollbar-width: thin;
-}
-
-.nav-group + .nav-group { margin-top: var(--space-5); }
-.nav-group-title {
-    margin: 0 0 var(--space-2) var(--space-3);
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    font-weight: 600;
-    letter-spacing: var(--track-wide);
-    text-transform: uppercase;
-    color: var(--text-faint);
-}
-.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
-
-.nav-link {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-2) var(--space-3);
-    border-radius: var(--radius-md);
-    color: var(--text-muted);
-    text-decoration: none;
-    font-size: var(--text-base);
-    line-height: 1.3;
-    min-height: 2.25rem;
-    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
-}
-.nav-link:hover { color: var(--text); background: var(--surface-2); }
-.nav-link svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--text-faint); transition: color var(--dur) var(--ease); }
-.nav-link:hover svg { color: var(--text-muted); }
-.nav-link[aria-current="page"] {
-    background: var(--accent-wash);
-    color: var(--accent-ink);
-    font-weight: 600;
-    box-shadow: inset 2px 0 0 var(--accent);
-}
-.nav-link[aria-current="page"] svg { color: var(--accent); }
-.nav-external { margin-left: auto; opacity: 0.65; }
-.nav-external svg { width: 0.85rem; height: 0.85rem; }
-
-.nav-toggle { display: none; }
-.nav-scrim { display: none; }
-
-/* --- content --------------------------------------------------------------- */
-.content { min-width: 0; padding: var(--space-5) 0 var(--space-8); }
-.container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-4); }
-
-.site-footer {
-    border-top: 1px solid var(--border);
-    background: var(--canvas-sunken);
-    padding: var(--space-6) 0;
-    margin-top: var(--space-8);
-}
-.footer-inner {
-    max-width: var(--page-max);
-    margin: 0 auto;
-    padding: 0 var(--space-4);
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-4) var(--space-6);
-    align-items: center;
-    justify-content: space-between;
-    font-size: var(--text-sm);
-    color: var(--text-muted);
-}
-.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
-.footer-links a { color: var(--text-muted); text-decoration: none; }
-.footer-links a:hover { color: var(--accent); }
-
-/* --- responsive ------------------------------------------------------------- */
-@media (max-width: 639px) {
-    /* At 390px the version chip pushes the theme switch off the right edge. */
-    .brand-version { display: none; }
-    .topbar-inner { gap: var(--space-2); padding: 0 var(--space-3); }
-}
-
-@media (max-width: 1023px) {
-    .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
-    .topbar-links { display: none; }
-
-    .nav-toggle { display: inline-grid; }
-
-    .sidebar {
-        position: fixed;
-        min-height: 0;
-        inset: var(--topbar-h) auto 0 0;
-        z-index: 45;
-        width: min(20rem, 84vw);
-        max-height: none;
-        padding: var(--space-4) var(--space-3) var(--space-7);
-        background: var(--canvas);
-        border-right: 1px solid var(--border);
-        box-shadow: var(--shadow-lg);
-        transform: translateX(-102%);
-        transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
-        visibility: hidden;
-    }
-    .sidebar[data-open="true"] { transform: translateX(0); visibility: visible; }
-
-    .nav-scrim {
-        display: block;
-        position: fixed;
-        inset: var(--topbar-h) 0 0 0;
-        z-index: 44;
-        background: var(--overlay);
-        border: 0;
-        padding: 0;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity var(--dur-slow) var(--ease);
-    }
-    .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
-    .nav-scrim:hover:not(:disabled) { background: var(--overlay); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html { scroll-behavior: auto; }
-    *, *::before, *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
-/* Blazor's unhandled-error bar (Components/App.razor). Hidden until the runtime shows it - the framework only
-   switches its display on, so without this rule it would sit at the bottom of every page. */
-#blazor-error-ui {
-    position: fixed;
-    inset: auto 0 0 0;
-    z-index: 1000;
-    display: none;
-    padding: 0.7rem 1.2rem;
-    background: var(--danger-soft);
-    color: var(--danger-ink);
-    border-top: 1px solid var(--danger);
-    font-size: var(--text-sm);
-}
-
-#blazor-error-ui .reload { margin-inline-start: 0.5rem; }
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    float: right;
-    font-weight: 700;
-}
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/components.css b/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/components.css
deleted file mode 100644
index 947ab913eaf..00000000000
--- a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/components.css
+++ /dev/null
@@ -1,554 +0,0 @@
-/* =============================================================================
-   Bsqlite - components
-   Layer 3 of the token system: every value below resolves through a semantic
-   token, never through a raw hex.
-   ========================================================================== */
-
-/* --- page header ----------------------------------------------------------- */
-.page-head {
-    max-width: 62rem;
-    margin: 0 0 var(--space-6);
-    padding-bottom: var(--space-5);
-    border-bottom: 1px solid var(--border-subtle);
-}
-.page-head h1 { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-2xl); }
-.page-head .lead { margin: 0; }
-
-/* --- section --------------------------------------------------------------- */
-.section { margin: var(--space-8) 0 0; }
-.section-head { max-width: 46rem; margin: 0 0 var(--space-5); }
-.section-head h2 {
-    font-size: var(--text-xl);
-    letter-spacing: var(--track-tighter);
-    margin: var(--space-2) 0 var(--space-2);
-}
-.section-head p { margin: 0; }
-
-/* --- card ------------------------------------------------------------------ */
-.card {
-    position: relative;
-    min-width: 0;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    padding: var(--space-5);
-    box-shadow: var(--shadow-xs);
-}
-.card-head {
-    display: flex;
-    align-items: baseline;
-    flex-wrap: wrap;
-    gap: var(--space-2) var(--space-3);
-    margin-bottom: var(--space-2);
-}
-.card-head h2 { margin: 0; }
-.card-step {
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    font-weight: 600;
-    letter-spacing: var(--track-wide);
-    text-transform: uppercase;
-    color: var(--accent);
-    background: var(--accent-wash);
-    border: 1px solid var(--accent-soft);
-    border-radius: var(--radius-full);
-    padding: 0.1rem 0.5rem;
-    order: -1;
-}
-.card > p { max-width: var(--measure); }
-/* Sub-headings inside a card need their own rhythm: without this a demo that lists
-   several sub-sections runs them together. */
-.card h3 { margin-top: var(--space-5); }
-.card > h3:first-child, .card-head + h3 { margin-top: 0; }
-
-/* --- callouts -------------------------------------------------------------- */
-.try, .note, .warn {
-    display: flex;
-    gap: var(--space-3);
-    align-items: baseline;
-    border-radius: var(--radius-md);
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--text-base);
-    line-height: var(--lh-snug);
-    margin: var(--space-4) 0;
-    max-width: var(--measure);
-}
-.try {
-    background: var(--accent-wash);
-    border: 1px solid var(--accent-soft);
-    border-left: 2px solid var(--accent);
-    color: var(--accent-ink);
-}
-.try b {
-    flex: none;
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    letter-spacing: var(--track-wide);
-    text-transform: uppercase;
-    color: var(--accent);
-    padding-top: 0.1em;
-}
-.try a, .note a { color: currentColor; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
-.try code, .note code, .warn code { background: transparent; border-color: currentColor; }
-
-.note {
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    color: var(--text-muted);
-}
-.warn {
-    background: var(--warn-soft);
-    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
-    color: var(--warn-ink);
-}
-
-.error {
-    display: flex;
-    gap: var(--space-3);
-    align-items: baseline;
-    margin: 0 0 var(--space-4);
-    padding: var(--space-3) var(--space-4);
-    border-radius: var(--radius-md);
-    background: var(--danger-soft);
-    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
-    color: var(--danger-ink);
-    font-size: var(--text-base);
-}
-
-/* --- buttons --------------------------------------------------------------- */
-button, .btn {
-    font: inherit;
-    font-weight: 500;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    min-height: 2.25rem;
-    padding: var(--space-2) var(--space-4);
-    border: 1px solid var(--accent);
-    border-radius: var(--radius-md);
-    background: var(--accent);
-    color: var(--text-on-accent);
-    cursor: pointer;
-    text-decoration: none;
-    white-space: nowrap;
-    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
-                color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
-}
-button:hover:not(:disabled), .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
-button:active:not(:disabled), .btn:active { transform: translateY(1px); }
-button:disabled { opacity: 0.45; cursor: not-allowed; }
-button svg, .btn svg { width: 1rem; height: 1rem; flex: none; }
-
-button.secondary, .btn-secondary {
-    background: var(--surface);
-    color: var(--text);
-    border-color: var(--border-strong);
-}
-button.secondary:hover:not(:disabled), .btn-secondary:hover {
-    background: var(--surface-2);
-    color: var(--text);
-    border-color: var(--border-strong);
-}
-
-button.danger {
-    background: transparent;
-    color: var(--danger);
-    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
-}
-button.danger:hover:not(:disabled) {
-    background: var(--danger-soft);
-    color: var(--danger);
-    border-color: var(--danger);
-}
-
-button.ghost {
-    background: transparent;
-    border-color: transparent;
-    color: var(--text-muted);
-}
-button.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border); }
-
-.btn-lg { min-height: 2.75rem; padding: var(--space-2) var(--space-5); font-size: var(--text-md); }
-
-/* --- forms ----------------------------------------------------------------- */
-form, .row {
-    display: flex;
-    gap: var(--space-2);
-    flex-wrap: wrap;
-    align-items: center;
-    margin: var(--space-4) 0 0;
-}
-form.stack-form { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; }
-form.stack-form label {
-    display: grid;
-    gap: var(--space-1);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    letter-spacing: 0.01em;
-    color: var(--text-muted);
-}
-form.stack-form label:has(> input[type="checkbox"]) {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    min-height: 2.25rem;
-}
-
-input, select, textarea {
-    font: inherit;
-    min-height: 2.25rem;
-    padding: var(--space-2) var(--space-3);
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-md);
-    background: var(--surface);
-    color: var(--text);
-    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
-}
-input:hover, select:hover, textarea:hover { border-color: var(--text-faint); }
-input:focus-visible, select:focus-visible, textarea:focus-visible {
-    outline: none;
-    border-color: var(--accent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
-}
-input[type="checkbox"] { min-height: 0; width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
-input[type="color"] { padding: 0.15rem; width: 3rem; cursor: pointer; }
-input[type="search"] { min-width: 14rem; }
-textarea { min-height: 5rem; resize: vertical; line-height: var(--lh-snug); }
-select { cursor: pointer; }
-::placeholder { color: var(--text-faint); }
-
-/* --- toolbar --------------------------------------------------------------- */
-.toolbar {
-    display: flex;
-    gap: var(--space-2);
-    flex-wrap: wrap;
-    align-items: center;
-    margin: var(--space-4) 0;
-}
-.grow { flex: 1 1 auto; }
-
-/* --- tables ---------------------------------------------------------------- */
-.scroll-x {
-    overflow-x: auto;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    background: var(--surface);
-}
-.scroll-x + .codeblock, .scroll-x + form { margin-top: var(--space-4); }
-
-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
-/* Inside a scroller a data table scrolls rather than wrapping every cell to four lines - which
-   is what a seven-column grid does in a half-width column. 38rem clears the widest grid in the
-   sample at desktop widths without scrolling; narrower viewports scroll the table, not the page. */
-.scroll-x > table { min-width: 38rem; }
-.scroll-x td.mono, .scroll-x td:has(> .swatch) { white-space: nowrap; }
-th, td {
-    text-align: left;
-    padding: var(--space-2) var(--space-3);
-    border-bottom: 1px solid var(--border-subtle);
-    vertical-align: middle;
-}
-thead th {
-    position: sticky;
-    top: 0;
-    background: var(--surface-2);
-    color: var(--text-muted);
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    font-weight: 600;
-    letter-spacing: var(--track-wide);
-    text-transform: uppercase;
-    white-space: nowrap;
-    border-bottom: 1px solid var(--border);
-}
-tbody tr:last-child td { border-bottom: 0; }
-tbody tr { transition: background var(--dur-fast) var(--ease); }
-tr.clickable { cursor: pointer; }
-tr.clickable:hover td { background: var(--surface-2); }
-tr.selected td { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
-tr.selected:hover td { background: var(--accent-wash); }
-td .actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
-.actions button { min-height: 1.85rem; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
-.type-table td:first-child { white-space: nowrap; }
-.empty { color: var(--text-faint); font-style: italic; padding: var(--space-2) 0; }
-
-/* --- pills ----------------------------------------------------------------- */
-.pill {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    border-radius: var(--radius-full);
-    padding: 0.1rem 0.55rem;
-    background: var(--accent-soft);
-    color: var(--accent-ink);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    line-height: 1.5;
-    white-space: nowrap;
-}
-.pill.warn { background: var(--warn-soft); color: var(--warn-ink); border: 0; }
-.pill.danger { background: var(--danger-soft); color: var(--danger-ink); }
-.pill.muted { background: var(--surface-3); color: var(--text-muted); }
-.pill.ok { background: var(--ok-soft); color: var(--ok-ink); }
-.pill svg { width: 0.8rem; height: 0.8rem; }
-
-.swatch {
-    display: inline-block;
-    width: 0.7rem;
-    height: 0.7rem;
-    border-radius: var(--radius-full);
-    vertical-align: -0.05rem;
-    margin-right: var(--space-2);
-    border: 1px solid var(--border-strong);
-}
-
-/* --- code block ------------------------------------------------------------ */
-.codeblock {
-    border: 1px solid var(--code-border);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    background: var(--code-bg);
-    margin: var(--space-4) 0 0;
-}
-.codeblock + .codeblock { margin-top: var(--space-2); }
-.codeblock-head {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
-    min-height: 2.25rem;
-    background: var(--code-head);
-    border-bottom: 1px solid var(--code-border);
-    font-size: var(--text-xs);
-}
-.codeblock[data-open="false"] .codeblock-head { border-bottom: 0; }
-.codeblock-lang {
-    flex: none;
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    font-weight: 600;
-    letter-spacing: var(--track-wide);
-    text-transform: uppercase;
-    color: var(--accent);
-}
-.codeblock-title {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.codeblock-btn {
-    min-height: 1.85rem;
-    padding: var(--space-1) var(--space-2);
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: var(--radius-sm);
-    color: var(--text-muted);
-    font-size: var(--text-xs);
-    font-weight: 500;
-}
-.codeblock-btn:hover:not(:disabled) {
-    color: var(--text);
-    background: var(--surface);
-    border-color: var(--code-border);
-}
-.codeblock-btn.copied, .codeblock-btn.copied:hover:not(:disabled) { color: var(--ok); border-color: transparent; background: transparent; }
-.codeblock-btn svg { width: 0.9rem; height: 0.9rem; }
-
-.codeblock pre {
-    margin: 0;
-    padding: var(--space-4);
-    overflow-x: auto;
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    line-height: 1.65;
-    color: var(--code-text);
-    tab-size: 4;
-}
-.codeblock pre code {
-    background: none;
-    border: 0;
-    padding: 0;
-    font-size: inherit;
-    color: inherit;
-    white-space: pre;
-}
-
-.tok-com { color: var(--code-comment); font-style: italic; }
-.tok-str { color: var(--code-string); }
-.tok-key { color: var(--code-keyword); font-weight: 500; }
-.tok-num { color: var(--code-number); }
-.tok-typ { color: var(--code-type); }
-
-/* runtime output panes share the code surface */
-pre.output {
-    margin: var(--space-4) 0 0;
-    padding: var(--space-4);
-    background: var(--code-bg);
-    color: var(--code-text);
-    border: 1px solid var(--code-border);
-    border-radius: var(--radius-md);
-    overflow-x: auto;
-    white-space: pre-wrap;
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    line-height: 1.6;
-}
-
-/* --- copyable command ------------------------------------------------------ */
-.command {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
-    background: var(--code-bg);
-    border: 1px solid var(--code-border);
-    border-radius: var(--radius-md);
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    color: var(--code-text);
-    max-width: 34rem;
-}
-.command-prompt { color: var(--accent); user-select: none; flex: none; }
-.command-text { overflow-x: auto; white-space: nowrap; flex: 1 1 auto; scrollbar-width: none; }
-.command-text::-webkit-scrollbar { display: none; }
-
-/* --- lists ----------------------------------------------------------------- */
-ul.plain { margin: var(--space-3) 0 0; padding-left: var(--space-5); color: var(--text-muted); }
-ul.plain li { margin: var(--space-1) 0; }
-
-ul.checks { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
-ul.checks li { display: flex; gap: var(--space-3); align-items: baseline; color: var(--text-muted); }
-ul.checks svg { width: 1rem; height: 1rem; flex: none; color: var(--accent); transform: translateY(0.15em); }
-
-/* --- generic layout helpers ------------------------------------------------- */
-.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
-/* A seven-column CRUD grid and an editor rail do not both fit in 1000px: side by side, every
-   product name wrapped to five lines. The grid takes the full content width and the editor cards
-   sit under it, spreading out on wide screens. */
-.split { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
-.split > .stack { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
-.stack { display: grid; gap: var(--space-4); }
-.stack-lg { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
-
-@media (max-width: 700px) {
-    .split > .stack { grid-template-columns: minmax(0, 1fr); }
-}
-
-/* --- stats ----------------------------------------------------------------- */
-.kpi { display: grid; gap: var(--space-1); align-content: start; }
-.kpi strong {
-    font-size: var(--text-2xl);
-    font-weight: 600;
-    letter-spacing: var(--track-tighter);
-    font-variant-numeric: tabular-nums;
-    line-height: 1.1;
-}
-.kpi span { color: var(--text-muted); font-size: var(--text-sm); }
-
-/* --- session (storage) bar -------------------------------------------------- */
-.session-bar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--space-3) var(--space-5);
-    padding: var(--space-3) var(--space-4);
-    margin-bottom: var(--space-5);
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-}
-.session-id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
-.session-label {
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    letter-spacing: var(--track-wide);
-    text-transform: uppercase;
-    color: var(--text-faint);
-    margin: 0;
-}
-.session-name { margin: 0; font-weight: 600; color: var(--text); line-height: 1.2; }
-.session-blurb {
-    flex: 1 1 18rem;
-    min-width: 0;
-    margin: 0;
-    font-size: var(--text-xs);
-    color: var(--text-faint);
-    line-height: var(--lh-snug);
-}
-.session-controls { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
-.session-controls label { display: grid; gap: var(--space-1); font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--track-wide); }
-.session-controls select { min-height: 2.25rem; }
-.session-controls button { min-height: 2.25rem; }
-.session-status { flex-basis: 100%; margin: 0; font-size: var(--text-sm); }
-.session-status.ok { color: var(--ok); }
-.session-status.failed { color: var(--danger); }
-
-.storage-dot {
-    flex: none;
-    width: 0.6rem;
-    height: 0.6rem;
-    border-radius: var(--radius-full);
-    background: var(--accent);
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
-}
-.storage-dot[data-name="indexeddb"] { background: #3b82f6; box-shadow: 0 0 0 4px color-mix(in srgb, #3b82f6 22%, transparent); }
-.storage-dot[data-name="cache-storage"] { background: #d97706; box-shadow: 0 0 0 4px color-mix(in srgb, #d97706 22%, transparent); }
-.storage-dot[data-name="in-memory"] { background: var(--text-faint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-faint) 22%, transparent); }
-
-/* --- live indicator --------------------------------------------------------- */
-.live-dot {
-    display: inline-block;
-    width: 0.45rem;
-    height: 0.45rem;
-    border-radius: var(--radius-full);
-    background: var(--ok);
-    animation: pulse 2.4s var(--ease) infinite;
-}
-@keyframes pulse {
-    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); }
-    50% { opacity: 0.75; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 0%, transparent); }
-}
-
-/* --- boot splash ------------------------------------------------------------ */
-.boot {
-    min-height: 100dvh;
-    display: grid;
-    place-content: center;
-    justify-items: center;
-    gap: var(--space-4);
-    color: var(--text-muted);
-    font-size: var(--text-sm);
-}
-.boot-mark {
-    width: 2.5rem;
-    height: 2.5rem;
-    display: grid;
-    place-items: center;
-    border-radius: var(--radius-lg);
-    background: var(--accent);
-    color: var(--text-on-accent);
-}
-.boot-mark svg { width: 1.4rem; height: 1.4rem; }
-.boot-bar {
-    width: 10rem;
-    height: 2px;
-    border-radius: var(--radius-full);
-    background: var(--border);
-    overflow: hidden;
-}
-.boot-bar::after {
-    content: "";
-    display: block;
-    width: 40%;
-    height: 100%;
-    background: var(--accent);
-    animation: slide 1.4s var(--ease) infinite;
-}
-@keyframes slide {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(350%); }
-}
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/landing.css b/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/landing.css
deleted file mode 100644
index c5e4bce9cce..00000000000
--- a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/landing.css
+++ /dev/null
@@ -1,291 +0,0 @@
-/* =============================================================================
-   Bsqlite - landing page
-   Section order follows the open-source / developer-tool pattern:
-   hero -> install -> live proof -> capability -> quick start -> demos -> limits
-   ========================================================================== */
-
-.landing { padding-bottom: var(--space-8); }
-
-/* --- hero ------------------------------------------------------------------- */
-.hero {
-    position: relative;
-    overflow: hidden;
-    border-bottom: 1px solid var(--border-subtle);
-    padding: var(--space-8) 0 var(--space-7);
-}
-.hero::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background:
-        radial-gradient(58rem 26rem at 12% -18%, var(--hero-glow-a) 0%, transparent 62%),
-        radial-gradient(48rem 24rem at 88% -12%, var(--hero-glow-b) 0%, transparent 60%);
-    pointer-events: none;
-}
-.hero::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-image:
-        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
-        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
-    background-size: 3.5rem 3.5rem;
-    mask-image: radial-gradient(75% 70% at 28% 0%, #000 0%, transparent 72%);
-    pointer-events: none;
-}
-.hero-inner {
-    position: relative;
-    max-width: var(--page-max);
-    margin: 0 auto;
-    padding: 0 var(--space-4);
-    display: grid;
-    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
-    gap: var(--space-7);
-    align-items: center;
-}
-
-.hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    padding: 0.15rem 0.6rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-full);
-    background: var(--surface);
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    letter-spacing: 0.03em;
-    color: var(--text-muted);
-    text-decoration: none;
-}
-.badge svg { width: 0.8rem; height: 0.8rem; }
-a.badge:hover { color: var(--text); border-color: var(--border-strong); }
-
-.hero h1 {
-    font-size: clamp(2rem, 1.25rem + 3vw, var(--text-4xl));
-    line-height: 1.05;
-    letter-spacing: -0.04em;
-    margin: 0 0 var(--space-4);
-    max-width: 18ch;
-}
-.hero h1 em { font-style: normal; color: var(--accent); }
-.hero-lead {
-    font-size: var(--text-lg);
-    line-height: 1.5;
-    color: var(--text-muted);
-    max-width: 40rem;
-    margin: 0 0 var(--space-5);
-}
-.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
-.hero-note { font-size: var(--text-xs); color: var(--text-faint); margin: 0; }
-
-/* --- hero code panel --------------------------------------------------------- */
-.hero-panel {
-    background: var(--code-bg);
-    border: 1px solid var(--code-border);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
-    overflow: hidden;
-}
-.hero-panel-head {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
-    background: var(--code-head);
-    border-bottom: 1px solid var(--code-border);
-}
-.hero-panel-dots { display: flex; gap: 0.3rem; }
-.hero-panel-dots i {
-    width: 0.55rem;
-    height: 0.55rem;
-    border-radius: var(--radius-full);
-    background: var(--border-strong);
-    display: block;
-}
-.hero-panel-file {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    margin-left: var(--space-2);
-}
-.hero-panel pre {
-    margin: 0;
-    font-variant-ligatures: none;
-    padding: var(--space-5);
-    overflow-x: auto;
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    line-height: 1.7;
-    color: var(--code-text);
-    tab-size: 4;
-}
-.hero-panel pre code { background: none; border: 0; padding: 0; white-space: pre; }
-
-/* --- stat strip -------------------------------------------------------------- */
-.stat-strip {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-    gap: 1px;
-    background: var(--border);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    margin-top: var(--space-6);
-}
-.stat {
-    background: var(--surface);
-    padding: var(--space-4) var(--space-5);
-    display: grid;
-    gap: var(--space-1);
-    align-content: start;
-}
-.stat-value {
-    font-size: var(--text-2xl);
-    font-weight: 600;
-    letter-spacing: var(--track-tighter);
-    font-variant-numeric: tabular-nums;
-    line-height: 1.1;
-    color: var(--text);
-}
-.stat-value.small { font-size: var(--text-lg); }
-.stat-label { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); }
-
-/* --- feature grid ------------------------------------------------------------ */
-.feature-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
-@media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 700px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
-.feature {
-    padding: var(--space-5);
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
-}
-.feature:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
-.feature-icon {
-    display: grid;
-    place-items: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--radius-md);
-    background: var(--accent-wash);
-    color: var(--accent);
-    border: 1px solid var(--accent-soft);
-    margin-bottom: var(--space-3);
-}
-.feature-icon svg { width: 1.15rem; height: 1.15rem; }
-.feature h3 { margin-bottom: var(--space-2); }
-.feature p { font-size: var(--text-base); margin: 0; }
-
-/* --- steps ------------------------------------------------------------------- */
-.steps { display: grid; gap: var(--space-5); counter-reset: step; }
-.step {
-    display: grid;
-    grid-template-columns: 2rem minmax(0, 1fr);
-    gap: var(--space-4);
-    align-items: start;
-}
-.step-num {
-    counter-increment: step;
-    display: grid;
-    place-items: center;
-    width: 2rem;
-    height: 2rem;
-    border-radius: var(--radius-full);
-    border: 1px solid var(--border);
-    background: var(--surface);
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    font-weight: 600;
-    color: var(--accent);
-}
-.step-num::before { content: counter(step); }
-.step-body { min-width: 0; }
-.step-body h3 { margin-bottom: var(--space-2); }
-.step-body > p { max-width: var(--measure); }
-
-/* --- demo link cards ---------------------------------------------------------- */
-.link-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
-.link-card {
-    display: grid;
-    grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
-    gap: var(--space-4);
-    align-items: start;
-    padding: var(--space-4);
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    text-decoration: none;
-    color: var(--text);
-    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
-}
-.link-card:hover {
-    color: var(--text);
-    border-color: var(--accent);
-    background: var(--accent-wash);
-    transform: translateY(-1px);
-}
-.link-card-icon {
-    display: grid;
-    place-items: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--radius-md);
-    background: var(--surface-2);
-    color: var(--text-muted);
-    border: 1px solid var(--border);
-}
-.link-card:hover .link-card-icon { color: var(--accent); border-color: var(--accent-soft); }
-.link-card-icon svg { width: 1.05rem; height: 1.05rem; }
-.link-card strong { display: block; font-size: var(--text-md); margin-bottom: var(--space-1); }
-.link-card span { display: block; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--lh-snug); }
-.link-card-go { color: var(--text-faint); transition: transform var(--dur) var(--ease); align-self: center; }
-.link-card:hover .link-card-go { color: var(--accent); transform: translateX(2px); }
-.link-card-go svg { width: 1rem; height: 1rem; display: block; }
-
-/* --- comparison / matrix table ------------------------------------------------ */
-.matrix { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
-.matrix table { font-size: var(--text-sm); }
-.matrix th:first-child, .matrix td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
-.matrix td { color: var(--text-muted); }
-
-/* --- honest limits list --------------------------------------------------------- */
-.limits-list { display: grid; gap: var(--space-3); }
-.limit-item {
-    display: grid;
-    grid-template-columns: 1.15rem minmax(0, 1fr);
-    gap: var(--space-3);
-    align-items: start;
-    padding: var(--space-4);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    background: var(--surface);
-}
-.limit-item svg { width: 1.05rem; height: 1.05rem; color: var(--warn); transform: translateY(0.15em); }
-.limit-item strong { display: block; margin-bottom: var(--space-1); }
-.limit-item p { margin: 0; font-size: var(--text-sm); }
-
-/* --- closing call to action ------------------------------------------------------ */
-.closing {
-    margin-top: var(--space-8);
-    padding: var(--space-7) var(--space-5);
-    text-align: center;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-xl);
-    background: var(--surface-2);
-}
-.closing h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
-.closing p { max-width: 34rem; margin: 0 auto var(--space-5); }
-.closing .hero-actions { justify-content: center; margin-bottom: 0; }
-
-/* --- responsive ------------------------------------------------------------------ */
-@media (max-width: 1023px) {
-    .hero { padding: var(--space-7) 0 var(--space-6); }
-    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
-}
-@media (max-width: 560px) {
-    .hero-actions .btn, .hero-actions button { width: 100%; }
-    .command { max-width: none; }
-}
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/tokens.css b/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/tokens.css
deleted file mode 100644
index b3be5cbf225..00000000000
--- a/src/Utilities/Bsqlite/Demo/Server/wwwroot/css/tokens.css
+++ /dev/null
@@ -1,243 +0,0 @@
-/* =============================================================================
-   Bsqlite - design tokens
-   Layer 1 primitives -> layer 2 semantics. Components never reach for a raw hex.
-
-   Direction: Minimalism & Swiss Style, developer-tool register (see
-   samples/design-system/bsqlite-demo/MASTER.md). Every foreground /
-   background pair below is >= 4.5:1 in both themes.
-   ========================================================================== */
-
-:root {
-    /* --- layer 1: primitives ------------------------------------------- */
-    --ink-950: #0b1220;
-    --ink-900: #131c2b;
-    --ink-800: #1e2a3d;
-    --ink-700: #2c3a51;
-    --ink-600: #54637a;
-    --ink-500: #68788f;
-    --ink-400: #93a2b7;
-    --ink-300: #c3cddb;
-    --ink-200: #dfe5ee;
-    --ink-100: #eef2f7;
-    --ink-050: #f7f9fc;
-    --white: #ffffff;
-
-    --night-950: #070a0f;
-    --night-900: #0a0e14;
-    --night-850: #0e141d;
-    --night-800: #111823;
-    --night-750: #16202d;
-    --night-700: #1c2836;
-    --night-600: #263447;
-
-    --teal-700: #0f766e;
-    --teal-600: #12857c;
-    --teal-500: #14b8a6;
-    --teal-400: #2dd4bf;
-    --teal-300: #5eead4;
-    --teal-100: #dcf5f0;
-    --teal-050: #f0faf8;
-    --teal-950: #04211e;
-    --teal-900: #08302c;
-    --teal-850: #0d3f39;
-
-    --red-700: #b42318;
-    --red-300: #ff8a80;
-    --red-100: #fdecea;
-    --red-900: #3a1512;
-
-    --amber-800: #7a4a03;
-    --amber-400: #fbbf24;
-    --amber-100: #fff7e6;
-    --amber-900: #3a2a08;
-
-    --green-800: #0a5c48;
-    --green-400: #34d399;
-    --green-100: #e6f6f1;
-    --green-900: #0a2b23;
-
-    --violet-600: #7c3aed;
-    --violet-300: #c4b5fd;
-    --blue-700: #0369a1;
-    --blue-300: #7dd3fc;
-    --orange-700: #b45309;
-
-    /* --- scale: type ---------------------------------------------------- */
-    --text-2xs: 0.6875rem;  /* 11 - eyebrows only, uppercase + tracked */
-    --text-xs: 0.75rem;     /* 12 */
-    --text-sm: 0.8125rem;   /* 13 */
-    --text-base: 0.9375rem; /* 15 - UI default */
-    --text-md: 1rem;        /* 16 - prose */
-    --text-lg: 1.125rem;    /* 18 */
-    --text-xl: 1.375rem;    /* 22 */
-    --text-2xl: 1.75rem;    /* 28 */
-    --text-3xl: 2.25rem;    /* 36 */
-    --text-4xl: 3rem;       /* 48 */
-
-    --lh-tight: 1.15;
-    --lh-snug: 1.35;
-    --lh-normal: 1.6;
-
-    --track-wide: 0.09em;
-    --track-tight: -0.02em;
-    --track-tighter: -0.035em;
-
-    --font-sans: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
-    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
-
-    /* --- scale: space (density 6/10 - standard) -------------------------- */
-    --space-1: 0.25rem;
-    --space-2: 0.5rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-5: 1.5rem;
-    --space-6: 2rem;
-    --space-7: 3rem;
-    --space-8: 4rem;
-    --space-9: 6rem;
-
-    /* --- scale: radius / elevation --------------------------------------- */
-    --radius-sm: 0.375rem;
-    --radius-md: 0.5rem;
-    --radius-lg: 0.75rem;
-    --radius-xl: 1rem;
-    --radius-full: 999px;
-
-    /* --- motion (dial 3/10 - subtle) ------------------------------------- */
-    --ease: cubic-bezier(0.2, 0, 0.15, 1);
-    --dur-fast: 120ms;
-    --dur: 180ms;
-    --dur-slow: 260ms;
-
-    /* --- layout ----------------------------------------------------------- */
-    --topbar-h: 3.5rem;
-    --sidebar-w: 16.5rem;
-    --measure: 46rem;
-    --page-max: 84rem;
-}
-
-/* --- layer 2: semantics - light ------------------------------------------ */
-:root {
-    color-scheme: light;
-
-    --canvas: var(--white);
-    --canvas-sunken: var(--ink-050);
-    --surface: var(--white);
-    --surface-2: var(--ink-050);
-    --surface-3: var(--ink-100);
-    --surface-inset: var(--ink-050);
-    --overlay: rgba(11, 18, 32, 0.45);
-
-    --text: var(--ink-950);
-    --text-muted: var(--ink-600);
-    --text-faint: var(--ink-500);
-    --text-on-accent: var(--white);
-
-    --border: var(--ink-200);
-    --border-strong: var(--ink-300);
-    --border-subtle: var(--ink-100);
-
-    --accent: var(--teal-700);
-    --accent-hover: var(--teal-600);
-    --accent-ink: #115e56;
-    --accent-soft: var(--teal-100);
-    --accent-wash: var(--teal-050);
-
-    --danger: var(--red-700);
-    --danger-soft: var(--red-100);
-    --danger-ink: var(--red-700);
-
-    --warn: var(--amber-800);
-    --warn-soft: var(--amber-100);
-    --warn-ink: var(--amber-800);
-
-    --ok: var(--green-800);
-    --ok-soft: var(--green-100);
-    --ok-ink: var(--green-800);
-
-    --focus-ring: var(--teal-700);
-
-    --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.06);
-    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 1px rgba(11, 18, 32, 0.04);
-    --shadow-md: 0 4px 12px -4px rgba(11, 18, 32, 0.12), 0 2px 4px -2px rgba(11, 18, 32, 0.06);
-    --shadow-lg: 0 24px 48px -24px rgba(11, 18, 32, 0.28), 0 8px 16px -12px rgba(11, 18, 32, 0.12);
-
-    --code-bg: var(--ink-050);
-    --code-head: var(--ink-100);
-    --code-border: var(--ink-200);
-    --code-text: var(--ink-900);
-    --code-comment: var(--ink-600);
-    --code-keyword: var(--violet-600);
-    --code-string: var(--orange-700);
-    --code-number: var(--blue-700);
-    --code-type: var(--teal-700);
-
-    --grid-line: rgba(11, 18, 32, 0.05);
-    --hero-glow-a: rgba(20, 184, 166, 0.16);
-    --hero-glow-b: rgba(3, 105, 161, 0.09);
-}
-
-/* --- layer 2: semantics - dark -------------------------------------------
-   Only one dark block exists. The boot script in index.html resolves "system"
-   to a concrete light/dark value and stamps data-theme before first paint, so
-   no prefers-color-scheme duplicate of this table is needed.
-   ------------------------------------------------------------------------ */
-:root[data-theme="dark"] {
-    color-scheme: dark;
-
-    --canvas: var(--night-900);
-    --canvas-sunken: var(--night-950);
-    --surface: var(--night-800);
-    --surface-2: var(--night-750);
-    --surface-3: var(--night-700);
-    --surface-inset: var(--night-850);
-    --overlay: rgba(3, 5, 8, 0.66);
-
-    --text: #e6edf6;
-    --text-muted: var(--ink-400);
-    --text-faint: #7c8ca3;
-    --text-on-accent: var(--teal-950);
-
-    --border: var(--night-700);
-    --border-strong: var(--night-600);
-    --border-subtle: var(--night-750);
-
-    --accent: var(--teal-400);
-    --accent-hover: var(--teal-300);
-    --accent-ink: var(--teal-300);
-    --accent-soft: var(--teal-850);
-    --accent-wash: var(--teal-900);
-
-    --danger: var(--red-300);
-    --danger-soft: var(--red-900);
-    --danger-ink: var(--red-300);
-
-    --warn: var(--amber-400);
-    --warn-soft: var(--amber-900);
-    --warn-ink: var(--amber-400);
-
-    --ok: var(--green-400);
-    --ok-soft: var(--green-900);
-    --ok-ink: var(--green-400);
-
-    --focus-ring: var(--teal-400);
-
-    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
-    --shadow-md: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
-    --shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.8), 0 8px 16px -12px rgba(0, 0, 0, 0.6);
-
-    --code-bg: var(--night-850);
-    --code-head: var(--night-750);
-    --code-border: var(--night-700);
-    --code-text: #dbe4f0;
-    --code-comment: #8496ad;
-    --code-keyword: var(--violet-300);
-    --code-string: var(--amber-400);
-    --code-number: var(--blue-300);
-    --code-type: var(--teal-300);
-
-    --grid-line: rgba(255, 255, 255, 0.04);
-    --hero-glow-a: rgba(45, 212, 191, 0.13);
-    --hero-glow-b: rgba(56, 130, 246, 0.08);
-}
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/demo.css b/src/Utilities/Bsqlite/Demo/Server/wwwroot/demo.css
new file mode 100644
index 00000000000..834b988067c
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/demo.css
@@ -0,0 +1,486 @@
+/* ============================================================================================
+   Bsqlite demo - the styles of the live samples.
+
+   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
+   shares); this file only draws what is Bsqlite's own - the session bar, the CRUD grids and their
+   editors, the storage backends' marks, the code blocks' highlighter colours and the landing page's
+   live window - and it is written against the kit's --bb-* names, so it follows the light/dark
+   theme with no rules of its own for either. Its own names start with bq-.
+   ============================================================================================ */
+
+/* ---------- Code colours ----------
+
+   CodeHighlighter.cs tokenizes one kind more than the kit colours - numbers - so that one gets a
+   light and a dark value here, in the same GitHub palette the kit's are taken from. PascalCase
+   names (types, mostly) take the kit's parameter colour. */
+:root {
+    --bq-code-number: #0A3069;
+}
+
+:root[bit-theme="dark"] {
+    --bq-code-number: #A5D6FF;
+}
+
+.bb-code .tok-com { color: var(--bb-code-comment); font-style: italic; }
+.bb-code .tok-str { color: var(--bb-code-string); }
+.bb-code .tok-key { color: var(--bb-code-keyword); }
+.bb-code .tok-typ { color: var(--bb-code-param); }
+.bb-code .tok-num { color: var(--bq-code-number); }
+
+/* ---------- CodeBlock (Components/CodeBlock.razor) ----------
+
+   The language, the file the code comes from and the Show / Hide toggle over the kit's code block. */
+.bq-code {
+    margin: 0 0 1.25rem;
+}
+
+.bq-code-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .375rem .625rem;
+    margin-bottom: .5rem;
+}
+
+.bq-code-head > .bb-source-file {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.bq-code-lang {
+    flex: none;
+    padding: .0625rem .4375rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-primary-soft);
+    color: var(--bb-primary-hover);
+    font-size: .6875rem;
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .06em;
+    line-height: 1.5;
+    text-transform: uppercase;
+}
+
+.btn.bq-code-toggle {
+    margin-inline-start: auto;
+    min-height: 1.75rem;
+    padding: .125rem .625rem;
+    font-size: var(--fl-font-size-100);
+}
+
+.bq-code-caret {
+    font-size: .8em;
+    color: var(--bb-text-soft);
+}
+
+.bq-code > .bb-code {
+    margin: 0;
+}
+
+/* ---------- The parts of a demo section (Components/DemoCard.razor) ---------- */
+
+/* The step over a section's title - "Live", "LINQ", "Raw SQL" - in the brand colour, as the page's
+   own overline is. */
+.bb-overline.bq-step {
+    margin-bottom: .375rem;
+    color: var(--bb-primary);
+}
+
+/* "Try": the one thing to do to see the behaviour, in a note whose label leads it. */
+.bq-try > strong:first-child {
+    margin-inline-end: .375rem;
+    color: var(--bb-primary-hover);
+    font-size: .75rem;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+}
+
+/* A sub-panel's label inside a sample - the editor, the categories - which is not a heading, so the
+   "On this page" rail lists the page's sections rather than every panel in them. */
+.bq-panel-title {
+    display: block;
+    margin: 0 0 .75rem;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bq-small {
+    font-size: var(--fl-font-size-200);
+}
+
+.bq-ok { color: var(--bb-success-text); }
+.bq-err { color: var(--bb-danger-text); }
+
+.bq-grow {
+    flex: 1 1 16rem;
+    min-width: 0;
+}
+
+.bq-verdict {
+    margin: 1rem 0;
+}
+
+/* A list whose items are C# - one unbreakable word to a line breaker - breaks anywhere rather than
+   widening a phone's page. */
+.bq-break li {
+    overflow-wrap: anywhere;
+}
+
+/* What a statement or a call answered: the kit's log surface, wrapping its long exception messages. */
+.bb-log.bq-output {
+    margin: 1rem 0 0;
+    white-space: pre-wrap;
+    border-inline-start: 3px solid var(--bb-primary);
+}
+
+/* Text a screen reader reads and the eye does not need - a header over a column of buttons. Its
+   parent is made its containing block: inside a table that scrolls, an absolutely positioned box
+   would otherwise be placed against the page, outside the scroller, and widen the page. */
+.bq-sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+}
+
+:has(> .bq-sr) {
+    position: relative;
+}
+
+/* ---------- Controls ---------- */
+
+/* A destructive action: the secondary button, stroked and lettered in the danger colour. */
+.btn.bq-btn-danger {
+    background: var(--bb-surface);
+    color: var(--bb-danger-text);
+    border-color: color-mix(in srgb, var(--bb-danger) 45%, transparent);
+}
+
+.btn.bq-btn-danger:hover:not(:disabled) {
+    background: var(--bb-danger-soft);
+    border-color: var(--bb-danger);
+    color: var(--bb-danger-text);
+}
+
+/* The button in a table row, and a row of sample statements. */
+.btn.bq-btn-sm {
+    min-height: 1.75rem;
+    padding: .125rem .5rem;
+    font-size: var(--fl-font-size-100);
+}
+
+/* A filter field in a sample's title bar. */
+.bb-demo-bar > input[type="search"] {
+    flex: 0 1 16rem;
+    min-width: 0;
+}
+
+/* An editor: one field to a row, each as wide as its panel. */
+.bq-form {
+    display: grid;
+    gap: .75rem;
+    margin: 0 0 1rem;
+}
+
+.bq-form > .bb-toolbar,
+.bq-form > p {
+    margin: 0;
+}
+
+.bq-form .bb-field > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
+    width: 100%;
+}
+
+.bb-fields .bb-field > select {
+    min-width: 12rem;
+}
+
+.bq-fields-label {
+    align-self: center;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+/* The colour well of a category: the kit leaves it alone, since it is not a text field. */
+.bb-field > input[type="color"] {
+    width: 3rem;
+    height: 2rem;
+    padding: .125rem;
+    background: var(--bb-surface);
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius);
+    cursor: pointer;
+}
+
+.bb-stage > .bb-table:last-child,
+.bb-stage > :last-child {
+    margin-bottom: 0;
+}
+
+/* ---------- Data grids ---------- */
+
+.bb-table.bq-grid td {
+    vertical-align: middle;
+}
+
+/* A grid whose first column is prose - a name - rather than an identifier. */
+.bb-table.bq-grid-prose td:first-child {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.bb-table.bq-grid :is(td, th).bq-nowrap {
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
+
+.bb-table.bq-grid td.bq-num {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+/* A name in a grid that scrolls on a phone: it keeps a readable width rather than breaking to a word a
+   line while the identifier columns around it stay whole. */
+.bb-table.bq-grid td.bq-name {
+    min-width: 10rem;
+}
+
+.bb-table tbody tr.bq-clickable {
+    cursor: pointer;
+}
+
+/* The row the editor under the grid is showing. */
+.bb-table tbody tr.bq-selected td,
+.bb-table tbody tr.bq-selected:hover td {
+    background: var(--bb-primary-soft);
+}
+
+.bb-table tbody tr.bq-selected td:first-child {
+    box-shadow: inset 3px 0 0 var(--bb-primary);
+}
+
+/* A wide grid scrolls inside its box rather than wrapping every cell to four lines - which is what a
+   seven-column grid does in the docs column - and rather than widening the page. */
+.bb-scroll > .bb-table.bq-grid {
+    min-width: 36rem;
+}
+
+/* A category's colour. */
+.bq-swatch {
+    display: inline-block;
+    width: .7rem;
+    height: .7rem;
+    margin-inline-end: .5rem;
+    border: 1px solid var(--bb-border-strong);
+    border-radius: var(--bb-radius-pill);
+    vertical-align: -.05rem;
+}
+
+.bb-badge.bq-badge-neutral {
+    background: var(--bb-surface-2);
+    color: var(--bb-text-muted);
+}
+
+/* ---------- The storage backends' marks ----------
+
+   One colour per backend, everywhere a backend is named: the session bar, the tables of backends and
+   the MCP labs' verdicts. */
+.bq-storage-dot {
+    --bq-backend: var(--bb-primary);
+    display: inline-block;
+    flex: none;
+    width: .625rem;
+    height: .625rem;
+    margin-inline-end: .25rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bq-backend);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bq-backend) 22%, transparent);
+    vertical-align: middle;
+}
+
+.bq-storage-dot[data-name="indexeddb"] { --bq-backend: var(--bb-success); }
+.bq-storage-dot[data-name="cache-storage"] { --bq-backend: var(--bb-accent); }
+.bq-storage-dot[data-name="in-memory"] { --bq-backend: var(--bb-text-soft); }
+
+/* ---------- The session bar (Components/StorageSwitcher.razor) ----------
+
+   The sample frame every database page opens with: the backend and the controls that move the
+   database in its title bar, what that backend is like underneath. */
+.bb-demo.bq-session {
+    margin-bottom: 2.5rem;
+}
+
+.bq-session > .bb-demo-bar {
+    gap: .5rem .625rem;
+}
+
+.bq-session-label {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+.bq-session-name {
+    margin-inline-end: auto;
+    font-size: var(--fl-font-size-300);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+}
+
+.bq-session-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+}
+
+.bq-session-target {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: var(--fl-font-size-200);
+}
+
+.bq-session-blurb {
+    margin: 0;
+    font-size: var(--fl-font-size-200);
+    line-height: 1.6;
+    color: var(--bb-text-muted);
+}
+
+.bq-session-status {
+    margin: .5rem 0 0;
+    font-size: var(--fl-font-size-200);
+    font-weight: var(--fl-weight-semibold);
+}
+
+/* ---------- The error boundary's page (Components/UnhandledExceptionView.razor) ---------- */
+
+.bb-error.bq-crash h1 {
+    font-size: var(--fl-font-size-700);
+    color: var(--bb-danger-text);
+}
+
+/* ---------- The landing page's live window ---------- */
+
+.bq-hero-live {
+    padding: 1rem 1.25rem 1.25rem;
+    background: var(--bb-surface);
+    border-top: 1px solid var(--bb-border);
+}
+
+.bq-hero-live > p {
+    margin: 0;
+}
+
+.bq-hero-stats {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1px;
+    margin: 0 0 1rem;
+    overflow: hidden;
+    background: var(--bb-border);
+    border: 1px solid var(--bb-border);
+    border-radius: var(--bb-radius-lg);
+}
+
+.bq-hero-stats > div {
+    min-width: 0;
+    padding: .5rem .75rem;
+    background: var(--bb-surface);
+}
+
+.bq-hero-stats dt {
+    font-size: var(--fl-font-size-100);
+    font-weight: var(--fl-weight-semibold);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--bb-text-soft);
+}
+
+.bq-hero-stats dd {
+    margin: 0;
+    font-size: var(--fl-font-size-400);
+    font-weight: var(--fl-weight-semibold);
+    color: var(--bb-text);
+    font-variant-numeric: tabular-nums;
+}
+
+.bq-hero-rows {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin: 0 0 .875rem;
+    padding: 0;
+    list-style: none;
+}
+
+.bq-hero-rows > li {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: baseline;
+    gap: .75rem;
+    padding: .375rem .625rem;
+    border-radius: var(--bb-radius);
+    background: var(--bb-surface-sunken);
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text);
+}
+
+.bq-hero-rows > li > span:nth-child(2) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bq-hero-rows .bb-mono {
+    font-size: var(--fl-font-size-100);
+    color: var(--bb-text-soft);
+    font-variant-numeric: tabular-nums;
+}
+
+.bq-hero-live > p.bq-hero-note {
+    font-size: var(--fl-font-size-200);
+    color: var(--bb-text-muted);
+}
+
+.bq-live-dot {
+    display: inline-block;
+    width: .5rem;
+    height: .5rem;
+    margin-inline-end: .375rem;
+    vertical-align: .0625rem;
+    border-radius: var(--bb-radius-pill);
+    background: var(--bb-success);
+    animation: bq-pulse 2.4s var(--bb-motion-easing) infinite;
+}
+
+@keyframes bq-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bb-success) 45%, transparent); }
+    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-success) 0%, transparent); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bq-live-dot {
+        animation: none;
+    }
+}
+
+@media (forced-colors: active) {
+    .bq-storage-dot,
+    .bq-live-dot,
+    .bq-swatch {
+        forced-color-adjust: none;
+        border: 1px solid CanvasText;
+    }
+
+    .bb-table tbody tr.bq-selected td {
+        outline: 1px solid Highlight;
+    }
+}
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/demo.js b/src/Utilities/Bsqlite/Demo/Server/wwwroot/demo.js
new file mode 100644
index 00000000000..f593aaee26c
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/demo.js
@@ -0,0 +1,15 @@
+// The one thing a page of this demo needs from JavaScript that the site kit (site.js) does not
+// provide: handing the bytes of an exported database to the browser as a file to save
+// (Pages/Admin.razor). The library's own modules - the worker host, the engine, the VFSes - are
+// imported on demand and need no tag.
+window.bsqliteDemo = {
+    download(filename, bytes) {
+        const blob = new Blob([bytes], { type: "application/vnd.sqlite3" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        link.click();
+        URL.revokeObjectURL(url);
+    },
+};
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/bit-logo-dark.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/bit-logo-dark.svg
new file mode 100644
index 00000000000..6a7d271c711
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/bit-logo-dark.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#569FFF" stroke="#569FFF"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#569FFF" stroke="#569FFF"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/bit-logo-light.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/bit-logo-light.svg
new file mode 100644
index 00000000000..ad8eac6b7a6
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/bit-logo-light.svg
@@ -0,0 +1,7 @@
+<svg width="239" height="161" viewBox="0 0 239 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.8 93.4L104.299 93.373C104.029 88.3753 102.813 83.6441 100.651 79.1844C98.4942 74.6014 95.6616 70.5545 92.1536 67.0464L92.1465 67.0394L92.1392 67.0326C90.3832 65.4114 88.4911 63.9922 86.464 62.7753C84.5826 61.5664 82.569 60.426 80.4237 59.3528L80.414 59.348L80.4042 59.3436C75.274 57.0486 69.9385 55.9 64.4 55.9C58.8663 55.9 53.5337 56.9802 48.406 59.1392L48.4059 59.1391L48.3958 59.1436C43.2691 61.4374 38.814 64.6093 35.0345 68.6588C31.2564 72.7068 28.4208 77.2969 26.5308 82.4271L26.5285 82.4336C24.0993 89.3165 23.559 96.3388 24.9087 103.493L24.9086 103.493L24.9104 103.502C26.3941 110.65 29.4978 116.993 34.2188 122.524C37.8609 126.84 42.1818 130.084 47.1788 132.249C48.3799 132.916 49.5818 133.517 50.7847 134.051C51.0486 134.183 51.3125 134.315 51.5765 134.447L51.5999 134.459L51.6244 134.468L53.2244 135.068L54.8144 135.664L54.8244 135.668L55.0263 135.147C61.4472 136.74 68.0188 136.585 74.732 134.682C79.3188 133.468 83.5055 131.51 87.2867 128.81C91.2013 126.109 94.5089 122.802 97.2093 118.887C102.61 111.324 104.974 102.81 104.299 93.3643L103.8 93.4ZM103.8 93.4C103.533 88.467 102.333 83.8 100.2 79.4L103.8 93.4ZM126.316 110.276L126.316 110.276L126.313 110.288C125.122 115.448 123.336 120.41 120.954 125.174C118.573 129.803 115.597 134.168 112.023 138.272L112.022 138.273C108.585 142.238 104.618 145.743 100.12 148.786C90.7244 155.137 80.4076 158.775 69.1618 159.701C57.9155 160.495 47.2026 158.511 37.0152 153.749C32.1203 151.367 27.5561 148.457 23.322 145.017C19.2208 141.445 15.5828 137.476 12.4075 133.11C9.36399 128.743 6.78268 124.044 4.66386 119.013C2.68142 113.857 1.42625 108.57 0.897639 103.151L0.897821 103.151L0.896145 103.138C0.764199 102.082 0.632089 101.091 0.5 100.164V100.162V100.156V100.15V100.144V100.137V100.131V100.125V100.119V100.112V100.106V100.1V100.094V100.087V100.081V100.075V100.069V100.062V100.056V100.05V100.044V100.037V100.031V100.025V100.019V100.012V100.006V99.9999V99.9937V99.9874V99.9812V99.9749V99.9687V99.9624V99.9562V99.9499V99.9437V99.9374V99.9312V99.9249V99.9187V99.9124V99.9062V99.8999V99.8937V99.8874V99.8812V99.8749V99.8687V99.8624V99.8562V99.8499V99.8437V99.8374V99.8312V99.8249V99.8187V99.8124V99.8062V99.7999V99.7937V99.7874V99.7812V99.7749V99.7687V99.7624V99.7562V99.7499V99.7437V99.7374V99.7312V99.7249V99.7187V99.7124V99.7062V99.6999V99.6937V99.6874V99.6812V99.6749V99.6687V99.6624V99.6562V99.6499V99.6437V99.6374V99.6311V99.6249V99.6187V99.6124V99.6062V99.5999V99.5937V99.5874V99.5812V99.5749V99.5686V99.5624V99.5562V99.5499V99.5436V99.5374V99.5312V99.5249V99.5187V99.5124V99.5061V99.4999V99.4937V99.4874V99.4811V99.4749V99.4687V99.4624V99.4562V99.4499V99.4436V99.4374V99.4312V99.4249V99.4187V99.4124V99.4062V99.3999V99.3937V99.3874V99.3812V99.3749V99.3687V99.3624V99.3562V99.3499V99.3437V99.3374V99.3312V99.3249V99.3187V99.3124V99.3062V99.2999V99.2937V99.2874V99.2812V99.2749V99.2687V99.2624V99.2562V99.2499V99.2437V99.2374V99.2312V99.2249V99.2187V99.2124V99.2062V99.1999V99.1937V99.1874V99.1812V99.1749V99.1687V99.1624V99.1562V99.1499V99.1437V99.1374V99.1312V99.1249V99.1187V99.1124V99.1062V99.0999V99.0937V99.0874V99.0812V99.0749V99.0687V99.0624V99.0562V99.0499V99.0437V99.0374V99.0312V99.0249V99.0187V99.0124V99.0062V98.9999V98.9937V98.9874V98.9812V98.9749V98.9687V98.9624V98.9562V98.9499V98.9437V98.9374V98.9312V98.9249V98.9187V98.9125V98.9062V98.9V98.8937V98.8875V98.8812V98.875V98.8687V98.8625V98.8562V98.85V98.8437V98.8375V98.8312V98.825V98.8187V98.8125V98.8062V98.8V98.7937V98.7875V98.7812V98.775V98.7687V98.7625V98.7562V98.75V98.7437V98.7375V98.7312V98.725V98.7187V98.7125V98.7062V98.7V98.6937V98.6875V98.6812V98.675V98.6687V98.6625V98.6562V98.65V98.6437V98.6375V98.6312V98.625V98.6187V98.6125V98.6062V98.6V98.5938V98.5875V98.5813V98.575V98.5688V98.5625V98.5563V98.55V98.5438V98.5375V98.5313V98.525V98.5188V98.5125V98.5063V98.5V98.4938V98.4875V98.4813V98.475V98.4688V98.4625V98.4563V98.45V98.4438V98.4375V98.4313V98.425V98.4188V98.4125V98.4063V98.4V98.3938V98.3875V98.3813V98.375V98.3688V98.3625V98.3563V98.35V98.3438V98.3375V98.3313V98.325V98.3188V98.3125V98.3063V98.3V98.2938V98.2875V98.2813V98.275V98.2688V98.2626V98.2563V98.2501V98.2438V98.2376V98.2313V98.2251V98.2188V98.2126V98.2063V98.2001V98.1938V98.1876V98.1813V98.1751V98.1688V98.1626V98.1563V98.1501V98.1438V98.1376V98.1313V98.1251V98.1188V98.1126V98.1063V98.1001V98.0938V98.0876V98.0813V98.0751V98.0688V98.0626V98.0563V98.0501V98.0438V98.0376V98.0313V98.0251V98.0188V98.0126V98.0063V98.0001V97.9938V97.9876V97.9813V97.9751V97.9688V97.9626V97.9563V97.9501V97.9438V97.9376V97.9313V97.9251V97.9188V97.9126V97.9063V97.9001V97.8938V97.8876V97.8813V97.8751V97.8688V97.8626V97.8563V97.8501V97.8438V97.8376V97.8313V97.8251V97.8188V97.8126V97.8063V97.8001V97.7938V97.7876V97.7813V97.7751V97.7688V97.7626V97.7563V97.7501V97.7438V97.7376V97.7313V97.7251V97.7188V97.7126V97.7063V97.7001V97.6938V97.6876V97.6813V97.6751V97.6688V97.6626V97.6563V97.6501V97.6438V97.6376V97.6313V97.6251V97.6188V97.6126V97.6063V97.6001V97.5938V97.5876V97.5813V97.5751V97.5688V97.5626V97.5563V97.5501V97.5438V97.5376V97.5313V97.5251V97.5188V97.5126V97.5063V97.5001V97.4938V97.4876V97.4813V97.4751V97.4688V97.4626V97.4563V97.4501V97.4438V97.4376V97.4313V97.4251V97.4188V97.4126V97.4063V97.4001V97.3938V97.3876V97.3813V97.3751V97.3688V97.3626V97.3563V97.3501V97.3438V97.3376V97.3313V97.3251V97.3188V97.3126V97.3063V97.3001V97.2938V97.2876V97.2813V97.2751V97.2688V97.2626V97.2563V97.2501V97.2438V97.2376V97.2313V97.2251V97.2188V97.2126V97.2063V97.2001V97.1938V97.1875V97.1813V97.175V97.1688V97.1625V97.1563V97.15V97.1438V97.1375V97.1313V97.125V97.1188V97.1125V97.1063V97.1V97.0938V97.0875V97.0813V97.075V97.0688V97.0625V97.0563V97.05V97.0438V97.0375V97.0313V97.025V97.0188V97.0125V97.0062V97V94.4V12.4C0.5 9.06273 1.64954 6.25756 3.95355 3.95356C6.25756 1.64955 9.06273 0.5 12.4 0.5C15.7373 0.5 18.5424 1.64955 20.8464 3.95356C23.1505 6.25757 24.3 9.06273 24.3 12.4V44.949V45.2V45.4H24.8H24.949L25.0987 45.6009C31.8496 40.5709 39.2605 36.9317 47.3342 34.6816L47.3342 34.6817L47.3394 34.6802C55.5407 32.2992 63.8722 31.6379 72.3375 32.6961C80.6711 33.7544 88.5412 36.3996 95.9519 40.6342L95.9578 40.6375C103.364 44.737 109.644 50.1577 114.802 56.9026C118.903 62.3272 122.078 68.2803 124.328 74.7639L124.329 74.767C126.578 81.1184 127.835 87.6677 128.1 94.4164C128.232 99.8369 127.637 105.123 126.316 110.276Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M160.5 67.5C163.577 67.5 166.343 68.4461 168.33 69.9521C170.316 71.4579 171.5 73.5015 171.5 75.7188V151.281C171.5 153.499 170.316 155.542 168.33 157.048C166.343 158.554 163.577 159.5 160.5 159.5C157.423 159.5 154.657 158.554 152.67 157.048C150.684 155.542 149.5 153.499 149.5 151.281V75.7188C149.5 73.5015 150.684 71.4579 152.67 69.9521C154.657 68.4461 157.423 67.5 160.5 67.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M171.5 43.5C171.5 49.5751 166.575 54.5 160.5 54.5C154.425 54.5 149.5 49.5751 149.5 43.5C149.5 37.4249 154.425 32.5 160.5 32.5C166.575 32.5 171.5 37.4249 171.5 43.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M208.5 32.5C214.066 32.5 218.5 36.6154 218.5 41.6V150.4C218.5 155.385 214.066 159.5 208.5 159.5C202.934 159.5 198.5 155.385 198.5 150.4V41.6C198.5 36.6154 202.934 32.5 208.5 32.5Z" fill="#1A86D8" stroke="#1A86D8"/>
+<path d="M191 67.7H227C233.416 67.7 238.5 72.2377 238.5 77.7C238.5 83.1622 233.416 87.7 227 87.7H191C184.584 87.7 179.5 83.1622 179.5 77.7C179.5 72.2377 184.584 67.7 191 67.7Z" fill="#1A86D8" stroke="#1A86D8"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/github-icon.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/github-icon.svg
new file mode 100644
index 00000000000..3015530a905
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/github-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8313 1.84063C10.9686 1.40781 9.03148 1.40781 7.1688 1.84063C6.09299 1.18082 5.27165 0.877584 4.67432 0.749585C4.41938 0.692046 4.15851 0.664936 3.89718 0.668823C3.77827 0.672045 3.65992 0.686329 3.54365 0.711489L3.52842 0.714537L3.52232 0.717584H3.51775L3.72651 1.45054L3.51775 0.719108C3.4107 0.749361 3.31157 0.80269 3.22732 0.875348C3.14308 0.948006 3.07578 1.03823 3.03013 1.13968C2.58057 2.14647 2.49492 3.27822 2.78784 4.3412C2.02919 5.2606 1.61577 6.41626 1.61908 7.60825C1.61908 9.97473 2.31699 11.5656 3.50708 12.5881C4.34061 13.3042 5.35242 13.6852 6.36727 13.9031C6.19965 14.3679 6.15699 14.8601 6.19051 15.3629V16.2742C5.57032 16.4037 5.14061 16.3625 4.83432 16.262C4.45185 16.1355 4.15775 15.881 3.87584 15.5153C3.72848 15.3182 3.59116 15.1137 3.46442 14.9027L3.37756 14.761C3.26788 14.5786 3.15408 14.3988 3.03623 14.2216C2.7467 13.7934 2.31699 13.257 1.62213 13.0742L0.884606 12.8806L0.497559 14.3557L1.23508 14.5492C1.35699 14.5797 1.51546 14.694 1.77603 15.0764C1.87203 15.2182 1.96194 15.366 2.06556 15.5366L2.16918 15.7042C2.31242 15.9359 2.47699 16.1919 2.66746 16.4418C3.05299 16.9446 3.5787 17.4521 4.35889 17.7096C4.89223 17.8863 5.4987 17.929 6.19051 17.8223V20.6673C6.19051 20.8694 6.27078 21.0632 6.41367 21.206C6.55655 21.3489 6.75035 21.4292 6.95242 21.4292H13.0477C13.2497 21.4292 13.4435 21.3489 13.5864 21.206C13.7293 21.0632 13.8096 20.8694 13.8096 20.6673V15.238C13.8096 14.758 13.7882 14.3176 13.6526 13.9077C14.6629 13.6943 15.6671 13.3134 16.496 12.5972C17.6846 11.5671 18.381 9.96101 18.381 7.58082V7.5793C18.3772 6.39706 17.9636 5.25273 17.2107 4.3412C17.5033 3.27869 17.4176 2.14755 16.9684 1.1412C16.9231 1.03963 16.8561 0.949213 16.7721 0.876293C16.6882 0.803373 16.5892 0.749722 16.4823 0.719108L16.2736 1.45054C16.4823 0.719108 16.4808 0.719108 16.4793 0.719108L16.4762 0.717584L16.4701 0.714537L16.4564 0.711489C16.4188 0.701704 16.3806 0.694072 16.3421 0.688632C16.2624 0.676986 16.182 0.67037 16.1014 0.668823C15.84 0.664965 15.5792 0.692074 15.3242 0.749585C14.7284 0.877584 13.9071 1.18082 12.8313 1.84063V1.84063Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/linkedin-icon.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
new file mode 100644
index 00000000000..bc0c4a3c298
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/linkedin-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5594 19.5242H15.6051V13.3375C15.6051 11.8613 15.5804 9.96416 13.5508 9.96416C11.4937 9.96416 11.1794 11.5718 11.1794 13.2308V19.5242H7.22894V6.80035H11.0194V8.54035H11.0747C11.6013 7.54035 12.8918 6.48511 14.8156 6.48511C18.8194 6.48511 19.5585 9.1194 19.5585 12.5461V19.5242H19.5594ZM2.77085 5.06321C2.46949 5.06346 2.17104 5.00428 1.89257 4.88907C1.6141 4.77386 1.36108 4.60488 1.14799 4.39178C0.934891 4.17869 0.765905 3.92567 0.650695 3.6472C0.535485 3.36873 0.476313 3.07028 0.476563 2.76892C0.476563 2.31542 0.611017 1.87211 0.862928 1.49501C1.11484 1.11791 1.4729 0.823971 1.89184 0.650339C2.31078 0.476706 2.77179 0.431179 3.2166 0.519514C3.66141 0.607848 4.07005 0.826078 4.39085 1.14662C4.71166 1.46715 4.93023 1.87561 5.01893 2.32035C5.10764 2.76508 5.06249 3.22614 4.88921 3.64522C4.71592 4.06431 4.42228 4.42261 4.04539 4.67483C3.6685 4.92705 3.2253 5.06188 2.7718 5.06225L2.77085 5.06321ZM4.74894 19.5242H0.790849V6.80035H4.74894V19.5242Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/location-icon.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/location-icon.svg
new file mode 100644
index 00000000000..a5ec5f18554
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/location-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99992 9.94679C6.57992 9.94679 5.41992 8.79346 5.41992 7.36679C5.41992 5.94012 6.57992 4.79346 7.99992 4.79346C9.41992 4.79346 10.5799 5.94679 10.5799 7.37346C10.5799 8.80012 9.41992 9.94679 7.99992 9.94679ZM7.99992 5.79346C7.13326 5.79346 6.41992 6.50012 6.41992 7.37346C6.41992 8.24679 7.12659 8.95346 7.99992 8.95346C8.87326 8.95346 9.57992 8.24679 9.57992 7.37346C9.57992 6.50012 8.86659 5.79346 7.99992 5.79346Z" fill="#8A8886"/>
+<path d="M8.00012 15.6735C7.01345 15.6735 6.02012 15.3002 5.24678 14.5602C3.28012 12.6668 1.10678 9.64683 1.92678 6.0535C2.66678 2.7935 5.51345 1.3335 8.00012 1.3335C8.00012 1.3335 8.00012 1.3335 8.00678 1.3335C10.4935 1.3335 13.3401 2.7935 14.0801 6.06016C14.8934 9.6535 12.7201 12.6668 10.7534 14.5602C9.98012 15.3002 8.98678 15.6735 8.00012 15.6735ZM8.00012 2.3335C6.06012 2.3335 3.56678 3.36683 2.90678 6.2735C2.18678 9.4135 4.16012 12.1202 5.94678 13.8335C7.10012 14.9468 8.90678 14.9468 10.0601 13.8335C11.8401 12.1202 13.8134 9.4135 13.1068 6.2735C12.4401 3.36683 9.94012 2.3335 8.00012 2.3335Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/tel-icon.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/tel-icon.svg
new file mode 100644
index 00000000000..16aab2dff2f
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/tel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6333 15.6668C10.8799 15.6668 10.0866 15.4868 9.26659 15.1402C8.46659 14.8002 7.65992 14.3335 6.87325 13.7668C6.09325 13.1935 5.33992 12.5535 4.62659 11.8535C3.91992 11.1402 3.27992 10.3868 2.71325 9.6135C2.13992 8.8135 1.67992 8.0135 1.35325 7.24016C1.00659 6.4135 0.833252 5.6135 0.833252 4.86016C0.833252 4.34016 0.926585 3.84683 1.10659 3.38683C1.29325 2.9135 1.59325 2.4735 1.99992 2.0935C2.51325 1.58683 3.09992 1.3335 3.72659 1.3335C3.98659 1.3335 4.25325 1.3935 4.47992 1.50016C4.73992 1.62016 4.95992 1.80016 5.11992 2.04016L6.66659 4.22016C6.80659 4.4135 6.91325 4.60016 6.98659 4.78683C7.07325 4.98683 7.11992 5.18683 7.11992 5.38016C7.11992 5.6335 7.04659 5.88016 6.90659 6.1135C6.80659 6.2935 6.65325 6.48683 6.45992 6.68016L6.00659 7.1535C6.01325 7.1735 6.01992 7.18683 6.02659 7.20016C6.10659 7.34016 6.26659 7.58016 6.57325 7.94016C6.89992 8.3135 7.20659 8.6535 7.51325 8.96683C7.90659 9.3535 8.23325 9.66016 8.53992 9.9135C8.91992 10.2335 9.16659 10.3935 9.31325 10.4668L9.29992 10.5002L9.78659 10.0202C9.99325 9.8135 10.1933 9.66016 10.3866 9.56016C10.7533 9.3335 11.2199 9.2935 11.6866 9.48683C11.8599 9.56016 12.0466 9.66016 12.2466 9.80016L14.4599 11.3735C14.7066 11.5402 14.8866 11.7535 14.9933 12.0068C15.0933 12.2602 15.1399 12.4935 15.1399 12.7268C15.1399 13.0468 15.0666 13.3668 14.9266 13.6668C14.7866 13.9668 14.6133 14.2268 14.3933 14.4668C14.0133 14.8868 13.5999 15.1868 13.1199 15.3802C12.6599 15.5668 12.1599 15.6668 11.6333 15.6668ZM3.72659 2.3335C3.35992 2.3335 3.01992 2.4935 2.69325 2.8135C2.38659 3.10016 2.17325 3.4135 2.03992 3.7535C1.89992 4.10016 1.83325 4.46683 1.83325 4.86016C1.83325 5.48016 1.97992 6.1535 2.27325 6.84683C2.57325 7.5535 2.99325 8.28683 3.52659 9.02016C4.05992 9.7535 4.66659 10.4668 5.33325 11.1402C5.99992 11.8002 6.71992 12.4135 7.45992 12.9535C8.17992 13.4802 8.91992 13.9068 9.65325 14.2135C10.7933 14.7002 11.8599 14.8135 12.7399 14.4468C13.0799 14.3068 13.3799 14.0935 13.6533 13.7868C13.8066 13.6202 13.9266 13.4402 14.0266 13.2268C14.1066 13.0602 14.1466 12.8868 14.1466 12.7135C14.1466 12.6068 14.1266 12.5002 14.0733 12.3802C14.0533 12.3402 14.0133 12.2668 13.8866 12.1802L11.6733 10.6068C11.5399 10.5135 11.4199 10.4468 11.3066 10.4002C11.1599 10.3402 11.0999 10.2802 10.8733 10.4202C10.7399 10.4868 10.6199 10.5868 10.4866 10.7202L9.97992 11.2202C9.71992 11.4735 9.31992 11.5335 9.01325 11.4202L8.83325 11.3402C8.55992 11.1935 8.23992 10.9668 7.88659 10.6668C7.56659 10.3935 7.21992 10.0735 6.79992 9.66016C6.47325 9.32683 6.14659 8.9735 5.80659 8.58016C5.49325 8.2135 5.26659 7.90016 5.12659 7.64016L5.04659 7.44016C5.00659 7.28683 4.99325 7.20016 4.99325 7.10683C4.99325 6.86683 5.07992 6.6535 5.24659 6.48683L5.74659 5.96683C5.87992 5.8335 5.97992 5.70683 6.04659 5.5935C6.09992 5.50683 6.11992 5.4335 6.11992 5.36683C6.11992 5.3135 6.09992 5.2335 6.06659 5.1535C6.01992 5.04683 5.94659 4.92683 5.85325 4.80016L4.30659 2.6135C4.23992 2.52016 4.15992 2.4535 4.05992 2.40683C3.95325 2.36016 3.83992 2.3335 3.72659 2.3335ZM9.29992 10.5068L9.19325 10.9602L9.37325 10.4935C9.33992 10.4868 9.31325 10.4935 9.29992 10.5068Z" fill="#8A8886"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/twitter-icon.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/twitter-icon.svg
new file mode 100644
index 00000000000..37c545ad56d
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0889 2.27373C21.2936 2.62611 20.4393 2.86421 19.5413 2.97183C20.4679 2.41734 21.1612 1.54465 21.4917 0.516589C20.6211 1.03372 19.6682 1.39773 18.6746 1.59278C18.0064 0.879318 17.1213 0.406424 16.1568 0.247517C15.1923 0.0886101 14.2023 0.252581 13.3405 0.713973C12.4788 1.17536 11.7934 1.90836 11.3909 2.79916C10.9884 3.68997 10.8913 4.68873 11.1146 5.6404C9.35048 5.55182 7.62471 5.0933 6.04928 4.29459C4.47385 3.49588 3.08396 2.37484 1.96983 1.00421C1.58887 1.66135 1.36983 2.42326 1.36983 3.23468C1.3694 3.96516 1.54929 4.68444 1.89352 5.32871C2.23775 5.97299 2.73569 6.52234 3.34316 6.92802C2.63866 6.9056 1.9497 6.71524 1.33364 6.37278V6.42992C1.33356 7.45444 1.68795 8.44742 2.33667 9.24039C2.98538 10.0334 3.88846 10.5775 4.89268 10.7804C4.23914 10.9573 3.55396 10.9833 2.88887 10.8566C3.1722 11.7381 3.72411 12.509 4.46732 13.0613C5.21053 13.6136 6.10784 13.9196 7.03364 13.9366C5.46205 15.1703 3.52115 15.8395 1.52316 15.8366C1.16924 15.8367 0.815613 15.816 0.464111 15.7747C2.49218 17.0787 4.85301 17.7707 7.26411 17.768C15.426 17.768 19.8879 11.008 19.8879 5.14516C19.8879 4.95468 19.8832 4.7623 19.8746 4.57183C20.7425 3.94418 21.4916 3.16697 22.087 2.27659L22.0889 2.27373Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/youtube-icon.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/youtube-icon.svg
new file mode 100644
index 00000000000..ce75dd82fe6
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/footer/youtube-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.6344 2.02963C16 3.4775 16 6.5 16 6.5C16 6.5 16 9.5225 15.6344 10.9704C15.4312 11.7707 14.8368 12.4004 14.084 12.6132C12.7168 13 8 13 8 13C8 13 3.2856 13 1.916 12.6132C1.16 12.3971 0.5664 11.7682 0.3656 10.9704C3.40598e-08 9.5225 0 6.5 0 6.5C0 6.5 3.40598e-08 3.4775 0.3656 2.02963C0.5688 1.22931 1.1632 0.599625 1.916 0.38675C3.2856 -1.77902e-07 8 0 8 0C8 0 12.7168 -1.77902e-07 14.084 0.38675C14.84 0.602875 15.4336 1.23175 15.6344 2.02963V2.02963ZM6.4 9.34375L11.2 6.5L6.4 3.65625V9.34375Z" fill="white"/>
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/github-mark.svg b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/github-mark.svg
new file mode 100644
index 00000000000..a357d582fa3
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/images/github-mark.svg
@@ -0,0 +1,5 @@
+<!-- Monochrome octocat, used as a CSS mask so the color comes from the theme instead of the asset.
+     One file serves both schemes and every accent the hero's "Make it yours" swatches apply. -->
+<svg width="40" height="40" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27.9781 4.17237C14.4539 4.1669 3.5 15.1153 3.5 28.6286C3.5 39.3146 10.3523 48.3981 19.8953 51.7341C21.1805 52.0567 20.9836 51.1435 20.9836 50.52V46.2817C13.5625 47.1513 13.2617 42.2403 12.7641 41.42C11.7578 39.7028 9.37891 39.2653 10.0898 38.445C11.7797 37.5755 13.5023 38.6638 15.4984 41.6114C16.9422 43.7497 19.7586 43.3888 21.1859 43.0333C21.4977 41.7481 22.1648 40.5997 23.0836 39.7083C15.3945 38.3302 12.1898 33.638 12.1898 28.0599C12.1898 25.3528 13.0813 22.8646 14.8312 20.8575C13.7156 17.5489 14.9352 14.7161 15.0992 14.295C18.2766 14.0106 21.5797 16.57 21.8367 16.7724C23.6414 16.2856 25.7031 16.0286 28.0109 16.0286C30.3297 16.0286 32.3969 16.2966 34.218 16.7888C34.8359 16.3185 37.8984 14.12 40.8516 14.388C41.0102 14.8091 42.2023 17.5763 41.1523 20.8411C42.9242 22.8536 43.8266 25.3638 43.8266 28.0763C43.8266 33.6653 40.6 38.363 32.8891 39.7192C33.5495 40.3688 34.0739 41.1434 34.4317 41.9978C34.7894 42.8523 34.9733 43.7695 34.9727 44.6958V50.8481C35.0164 51.3403 34.9727 51.827 35.793 51.827C45.4781 48.5622 52.4508 39.413 52.4508 28.6341C52.4508 15.1153 41.4914 4.17237 27.9781 4.17237V4.17237Z" fill="#000" />
+</svg>
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/js/demo.js b/src/Utilities/Bsqlite/Demo/Server/wwwroot/js/demo.js
deleted file mode 100644
index 6b8697e025a..00000000000
--- a/src/Utilities/Bsqlite/Demo/Server/wwwroot/js/demo.js
+++ /dev/null
@@ -1,66 +0,0 @@
-window.bsqliteDemo = {
-  download(filename, bytes) {
-    const blob = new Blob([bytes], { type: "application/vnd.sqlite3" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = filename;
-    link.click();
-    URL.revokeObjectURL(url);
-  },
-
-  async copy(text) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {
-      // Clipboard API needs a secure context and permission; fall back to a hidden textarea.
-      const area = document.createElement("textarea");
-      area.value = text;
-      area.setAttribute("readonly", "");
-      area.style.position = "fixed";
-      area.style.opacity = "0";
-      document.body.appendChild(area);
-      area.select();
-      const ok = document.execCommand("copy");
-      document.body.removeChild(area);
-      return ok;
-    }
-  },
-
-  /**
-   * The boot script in index.html owns the resolution rules so that the first paint is already
-   * correct; this object only reads and writes the preference, then asks it to re-apply.
-   */
-  theme: {
-    /** "light" | "dark" | "system" - what the reader chose, not what is painted. */
-    get() {
-      return window.__bsqliteTheme.preference();
-    },
-
-    /** Stores the preference and returns what is actually painted now: "light" or "dark". */
-    set(mode) {
-      const key = window.__bsqliteTheme.key;
-      try {
-        if (mode === "light" || mode === "dark") {
-          localStorage.setItem(key, mode);
-        } else {
-          localStorage.removeItem(key);
-        }
-      } catch {
-        // Storage blocked: the choice still applies to this page, it just will not survive a reload.
-      }
-      return window.__bsqliteTheme.apply();
-    },
-
-    /** What the page is painting right now: "light" or "dark". */
-    resolved() {
-      return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
-    },
-  },
-
-  /** Keeps the page behind the mobile navigation drawer from scrolling with it. */
-  lockScroll(locked) {
-    document.body.style.overflow = locked ? "hidden" : "";
-  },
-};
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/site.js b/src/Utilities/Bsqlite/Demo/Server/wwwroot/site.js
new file mode 100644
index 00000000000..60868a88c37
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/site.js
@@ -0,0 +1,470 @@
+/* Progressive decoration for the site chrome, plus the two things a Blazor component cannot do
+   for itself: listen at the document for a keyboard shortcut, and lock the page behind a dialog.
+
+   Part of the site kit every Utilities demo shares (see app.css).
+
+   The decoration - copy buttons on code blocks, anchor links on section headings, and the "on
+   this page" rail - is done from here rather than from markup because each of them would
+   otherwise be a change to every page: every `.bb-code` block and every section of the
+   documentation. A MutationObserver re-runs them after each Blazor render or navigation.
+
+   Blazor's diffing never fights this. It compares its own render trees rather than the DOM, and
+   tracks the children it owns by reference rather than by position, so a node appended here is
+   never visited: neither the <pre> elements nor the rail's <nav> ever change shape in the render
+   tree. The one case that could move an injected node - Blazor appending a NEW child after it -
+   is handled by re-appending on the next pass, which is a move rather than a duplicate. */
+(function () {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+
+    function svg(paths, size) {
+        var element = document.createElementNS(SVG_NS, 'svg');
+        element.setAttribute('viewBox', '0 0 24 24');
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'currentColor');
+        element.setAttribute('stroke-width', '2');
+        element.setAttribute('stroke-linecap', 'round');
+        element.setAttribute('stroke-linejoin', 'round');
+        element.setAttribute('aria-hidden', 'true');
+        if (size) {
+            element.setAttribute('width', size);
+            element.setAttribute('height', size);
+        }
+        element.innerHTML = paths;
+        return element;
+    }
+
+    // ── Copy buttons ─────────────────────────────────────────────────────────────────────────
+
+    var COPY_ICON =
+        '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
+        '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>';
+
+    var CHECK_ICON = '<polyline points="20 6 9 17 4 12"></polyline>';
+
+    function codeTextOf(pre) {
+        var clone = pre.cloneNode(true);
+        var button = clone.querySelector('.bb-copy-btn');
+        if (button) button.remove();
+        return clone.textContent;
+    }
+
+    function copy(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            // The browser can still refuse the permission (a policy, an embedding frame, an automated
+            // session); a refusal falls back to the legacy path rather than surfacing as an unhandled
+            // rejection on the page.
+            return navigator.clipboard.writeText(text).catch(function () { return copyLegacy(text); });
+        }
+        return copyLegacy(text);
+    }
+
+    // Fallback for non-secure contexts, and for a clipboard API that refused.
+    function copyLegacy(text) {
+        var area = document.createElement('textarea');
+        area.value = text;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.appendChild(area);
+        area.select();
+        try { document.execCommand('copy'); } catch (_) { }
+        area.remove();
+        return Promise.resolve();
+    }
+
+    function decorate(pre) {
+        var existing = pre.querySelector('.bb-copy-btn');
+        if (existing) {
+            // Keep it the last child even if Blazor has appended something after it.
+            if (existing !== pre.lastChild) pre.appendChild(existing);
+            return;
+        }
+
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'bb-copy-btn';
+        button.title = 'Copy to clipboard';
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+        button.appendChild(svg(COPY_ICON));
+
+        var resetTimer = 0;
+        button.addEventListener('click', function () {
+            copy(codeTextOf(pre)).then(function () {
+                button.classList.add('bb-copied');
+                button.replaceChildren(svg(CHECK_ICON));
+                button.title = 'Copied';
+                clearTimeout(resetTimer);
+                resetTimer = setTimeout(function () {
+                    button.classList.remove('bb-copied');
+                    button.replaceChildren(svg(COPY_ICON));
+                    button.title = 'Copy to clipboard';
+                }, 1600);
+            });
+        });
+
+        pre.appendChild(button);
+    }
+
+    function decorateAll() {
+        document.querySelectorAll('pre.bb-code').forEach(decorate);
+    }
+
+    // ── "On this page" rail, and the anchor links that share its headings ────────────────────
+
+    /* The entries are the page's own section headings. A documentation page is built from
+       `.bb-card` blocks whose `h3.bb-card-title` names the section, so those are the rail's rows;
+       an `h2` (which the longer reference pages use to group several sections) outranks them and
+       pushes the h3s in as sub-entries. */
+    var HEADINGS = 'h2, h3.bb-card-title';
+
+    var ANCHOR_ICON =
+        '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>' +
+        '<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>';
+
+    function slugify(text) {
+        return text.toLowerCase().trim()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 60);
+    }
+
+    /* The scroll target is the whole section, not just its heading: scrolling to the heading of a
+       framed section would put its top padding above the viewport and the section would look
+       clipped. */
+    function targetOf(heading) {
+        return heading.closest('.bb-card, .bb-section') || heading;
+    }
+
+    /* A link to the heading itself, so a reader can hand someone else the exact section. Kept as
+       the heading's last child; if Blazor has since appended something after it, re-appending
+       moves it back rather than adding a second one. */
+    function anchorFor(heading, id) {
+        var existing = heading.querySelector(':scope > .bb-anchor');
+        if (existing) {
+            existing.setAttribute('href', '#' + id);
+            if (existing !== heading.lastChild) heading.appendChild(existing);
+            return;
+        }
+
+        var link = document.createElement('a');
+        link.className = 'bb-anchor';
+        link.href = '#' + id;
+        link.title = 'Link to this section';
+        link.setAttribute('aria-label', 'Link to this section');
+        link.appendChild(svg(ANCHOR_ICON));
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            scrollToId(id);
+        });
+
+        heading.appendChild(link);
+    }
+
+    function scrollToId(id) {
+        var target = document.getElementById(id);
+        if (target === null) return;
+
+        target.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' });
+        // Written without a jump: replaceState keeps the fragment shareable but does not add a
+        // history entry for every heading the reader passes through.
+        history.replaceState(history.state, '', '#' + id);
+    }
+
+    function prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+
+    function headingsOf(container) {
+        var found = [];
+        var used = Object.create(null);
+
+        container.querySelectorAll(HEADINGS).forEach(function (heading) {
+            var title = heading.textContent.trim();
+            if (title.length === 0) return;
+
+            var target = targetOf(heading);
+            if (target.id.length === 0) {
+                // Two sections can legitimately share a title; the suffix keeps the anchors
+                // distinct so the rail's second entry does not scroll to the first one.
+                var slug = slugify(title) || 'section';
+                var id = slug;
+                for (var n = 2; used[id]; n++) id = slug + '-' + n;
+                used[id] = true;
+                target.id = id;
+            } else {
+                used[target.id] = true;
+            }
+
+            anchorFor(heading, target.id);
+
+            found.push({ id: target.id, title: title, sub: heading.tagName === 'H3' });
+        });
+
+        // With no h2 on the page the h3s ARE the top level rather than sub-entries - the rail
+        // should reflect the page's own hierarchy, not the tag names it happened to use.
+        var hasTop = found.some(function (item) { return item.sub === false; });
+        if (hasTop === false) {
+            found.forEach(function (item) { item.sub = false; });
+        }
+        return found;
+    }
+
+    var railItems = [];
+    var railActiveId = null;
+
+    function buildRail() {
+        var rail = document.querySelector('nav.bb-rail');
+        if (rail === null) {
+            // Not a docs page. The headings still get their anchors.
+            var article = document.querySelector('article');
+            if (article) headingsOf(article);
+            railItems = [];
+            return;
+        }
+
+        var container = document.querySelector('.bb-docs-content') || rail.parentElement;
+        var items = headingsOf(container);
+        var signature = items.map(function (i) { return i.id; }).join('|');
+
+        // The observer that calls this fires for our own writes too; rebuilding only when the set
+        // of sections actually changed is what keeps that from looping.
+        if (rail.dataset.signature === signature) {
+            railItems = items;
+            return;
+        }
+        rail.dataset.signature = signature;
+        railItems = items;
+        railActiveId = null;
+
+        if (items.length < 2) {
+            // A single section is not an outline of anything.
+            rail.replaceChildren();
+            railItems = [];
+            return;
+        }
+
+        var title = document.createElement('p');
+        title.className = 'bb-rail-title';
+        title.textContent = 'On this page';
+
+        var list = document.createElement('ul');
+        items.forEach(function (item) {
+            var li = document.createElement('li');
+            if (item.sub) li.className = 'bb-rail-sub';
+            li.dataset.for = item.id;
+
+            var link = document.createElement('a');
+            link.href = '#' + item.id;
+            link.textContent = item.title;
+            link.addEventListener('click', function (e) {
+                e.preventDefault();
+                scrollToId(item.id);
+            });
+
+            li.appendChild(link);
+            list.appendChild(li);
+        });
+
+        var top = document.createElement('button');
+        top.type = 'button';
+        top.className = 'bb-rail-top';
+        top.appendChild(svg('<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>'));
+        top.appendChild(document.createTextNode('Back to top'));
+        top.addEventListener('click', goToTop);
+
+        rail.replaceChildren(title, list, top);
+        syncRail();
+    }
+
+    /* The active row is the last section whose top has passed under the header. The
+       bottom-of-page special case exists because the final sections are often shorter than the
+       remaining viewport, so without it the last one or two entries could never light up. */
+    function syncRail() {
+        if (railItems.length === 0) return;
+
+        var offset = 96;
+        var atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 8;
+        var activeId = railItems[0].id;
+
+        if (atBottom) {
+            activeId = railItems[railItems.length - 1].id;
+        } else {
+            for (var i = 0; i < railItems.length; i++) {
+                var element = document.getElementById(railItems[i].id);
+                if (element && element.getBoundingClientRect().top <= offset) {
+                    activeId = railItems[i].id;
+                }
+            }
+        }
+
+        if (activeId === railActiveId) return;
+        railActiveId = activeId;
+
+        document.querySelectorAll('nav.bb-rail li').forEach(function (li) {
+            li.classList.toggle('bb-active', li.dataset.for === activeId);
+        });
+    }
+
+    // ── Command palette ──────────────────────────────────────────────────────────────────────
+
+    /* The shortcut has to be heard at the document, which is the one place a Blazor component
+       cannot put a handler: @onkeydown only fires for keys pressed inside the element it is on,
+       and the whole point of Ctrl+K is that the reader has not clicked anything first. The
+       component registers itself here on its first render and is called back by reference. */
+    var palette = null;
+    // A demo whose own library claims Ctrl+K (a command palette, say) registers with this off, and
+    // the site's palette then answers to "/" alone.
+    var paletteCtrlK = true;
+
+    function isEditable(element) {
+        if (element === null) return false;
+        var name = element.tagName;
+        return name === 'INPUT' || name === 'TEXTAREA' || name === 'SELECT' || element.isContentEditable;
+    }
+
+    function onShortcut(e) {
+        if (palette === null) return;
+
+        var isK = paletteCtrlK && (e.ctrlKey || e.metaKey) && typeof e.key === 'string' && e.key.toLowerCase() === 'k';
+        // "/" is the other convention, but only when the reader is not typing into something -
+        // otherwise it would swallow a slash in a URL they are pasting into a demo.
+        var isSlash = e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && isEditable(document.activeElement) === false;
+
+        if (isK === false && isSlash === false) return;
+
+        e.preventDefault();
+        palette.invokeMethodAsync('OpenFromShortcut');
+    }
+
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    }
+
+    // ── Wiring ───────────────────────────────────────────────────────────────────────────────
+
+    // ── Nav panel ────────────────────────────────────────────────────────────────────────────
+
+    /* The documentation nav is taller than its own column, so on a deep-linked page the selected
+       row can start scrolled out of sight - and a nav panel whose selection you cannot see is a
+       list of links rather than a map of where you are.
+
+       Only the PANEL is scrolled, never the page, and only when the row is actually out of view:
+       scrollIntoView would scroll every ancestor including the document, which on arrival would
+       throw away the scroll-to-top the router just performed. */
+    var navScrolledFor = null;
+
+    function syncSidebar() {
+        var panel = document.querySelector('.bb-docs-sidebar');
+        if (panel === null) {
+            navScrolledFor = null;
+            return;
+        }
+
+        var active = panel.querySelector('a.active');
+        if (active === null) return;
+
+        // Once per selected row: re-running it would fight a reader scrolling the panel by hand.
+        var key = active.getAttribute('href');
+        if (key === navScrolledFor) return;
+        navScrolledFor = key;
+
+        var panelBox = panel.getBoundingClientRect();
+        var rowBox = active.getBoundingClientRect();
+
+        if (rowBox.top >= panelBox.top && rowBox.bottom <= panelBox.bottom) return;
+
+        panel.scrollTop += (rowBox.top - panelBox.top) - (panelBox.height - rowBox.height) / 2;
+    }
+
+    function refresh() {
+        decorateAll();
+        buildRail();
+        syncSidebar();
+    }
+
+    function start() {
+        refresh();
+
+        var pending = false;
+        new MutationObserver(function () {
+            if (pending) return;
+            pending = true;
+            // Coalesced to one pass per frame: a Blazor render can produce a burst of mutations,
+            // and re-scanning the page for each of them would be the expensive part.
+            requestAnimationFrame(function () {
+                pending = false;
+                refresh();
+            });
+        }).observe(document.body, { childList: true, subtree: true });
+
+        var ticking = false;
+        window.addEventListener('scroll', function () {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(function () {
+                ticking = false;
+                syncRail();
+            });
+        }, { passive: true });
+
+        document.addEventListener('keydown', onShortcut);
+    }
+
+    window.bitDemoSite = {
+        goToTop: goToTop,
+
+        /** Registers the palette component and reports whether to label the shortcut for a Mac. */
+        registerPalette: function (reference, useCtrlK) {
+            palette = reference;
+            paletteCtrlK = useCtrlK !== false;
+            return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+        },
+
+        unregisterPalette: function () {
+            palette = null;
+        },
+
+        /** Holds the page still behind a modal, so scrolling the dialog does not scroll the page. */
+        lockScroll: function (locked) {
+            document.documentElement.style.overflow = locked ? 'hidden' : '';
+        },
+
+        /**
+         * Keeps the palette's keyboard cursor inside its scrolling results list. The arrow keys
+         * move the cursor in C#; nothing about a class change scrolls anything, so without this
+         * the cursor walks off the bottom of the list and Enter opens a row nobody can see.
+         *
+         * Called after the render that moved the cursor, so the row is already marked active.
+         */
+        revealPaletteOption: function (index) {
+            var list = document.querySelector('.bb-palette-results');
+            if (list === null) return;
+
+            var option = document.getElementById('bb-palette-option-' + index);
+            if (option === null) return;
+
+            var listBox = list.getBoundingClientRect();
+            var optionBox = option.getBoundingClientRect();
+
+            // Going up onto the first row of a group, the group's own heading comes with it -
+            // scrolling to the row alone would leave the reader without the label above it.
+            var above = option.previousElementSibling;
+            var top = above !== null && above.classList.contains('bb-palette-group')
+                ? above.getBoundingClientRect().top
+                : optionBox.top;
+
+            if (top < listBox.top) {
+                list.scrollTop += top - listBox.top;
+            } else if (optionBox.bottom > listBox.bottom) {
+                list.scrollTop += optionBox.bottom - listBox.bottom;
+            }
+        }
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start);
+    } else {
+        start();
+    }
+})();
diff --git a/src/Utilities/Bsqlite/Demo/Server/wwwroot/theme.js b/src/Utilities/Bsqlite/Demo/Server/wwwroot/theme.js
new file mode 100644
index 00000000000..018d8a39386
--- /dev/null
+++ b/src/Utilities/Bsqlite/Demo/Server/wwwroot/theme.js
@@ -0,0 +1,100 @@
+/* Light/dark theme bootstrap - part of the site kit every Utilities demo shares (see app.css).
+   Loaded synchronously in <head> so the bit-theme attribute is set before first paint
+   (no flash of the wrong theme during prerendering). Defaults to the system preference;
+   a toggle choice is persisted, but picking the system's theme again clears the override
+   so the demo resumes following the OS preference.
+
+   A library with a theme of its own (a color-mode parameter, a dark class) follows the site
+   with bitDemoTheme.onChange - or, from .NET, bitDemoTheme.subscribe(dotNetRef, 'MethodName'),
+   which calls the [JSInvokable] method with "light" or "dark" now and on every change. */
+(function () {
+    'use strict';
+
+    var storageKey = 'bit-demo-theme';
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function getStoredTheme() {
+        try {
+            var value = localStorage.getItem(storageKey);
+            return (value === 'light' || value === 'dark') ? value : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function getSystemTheme() {
+        return darkQuery.matches ? 'dark' : 'light';
+    }
+
+    var listeners = [];
+    var current = null;
+
+    function apply(theme) {
+        var changed = current !== theme;
+        current = theme;
+        document.documentElement.setAttribute('bit-theme', theme);
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+            // The Fluent dark palette's primary background, so the browser chrome matches the page.
+            themeColor.setAttribute('content', theme === 'dark' ? '#0F1318' : '#FFFFFF');
+        }
+        if (changed) {
+            listeners.slice().forEach(function (listener) {
+                try { listener(theme); } catch (_) { }
+            });
+        }
+        return theme;
+    }
+
+    apply(getStoredTheme() || getSystemTheme());
+
+    /* Blazor's enhanced navigation - a link followed before the app is interactive, or a redirect
+       the router hands back to the page loader - fetches the next page and merges it into this
+       document, <html> included. The server's markup carries no bit-theme, so the merge removes it
+       and the page falls back to the light palette, and this script does not run again to put it
+       back. Restoring it from an observer happens before the merged page is painted. */
+    new MutationObserver(function () {
+        if (document.documentElement.getAttribute('bit-theme') !== current) apply(current);
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['bit-theme'] });
+
+    darkQuery.addEventListener('change', function () {
+        if (getStoredTheme() === null) {
+            apply(getSystemTheme());
+        }
+    });
+
+    window.bitDemoTheme = {
+        get: function () {
+            return document.documentElement.getAttribute('bit-theme') || getSystemTheme();
+        },
+        toggle: function () {
+            var next = this.get() === 'dark' ? 'light' : 'dark';
+            try {
+                if (next === getSystemTheme()) {
+                    localStorage.removeItem(storageKey);
+                } else {
+                    localStorage.setItem(storageKey, next);
+                }
+            } catch (_) { }
+            return apply(next);
+        },
+        /** Calls back with the theme now and after every change; returns the function that stops it. */
+        onChange: function (callback) {
+            listeners.push(callback);
+            callback(this.get());
+            return function () {
+                var index = listeners.indexOf(callback);
+                if (index >= 0) listeners.splice(index, 1);
+            };
+        },
+        /** The .NET side of onChange: invokes dotNetRef.method(theme). Returns a handle for unsubscribe. */
+        subscribe: function (dotNetRef, method) {
+            return this.onChange(function (theme) {
+                dotNetRef.invokeMethodAsync(method, theme);
+            });
+        },
+        unsubscribe: function (handle) {
+            if (typeof handle === 'function') handle();
+        }
+    };
+})();
diff --git a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/DemoTests.cs b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/DemoTests.cs
index a20f4553f8a..f439e394327 100644
--- a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/DemoTests.cs
+++ b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/DemoTests.cs
@@ -16,10 +16,17 @@ namespace Bit.Bsqlite.Tests.E2E;
 public sealed class DemoTests : DemoTest
 {
     /// <summary>
-    /// Every page in the sidebar, discovered from the sidebar itself so a new page is covered without a new
+    /// The documentation pages that open no database of this tab: they describe the setup, or the MCP server,
+    /// whose labs the server answers. Every other page in the docs panel runs against the database and opens
+    /// with the session bar.
+    /// </summary>
+    private static readonly string[] PagesWithoutADatabase = ["/getting-started", "/mcp-server"];
+
+    /// <summary>
+    /// Every page in the docs panel, discovered from the panel itself so a new page is covered without a new
     /// test: the server answers it prerendered, and in the browser - reached the way a reader reaches it, through
-    /// the sidebar, with the runtime and the database already up - it renders against the open database without
-    /// anything reaching the console.
+    /// the panel, with the runtime and the database already up - it renders against the open database without
+    /// anything reaching the console. The landing page last, through the header, with its live window open.
     /// </summary>
     [TestMethod]
     public async Task Every_page_prerenders_hydrates_and_opens_its_database_without_a_console_error()
@@ -30,13 +37,13 @@ public async Task Every_page_prerenders_hydrates_and_opens_its_database_without_
         await GotoInteractiveAsync(page, "/catalog");
         await WaitForSessionAsync(page);
 
-        var routes = await page.Locator("nav a.nav-link").EvaluateAllAsync<string[]>(
+        var routes = await page.Locator(".bb-docs-sidebar .bb-docs-section a").EvaluateAllAsync<string[]>(
             "links => [...new Set(links.map(a => a.getAttribute('href')).filter(h => h !== null && !/^[a-z]+:/i.test(h)))]");
 
-        Assert.IsGreaterThan(5, routes.Length, $"The sidebar lists {routes.Length} pages: {string.Join(", ", routes)}.");
+        Assert.IsGreaterThan(5, routes.Length, $"The docs panel lists {routes.Length} pages: {string.Join(", ", routes)}.");
 
         using var client = new HttpClient();
-        foreach (var route in routes)
+        foreach (var route in routes.Append("/"))
         {
             var path = "/" + route.TrimStart('/');
             using var response = await client.GetAsync(DemoUrl + path);
@@ -44,20 +51,27 @@ public async Task Every_page_prerenders_hydrates_and_opens_its_database_without_
             Assert.MatchesRegex(new Regex("<title>[^<]*Bsqlite[^<]*</title>"), await response.Content.ReadAsStringAsync(), $"{path} is not prerendered with a title of its own.");
         }
 
-        // The overview last: it runs full-bleed, without the sidebar or the session bar.
-        foreach (var route in routes.OrderBy(r => r.Trim('/').Length == 0))
+        foreach (var route in routes)
         {
-            await page.Locator($"nav a.nav-link[href='{route}']").First.ClickAsync();
+            await page.Locator($".bb-docs-sidebar a[href='{route}']").First.ClickAsync();
             await page.WaitForURLAsync(DemoUrl + "/" + route.TrimStart('/'));
 
-            if (route.Trim('/').Length > 0)
+            if (PagesWithoutADatabase.Contains(route) is false)
             {
                 await WaitForSessionAsync(page);
             }
 
-            await Assertions.Expect(page.Locator("main[data-interactive='true'] h1").First).ToBeVisibleAsync();
+            await Assertions.Expect(page.Locator(".page[data-interactive='true'] main h1").First).ToBeVisibleAsync();
+            await Assertions.Expect(page.Locator(".bb-docs-sidebar a.active")).ToHaveAttributeAsync("href", route);
         }
 
+        // The landing page is not in the docs panel; the header's Home link leads to it. Its hero window is a live
+        // query over this tab's database.
+        await page.Locator(".bb-nav a[href='/']").ClickAsync();
+        await page.WaitForURLAsync(DemoUrl + "/");
+        await Assertions.Expect(page.Locator(".page[data-interactive='true'] main h1").First).ToBeVisibleAsync();
+        await Assertions.Expect(page.Locator("[data-live='open'] .bq-hero-rows li").First).ToBeVisibleAsync(new() { Timeout = 60_000 });
+
         Assert.AreEqual(0, errors.Count, "Console errors:" + Environment.NewLine + string.Join(Environment.NewLine, errors));
     }
 
@@ -85,7 +99,8 @@ public async Task An_unknown_route_answers_404_with_the_demos_own_page()
 
         Assert.IsNotNull(response);
         Assert.AreEqual((int)HttpStatusCode.NotFound, response.Status);
-        await Assertions.Expect(page.Locator("h1")).ToHaveTextAsync("That page is not in this demo");
+        await Assertions.Expect(page.Locator(".bb-error-404 h1")).ToHaveTextAsync("404");
+        await Assertions.Expect(page.Locator(".bb-error-404")).ToContainTextAsync("That page is not in this demo");
     }
 
     /// <summary>
@@ -101,19 +116,19 @@ public async Task Moving_the_database_to_another_backend_keeps_its_data_and_the_
 
         await GotoInteractiveAsync(page, "/catalog");
         var first = await WaitForSessionAsync(page);
-        var products = page.Locator("section.card:has(h2:text-is('Products')) tbody tr");
+        var products = page.Locator("table[data-rows='products'] tbody tr");
         await Assertions.Expect(products.First).ToBeVisibleAsync();
         var count = await products.CountAsync();
 
         var target = first == "indexeddb" ? "cache-storage" : "indexeddb";
-        await page.Locator("section.session-bar select").SelectOptionAsync(target);
-        await page.Locator("section.session-bar button", new PageLocatorOptions { HasText = "Move data" }).ClickAsync();
+        await page.Locator("section[data-session] select").SelectOptionAsync(target);
+        await page.Locator("section[data-session] button", new PageLocatorOptions { HasText = "Move data" }).ClickAsync();
 
         Assert.AreEqual(target, await WaitForSessionAsync(page, target));
         await Assertions.Expect(products).ToHaveCountAsync(count);
 
         await page.ReloadAsync();
-        await page.WaitForSelectorAsync("main[data-interactive='true']");
+        await page.WaitForSelectorAsync(".page[data-interactive='true']");
         Assert.AreEqual(target, await WaitForSessionAsync(page, target), "The reload did not reopen the database where it was moved to.");
         await Assertions.Expect(products).ToHaveCountAsync(count);
 
@@ -136,10 +151,11 @@ public async Task The_browser_and_the_server_run_the_same_model_and_seed_the_sam
         await GotoInteractiveAsync(page, "/catalog");
         await WaitForSessionAsync(page);
 
-        var products = page.Locator("section.card:has(h2:text-is('Products')) tbody tr");
+        var products = page.Locator("table[data-rows='products'] tbody tr");
         await Assertions.Expect(products).ToHaveCountAsync(serverSkus.Length);
 
-        var browserSkus = (await products.Locator("td.mono").AllTextContentsAsync()).Select(s => s.Trim()).Order().ToArray();
+        // The SKU is the grid's first column.
+        var browserSkus = (await products.Locator("td:first-child").AllTextContentsAsync()).Select(s => s.Trim()).Order().ToArray();
         CollectionAssert.AreEqual(serverSkus, browserSkus);
     }
 }
diff --git a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/Infrastructure/DemoTest.cs b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/Infrastructure/DemoTest.cs
index 3fa29e7b1a7..aabc618d1ef 100644
--- a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/Infrastructure/DemoTest.cs
+++ b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/Infrastructure/DemoTest.cs
@@ -31,13 +31,6 @@ public async Task StartDemoAsync()
     protected async Task<IPage> NewDemoPageAsync(List<string> errors)
     {
         var context = await NewContextAsync(new BrowserNewContextOptions { BaseURL = DemoUrl });
-
-        // The site loads its typefaces from Google Fonts. Answered locally, with nothing: a runner that cannot reach
-        // them - or reaches them slowly - says nothing about Bsqlite, and would otherwise hold every page load up
-        // and report a failed resource as a console error.
-        await context.RouteAsync(new System.Text.RegularExpressions.Regex(@"^https://fonts\.(googleapis|gstatic)\.com/"),
-            route => route.FulfillAsync(new RouteFulfillOptions { Status = 200, ContentType = "text/css", Body = "" }));
-
         var page = await context.NewPageAsync();
 
         page.Console += (_, message) =>
@@ -49,28 +42,32 @@ await context.RouteAsync(new System.Text.RegularExpressions.Regex(@"^https://fon
         return page;
     }
 
-    /// <summary>Navigates and waits until the page runs in the browser: every page is prerendered first.</summary>
+    /// <summary>
+    /// Navigates and waits until the page runs in the browser: every page is prerendered first, and the site's
+    /// shell (Layout/MainLayout.razor) turns its data-interactive marker to true once it is hydrated.
+    /// </summary>
     protected static async Task<IResponse?> GotoInteractiveAsync(IPage page, string path)
     {
         var response = await page.GotoAsync(path, new PageGotoOptions { Timeout = 90_000 });
-        await page.WaitForSelectorAsync("main[data-interactive='true']", new PageWaitForSelectorOptions { Timeout = 90_000 });
+        await page.WaitForSelectorAsync(".page[data-interactive='true']", new PageWaitForSelectorOptions { Timeout = 90_000 });
         return response;
     }
 
     /// <summary>
-    /// Waits until the session bar reports an open database and returns the backend it landed on. Only the
-    /// documentation pages have the bar; the overview opens its database without one.
+    /// Waits until the session bar reports an open database and returns the backend it landed on. Every page that
+    /// runs against the database opens with the bar (Components/StorageSwitcher.razor); the landing page opens its
+    /// database without one.
     /// </summary>
     protected static async Task<string> WaitForSessionAsync(IPage page, string? expected = null)
     {
         await page.WaitForFunctionAsync(
             """
             expected => {
-              const session = document.querySelector('section.session-bar')?.dataset.session;
+              const session = document.querySelector('section[data-session]')?.dataset.session;
               return expected === null ? !!session && session !== 'closed' : session === expected;
             }
             """, expected, new PageWaitForFunctionOptions { Timeout = 60_000 });
 
-        return (await page.Locator("section.session-bar").GetAttributeAsync("data-session"))!;
+        return (await page.Locator("section[data-session]").GetAttributeAsync("data-session"))!;
     }
 }
diff --git a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/README.md b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/README.md
index e0e17ba8cdf..c536521ed60 100644
--- a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/README.md
+++ b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.E2E/README.md
@@ -28,7 +28,7 @@ its pages.
 | `LiveQueryTests` | Change notifications from the update and commit hooks, in one tab and across tabs. |
 | `OpfsTests`, `IndexedDbTests`, `CacheStorageTests`, `StorageIsolationTests` | Each backend's persistence, crash safety, admin surface and multi-tab behaviour, the Bit.Besql import, and that two backends never see each other's data under the same name. |
 | `SubPathTests` | Every module is reached relative to the document, so an app under `<base href="/nested/">` works unchanged. |
-| `DemoTests` | Every demo page is prerendered, hydrates and opens its database without a console error; moving the database between backends from the session bar keeps the data and the binding sticks; the browser and the server seed the same catalog through the same model. |
+| `DemoTests` | Every page in the docs panel, and the landing page, is prerendered, hydrates and opens its database without a console error; an unknown route answers 404 with the site's own page; moving the database between backends from the session bar keeps the data and the binding sticks; the browser and the server seed the same catalog through the same model. |
 | `SoakTests` (category `Soak`) | Per storage, a worker killed mid-transaction a thousand times, and four then eight tabs committing at once, each ending on `PRAGMA integrity_check`. Opt-in: minutes, not seconds. |
 | `BenchmarkTests` (category `Benchmark`) | Runs `TestPages/benchmarks.html` per backend and prints its numbers. Opt-in, and never a gate. |
 
@@ -74,8 +74,8 @@ Without PowerShell 7, the browser can be installed with the Node.js runtime Play
 The tests run one at a time, each in a browser context of its own - a fresh origin storage, so no database, OPFS file
 or sticky binding leaks from one test into the next. The demo server is started on the first demo test
 (`dotnet Bit.Bsqlite.Demo.Server.dll --urls http://127.0.0.1:<free port>`, in the Development environment so the build
-output finds its static web assets) and stopped when the run ends. The demo's Google Fonts requests are answered locally
-with nothing, so a runner that cannot reach them is not slowed down or failed by it.
+output finds its static web assets) and stopped when the run ends. The site loads nothing from another origin - its
+typefaces are the system's - so a runner without internet access runs the demo tests the same way.
 
 When no browser can be launched, the assets have not been built or the demo does not start, every affected test
 reports **Inconclusive** with the reason. On a build server (`CI=true`) the same tests **fail** instead, so a suite that
diff --git a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.Mcp/McpToolTests.cs b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.Mcp/McpToolTests.cs
index acad19e82d4..e94b7ca6dc4 100644
--- a/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.Mcp/McpToolTests.cs
+++ b/src/Utilities/Bsqlite/Tests/Bit.Bsqlite.Tests.Mcp/McpToolTests.cs
@@ -416,6 +416,9 @@ public async Task The_source_index_lists_the_demo_and_its_model_but_not_the_site
         Assert.DoesNotContain("McpServer.razor", index);
         Assert.DoesNotContain("NotFoundPage.razor", index);
         Assert.DoesNotContain("ErrorPage.razor", index);
+        Assert.DoesNotContain("Demo/Client/Layout/", index, "The header, docs shell, palette and footer are the shared site kit, not Bsqlite code.");
+        Assert.DoesNotContain("DocsCatalog.cs", index);
+        Assert.Contains("Demo/Client/Pages/GettingStarted.razor", index);
         Assert.DoesNotContain("/Migrations/", index);
         Assert.DoesNotContain("/obj/", index);
     }
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor
index 1cdb218f953..2250c558c46 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor
@@ -21,7 +21,7 @@
             @* The mouseenter handler is attached only while force-closed is set (it just lifts that
                flag), so the common hover path stays pure CSS with no interop roundtrip or re-render. *@
             <div class="header-link header-ps-btn @(navMenuService.IsProductsRoute ? "header-link--active" : null) @(isProductsMenuOpen ? "open" : null) @(isProductsMenuForceClosed ? "force-closed" : null)"
-                 @onmouseenter="@(isProductsMenuForceClosed ? WrapHandled(HandleProductsMenuMouseEnter) : null)"
+                 @onmouseenter="ProductsMenuMouseEnterCallback"
                  @onkeydown="WrapHandled<KeyboardEventArgs>(HandleProductsMenuKeyDown)">
                 <button type="button"
                         class="header-ps-trigger"
@@ -35,15 +35,36 @@
                     </svg>
                 </button>
                 <div class="header-menu-popup" id="header-products-menu">
-                    @foreach (var column in productMenuColumns)
-                    {
-                        <div class="col">
-                            @foreach (var item in column)
-                            {
-                                @ProductMenuItemTemplate(item, HandleProductMenuItemClick)
-                            }
+                    <div class="col">
+                        @foreach (var item in mainProductMenuItems)
+                        {
+                            @ProductMenuItemTemplate(item, HandleProductMenuItemClick)
+                        }
+                        @* The flyout is positioned against the popup (not this wrapper), so it opens flush
+                           with the popup's top-right corner whatever the trigger's row. *@
+                        <div class="menu-sub @(isUtilitiesMenuOpen ? "open" : null)">
+                            <button type="button"
+                                    class="menu-item menu-sub-trigger"
+                                    aria-haspopup="true"
+                                    aria-controls="header-utilities-menu"
+                                    aria-expanded="@(isUtilitiesMenuOpen ? "true" : "false")"
+                                    @onclick=@WrapHandled(ToggleUtilitiesMenu)>
+                                <div class="menu-item-content">
+                                    <div class="item-title">Utilities</div>
+                                    <div class="item-desc">@utilitiesMenuDescription</div>
+                                </div>
+                                <svg class="menu-sub-chevron" width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </button>
+                            <div class="menu-sub-popup" id="header-utilities-menu">
+                                @foreach (var item in utilityMenuItems)
+                                {
+                                    @ProductMenuItemTemplate(item, HandleProductMenuItemClick)
+                                }
+                            </div>
                         </div>
-                    }
+                    </div>
                 </div>
             </div>
             <a class="header-link @(navMenuService.CurrentUrl == Urls.Demos ? "header-link--active" : null)" href="@Urls.Demos">Demos</a>
@@ -102,10 +123,34 @@
             @if (isMobileProductsOpen)
             {
                 <div class="header-nav-products" id="header-nav-products">
-                    @foreach (var item in productMenuColumns.SelectMany(c => c))
+                    @foreach (var item in mainProductMenuItems)
                     {
                         @ProductMenuItemTemplate(item, ToggleHeaderMenu)
                     }
+                    <div class="header-nav-sub">
+                        <button type="button"
+                                class="menu-item header-nav-utilities-trigger"
+                                aria-controls="@(isMobileUtilitiesOpen ? "header-nav-utilities" : null)"
+                                aria-expanded="@(isMobileUtilitiesOpen ? "true" : "false")"
+                                @onclick=@WrapHandled(ToggleMobileUtilities)>
+                            <div class="menu-item-content">
+                                <div class="item-title">Utilities</div>
+                                <div class="item-desc">@utilitiesMenuDescription</div>
+                            </div>
+                            <svg class="ps-chevron @(isMobileUtilitiesOpen ? "open" : null)" width="12" height="12" viewBox="0 0 24 24" aria-hidden="true">
+                                <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </button>
+                        @if (isMobileUtilitiesOpen)
+                        {
+                            <div class="header-nav-utilities" id="header-nav-utilities">
+                                @foreach (var item in utilityMenuItems)
+                                {
+                                    @ProductMenuItemTemplate(item, ToggleHeaderMenu)
+                                }
+                            </div>
+                        }
+                    </div>
                 </div>
             }
         </div>
@@ -117,8 +162,8 @@
 }
 
 @code {
-    // Shared between the desktop popup columns and the flattened mobile list; only the click
-    // behavior differs.
+    // Shared between the desktop popup (and its Utilities flyout) and the mobile list; only the
+    // click behavior differs.
     private RenderFragment ProductMenuItemTemplate(ProductMenuItem item, Func<Task> onClick) =>
         @<text>
             @if (item.Disabled)
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.cs
index 6a94e614b69..cc39ec3fae6 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.cs
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.cs
@@ -7,41 +7,47 @@ public partial class Header : IDisposable
 {
     private bool isHeaderMenuOpen;
     private bool isProductsMenuOpen;
+    private bool isUtilitiesMenuOpen;
     private bool isMobileProductsOpen;
+    private bool isMobileUtilitiesOpen;
     private bool isProductsMenuForceClosed;
 
 
     private sealed record ProductMenuItem(string Title, string Description, string Url, bool External = false, bool Disabled = false);
 
-    private static readonly ProductMenuItem[][] productMenuColumns =
+    private static readonly ProductMenuItem[] mainProductMenuItems =
     [
-        [
-            new("Boilerplate", "Feature-rich project template", Urls.Templates),
-            new("Butil", "Blazor utils for browser APIs", Urls.Butil, External: true),
-            new("Bswup", "Blazor PWA on steroids", Urls.Bswup, External: true),
-            new("Besql", "Blazor Entity Framework SQLite", Urls.Besql),
-        ],
-        [
-            new("Brouter", "Modern declarative Blazor router", Urls.Brouter, External: true),
-            new("Bmotion", "Blazor-native animation library", Urls.Bmotion, External: true),
-            new("Bmage", "Blazor-native image processing", Urls.Bmage, External: true),
-            new("Bsqlite", "SQLite and EF Core in the browser", Urls.Bsqlite, External: true),
-            new("Bink", "Blazor-native drawing and ink", Urls.Bink, External: true),
-            new("Balette", "Blazor-native command palette", Urls.Balette, External: true),
-            new("BbScanner", "Blazor-native barcode scanner", Urls.BbScanner, External: true),
-            new("Bdnd", "Declarative drag and drop for Blazor", Urls.Bdnd, External: true),
-            new("BlazeDb", "Memory-first database for Blazor", Urls.BlazeDb, External: true),
-            new("Blow", "Blazor-native node-based editors", Urls.Blow, External: true),
-            new("Borm", "Schema-driven forms for Blazor", Urls.Borm, External: true),
-            new("Bcrdt", "Real-time collaborative editing for Blazor", Urls.Bcrdt, External: true),
-            new("Bonboarding", "Blazor-native product tours", Urls.Bonboarding, External: true),
-            new("Bortable", "Blazor-native sortable lists", Urls.Bortable, External: true),
-            new("Blex", "Reactive state management for Blazor and MAUI", Urls.Blex, External: true),
-            new("Belemetry", "OpenTelemetry for every Blazor app", Urls.Belemetry, External: true),
-            new("BlazorUI", "Native Blazor UI components", Urls.BlazorUI, External: true),
-        ]
+        new("Boilerplate", "Feature-rich project template", Urls.Templates),
+        new("BlazorUI", "Native Blazor UI components", Urls.BlazorUI, External: true),
+        new("Butil", "Blazor utils for browser APIs", Urls.Butil, External: true),
+        new("Bswup", "Blazor PWA on steroids", Urls.Bswup, External: true),
+        new("Besql", "Blazor Entity Framework SQLite", Urls.Besql),
+        new("Brouter", "Modern declarative Blazor router", Urls.Brouter, External: true),
     ];
 
+    // Listed under the Utilities submenu (the projects under src/Utilities), so the root of the
+    // Products menu stays focused on the main products.
+    private static readonly ProductMenuItem[] utilityMenuItems =
+    [
+        new("Bmotion", "Blazor-native animation library", Urls.Bmotion, External: true),
+        new("Bmage", "Blazor-native image processing", Urls.Bmage, External: true),
+        new("Bsqlite", "SQLite and EF Core in the browser", Urls.Bsqlite, External: true),
+        new("Bink", "Blazor-native drawing and ink", Urls.Bink, External: true),
+        new("Balette", "Blazor-native command palette", Urls.Balette, External: true),
+        new("BbScanner", "Blazor-native barcode scanner", Urls.BbScanner, External: true),
+        new("Bdnd", "Declarative drag and drop for Blazor", Urls.Bdnd, External: true),
+        new("BlazeDb", "Memory-first database for Blazor", Urls.BlazeDb, External: true),
+        new("Blow", "Blazor-native node-based editors", Urls.Blow, External: true),
+        new("Borm", "Schema-driven forms for Blazor", Urls.Borm, External: true),
+        new("Bcrdt", "Real-time collaborative editing for Blazor", Urls.Bcrdt, External: true),
+        new("Bonboarding", "Blazor-native product tours", Urls.Bonboarding, External: true),
+        new("Bortable", "Blazor-native sortable lists", Urls.Bortable, External: true),
+        new("Blex", "Reactive state management for Blazor and MAUI", Urls.Blex, External: true),
+        new("Belemetry", "OpenTelemetry for every Blazor app", Urls.Belemetry, External: true),
+    ];
+
+    private static readonly string utilitiesMenuDescription = $"{utilityMenuItems.Length} focused Blazor libraries";
+
 
     [AutoInject] public NavMenuService navMenuService = default!;
     [AutoInject] public BitThemeManager bitThemeManager = default!;
@@ -71,7 +77,9 @@ private void HandleActiveRoutes()
     private void CloseMenus()
     {
         isProductsMenuOpen = false;
+        isUtilitiesMenuOpen = false;
         isMobileProductsOpen = false;
+        isMobileUtilitiesOpen = false;
 
         if (isHeaderMenuOpen)
         {
@@ -88,6 +96,7 @@ private async Task ToggleMenu()
     private async Task ToggleProductsMenu()
     {
         isProductsMenuOpen = !isProductsMenuOpen;
+        isUtilitiesMenuOpen = false;
 
         if (isProductsMenuOpen)
         {
@@ -104,9 +113,16 @@ private async Task HandleProductsMenuKeyDown(KeyboardEventArgs e)
         if (e.Key is not "Escape") return;
 
         isProductsMenuOpen = false;
+        isUtilitiesMenuOpen = false;
         await SuppressProductsMenu();
     }
 
+    // Only the click/tap/Enter path goes through here; a mouse hover opens the submenu with pure CSS.
+    private void ToggleUtilitiesMenu()
+    {
+        isUtilitiesMenuOpen = !isUtilitiesMenuOpen;
+    }
+
     // The popup is also held open by the :hover / :focus-within CSS rules, so closing takes both:
     // force-closed suppresses them (a sticky :hover after a tap on a touch device, or the cursor
     // still parked on the trigger; lifted on the next mouseenter), and the blur drops the focus a
@@ -127,11 +143,22 @@ private async Task HandleHeaderNavKeyDown(KeyboardEventArgs e)
     private void ToggleMobileProducts()
     {
         isMobileProductsOpen = !isMobileProductsOpen;
+
+        if (isMobileProductsOpen is false)
+        {
+            isMobileUtilitiesOpen = false;
+        }
+    }
+
+    private void ToggleMobileUtilities()
+    {
+        isMobileUtilitiesOpen = !isMobileUtilitiesOpen;
     }
 
     private async Task HandleProductMenuItemClick()
     {
         isProductsMenuOpen = false;
+        isUtilitiesMenuOpen = false;
         await SuppressProductsMenu();
     }
 
@@ -140,6 +167,13 @@ private void HandleProductsMenuMouseEnter()
         isProductsMenuForceClosed = false;
     }
 
+    // Attached only while force-closed. It has to be a default EventCallback otherwise, which renders
+    // no handler at all: `cond ? handler : null` still builds a callback bound to this component with
+    // a null delegate, which Blazor wires up anyway and then throws a NullReferenceException on in
+    // DispatchEventAsync on every hover.
+    private EventCallback<MouseEventArgs> ProductsMenuMouseEnterCallback =>
+        isProductsMenuForceClosed ? EventCallback.Factory.Create<MouseEventArgs>(this, WrapHandled(HandleProductsMenuMouseEnter)) : default;
+
     private bool IsMenuItemActive(ProductMenuItem item)
     {
         if (item.Url == Urls.Templates) return navMenuService.IsTemplateDocRoute;
@@ -174,6 +208,7 @@ private async Task ToggleHeaderMenu()
         if (isHeaderMenuOpen is false)
         {
             isMobileProductsOpen = false;
+            isMobileUtilitiesOpen = false;
         }
 
         await JSRuntime.ToggleBodyOverflow(isHeaderMenuOpen);
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss
index 0b485673905..4aed73b548a 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss
@@ -300,6 +300,29 @@
     border: 1px solid $bit-color-border-secondary;
     background-color: $bit-color-background-secondary;
     animation: header-fade-slide-in 200ms $MotionEase 0ms;
+
+    // The single-line descriptions of the desktop popup overflow a narrow phone, worst under the
+    // indented utilities list, so they wrap here.
+    .item-desc {
+        white-space: normal;
+    }
+}
+
+.header-nav-utilities-trigger .ps-chevron {
+    margin-left: auto;
+
+    &.open {
+        transform: rotate(180deg);
+    }
+}
+
+.header-nav-utilities {
+    display: flex;
+    flex-flow: column nowrap;
+    margin-left: rem2(16px);
+    padding-left: rem2(8px);
+    border-left: 1px solid $bit-color-border-secondary;
+    animation: header-fade-slide-in 200ms $MotionEase 0ms;
 }
 
 ::deep {
@@ -417,6 +440,96 @@
     }
 }
 
+// The Utilities entry closes the main list in both the desktop popup and the mobile nav.
+.menu-sub,
+.header-nav-sub {
+    margin-top: rem2(4px);
+    padding-top: rem2(4px);
+    border-top: 1px solid $bit-color-border-secondary;
+}
+
+.menu-sub-trigger,
+.header-nav-utilities-trigger {
+    margin: 0;
+    width: 100%;
+    border: none;
+    font: inherit;
+    gap: rem2(16px);
+    color: inherit;
+    text-align: left;
+    background: none;
+    line-height: inherit;
+}
+
+.menu-sub-chevron {
+    flex-shrink: 0;
+    margin-left: auto;
+    color: $bit-color-foreground-secondary;
+    transition: color 150ms $MotionEase 0ms,
+        transform 150ms $MotionEase 0ms;
+}
+
+// The Utilities flyout: a twin of the popup, opened against its right edge. Its containing block is
+// the popup (.menu-sub stays unpositioned), so the -1px offsets and the +2px width line its border
+// box up with the popup's on every side and it takes the exact same size; the list scrolls inside.
+// Overlapping the popup's border is on purpose too: any gap would drop the products menu's :hover
+// on the way across.
+.menu-sub-popup {
+    top: -1px;
+    left: 100%;
+    bottom: -1px;
+    opacity: 0;
+    z-index: 1;
+    display: flex;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: absolute;
+    visibility: hidden;
+    padding: rem2(16px);
+    box-sizing: border-box;
+    flex-flow: column nowrap;
+    border-radius: rem2(4px);
+    width: calc(100% + 2px);
+    scrollbar-width: thin;
+    overscroll-behavior: contain;
+    // A themed thumb: the popup's black webkit one vanishes on the dark theme, hiding that the
+    // list scrolls.
+    scrollbar-color: $bit-color-border-primary transparent;
+    transform: translateX(rem2(-8px));
+    border: 1px solid $bit-color-border-secondary;
+    background-color: $bit-color-background-secondary;
+    box-shadow: 0 rem2(8px) rem2(24px) rgba(0, 0, 0, 0.12);
+    // Hiding waits a beat (hover intent), so a diagonal pass over the neighboring items on the way to
+    // the flyout does not close it; visibility flips at the end of the fade-out.
+    transition: opacity 150ms $MotionEase 200ms,
+        transform 150ms $MotionEase 200ms,
+        visibility 0s linear 350ms;
+
+    .item-desc {
+        white-space: normal;
+    }
+}
+
+@mixin menu-sub-open {
+    .menu-sub-trigger {
+        background-color: $bit-color-background-secondary-hover;
+    }
+
+    .menu-sub-chevron {
+        color: $bit-color-primary;
+        transform: translateX(rem2(2px));
+    }
+
+    .menu-sub-popup {
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(0);
+        transition: opacity 150ms $MotionEase 0ms,
+            transform 150ms $MotionEase 0ms,
+            visibility 0s linear 0s;
+    }
+}
+
 .header-ps-trigger {
     margin: 0;
     padding: 0;
@@ -459,5 +572,18 @@
         .ps-chevron {
             transform: rotate(180deg);
         }
+
+        // Scoped under the open popup so a lingering .open never shows the flyout on its own.
+        // Hover opens it only on hover-capable pointers: a sticky :hover after a tap would pin it
+        // open, so touch devices go through the .open toggle alone.
+        .menu-sub.open {
+            @include menu-sub-open;
+        }
+
+        @media (hover: hover) {
+            .menu-sub:hover {
+                @include menu-sub-open;
+            }
+        }
     }
 }